What to Expect
A few reminders before you begin.
Note: Please do the following in a desktop browser (Chrome, Firefox, etc.), as this research is not optimized for mobile.
Focus on layout
The Main Question
How it works (must-read!)
Your Prolific Participant ID
If you came here from Prolific AC, please type your Prolific ID in the box below. Do this only after completing all the surveys.
If not, please leave this blank. Thank you for participating!
Your Survey Circle Personal Survey Code:
About the Study
This research seeks to create the optimal news webpage, using known best practices in page layout, typography, etc.
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:
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.
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.
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.
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 moved out of the way, 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.
Any and all information collected in this site, or through the use of this site, shall only be used for academic research purposes. No personally-identifiable information is meant to be gathered, and no such information will ever be released to the public domain. I am a privacy freak, too.