Designing Engaging And Enjoyable Long-Form Reading Experiences

Advertisement

Finally, some good news from the media industry: digital subscriptions are growing. We’re seeing positive reports from newspapers such as the New York Times and magazine publishers such as Conde Nast: announcements about increases in their digital content sales and paywall members.

When you have fantastic and original content, ensuring the best possible reading experience is critical to keeping and building your audience. The following practices will help you design your content in a way that improves the experience for readers.

Navigation Methods

We often think that having many methods for finding things is easier for users. Unfortunately, the result can be mess of unhelpful and unrelated links, menus, widgets and ads. Many news websites place lists of “most-read articles” or “articles that your Facebook friends are reading” on their websites because they can. Analytics will tell you whether these methods are useful for your particular website. If no one is clicking on them, why are they taking up valuable space?

One way to quickly see the effect of slimmed-down navigation is to use Ochs51, a Chrome browser extension specifically for the New York Times, written by Michael Donohoe2. Open the New York Times3 in a different browser, then install Ochs and look at the website in Chrome. Ochs provides the massive benefit of a cleaner layout and clutter-free navigation. Things like reading tools and extra modules are removed from articles. The increased white space and removal of the New York Times’ dense navigation bars are a breath of fresh air.

New York Times with Ochs extension4
The Ochs51 extension cleans up the UI of the New York Times.

There is a difference between having a reasonable way to navigate a website versus having one-click access to all of the website’s content. How do your users typically find what they want? Do they use the navigation links or jump straight to the search box?

Changing the navigation methods may be as straightforward as removing redundant menu bars or as involved as conducting user research to see which methods people use and don’t use.

Another thing to consider when looking at navigation usage patterns is that people rarely click on things that appear hard to read or cluttered. If that’s the case with your website, perhaps it’s time to look at your typography and spacing.

Experimenting With Type And Spacing

Not every typeface was designed to be read on a digital screen. Typefaces can have a huge effect on both the appeal of content and its readability. The typefaces for headlines may be beautiful and attention-grabbing, but if the ones for the copy are difficult to read, you could be turning away readers.

Not everyone will read your content exactly as it was designed. Some people set their own default font size, while others change their screen’s resolution. Still others use assistive technology, such as screen readers, to peruse content. During the course of a day, I read blogs on my iPad, pan and zoom through news on my mobile phone, edit documents on
an enormous desktop monitor and browse the Web from my television screen (at low resolution). For this same reason, tools such as Instapaper6, Readability7 and Evernote8 are growing massively. The ability to control the format of what you read — and where you read it — is becoming increasingly useful.

The Boston Globe9’s recent overhaul of its website received a lot of well-deserved praise, and two of the nicest things about it are the use of white space and the typography. The fonts chosen are central to the Boston Globe’s Web style, and they feel relevant to its almost 240-year-old print identity. Compare the new design to the original one, and the contrast is staggering. The Boston Globe’s new look is a great case study for news websites and readability in general. Definitely have a look if you haven’t yet.

The Boston Globe10
The Boston Globe’s11 new interface has carefully chosen fonts plus more white space.

While some fonts were created specifically for digital reading, there is no magical formula for selecting type. To find out what works, do some testing. User testing, A/B testing and even testing within your own team can yield insights. Have everyone on your team read through a handful of long-form content on various devices. If people can’t make it through more than a few paragraphs, try different fonts, sizes or spacing. Or maybe rethink some of those distracting ads.

Respectful Advertising

How often do you see people rush to turn the page of a magazine just to skip an ad? Probably rarely. But people do it on websites all the time, panicking to find the small “Close” icon on a pop-up ad, or flummoxed as to which browser tab is playing an audio ad. I hope the people who create these creepy auto-play ads will one day experience the terror of being alone at the office late at night as a rogue audio clip begins speaking to them.

As an avid reader of both print and digital magazines, I’m overwhelmed by the stark difference in advertisements between them. Print magazine ads regularly hold my interest and engage me — I do not tear out pages of magazines, nor do I cover the ads. Magazines select advertisements that are relevant to their audience and that are attractive and well designed. Advertisers usually do not spend big money on print ads only to create unattractive content for them.

For some reason, all of this goes out the window when it comes to online ads. Companies are told that no one notices ads unless they grab attention, and so they create loud, garish ads — ads that do nothing for the product and that most likely diminish the viewer’s interest. It doesn’t have to be this way.

