Introducing the Real Clear Politics Website
Real Clear Politics (realclearpolitics.com) is a website that aggregates links to news articles from a variety of other credible, online periodicals. The links on Real Clear Politics are updated at least twice daily, with a Morning Update section and an Afternoon Update section. The site is organized by days of the week, by topics trending in the media, and also by links to other Real Clear websites (e.g. Real Clear Policy, Markets, Tech, World). The selection of content provided by the site is great. However, the usability of the site could be improved. By applying a few of Don Norman’s design principles to the tweak the interface, RealClearPolitics.com can be an even better resource for users.
Design Problem 1: Back Arrow Mapping
Real Clear Politics is all about providing links to outside news sites. A user clicks on one of these links, reads the article, and then (presumably) wants to return to the previous Real Clear Politics page to continue browsing. However, when she clicks the back arrow, like she would when perusing other sites on the Internet, the resulting page is not always RealClearPolitics.com. Often, the back arrow leads to a completely different Google results page.
Visual of Problem 1
As Norman would say, the back arrow is an affordance that signals a specific action (go back one page). Normally, the mapping of the back arrow connects the click with surfing backwards. Users know that the arrow indicates a backwards motion because it is also a cultural constraint, based on using other Internet browsers. However, the mapping and affordance of the back arrow function in this instance is incorrect.
Recommended Fix 1: Match Conceptual Models
Real Clear Politics can improve site usability by mapping the back arrow to the typical backwards motion online (i.e. clicking on the back arrow returns the user to the Home page of Realclearpolitics.com. By correctly and consistently connecting the action with the result, the conceptual model, or system image, of the site matches the user’s model. A user can rely on the cultural constraints of the way that web browsers work in order to quickly navigate between articles.
This solution also allows for human error – if a user accidentally clicks on a link and wants to quickly return to the original page, she won’t feel discouraged or frustrated by the amount of time it takes to undo the accidental click. Norman’s Gulf of Evaluation is bridged!
Design Problem 2: Menu Visibility
Another problem that could be improved upon is the labelling the Real Clear link menu at the top of the homepage. The top-most menu for Real Clear Politics (in black) offers links having to do with political topics. Underneath (in grey) is a different menu of links (Policy, Markets, World, Defense). New users might expect these links to be related to the Real Clear Politics site. However, they actually lead to other Real Clear sites (i.e. the Science link directs to the Real Clear Science page, realclearscience.com). These links are also called out in the body section of the Real Clear Politics homepage, underneath Editorials. In other words, there is more than one place to find these links. The top grey menu bar is color-coded to indicate that the content on this menu is different from the content above. However, the ambiguity of the menu requires the user to use knowledge in the head (memory) to remember that the grey bar links to outside pages.
Visual of Problem 2
Recommended Fix 2: Minimize the Appearance of Complexity
Norman suggests that hiding “the controls not being used at the moment” reduces the appearance of complexity, and minimizes the complexity of use (DOET, p. 202). Thus, in order to improve understandability of the menu, the grey menu bar should be hidden while it’s not being used. This can be done by adding a link in the top (black) menu, called “More from Real Clear.” Clicking on this label can trigger a drop-down display of the now-visible grey menu links. Now, all of the other Real Clear sites are easily findable from the top of the page, without over complicating the page’s main menu. The link, “More from Real Clear,” provides a built-in label that describes the links in the drop-down, which enhances visibility by showing the user the alternatives for action. The user already knows that the other links afford drop-down menus, so by using consistent mapping and affordances with the system image, there are no tricky surprises.
Recommended Fix 2 Visual: Current Drop-Down
Recommended Fix 2 Visual: New More from Real Clear Drop-Down
Thank you, Don Norman, for providing us with your principles of design and usability!