Best UX Practices for News/Media Websites In 2019 [Part 1/6]
After looking at several news sites, we realized that there were certain universal UX elements that helped create a frictionless reading experience. This article aims to expand on the 25 Mobile UX Principles and provide a checklist for improving your mobile site experience across 6 key site areas:
- Home / Landing page [published]
- Menu & Navigation [to be published]
- Search [to be published]
- Category Pages [to be published]
- News / Article Pages [to be published]
- Sign In /Up & Subscribe [to be published]
Home / Landing Page
|Homepage / Landing Page||Impact||Key Metric|
|Feature a single top story and remove automatic carousels||High||Bounce rate|
|Additional CTAs below the fold||Medium||CVR|
|Display ads non-intrusively||High||Bounce Rate|
|Make news easily scannable||High||Time on site, Pageviews|
|Organize news by section||Medium||Time on site, Pageviews|
All recommendations should be A/B tested!
Feature a top story or breaking news (remove carousels)
Why to avoid carousels & sliders
Pros for heavy content websites:
- Multiple pieces of content within less space
- Users often scroll past carousels (if you’re using a carousel hoping that your users will see a variety of content, there’s a high chance they’ll only see the first frame)
- Not all content can be equally “important”
Include a selection of up-to-date news
The format and story selection matter most
According to a study conducted by MeasuringU, the biggest drivers of the online news experience are the format of the articles and having a good selection of stories on the homepage.age.
Make news easily scannable (eg. list view)
Choose the appropriate layout for the type of content you’re displaying. Text-heavy content tends to perform better with list view.
- List View: Attention decreases from top to bottom – More
relevant / recentnews should come first
- Grid View: Attention spread more evenly – best suited for visual content
Organize news by section or category
Readers should always know what they are reading, its category or section. This way they can decide easier if its something they’re interested in and can also click on the category/section to browse even more similar news.
Display additional CTA(s) below the fold
Below the fold refers to the section of a web page that is only visible after scrolling down. The digital marketing conventional wisdom is that above the fold content gets more attention, and is therefore more valuable than below the fold content.
Still, this doesn’t mean that we should ignore below the fold area when it comes to putting CTA buttons considering that users in news sites tend to scroll & read more than on other industries. This way we’ll make sure that whenever a user is ready to convert (become a paying subscriber?) they can do so easily.
Display ads non-intrusively (don’t interrupt experience)
Advertising is only getting more pervasive, obnoxious, and intrusive. That’s not our personal opinion (though we absolutely agree); that’s the internet speaking.
People in general don’t hate ads, they hate bad ads.
77% agree with the statement “I wish there were a way to ad-filter instead of ad-block completely.”HubSpot Survey
Here are some tips to consider when implementing ads on your news website:
- Don’t set videos to autoplay.
- Don’t mislead people.
- If you do use pop-ups, be judicious.