The advertising network The Deck12 prides itself on tasteful, targeted ads for an influential audience of creative professionals. Its ads are uniform in size and amount of text. The Deck does not pay for or run ads unless it has used the products themselves, so it vouches for all of its advertisers. The emphasis on small graphics forces advertisers to be creative, and advertisers get a return of 3% of all page views in The Deck’s current network.

Ads from The Deck13
The Deck’s14 ads are tasteful and subtle.

Both advertisers and audiences have something to gain when ads are relevant and attractive. The growing shift towards responsive and respectful advertising has been written about at length by people such as Mark Boulton15 and Roger Black16 (see the related links at the bottom of this article). It’s worth reading their takes on these new Web ads, and you might even want to have an internal discussion at your company about how the advertising on your website could be made more valuable for everyone.

Moreover, if the ads on your website are respectful and relevant, people might check out the advertisers’ products, increasing both visited metrics and click-through rates, thus allowing you to charge more for advertising. So, do dive into your website’s analytics.

Check Your Analytics

We want to do the right thing: build websites that are responsive and that adapt to devices. But we have to be reasonable, too. What is achievable given your budget and time frame? Analytics are one of the best ways to hone in on what to prioritize. Even a simple free tool like Google Analytics can yield important insight into who is viewing your website and how. Google Analytics can also track readers’ paths through the website, showing you what content and sections are being avoided or ignored.

The Financial Times17 keeps a close eye on its visitor analytics. It has over 1 million registered users. In November, it announced that its Web app (which launched in June 2011) was replacing its native mobile app. The Financial Times also released data indicating the types of devices that are being used to access its website and the times of day. And it recently launched a native Android app — perhaps because the number of people accessing its website on Android devices is growing.

The Financial Times18
The Financial Times19 ditched the App Store for its own Web apps.

If you notice that most of your traffic is coming from people on tablets, you can optimize for that experience first. Management at your company may be pushing hard for a native app, but you should determine a couple of things before writing the design specifications for a native app:

  1. Does the audience for such an app exist, or is one growing?
  2. Is that audience not getting a good enough experience from your website.

If your current audience barely has any iOS users but has a significant chunk of Android users, why not start there instead? Additionally, what are those Android users doing on your website? Are they sticking around and enjoying your mobile experience, or do they bounce quickly? The latter could indicate that the experience on your website isn’t ideal.

But if you want to know for sure, ask them.

Has Anyone Asked Your Users?

It saddens me how often content and experience decisions are made without consulting the people who those decisions will affect. Facebook users are familiar with the pandemonium that occurs every time a new interface goes live — people often struggle to find what was once familiar and obvious.

The Sunday Times20’ iPad app was updated in August based on user feedback. Users requested to be able to download all sections with the click of a button. The Sunday Times added the ability to download all or individual sections, improved the functionality for deleting sections and editions, and bundled sections more usefully. These changes were the result of direct comments and feedback from users.

The Sunday Times iPad app21
The Sunday Times22 listened to users and changed its downloading options.

Short in-person interviews or widespread surveys are fast and easy ways to get feedback directly from readers about what they like and don’t like about your content. Find out about their reading habits. Learn when and where they read articles — the answers may surprise you. Perhaps the section you were considering cutting has a growing audience. Maybe a feature that gets very good engagement in print doesn’t translate so well online and needs to be rethought.

And if users tell you they’re frustrated by trying to read anything on your website, consider offering them a quiet room.

“A Quiet Room”

Walking from the cacophony of New York’s Times Square into a tiny, quiet office can bring a feeling of relief. All of a sudden, no one is in your face trying to get you to buy something or take a tour or give them money. You can just relax and focus.

Finding a website or app that lets you read and enjoy its content is just like this. The experience is not stressful, and you can take your time and enjoy the writing, which seems to have been created just for you. As a designer, you can create this “quiet room” for readers, a place where they can fully absorb the content without having to close pop-ups or be confronted by an animation that screams that they are the 1,238,901st visitor that day. A quiet room is why applications like Instapaper and Readability get effusive praise.

A List Apart23 does a good job of avoiding clutter and letting the reader focus. Articles have minimal sidebar navigation and only a couple of small, tasteful advertisements. The majority of the page has a simple format: easy-to-read text (peppered with images), a conclusion that points you to related material, and a chance to discuss the article.

