Jan 14 2014

20 Examples of Long Form Content with Great UX Design

featuredImage2_700px

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

Pitchfork, the self-proclaimed guide to independent music and beyond, has given us a few long form editorial pages with great UX design.

Daft Punk article screenshot1. “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.

No Heroes article screenshot2. “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.

Glitter in the Dark article screenshot3. “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.

Mind Control article screenshot4. “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.

Riding the new silk road article screenshot5. “Riding the New Silk Road

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.

Snow fall article screenshot6. “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.

Four square blocks article screenshot7. “Four Square Blocks: Philadelphia

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.)

The Russia left behind article screenshot8. “The Russia Left Behind

Very similar to “Riding The New Silk Road,” users are greeted with powerful photographs, an interactive map, and relevant videos embedded into the page.

Washington Post

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.

Washington article screenshot9. “Washington: A World Apart

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.

Cycling article screenshot10. “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.

Great Falls article screenshot11. “The Perils at Great Falls

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

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.

NPR12. “Nature has a Formula that Tells Us When to Die

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.

Polygon

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?

PS4 article screenshot13. “Playstation 4: The Review

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.

Xbox article screenshot14. “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.

ESPN

All sports. All the time. They know how to keep readers captivated through the whole game — and through to the end of the page.

ESPN article screenshot15. “The Long, Strange Trip of Dock Ellis

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.

Surfer Magazine

The online counterpart for Surfer Magazine, this site encompasses all things surfing.

Surfer article screenshot16. “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.

Victory Journal

This journal is a collection of stories of infamous and just famous “players and pursuits” from all over the world.

La Gran Fuga article screenshot17. “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.

uncube

This site about architecture definitely leaves no detail untouched. Videos, rich photographs, and graphics will keep users’ eyes peeled.

Uncube article screenshot18. “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.

t + l article screenshot19. “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.

Our Time

This site is actually the counterpart to the book Our Time, which features a series of gripping photos of creatives and accompanying text.

Our Time article screenshot20. “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?

About the Author:

I'm a writer, animal lover, and social media enthusiast living in a one stoplight town south of Chicago. I write about things from my perspective: a ferociously fun, educated, almost-30-year-old who's working for the man full-time. When I'm not doing that, I'm also a blogger at digital-telepathy. Yes, I like piña coladas and getting caught in the rain. But I also love sunshine and beer. Oh, but ain't that America.

Leave a Response

8 Responses

  1. Jan 14 2014
    Nick Haskins

    Excellent collection here! Content modules, and interactive long-form storytelling are absolutely where we are headed! I really do believe in this, which is why Aesop was built.
    http://aesopstori.es/1aZD3zW

    • Jan 14 2014
      Stephanie Irvine

      Thanks for the read, Nick! Totally appreciate the feedback, and I’m glad that this post hit home for you. We think that long form content and UX make a great pair, too!

  2. Jan 15 2014
    Muthuri

    Experimentation is the only sure way to test efficiency. I believe that this is a design pattern that’s here to stay. Quite useful for brochure/story-telling websites/apps.

  3. Jan 15 2014
    Jessica Moon

    Ahhh, a topic near and dear to me. I think that from all the trending innovations of 2013, this is by far my favorite. It’s absolutely delightful to stumble across an editorial page with a beautiful engaging experience like the examples you’ve listed. I really admire how much Pitchfork is dedicating to this sort of storytelling experience as well. Thanks for the collection!

  4. Jan 25 2014
    Daniel Salgado

    These are awesome! I hope to see more websites take on this online editorial “epicness” in the upcoming future.

    • Feb 05 2014
      stephanie irvine

      Thanks for the input, Daniel! We hope to see more like this, too!

  5. Feb 04 2014
    Paul Forster

    Wow. Awesome collection. I’ve marked this page and plan to visit them all – over time! I’ve been using longer form content lately and am planning a few fully-qualified long-forms to publish soon. Thanks for the inspiration.

    • Feb 05 2014
      stephanie irvine

      I definitely agree- take some time to really check these out. Thanks for reading and for bookmarking! I hope you continue to enjoy our posts!