• Thank you for helping with my undergraduate thesis!

     

    If you want to know more about the project, you may read about it here.

     

    If you're pressed for time, you may proceed directly to the survey.

  • 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

    • This study will focus on the layout of the text and various site elements their usability and preferability over existing norms.
    • You will not be assessing the quality of the articles and images themselves. These have been adapted from existing news sources in the Philippines (the sources are at the bottom of each page).
    • Neither will you be assessing the color scheme and graphic design, except when they promote or hamper how you use the site.

    The Main Question

    • Your main question should be: "Would people want to see this kind of layout when reading the news?"
    • You may refer later to the About section to better understand how this project is different from other sites.

    How it works (must-read!)

    • When viewing the test pages, there are 5 news articles in total, of varying lengths and topics.
    • Since this is not a full-fledged site, the header navigation (except for "About"), the social media widgets,  and the search box do not work.
    • Click on the first image below to proceed to the test pages. It should open in a new tab.
      • Give yourself around 3-5 minutes to browse the website. 
      • Make sure to look for and view all five news pages, and to hover around the different elements on the screen.
      • Read through the articles that catch your attention (read for understanding, at your usual pace).
    • Afterwards, go back to this page and click on the second image. This would take you to the survey. Please answer honestly! Any comment or input will be a great help for this study! :)
    • If you come from Prolific AC  or SurveyCircle, please check the last parts of this page for your completion codes.
  • Survey

    Click here to go to the Test Website

    1st

    Test Page

    Click on the image to the right to view the TEST site. This will open in a new tab. Give yourself around 3-5 minutes to browse and read through the content (you are not required to read everything). Afterwards, return to this page to proceed to the survey.

    Click here to go to the Test Site Survey

    2nd

    Survey

    Click on the image to the right to answer a 16-point questionnaire. This is about the TEST site. This will open in a new tab.

     

    This survey assesses how effective the Test Site is.

     

    If you came from Prolific AC, go back to this page after the survey for your completion code.

  • 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:

    1LHL-HT6Z-48KF-3VL8

  • 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:

    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 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.