How to make article design right
Articles are the heart of a news platform. That’s why we’ve done countless interviews with readers, listened to their stories, how they read articles, how they got to articles, and what they do afterward. We also looked at data analysis and best practices from around the world. We looked at how a Washington Post or a BBC, for example, structured their articles.
Our design process from analysis to learning:
Through the design process, three aspects have emerged that should accompany article design from scratch. Articles should focus on the following points:
- The best and most pleasant experience for reading articles
- Articles for further reading in a feed like we are used to from social media
- Article elements that inspire but do not annoy
Reading Experience
The best and most pleasant experience for reading articles
With the new structure, articles now contain 85% content and navigation only 15%. When scrolling down, content is even filled to 95% and navigation is reduced to 5%.
Additionally, the structure is designed according to an F pattern. Readers start reading in the upper left corner. And that’s exactly the block with the headline and the preview. It should give the reader a clear overview if the article is worth a read.
Articles are read in a centered version with enough distance to the edges to give paper documents’ familiar feeling. There is no distraction on the pages. As long as the reader scrolls down, the complete focus is on undisturbed reading. When scrolling up, readers are given suggestions for further articles because the reading flow has been interrupted.
Feed with article suggestions
Articles for further reading in a feed like we are used to from social media
As inspiration, the feeds from Instagram and Facebook are a good example. Firstly it needs to be decided if the feed works vertically or horizontally (like Instagram Stories). However, the vertical way leads to a familiar feeling because it is much more common.
Secondly, it needs to be considered whether the feed needs to adapt to the readers dynamically. For newspapers, a feed that does not adapt to the reading behavior of the individual readers, but rather puts current stories in the foreground, while at the same time taking paid campaigns of customers into account, should be the new way to go. Newspapers should not focus on bubble building of their reader’s behavior.
The structural design of the articles is also essential for the news feed. That’s why previews of the articles, which contain the vital elements, lead to an optimized scroll feed.
Article Elements
Article elements that inspire but do not annoy
The world of news consists many special terms. To counteract this, it should be considered to integrate a glossary. Words that are in the glossary are automatically found, linked and color-coded.
Clicking on a marked word opens a small info box that describes the word. For more information, readers can even click further and delve deeper.
Various other elements should also be adapted to the articles’ design and fit perfectly into the reading flow. These include editorial tips or external link recommendations.
Never forget why your readers read articles. The focus is on informing and learning through reading. Therefore this User Journey should be the primary goal. No distraction, pleasant reading and smart elements to click further.
