Here’s a fun fact: Over the last 10 years, our attention spans have decreased from 12 minutes to 5 minutes. Our ability (and our desire) to read lots of content is clearly impacted. So how do we rock some long form content and make it successful?
Where there’s a will, there’s a way. Long form content combined with excellent UX design can transform seemingly otherwise boring long form content. The result is an easy to read, visually pleasing, exciting content for the user.
In a previous post, we looked at editorial sites that prioritized UX. This week, we’re going to check out long form content that effectively balances white space, pictures, and text, among other great UX features. Let’s roll!
Pitchfork, the self-proclaimed guide to independent music and beyond, has given us a few long form editorial pages with great UX design.
1. “Machines for Life”
Black & white, varying shades of color, and fire, oh my! And it’s responsive! This long form piece takes complementary colors, as well as horizontal AND vertical scrolling to the next level in a clean, bright, and exciting design that makes the content come alive. Really — it’s animated.
2. “No Heroes”
Again, Pitchfork has made long form content completely interactive. The design features responsive animation, music from the band, and images that truly convey the band’s style and flair. As you scroll down, the text of the captions accompanying the pictures have a falling/jumbling effect that keeps your eyes moving down the page to the end of the copy.
3. “Glitter in the Dark”
Featuring content centered around recording artist Natasha Khan, this page really does glitter in the dark in classic black & grey hues. Innovative photography creates almost a stop-animation feel; as you move through the article, images of Khan move with you. Ample white space and simple contrast makes the text really pop in an appealing way.
4. “Mind Control”
We previously introduced to you to this feature on Janelle Monáe when we covered z-axis and layering with images, and it would be a travesty not to include this in our list of long form content pieces with great UX design. Animation, depth, and layering, combined with excellent complimentary colors really wins us over. Come to think of it, we also talked about this in the first episode of DT.tv (We love it that much. Pitchfork might have our mind controlled, and we’re OK with that).
New York Times
As absolute dinosaurs in the journalism industry, The New York Times are definitely with the times in creating excellent long form content with great UX design.
This is an amazing piece of art to look at, and it implores you to read the whole text of the article (to which New York Times provides a link). A scrolling series of gifs illustrates how the Silk Road operates. It’s a map that truly comes alive.
6. “Snow Fall”
Another animated masterpiece, this page features cold hues that lend easily to the topic (brr, snow), an easy-to-read serif font, and a responsive design. It’s simple, yet beautiful, which makes it easy to keep reading.
The UX design of this exploration of Philadelphia is simple, responsive, and has a nice sidebar menu of shortcuts that users click to browse as they please. (Beware: the auto-scroll is so quick, you might get dizzy if you stare at it.)
Very similar to “Riding The New Silk Road,” users are greeted with powerful photographs, an interactive map, and relevant videos embedded into the page.
Like The New York Times, the Washington Post has been around for decades and is no stranger to keeping their audience’s attention. Similar to some of the editorial pages from The New York Times, this piece puts the Washington Post brand on each page.
This feature provides users with an easy-to-navigate horizontal menu bar at the top, as well as a sidebar for more content on the right side. Featuring simple serif text and lots of white space, this page is classic, eye-catching, and responsive. It’s like a print copy of a newspaper… on crack.
10. “Cycling’s Road Forward”
Here’s more responsive design that’s more on the minimalist side of style, simple serif text, and brilliant use of negative space. The black/white/blue color scheme ties everything together, and the sidebar keeps even a wandering eye engaged.
This one makes one of our lists again because it’s absolutely brilliant. Previously featured in our 40 More Delightful Examples of Attention to Detail post, where we pointed out the spinning silver marker icons and animated gifs that really make this page interactive.
NPR’s site is just the facts with few embellishments. When it does add a little pizazz, it’s noticeable, and you keep looking. Kind of like when an uptight coworker lets loose at a holiday party. It’s something to see.
This piece features lots of white space, text, and sandwiched in between are animated gifs of leaves at different stages of life. It’s not complicated, and that’s what makes it work, especially for a news source.
Now, I would hope that a video game website would nail UX design. Polygon does just that in these long form content pieces. Here are two reviews, one of XBox One and one of Playstation 4. Which do you like better?
There’s a lot going on here, but it all flows together pretty effortlessly. You begin with a video and are offered endless scrolling in a responsive, layered design that’s bursting with content as you move down the page. From simple drawings, real photographs, video, and animation, this site packs it all in.
14. “XBox One: The Review”
Aha! This is very much so inspired by the Take on Me video (at least I think so), and the animated graphics really work. This is a similar format to the review for Playstation 4, but their nuanced differences mean we get to include both of these excellent examples.
All sports. All the time. They know how to keep readers captivated through the whole game — and through to the end of the page.
The sports site has really outdone itself with this piece. Using primary colors and hand drawn graphics, this is a layered, responsive site with great black and white photos and smart use of margins and space. A definite trophy winner.
The online counterpart for Surfer Magazine, this site encompasses all things surfing.
16. “Hot 100”
When you get amazing action shots of hot surfers riding the pipe on a page, then you can pretty much guarantee that you’re going to get an audience. However, the italicized font, vertical slider arrows, and uncluttered design will leave you wanting to hang ten.
This journal is a collection of stories of infamous and just famous “players and pursuits” from all over the world.
17. “El Duque ‘La Gran Fuga’”
This piece uses color impeccably well. The background, text color, and colors within the graphics tie in emotionally with the content, which is centered throughout the page. The grainy graphics offer a creative touch of uniqueness that lends itself to that element of the piece.
This site about architecture definitely leaves no detail untouched. Videos, rich photographs, and graphics will keep users’ eyes peeled.
18. “What is Africtecture?”
Slider arrows keep the user scrolling through the page, which is bursting with colorful content. Header and footer menus make the site easy to navigate and easy to share.
Teehan + Lax
Teehan + Lax is a digital product design company that aims to create products people will use.
19. “The Making of Medium.com”
A grey background with black text makes this long form content piece easy on the eyes. Varied font sizes keep things interesting, and the strategic use of images throughout will surely entertain users.
This site is actually the counterpart to the book Our Time, which features a series of gripping photos of creatives and accompanying text.
20. “Sir Peter Blake: Artist”
Timeless grayscale pervades this entire page with a few intrusions of color photographs. The font is classy, and the large images are high resolution. You will want to keep looking.
So, there you have it. You’ve just seen real examples of long form content that won’t leave users like this. I feel classier just looking at them. How about you? What will you read with your 5 minutes of attention?