Design for long-form reading
How I used user research to understand audience problems for a donations-funded online literary magazine
The Challenge
Studies often suggest screens are inferior to long-form reading on paper due to the distractions inherent in the medium. Is this necessarily true? Once you have quality writing, what elements distract readers and what makes them read further down the page?
The Outcome
Through user research, I observed design elements on this reading site that hindered reading. While we addressed layout and typography issues, the main distraction was the excessive use of images as cues for browsing content.
Project
Terrain.org
Terrain.org is an online literary magazine that publishes peer-reviewed essays, poetry, and creative nonfiction about the natural and urban environments.
Summary
The editors at Terrain.org, an online literary magazine, wished to increase long-form reading time on the site as well as encourage more donations. I approached this with user site-walkthrough interviews to learn about visitor behaviors.
2016 (updated 2024)
My role
UX consultant: conducting moderated user interviews on site, literature review on readability, heuristic review.
Key Metrics
Increase subscribers, engagement time, and donations
Problem summary
Imagine you’re the publisher for a donation-funded online literary magazine. It’s all about deep thoughtful reading. You get a lot of traffic to the website but most of it bounces away, and less than 1% of visitors actually donate. What would you do to find out why that is?
My role
As a user researcher:
- I reviewed existing literature on long-form readability
- designed an expert (heuristic) review with other designers.
- conducted moderated usability walk-throughs with subscribers and non-subscribersof
To begin, this was the home page in 2016. A beautiful site combining literary essays and lots of images. How well do these elements all work together?
Phase 1: Discovery
Client interview
Terrain.org has an attractive first impression and looks like it was doing well. It had lots of visits, a list of subscribers, and a newslertter. But, beneath the surface of good visual design, there were some concerning numbers.
Despite a high number of page views:
- the number of subscribers had leveled off.
- The bounce rate was high and
- average engaged time spent on site was low–a major concern for a literary magazine featuring thoughtful essays, long essays, and poetry.
- The site does not show ads and relies on donations.
Google analytics data
Session time
Average time on page is less than a minute
Returning visitors
Only 20% of the total viewers were returning visitors.
Bounce rate
85% of visitors exit from the home page.
Pages viewed
The average number of pages viewed per session was 1.5.
Donations
Less than 1% of site traffic donates
User research plan
To understand why these numbers, I conducted in-person interviews and usability walk-throughs of the site with 3 current Terrain subscribers and 2 potential readers.
My hypothesis
Data showed a high number of site visitors, but low time on the site: I learned from interviews that subscribers generally arrive by clicking on a single article from a link in the email newsletter. Others arrive at the home page.
The challenge:
1. how to encourage horizontal browsing on the site to similar articles once a visitor clicks a link on an email newsletter.
2. Encourage new visitors browsing the site from the home page to engage with an article.
Research questions
User behavior
From the analytics, the users were about split between clicking through a newsletter and finding the site through a search engine.
How does typography and layout encourage or reduce readability.
How does behavior vary based on how readers arrive on the site?
What are their motivations for coming to the site?
What cues do readers use to search for content they want to read?
Donations
Were they aware that there were no ads?
Did they see the donate button?
How do they think about supporting an ad-free literary sites like this.
What would motivate them to donate?
Expert review
To set a usability baseline, I invited 5 designer friends to answer 14 questions chosen from among several heuristic review methods. They submitted a score and comments for each question.
I graphed the numbers on the radar chart below.
From this radar graph, I could see that:
- Findability. reviewers couldn’t easily find the subscribe and donate buttons.
- Readability. Typography could be improved.
- Navigation scored moderately low and user interviews gave some reasons why.
Average overall review score: 54%. Ideally you want your site to score around 75% on an expert review (Balatbat, 2014). The overall low scores are because we were very picky about readability. But, note the lowest score on findability—we flagged that as an issue to learn more about.
User interviews
I recorded the user interviews using audio and screen-capture videos. From my notes and transcripts, I organized and boiled down the rich qualitative data obtained from the interviews by research question, using affinity mapping with sticky notes.
From talking to subscribers, I learned they normally arrived at the site at an article they clicked on in the email newsletter. This was a key insight: it looked like they only read that one article. Other users arrived on the home page. They didn’t browse horizontally either.
How might we keep both user types on the site longer?
The site navigation was the first place to examine. Both types of visitors used the header to navigate to other parts of the site.
“How do new visitors browse from the front page and find an article they want to read?”
To find out more, I combined the interview with a usability walk-through. I asked people to go to the front page, choose an article from the menus and read it to the end, speaking their thoughts aloud as they went.
Affinity mapping is a thinking tool used to organize free wheeling qualitative data from listening to people. It allows ideas to be sorted based on their natural relationships, for review and analysis.
Key findings
People liked the site design, admired the images, and eventually read something interesting. Yet, the site’s overall engagement score was below average. Why was that?
What surprised me: As I watched people spend time evaluating the featured images in the navigation, It occured to me that maybe the beautiful visual design itself created a barrier to browsing, finding, and choosing an article. This was a new thought because the photographs were attractive, high quality, and carefully chosen from stock sites. Yet, as cues for reading, the photographs did not come directly from the written content. They were chosen by the publisher on aesthetic grounds.
Observations: Participants all scanned the images first in the dropdown menu, before committing to an article. People spent a lot of time looking at the images, trying to use them to decide what to read. They lingered and engaged with the images rather than using them as indicators for choosing a written article.
- The photos were a beautiful distraction from reading, especially on the home page and menus. Why?
Hicks Law
Hypothesis 1: Hick’s Law explains that “The time it takes to make a decision increases with the number and complexity of choices” The many beautiful images seem to act as a barrier to entry for the reading.
Evidence
- Looked at as a whole page, the many images suggested to me the “Las Vegas” effect– each sign competes with every other one and the net effect is none of them attract focus attention.
- The drop-down secondary menus drop on hover with multiple images within the mega menu, increasing the distraction.
- Underneath the hover states is a home page hero image that is a slider– rotates images every few seconds.
The area outlined in blue is a dropdown menu that appears suddenly when a user hovers over the menu. This covers a large image carousel that is already rotating images every few seconds. One reviewer commented that this caused her a startle response and visual confusion.
Key insight:
Encourage horizontal browsing on the site
Subscribers told me they entered the site from links in the regular email newsletter. They usually read only the page they clicked on, often an author they knew personally or followed. They didn’t usually browse the rest of the site. How could we encourage that?
At the end of an article: there are tags and recent articles.
1. Tags give some sense of similar articles, but there are too many of them. 2. Recent articles don’t have “information scent.” Recent is not the same as relevant or interesting based on what the person just read. How about “by the same author” or in a similar specific genre?
Findings
Key recommendations
Usability and typographic improvements will help keep users on the site, but that alone will not increase readership.
Multichannel. Terrain should maximize its presence in the external places where likely readers readers would find the site, like links and banners on other relevant sites, content aggregators, social media, email newsletters, etc.
Given a longer-term trend away from home pages and towards apps and social sites, Terrain should look outward to publishing on other social sites like medium.com, Apple News app, and Facebook’s new Instant Articles feature which allows people to read without leaving that site. A longer-term goal might be to create a app, as more people are reading that way to avoid the distractions of a website.
Author’s photos. Users mentioned that they followed authors they knew, but also were interested in diversity. Author photos gave an indication of that. Portraits carried more weight with readers than the eye candy effect of the featured images.
Featured images have a place. Images worked well to get clicks on the newsletter page. On the title header for an article, images helped to reward the reader for beginning the first paragraph. But I question the wisdom of featured images everywhere.
Here is an example of the recommendation to use authors’ photos from a recent Terrain.org newsletter. A good move.
Results
This work ended with a research report to the publisher. I made recommendations, and had no control over implementation. The editors made some improvements based on reader feedback, but did not substantially change the way the site used featured images.
Terrain made some changes, including:
- Added banners for donations instead of hiding the link in a submenu
- Typographic and layout improvements
- removed the image slider from home page
- Simplified options in the dropdown menus
- Added share link at end of articles
Screen comparisons
Decreasing visual overload
2016
home page with featured image thumbnails in the dropdown menu
2024
Home page with simpler dropdown menu
Improving readability through layout
2016
Line length too long; not enough line-spacing
2024
More readable text; share icons; print and pdf export
Terrain.org in 2024
The home page in 2024 scrolling to bottom.
Conclusion
Looking back from 2024:
- the site continues to increase in active users: 189,000
- But most of those leave without doing anything: bounce rate of 55%
- while engagement time decreases (around 7 seconds)!
- Nevertheless the site wins awards and has many aspiring writers competing to be published.
New questions arise for more research.
1. Hick’s Law: This could be an example of Hick’s Law in action. Even too many beautiful images can distract users and interfere with making the decision to stay and read.
How to test this. Since reading a long-form text is the one and only goal of the site, what would happen if Terrain went to a text-only design like Harvard Law Review or McSweeneys?
A/B testing with and without the featured images would give some insights.
2. Why engagement time is still going down: By focusing on increasing page views, average engagement time is being diluted by the increasing number of viewers logging page views, but them bouncing off the site without reading.
Recommendation: Instead of focusing on increasing the number of visitors, determine the realistic size of your serious audience. Design for them. They are reading on the site and may not need the featured images to decide what to read. The majority of users (75%) are bouncing off the home page after a few seconds. You don’t need them.
- Find out where your most valuable readers are and advertise there.
- Donations might increase once Terrain corrects the imbalance between loyal engaged readers and high numbers of empty page views.
Manuscripts should be decorated so that their appearance alone will induce perusal … but beware that this art work does not become an end in itself.
–From In praise of scribes by Johannes Trithemius, c. 1492
My final thoughts
- I know the publisher and site owner is a photographer. He is attached to beautiful images, as any artist is, and reluctant to rely on typography alone for a reading site. The visual design of the site has attracted these large numbers of site visitors. But, the cognitive complexity of the many images discourages browsing. So most of those visitors leave the site without engaging with the text. Most likely these people are not his target audience of thoughtful readers. But, when added together these people dilute the average engagement time of the whole site.
- It’s not about numbers of pageviews–it’s about increasing the few, the engaged readers, those that value the magazine and will donate. Making it easier for them
- The most likely literary readers of the site are coming to the site from a link in the newsletter and reading the linked article. Make horizontal browsing easier.
- As I saw my job at the time, it was simply to review the findings and write a report, which the client was free to implement. However, I learned that designers need to take a leadership role. This is not always possible, but by meeting in person to discuss and review the research findings, I could make the insights into agreements and see that they are carried out in the design.
- Scheduling a debriefing session as part of the process is an essential opportunity to bring up the new questions that always come up during research and plan some follow-up testing.