A List Apart24
A List Apart25 creates room for readers to enjoy the content.

When Doesn’t This Work?

These approaches will not work for every group of content or every website. Some content is meant to be skimmed for quick comprehension. Other websites contain no narrative content. And many websites rely too much on advertising revenue to be able to change their ad strategy.

If your content changes rapidly, is short and to the point, contains little analysis or has any combination of these, then it’s likely not a good fit for this approach. But if you have done your research and you have content that is well written and that your audience likes to get lost in, then perhaps some of the ideas mentioned above are worth a try.

Regardless of the length and type of your content, here’s a useful exercise: go through each of the issues covered above and think of one thing you could change to make your content more readable. Some of the revisions might be long term and big picture, but you might be surprised by the easy opportunities to make a big impact. Give your readers a reason to enjoy your website as it is, instead of a reason to reformat the content and turn the page as fast as possible.

Resources

(jvb) (fi) (al)

Footnotes

  1. 1 https://chrome.google.com/webstore/detail/lejiflopkadmkjajbalpkglfhmkjchol
  2. 2 http://nytochs.tumblr.com/
  3. 3 http://www.nytimes.com
  4. 4 https://chrome.google.com/webstore/detail/lejiflopkadmkjajbalpkglfhmkjchol
  5. 5 https://chrome.google.com/webstore/detail/lejiflopkadmkjajbalpkglfhmkjchol
  6. 6 http://www.instapaper.com/
  7. 7 http://www.readability.com/
  8. 8 http://www.evernote.com/
  9. 9 http://bostonglobe.com/
  10. 10 http://www.bostonglobe.com
  11. 11 http://bostonglobe.com/
  12. 12 http://decknetwork.net/
  13. 13 http://decknetwork.net/
  14. 14 http://decknetwork.net/
  15. 15 http://www.markboulton.co.uk/
  16. 16 http://rogerblack.com/
  17. 17 http://www.ft.com/
  18. 18 http://www.ft.com/
  19. 19 http://www.ft.com/
  20. 20 http://www.thesundaytimes.co.uk/
  21. 21 http://www.thesundaytimes.co.uk/
  22. 22 http://www.thesundaytimes.co.uk/
  23. 23 http://www.alistapart.com/
  24. 24 http://www.alistapart.com
  25. 25 http://www.alistapart.com/
  26. 26 http://www.informationarchitects.jp/en/business-class-news/
  27. 27 http://www.smashingmagazine.com/2010/12/14/what-font-should-i-use-five-principles-for-choosing-and-using-typefaces/
  28. 28 http://www.markboulton.co.uk/journal/comments/responsive-advertising
  29. 29 http://rogerblack.com/blog/post/the_holy_grail_part_i
  30. 30 http://rogerblack.com/blog/post/the_holy_grail_part_2
  31. 31 http://www.behance.net/Gallery/So-you-need-a-typeface/486723
  32. 32 http://fontsinuse.com/bostonglobe-com/
  33. 33 http://inessential.com/2011/11/22/the_pummeling_pages
  34. 34 http://www.elezea.com/2011/11/future-of-web-reading/

↑ Back to topShare on Twitter

Martha Rotter is co-founder and developer of Woopie, a platform to create beautiful digital publications. She also recently launched an online publication for the Irish technology community, Idea Magazine. Martha writes regularly on her own blog about digital media, technology and data. Outside of startups, Martha teaches web development at the National College of Ireland and works with technology-focused community organizations including OpenCoffee Dublin and Age Action.

Advertising

