UX for Editorial Design on the Web
Recent high profile pivots aside, the written word is still the most important form of content on the internet.
Editorial content has been around since the beginning of the internet and it’s not going to disappear anytime soon. Whether it’s a headline or an entire essay, at some point users will read something on a website and that is why it is so important to get the UX right.
Making reading enjoyable on a screen requires paying attention to how users interact with content and designing to accommodate that. It also requires adherence to some general typographic conventions that ensure it is legible and well organized. Read on to see how these tools may be utilized to create a great editorial experience.
Users Don’t Read
Research has shown that content sites get their traffic primarily from search engines and social media. When a site builds a following, it may also get traffic from bookmarks or users that type in the site’s address. But this segment of users is usually small.
Once users reach the content, the way they consume it follows a familiar pattern. First they scan the page to get a general idea of whether it is worth their time and then they either bounce or read the article. Most of the time users just scan the page and leave within 10 seconds. Repeat visitors are more likely to read the whole thing, but not by much.
According to sumo.com only 20% of users ever finish reading an article.
So why don’t people read on the web? Users will only read content if they are really interested in it. Often they are looking for specific information and once they get it they have no further use for a page.
The main task for editorial designers is to overcome this bias against reading. To create a page that is scannable, informative and entices users to read the whole thing.
Write for the Web
Before diving into design, it is advisable to examine the editorial content and determine if it is suitable for the web. Users should be able to understand the editorial content’s key message from just a glance. If they are greeted with an incomprehensible wall of text, they will go elsewhere.
Writing for the web is an art in itself and is a bit out of scope for this article, but I will list some of the key points:
- Keep it relevant to the topic.
- Limit the amount of marketing copy and “happy talk.”
- Write with SEO in mind.
- Break the content into chunks with headings and subheadings.
- Use things like lists and pull quotes to highlight the main points.
If you would like to learn more, check out the University of Maryland’s handy guide: Best Practices for Web Writing.
Design for Reading Flow
Good editorial design creates an uninterrupted reading experience that allows users to get lost in the content. If it is designed well, they won’t even notice that they are reading on a screen. They key to creating this is good typography and layout.
Typography
Reading on a screen is tiring on the eyes. So choose a typeface that is designed for the screen and set it large enough that it is legible from 2–3 feet away. Never set it smaller than 16 points if it is intended to be read on a mobile device. When choosing a typeface, stay away from fonts intended for print. There are subtle differences in the way they are made that can effect legibility negatively on screens. Line width is also of concern. Lines that are too wide are hard to follow so make sure that each line of text is no longer than 40–70 characters wide including spaces.
Layout
People in the west generally read from left-to-right, top-to-bottom. So design the page to facilitate this natural flow. Keep the text left aligned, put images and other media on the right side, and flow the text around the left. Images on the left side or that span the full width of the content break that flow. They literally cause readers to pause and stop reading. So if used, place them at natural breaks, such as between paragraphs.
For long form editorial, use images to prompt users to scroll. Place an image at the top of the content, slightly above the fold so that its full length is hidden by the browser and can only be fully seen by scrolling. As the reads on more images can be strategically placed within the content to keep users scrolling.
Finally, keep clutter to a minimum on editorial pages. Use white space to keep users focused on reading. The longer the article, the more white space should be used. Avoid distracting ads and unnecessary content. Place related content outside of the edit well, either in a sidebar or below it.
Orient New Users
Given that a good portion of users find content through a search engine or social media, editorial pages should also serve as an introduction to the entire site. This means users should be able to figure out what the site is about and how to get around on it from any page within the site. Make sure the site’s branding and a brief tagline explaining what it offers are displayed prominently on every page. Make sure navigation and a search box are also easily recognizable and prominently placed. Make it easy for users to look around to find more content. Getting them engaged in the site is the key to creating repeat visitors.
Don’t be Annoying
Keep things like ads, newsletters signups and mobile app downloads out of the editorial content. Never use popups that obscure the page. These things only annoy and frustrate users. If a call to action must be incorporated into the page, it’s best placed right after the content. That is where users will be more likely to interact with it. Especially if they’ve enjoyed the editorial.
The bottom line is, keep pages focused on the content. Everything else, though important, may have a negative impact on the user experience. So if it is even mildly annoying users will look elsewhere for something to read.
Designing editorial for the web is first and foremost about good content and designing it in a way that works with established user behaviors online. To accomplish this use typography and layout to create a page that encourages reading. Always keep the user’s best interest in mind and avoid annoying distractions or anything that turns their attention away from the editorial content. Apply these principles to any website to create exciting content that users will love to read.
