Web Usability and Design

By Ruthie Kelly. Created on Oct. 1, 2008

Portfolio Home

Web Usability and Design Home

The Union Tribune: SignOnSanDiego.com

CNN: CNN.com

The Huffington Post:
HuffingtonPost.com

The Nation
news magazine: TheNation.com

MSNBC Online: MSNBC.com

Introduction

In Online News Writing and Design, the students examine the usability and accessibility of popular news web sites, as well as evaluating the sites' adherance to known principles of effective web design. Here, I examine the results of this analysis.

Students answered the following questions with regard to the six prinicples of usability and accessibility:

1. Effectiveness: Is the news site capable of allowing people to access the information they need?
2. Efficiency: Once users have learned how to use the news site to carry out a task, can they sustain using it in the same manner?
3. Safety: Does the news site prevent users from making serious errors or mistakes, if users do make an error, does it permit them to recover easily?
4. Utility: Does the news site provide an appropriate set of functions to enable the user to carry out the tasks they want in a way they want to do them?
5. Learnability: How easy is it and how long does it take first, to get started using the news site to perform core tasks, and second, learn the range of operations to perform other tasks?
6. Memorability: What kinds of support have been provided to help users remember how to carry out tasks on the news site, especially when used infrequently?

And they evaluated the effectiveness of the news site's design based on the web design priniples of unity, contrast, heirarchy, and consistency, summarized here from James Foust's Online Journalism: Principles and Practices of News for the Web, 2nd ed.:

"Unity means that the overall design of the page creates the impression of a coherent whole. All of the design elements — text, graphics, color, the grid itself — should work together as if they were a single element. Everything on the page should look as if it belongs with everything else. The user should be able to grasp the page's basic content without being overwhelmed by a lot of disparate elements.

Within the page the different elements should be distinguishable from one another. This is crucial to making a page easy to use — the reader must be quickly able to find what he/she is looking for, be it the navigation bar, the top story, or the sports section. Web readers tend to scan pages rather than reading word by word, so pages must facilitate scanning by making individual elements distinguishable from each other quickly and easily. Contrast can be created by using different colors, varying text sizes, bold text, and pictures and graphics. It can also be created by the positioning of individual elements; an element located "away" from another stands in contrast to it.

Not only should a page have contrasting elements, but it should also establish a hierarchy of those elements' importance. In other words, the page should be designed so that the most important elements on the page stand out. Hierarchy can be established by the use of pictures, bold colors, and large or bold text. In print, a large picture will be the element that people look at first. But on the web, people are most immediately drawn to text elements. For that reason, both text and pictures are often used on the web to establish the dominate section of a page. The eye is drawn quickly to this element. The hierarchical structure continues on a well-designed page past the initial dominate element or elements. The other parts of the page should be designed in relation to their relative importance. Elements of less importance to the user, such as a copyright notice, are small and placed at the bottom of the page, far down on the screen and the visual hierarchy.

Consistency means that the same design element is used within a single page and across all elements of the site. Unity addressed using the same font style for all elements on the page — all links in the same font size, style, and color for example. This applies to a single page AND across the site. Consistency is important to establishing and maintaining the "identity" of your web site. You always want users to remember whose site they're visiting. If they click on another section of your web site and the page looks completely different, they are likely to wonder if they have left your site. It's also valuable because once your users learn your site's basic structure, they are able to move around freely within your site without having to relearn new designs. Consistency can be achieved using templates, pages that contain design and other elements that will be repeated over several pages, and style sheets, which automates the process of formatting text."