Usability Case Study: Longform Reading Comprehension in Mobile Interfaces

Current interfaces for longform reading are distracting. Advertisements, social-sharing interactions, browser tabs, device notifications…there’s a lot of reasons why the emphasis on finishing an article is often undermined.

How might we leverage interactions within mobile devices to support longform reading, rather than distract from it?

Preliminary Research

Based on the research I’ve conducted on online reading and learning tools, I determined a list of factors that are key to reading comprehension.

• Scrolling: The idea of scrolling text through a fixed window is actually quite different from how we originally learned to read. When you are reading a physical book, the location of the text never changes on the page. If there is a lot of unnecessary or very active scrolling, this inhibits initial retainment of information. User’s mental representation of the text is altered when it’s location on a page changes.
• Landmarks: Building off of the scrolling concept, identifying visual elements that serve as position-markers are helpful for keeping readers on track. Especially in a scrolling environment. The presence of landmarks can mitigate some of the distracting effects of scrolling.
• Partial or Entire text: Contrary to a physical page or article, users are often unaware of the complete length of the text they are reading. Progress-indicators are key, but the way they are integrated determines whether they are effective or direction to longform reading comprehension.
• Visual fatigue: Even if you’re putting your best efforts towards comprehensive, focused reading, your eyes get tired. Making aesthetic and technical decisions to alleviate physical strain makes the reading process more comfortable.
• Some factors to look at here: typeface x-height, color combinations and contrast, negative space, activity on the page.

Treatment of hyperlinks: connecting content to external sources is one reason online reading can be so enriching–but this can also make it challenging to ever finish an article. The quantity, visual and interactive treatment of hyperlinks is crucial to reading comprehension.

Moving forward, I’m going to make sure to consider this research as I assess the readability of different interfaces.

Users

I haven’t narrowed the scope of this project to a specific app, so my users aren’t defined by one company. I chose to focus on anyone who uses mobile devices for longform reading,

Survey Results

I conducted a survey, both as a digital form and through guerilla interviews, to better understand this use case. I identified key trends:

• Users prefer reading on laptops. Many will even wait to open a longform article on their phone until they can transfer to their laptop.
• Overwhelmingly, users struggle to find their place again if they have to pause to scroll up and down an article.
• When self-assessing how much of the article they read, the majority of respondents said about 75%. When they stop reading, usually it’s either because they lost interest, or there is an external distraction on their device (text message, etc.)
• A significant amount of surveyors also mentioned losing their place as a reason to stop reading.

Interviews

I interviewed a series of students and middle-aged professionals on their longform reading habits, specifically in the context of reading comprehension. Combined with conclusions from the survey results, I identified pain points:

“There’s not a lot of breathing room on your phone, so with longer texts it seems a bit overwhelming”

“A lot of articles have different fonts and font sizes, which is fine on a laptop, but on a mobile device it gets annoying because sometimes the font is way too big or too small, which distracts me from reading.”

“I tend to read articles through news apps like the NYTimes app. Otherwise, I get a ton of ads that take up the entire screen, making it hard to actually read the content.”

“I prefer list articles or interviews. I like having the headers to break up the content”

“Often I’ll switch to my laptop because I feel like I’m missing out on experiencing the images that go with the story.”

“I’ll share the link before I’ve finished reading.”

Then, I mapped these points based on priority for stakeholders (I focused on the company publishing the article) and the support for reading comprehension:

I chose to pick out interventions that focus on advertisements. Evidently, advertising does not help reading comprehensions, but is relatively supportive for stakeholders (because $$$$)

Talk Aloud Insights

Now, I wanted to gain a better understanding of the step-by-step process of reading on a mobile platform, in order to better understand the user journey.

The three mobile interfaces I used for user testing.

I conducted a talk-aloud with three different users, going through three different longform articles each, from different sources (one for The New York Times, one from The Atlantic and one from Pitchfork). I made sure to diversify which site I used, because I don’t want to restrict my research to one media source, but rather compare the features of multiple platforms. Here are insights I gathered from people as they interacted with each article.

