HIGHLIGHTS:
- Student attempts to make a site layout that would would make news easier to read and understand.
- Website puts together known best practices for usability and readability.
- Thesis hopes to use the layout to make news easier to digest.
In this day of conflicting viewpoints and rampant fake news, it is important for news sites to present their information in a way that is easily read, absorbed, and retained by their readers. However, a majority of big-name news sites adhere to design ideas that may impede immersion in the news. Prevailing design promotes skimming and distracted reading, instead of comprehension.
The test page advocates the use of the following design ideas to optimally deliver news:
Centered elements.
This promotes ergonomic reading, by taking advantage of the eye's natural angles of movement, while also reducing the movement needed to reach other parts of the interface.
Two-column text layout.
A two-column layout shows more of the text at once. Aside from reducing the need to scroll, this layout has also been shown to enhance readability and to hold the reader's attention better than single-column layouts.
Visual cues.
Two-column layouts are not very common online, and many readers would mistakenly skip to the next line instead of the next column after reading a block of text. To guide the eye, the layout uses horizontal rules and colored column backgrounds to signify transitions and to isolate blocks of text. When applicable, images are also used as dividers.
Larger default font-size (13pt).
In conjunction with the two-column setup and the overall page width (set through the Unsemantic CSS Framework), this font size creates the ideal line width and CPL (characters-per-line) count. This is also an easily readable size across screens of various resolutions.
Highly-readable fonts
The fonts chosen for the layout (Lato for body text, Playfair Display for headers) have large x-heights that make them more readable. They are also free and open-source, meaning they can be available for any device.
Reduced-contrast font color.
Using #222222 as font color reduces fatigue over long reading sessions, while still providing sufficient contrast for ease of reading.
Bullet points.
When applicable, a bullet-point summary of the news is presented for an at-a-glance read.
Headline appears below picture.
Adapting from newspaper best practices, this leads the reader's eye to the text, reducing the chance that they will skip the main part of the article.
No links within the body of article.
Links are distracting, and a cause for cognitive overload — not something you would want while digesting an important piece of news. Hence, there are no links within the news itself. Instead, the "More News" section is moved out of the way to the bottom. Even social media widgets are moved out of the way, while still being easily accessible. Ads are also relegated to the bottom of the page.
Floating navigation bar with search box.
While links were removed from the body of the article, navigation should still be within reach at all times. The nav bar stays in sight as the user scrolls, complete with a highly-visible search bar.