Note: Our rating-system has caused errors, so it's disabled at the moment. It will be back the moment the problem has been resolved. We're very sorry. Happy Holidays!

  1. 1

    Great article. Working on a project for a magazine publisher at the minute at this is very useful stuff.

  2. 2

    How about providing a zen-option? Is it not feasible to give your users a long read experience akin to readability/instapaper et al that can be gained by having the user click a “zen” button? You could make this an option in a freemium model. Provide the service on the server side, rather than by 3rd party apps. That way you can really optimize content and even contain unobtrusive “zenified” text ads. Moreover, you may entice readers to stay through an enjoyable reading experience and clever transitions back to the navigation/regular CSS after the text ends.

    • 3

      Hi Jakob, thanks for your comment. I *love* the idea of the zen option. I go back and forth between showing sharing/commenting/like options in my own work as I think they’re distracting, but I understand that they are useful. The zen option seems like a perfect way to offer the best of both worlds: a focused environment for those who don’t want distractions (or have trouble reading with them) and a slew of options for those who are inclined to share/comment/discuss.

      Great suggestion, I’m definitely going to use this – thanks!

      • 4

        Hi Martha,

        I found this article because I was searching for examples of this exact concept. I work for a publishing company and find myself using Readability to read the content on my own website. It occurred to me that we could build this functionality into the website itself and that many people would appreciate that feature. Your last comment was made in March, so I’m hoping you have had a chance to work this into a project – or have at least seen it done by someone else. If so, I would love to see an example. Thanks, and great article!

  3. 5

    I really like the Boston Globe re-design – it makes me feel like Im reading a real newspaper from a leading news organization as opposed to an independent bloggers site.

    The one criticism I have is this: the ad box on the right hand side gets partially cutoff when you resize the window. While this is a very small flaw, its important to recognize as advertisers pay a lot of money for those spots, only to have their ads cutoff. Hopefully this will be remedied in time

    • 6

      Hi James, great point.

      However your payment model is structured for advertisers, it is important that they feel they’re getting their money’s worth, especially if that is a big part of the revenue model. I definitely agree with you that it’s critical to consider how responsive layers behave regarding advertisers and to not let them fall off the page. Thanks for your comment.

  4. 7

    I so appreciate this article for tackling the growing trend in digital subscriptions with practical advice that should be used by web marketers across the board. What a resource. I’m anticipating that 2012 will be the year for adapting popular print media for responsive web consumption, and I’m excited to see the outcomes!

    Cheers,
    Sarah Bauer
    Navigator Multimedia

    • 8

      Thanks for your comment, Sarah. I’m excited about what we’re going to see in 2012, too. Very exciting times in this industry!

  5. 9

    The current homepage of boston.com, the free version of the Boston Globe, has “126 Errors, 91 warning(s)” according to the W3 validator, while bostonglobe.com’s homepage has “52 Errors, 8 warning(s)”.

    The NY Times — which owns the Globe and boston.com — wins the prize, though, with: “407 Errors, 91 warning(s)”

    Let’s find better models.

  6. 10

    Great article. Helped me get new ideas on improving my site.

  7. 11

    This is a great article and important for us since we also often «suffer» the lack of asking for content and user experience on the part of our designers and developers.

  8. 12

    @BostSkeptic Remember, validation is just a tool and often new features won’t even be recognised by the validator (and result in warnings or errors). I would be mindful of placing too much weight on the value of the validator.

    Lovely article Martha. I wish Smashing Magazine followed the points in your Respectful Advertising section more closely. I know, I know, I’m sure they’re working on it.

  9. 13

    I’m still waiting for nytimes.com to get around to updating their site. It looks like it was designed in the mid 90s…. It’s going to kill them.

  10. 14

    Hi, Martha!

    Great to see some CS Forum brethren writing for Smashing. :)

    I loved this article, and couldn’t help zone in on the advertising part. I just came off a seven-month development and launch of Textpattern’s magazine, and one of the things I worked on was the responsive advertising package. Creating a pleasant reading experience while supporting responsive advertising was one of the main aims to reduce a readers tendency to use something that strips out advertising altogether. I would love any feedback you happened to have about how pleasant (or not) the reading experience is there.

    Let us know when you come to Paris! CS Paris would love to host you an evening.

    • 15

      Hey Destry! Thanks so much for your kind words.

      Supporting responsive advertising is certainly a timely topic and something a lot of people struggle with (or simply give up on!). However, for sites that do pay attention to this detail, their readers definitely notice and appreciate it. So well done on your last project! The TextPattern magazine is really nice and very readable. Respectful for both the reader and the advertiser.

      Would love to chat with you guys in Paris, thanks for the offer! I will definitely give you a heads-up next time I’m headed that way (hopefully soon!).

  11. 16

    Excellent article, Martha! Treating your users with respect and having a meaningful relationship with them is an alien concept to some.

    The web is often seen as a blunt instrument with which to bombard users with your message. This lack of consideration never works, though!

↑ Back to top