• Advertisements blocking the view of an image
• I have to scroll to continue reading past the author
• Hard to read more than past the first image
• Only read 75% of the article.
• “I never read the entire article”
• Typeface is adjustable on mobile.
• The advertisement is misaligned with the scrolling, covers some of the content.
• I don’t notice a big difference between the New York Times and the other one [The Atlantic] while actually reading.
• I just read the subheaders.
• I like to read the little title here.

From here, I was planning to map out an existing user flow. However, my attempts ended proved that without narrowing on a single app sign-in, the process I’m examining isn’t as focused on extended user flow, but more on the focused interaction of just reading comfortably. Quite simply, the flow I’m most interested in is this:

But, if I were to expand a little, I guess the interactions that happen while reading. Like these:

But quite honestly, my priority is on the first diagram.

Identified Pain Points

Right now, the user flow appears simple, but there are definitely pain points within this diagram I need to pull out to identify. Again, I’ve left the scope of this project pretty wide open, so I’m using these pain points as opportunities for an intervention, rather than a list of necessary issues to address.

#3 is interesting to me.

Wireframing Round 01

I started to brainstorm some solutions to solve these pain points. I realized that there are a lot of small, potential interventions that could be implemented across multiple interfaces, which might mean that my focus is falling more on a complete operating system change, rather than an exclusively in-app solution.

Defining the Solution Scope

From these explorations, I narrowed down to the concept of the page marker. This intervention seemed like a really simple solution to an issue that felt prominent to me, and after all of this research I’m quite honestly surprised that this doesn’t exist right now.

Proposed solution: I’d like to create a cross-platform place-marker. Yes, it sounds kind of simple (yet also logistically complicated to implement since it likely would have to be built into the device’s operating system) but I think that because this is an issue I’ve identified across multiple reading platforms.

Wireframing Round 02

When wireframing this time, I really wanted to narrow in on making this interaction as simple and easy as possible for the user. I’m using Nielsen’s UI heuristics to inform my work––specifically, visibility of system status and user control and freedom.

Focusing particularly on how a pagemarking mechanism would work.

I also looked at existing microinteractions within reading platforms, to see what ways media outlets try to enhance reading. I was reminded of the “jump to recipe” button I see on some recipe blogs, which allow the user to skip through the nonsense of recipe introductions and life stories and get right to the ingredients.

This interaction is popular on cooking and baking blogs. It permits users to jump to a specific anchor on a page. Personally, I use features like this a lot.

Additionally, I wanted to note the specific interaction of highlightings text in the Medium app. I felt like out of all of the apps I’ve tried tap-highlighting within, Medium nailed the motion design so it feels intuitive and a little playful, without being too distracting. I want to keep this in mind as I work on the motion.

Motion Prototyping

With a decent idea of what I wanted my motion interaction to look like, I moved to After Effects to work on the touch interaction for the page-marker concept. I originally planned to use Adobe XD or Figma to auto animate this, but both programs lack a “jump to anchor” feature.

I settled on this click-and -hover interaction for marking a specific point on the page:

And from here, moved towards refining the UI elements so that the page-marking function was more clear. It started with a new color and a drop shadow effect:

I played with using text (jump back!, go to place! etc.) and different icons, but instead I settled on simply imitating a bookmark on the top or bottom of the page. See below.

The Final Interaction:

Keeping it simple.

Again, I’m trying to minimize as much distraction as possible, so a small unlabeled button should suffice.

Overall, this is a very small microinteraction within a large system of longform reading across multiple platforms, but I think that small adjustments to how we approach mobile reading will ultimately change the way we think about focus and reading endurance. I hope that someday, I will be able to utilize tools like these and be able to confidently open an article on my phone, knowing full well that I’m equipped to finish it.