Heuristic Evaluation Hennepin County Library website: www.hclib.org Evaluator: Shannon Clark Jakob Nielsen's Heuristics were developed as a means of inspecting the usability of a specific software. Since is development, the principles are now used on a variety of different products. Each of the ten individual heuristics is evaluated to determine if the product has violated any of its criteria. In this evaluation, the Hennepin County Library's "Bookspace" portion of their website is under review based on the information about Nielsen's heuristics as found in Usability Testing Essentials (Barnam). 1: VISIBILITY OF SYSTEM STATUS The user should be informed about what is going on through adequate feedback within a reasonable time. A good example of this heuristic, as defined above, is the NASA webpage. The website uses "bread crumbs", a navigation tool used to map the location of the user, are apparent and easy to follow. Arrows indicate the direction the user has followed, which gives the user immediate feedback, as indicated in image 1.1. The website is also navigated by using the drop down tabs. When a user scrolls over a link, it is highlighted, indicating the next location a user is about to go. This is depicted in image 1.2. 1.1 nasa.gov
1.2 nasa.gov
1.3 The "Bookspace" tab of the Hennepin County Library website fulfills many aspects of this heuristic. Current and future navigation is clearly highlighted within each page. The navigation bar present toward the top the website provides "bread crumbs" for the user on the website, as depicted in image 1.2. Scrolling over links in the navigation bar and the drop down menu, similar to NASA's website, causes them to be underlined, allowing the user to be sure of the next place they are navigating to. Furthermore, after a user has found a book using the "Bookspace" tool, the user is redirected to a page that lists the availability of that specific book in any of Hennepin County's libraries. This feedback may be crucial information for the user, should they require the book. 2: MATCH BETWEEN SYSTEM AND THE REAL WORLD
The website should communicate like the user, using words, phrases, and concepts familiar to the user rather than using systemoriented means. The website should also follow a natural and logical order using realworld conventions. 2.1
The "Bookspace" element of the website is intuitive to the user based on the qualifications of communication as described above. The user can navigate for books based on genres that are typically used by libraries, such as science, nonfiction, and graphic novels. Standard names for sub genres are also used, such as found under "fiction", and depicted in image 2.1, such as humor, classics, sports, etc. The language choices made throughout the "Bookspace" portion of the webpage are logical for this particular situation. The navigation bar on the left hand of the page also indicates this heuristic, as it is a conventional model of English reading standards and of other websites. It can be seen on a number of popular websites, including Google mail and Facebook, as shown in image 2.2 and 2.3. 2.2 gmail.com 2.3 facebook.com 3: USER CONTROL AND FREEDOM Users should have access to clearly marked "exits" when faced with wrongful navigation to unwanted portions of the website without having to complete an extended dialogue. The website should provide undo and redo functions. The "Bookspace" element fulfills the requirements of this heuristic for the most part, but lacks exit strategies in specific situations. As previously mentioned, the website minimizes navigation mistakes by providing the "bread crumbs" mapping bar at the top of the page (image 1.3). This menu allows a user to access pages they have previously visited. In accordance with this, the drop down menus along each page also allow users to access different pages altogether. Finally, a site search bar is located in the top right of every page, as depicted in image 3.1, allowing the user to access it at any time as a means of exiting, although it is not specific to any one category. A better example of this would be the main search bar on Amazon.com, which gives the user the option of searching through a specific category, as seen in 3.2. 3.1
3.2 amazon.com
"Bookspace" also fails this heuristic because it does not offer clear exit strategies, like the "bread crumbs", once a user leaves the "Bookspace" portion of the site. For example, after using the "find a good book" function, the user is presented with a list of books along with their cover photos, as depicted in 3.3. However, upon clicking the book, the user is redirected to the catalogue portion of the website. There is no indication of what clicking the link attached with the book will do, and there is no immediate way to return to the previous page without using the browsers recall functions, as shown in image 3.4. 3.3 & 3.4
4: CONSISTENCY AND STANDARDS The website should maintain platform conventions. Users should not have to wonder whether different words, situations, or actions mean the same thing. The formatting on “Bookspace” is consistent in formatting. The top navigation bar is found at the top of every page to tab through the links available on “Bookspace”, suggested new titles are found at the cent of the page under the most important information, and a left navigation bar is always present. However, because book lists are created by users, title headings can be repeated, have different meanings, and do not follow any specific format. It may be difficult for a user to be sure what information they are accessing based on this inconsistency. There is also little to indicate whether a booklist has been written by a public user or a member of the library staff, as depicted in 4.1 4.1
There is also inconsistency in that the content of what is contained within links is not obvious to the user. Clicking a title suggested by a book list or genre selection redirects the user to the catalogue page, as seen in images 3.3 and 3.4, which is not consistent with other links on the page. All other links, unless identified (as on the front page), continue the user on a path within the “Bookspace” area of the webpage. By redirecting the user, it is inconsistent with the patterns established on previous pages. Wikipedia.com offers a better
solution to this problem by providing visuals cues for links that redirect the user to outside sources, as shown in 4.2 and expanded in 4.3. 4.2, wikipedia.org
4.3
5: ERROR PREVENTION The website should be designed to prevent user error before it happens. Errorprone conditions should be eliminated or checked, and users should be presented with confirmation options before they commit to an action. As mentioned previously in section 4, consistency and standards, some links redirect to another page, either still on the Hennepin County Library website or outside source. Clicking the link does not open a new tab or window, but changes the address on the page. There is no means of returning to the previous page besides re‐entering the previous site address or using the browser’s back button. Aside from this, there is still little error prevention presented on the webpage. There are no confirmation buttons available or criteria that needs to be met when filling out any of the search bars. A good example of error prevention is Google mail. When an e‐mail is composed with the word “attachment” in it, but the user does not attach a document, image, etc. before sending, an advisory message is sent to warn the user of their possible mistake, as shown in 5.1. 5.1
6: RECOGNITION RATHER THAN RECALL The user should not have to remember how to navigate from one page to another; the website should contain visible objects, actions, and options to minimize the memory load of the user. Instructions for use should also be retrievable or visible when needed.
The navigation “bread crumbs” as depicted in 1.3 are also useful for recall. The user can access previous pages by clicking the provided links within this navigational tool. The main menu bars located at the top of the page and are consistently found on every consecutive page are also another example of this as they act as visual markers of locations available on the website, as discussed in the first section, visibility of system status. However, this does not apply to the “reader’s list” element of “Bookspace.” The “bread crumb” bar in this part of the website does not entail as much detail as is necessary. It excludes the immediate previous page when a user is within a chosen list, as shown in figure 6.1, in which each reader list in the image has been previously viewed. 6.1
Additionally, after a list is previewed in this section, the hyperlink remains blue, rather than changing color. A user would not be able to determine if they have previously accessed this list upon first glance, and thus limits recognition. A website that utilizes this function well is Reddit, as shown in 6.2. This website only contains user posted content that are linked to external websites. Without the color change in links, the website would be frustrating to use as it is mainly hyperlinks of text. 6.2 reddit.com/r/politics 7: FLEXIBILITY AND EFFICIENCY OF USE
Accelerators, such as short cuts, should be available for expert users to speed up interaction with the website and be unseen by the novice so that the system caters to both experienced and inexperienced users. All users should have quick and simple access to frequent actions. The “reader’s list” element also provides a search bar to select from a list of members who have created these lists to chose from. This search tool is helpful to expert users with favorite list‐creators, as they can access the lists quickly. For a novice user, however, this search function would not be helpful as they are unfamiliar with the names of the list‐ creators. This list is located at the top of the page, which allows for easy access, but also makes it highly visible to novice users, as shown in figure 7.1 7.1
7.2 Experienced users also have the option of creating a profile on “Bookspace.” Having a profile allows the user to access information available on the left‐handed navigation bar, including favorite book lists, access to the comments the user has made, etc. as shown in figure 7.2. A novice user would have no need for this information but is a helpful tool for frequent users who wish to access information they have stored. One of the most frequent examples of accelerator use is in video games. Expert users (gamers) use hot keys to make shortcuts to different commands within the game. Some users even create a different set than that suggested by the game to make for even better efficiency. While the game can still be played without shortcuts, as many items and actions can be determined from pause or inventory menus, shortcuts allow experts to play at the pace they desire. 8: AESTHETIC AND MINIMALISTIC DESIGN Irrelevant or rarely needed content should be excluded from the website dialogue because extra information competes with any relevant information and diminishes its visibility. The two‐column format employed on the home page of “Bookspace” contains large amounts of information in a manner that is difficult to read and understand. The amount of textual descriptions clutter the page and the main headers‐ databases and websites‐ are difficult to locate and distinguish, depicted in 8.1. This makes the two columns seem inter‐related, possibly even meant to be compared due to their identical formatting and special nearness, rather than separate. Although the headers are necessary, they need to be emphasized further for clarity and much of the text can be reduced into keyword statements.
8.1
A good example of minimalistic design is the advocacy website for Smart Growth America. The website uses a navigation bar to list the headings that the user can then chose from, rather than listing all of the information together, which would appear cluttered. The informative pages also have summary portions at the top, so that the reader can access information easily, as shown in 8.2 8.2
9: HELP USERS RECOGNIZE, DIAGNOSE, AND RECOVER FROM ERRORS Error messages should be expressed in plain language and not in codes or system terminology. They should also indicate the exact problem and suggest means for a solution. The “find a book good” section provides users with several means of solutions when errors occur. When the author search bar is entered with incorrect author name, in this case the following random letters were entered to ensure an error “dkahkda”, the website offers the reason for the error, along with other search options available as means of a solution, as shown in image 9.1. However, the website does not offer means of preventing this error. There is no indicator if a user has mistyped an author’s name before entering the search or suggestions for author’s of similar names. Google, for example, provides search results for words that are misspelled with the correct spelling of the term, as shown in 9.2.
9.1
9.2, google.com
10: HELP AND DOCUMENTATION Although the website should be functional to use without documentation, help and documentation should be provided to help the user. It should also be easy to search, task focused, list concrete actions to be carried out, and only contain necessary information. 10.1
The Hennepin County Library website provides a “Ask Us” tab along the top right of every page that addresses this heuristic, image 10.1. Along with a frequently asked questions section, the page also contains different methods of contacting library staff members. This page is useful for basic information, but also does not have a search function or forum to address any problems. The only way question such at that could be answered is by contacting a library staff member through the other proposed methods, such as text, e‐mail, or phone. The Battlenet support website is well‐designed for help and trouble shooting for their products. Because their products are complex and best‐selling video games, they have to deal with software glitches, user errors, and general malfunctions that happen frequently. Their webpage allows for searchable material, highlights “hot topics,” and has a search bar, as seen in 10.2, that allows the user to select the category of their issue. 10.2 us.battle.net/support/en/