Austin Public Library Website Heuristic Evaluation

Charles Macon Corbin Watkins Obinna Okolo Tammie Riley

2013

Executive Summary
Austin Public Library
According to the website, Austin Public Library (APL) strives to provide the public with information about the history, current events and other activities in the Austin and Travis county area. e APL has been established as a local, historical goldmine, incorporating documents from the Austin-Travis Collection created in 1955. Fiy-eight years later, the Austin History Center is now a prominent, developed landmark of local society.

Preserving History
e APL created a strong foundation that depends on a fruitful past, present actions and future goals. In order to preserve and showcase what the APL has created, it is important that the website communicate its procedures in a clear, user-friendly manner. While the website provides rich text and informative content, this report explains ways to maximize the sites eectiveness so that users will enjoy an informative and ecient database. e parts of this report include recommendations regarding the APL: Homepage Navigation System Design Layout Content Links Other Miscellaneous Issues

e ideal target market for APLs website includes mothers of young children and other adults between the ages of 50 and 60 years old. is report clari es what issues are aecting the website and their level of importance, while also providing multiple solutions to enhance readability.

2013 Austin Public Library Website Heuristic Evaluation

Table of Contents
Executive Summary .................................................................................................................. 3 Table of Contents ...................................................................................................................... 5 Metrics Used .............................................................................................................................. 7 Evaluation: Homepage ............................................................................................................. 9 Evaluation: Navigation ........................................................................................................... 11 Evaluation: Design .................................................................................................................. 13 Evaluation: Content ................................................................................................................ 15 Evaluation: Links .................................................................................................................... 17 Evaluation: Other .................................................................................................................... 19

2013 Austin Public Library Website Heuristic Evaluation

Metrics Used
For each criterion, we gave each issue a severity rating:

0 = No Problem
e issue is not a problem with the website.

1 = Cosmetic Problem
is problem likely will not prevent users from doing a task, but may delay them or cause them to have an unhappy user experience.

2 = Moderate Problem
is problem may not be catastrophic but would cause an issue for many users or would cause a catastrophic problem for a handful of users.

3 = Major Problem
is problem would prevent nearly all users from completing their task, would cause users to have a misunderstanding of the purpose of a website or a task, and would cause users to abandon the site. For the sake of brevity, we have not included any issues that ranked a 0 on this scale, and we have only included a small handful of issues that ranked a 1. Issues that ranked 2 or higher were deemed critical and were included in this report.

2013 Austin Public Library Website Heuristic Evaluation

Evaluation: Homepage
Provide statement about what site does
Severity Rating: 2 Observations: While it might be obvious to some, the purpose of the website is never explicitly stated. is could be confusing to some users, especially those that are older or not as experienced with the internet. Why are the end users coming to this site? What should their primary goal be when they visit the Austin Public Library site? How does this website assist them in achieving their goals? ese are all questions that should be answered by the home page. Recommendations: ere should be some type of general statement that gives an idea of what the main goal of the site is. If the ultimate goal is to have a hub of various types of useful information, then this needs to be stated. e homepage needs to be viewed as the front door to your library.

Emphasize the highest priority tasks

Severity Rating: 3 Observations: To continue the previous point, this homepage provides no clear sense of direction for the end user. While there are two clearly dened columns on the homepage, the information contained within seems to be random in nature. If a less experienced user came across this page and was attempting to nd a particular book in the librarys catalog, they might have issues doing so. While some users might appreciate the blogs and events on the front page, it might be too much. Recommendations: e sheer amount of content on this page needs to be reduced. is report will go into greater detail about this later, but the amount of content needs to be reduced and the amount of whitespace in the design needs to be increased. Currently, there is far too much going on at once, so much so that it is hard to concentrate on one particular path. Focus on what the end user is actually going to need, and then go from there. e blogs, the news, and the events can all go on their own pages.

As you can see, theres no clear denition as to what the site actually does. Tasks are not properly emphasized, nor are they particularly outlined. Users (especially those who are older or less experienced with websites) may grow frustrated and give up at this point.

2013 Austin Public Library Website Heuristic Evaluation

Evaluation: Homepage (Cont)

Announce changes made to the site
Severity Rating: 1 Observations: Outside of the blogs and events, there are no clear signs that this website has been updated recently. Even then, the blogs and events appear to be part of an RSS feed from another page on this site. is could make an end user uncomfortable with the accuracy and timeliness of the information presented within. In fact, the website updated several times as this report was being written, but no notice of when it was changed could be found. Recommendations: Somewhere on the front page (preferably as part of the bottom navigation panel), there should be a simple section that states Last Updated: (Date).

e area that is outlined in red could be a perfect place for a line of text that states when the last update to the website was made.

10

2013 Austin Public Library Website Heuristic Evaluation

Evaluation: Navigation
Use graphics in navigation only if they help users recognize a class of items
Severity Rating: 2 Observations: e time-lapsed picture stream was a good idea on the drawing board, but not as much time would be focused on looking at the images as opposed to looking for a book, or whatever they intended to nd in the rst place. Putting it simply, its a waste of time and solid eort. e book pictures that line up under it are graphical enough. Seemingly random and unnecessary icons can distract the user from their intended goals. e typical user would probably not plan to spend considerable time browsing the site, so they are apt to taking the most out of what they see rst. Recommendations: Use more of the white space and enlarge the graphics that are necessary (i.e. make them pop.) ere need to be more descriptions where they are necessary. Eliminate overtly cluttery icons that make navigation busier than it should be.

Use a clickable list of contents on long pages

Severity Rating: 2 Observations: Although one page in particular does this well (Locations), many longer pages have no separate list of contents on them. is creates a situation where a page can go on without any clear indication as to where the user is on the page. Furthermore, this can create confusion when a user is trying to nd something that might be further down a given page. is can cause users who may not have a clear understanding of what exactly they are looking for to abandon the website. Recommendations: Longer pages should have a clickable list of contents for easy navigation. Follow the example that is provided by the Locations page, of which a proper example is illustrated by the graphic on page 13.

e graphics that are outlined in red may only serve to confuse and frustrate users that accidentally click on them. ere is almost no indication that these graphics lead anywhere or serve any purpose other than decoration. e scrolling list of books can also be frustrating as there are no text links near them to indicate that they are clickable. is problem also presents itself on the Catalog page, to lesser severity.

2013 Austin Public Library Website Heuristic Evaluation

11

Evaluation: Navigation (Cont)

Provide feedback on users location
Severity Rating: 2 Observations: Many pages provide either breadcrumbs or highlight the current page in the navigation bar to provide feedback on the users location. However, due to the fact that many pages follow a dierent design scheme, this can be easily lost in the confusion. is can create a considerable amount of confusion for many users regardless of demographics. Elderly users might have the most trouble with this issue, but even more experienced users who might be browsing the website while navigating multiple pages through tabs can get lost fairly easily. is issue might cause many users to become frustrated and potentially abandon the site. Recommendations: If breadcrumbs are to be used, they need to be used on every page that is not the homepage. Furthermore, the design of the pages themselves need to be consistent so that they users know exactly where they are supposed to be looking for such visual cues. Design consistency is discussed on page 19.

Enable access to the main page

Severity Rating: 3 Observations: Clicking the Recycled Reads heading sends you to the bookstore yer. Upon closer examination, there is no clear way of returning to the homepage or, for that matter, any other page of the main website. End users should be able to access the main website after looking at the yer. Recommendation: While it is understandable that the Recycled Reads document is supposed to be a yer, it does not necessarily warrant a link on the main navigation bar. Most yers do not contain links of any variety, however, this is an online yer. Online yers should contain an easy to locate Homepage link somewhere on the document, preferably near the top of the page (as it is on all other pages of the website.) If this is detrimental to the design of the document, then perhaps the yer should open in a separate window. at being said, if it opens in its own window, the user needs to be notied that a separate window will be appearing.

is is an example of using breadcrumbs correctly. As you can see, there is a clear indication of where the user is on the website. Also notice that there is a textual link to the main page, which avoids confusing users that might not otherwise know that the logo in the top left corner can be used to navigate back to the homepage.

12

2013 Austin Public Library Website Heuristic Evaluation

Evaluation: Design
Do not use color alone to convey information
Severity Rating: 1 Observations: On the locations page, the name and address of each library is in blue, which will not show up correctly in print on a black-and-white printer. e user may not necessarily have access to color printing, so this issue is a matter of convenience. Recommendations: Have the library location links in black, but have then highlight blue when the mouse hovers hover them. is way, the print will show all of the necessary information

Page Length
Severity Rating: 3 Observations: e Locations page takes longer than usual to load, the reason being is twenty-three separate pictures and maps all loading at the same time. is creates some lag and a longer download time (even on high bandwidth connections) which some people might nd unbearable. is problem could easily cause users with slower connections to abandon the site all together. Recommendations: Break the page into four or ve separate pages which can be easily navigated through. Put x or six locations on each page with Next and Previous buttons below. e Library Locations list, however, is eective where it is located and should be kept on each of the newly created subpages.

e sections that are circled in red are prime examples of text that would not properly print. Generally, black text on high-contrast backgrounds work best. While links should be dierentiated from the text surrounding it, perhaps there is another method that would work better. Also note the Library Locations list; this works perfectly and should be kept in all future iterations of the design.

2013 Austin Public Library Website Heuristic Evaluation

13

Evaluation: Design (Cont)

Liquid Layout
Severity Rating: 3 Observations: At any screen resolution less than 1024 x 768, the website begins getting clipped by the edges of the screen. is lack of liquidity can cause large portions of the content to become illegible or fall o the edge of the screen entirely. Most users will only see what is immediately presented on the screen and will not go looking for content that they arent entirely sure even exists. e homepage is one of the worst examples of this, as the graphics push nearly all textual information completely o the edge of the screen. is is a highly critical issue and could cause many users to abandon the site entirely. Recommendations: ere needs to be more carefully placed whitespace in the design of this website, especially the homepage. A reduction of images on many pages will also help this issue. A quick look at the source code reveals that the two main columns on the front page are rigidly dened. For example, the rst column <div class=panel-panel panel-col-rst> has an absolute width of 580 pixels. Were this column set to a relative value of 33% of the current width of the browser window, the column would shrink or grow depending on the size of the window without ever losing its proper shape. is change could go a long way in properly accommodating users who may not be using newer computers.

Clipping begins to occur at a resolution of 1024 x 768 which is still one of the standard resolutions used today. At anything less than 1024 x 768, the website becomes dicult, if not impossible, to properly navigate.

14

2013 Austin Public Library Website Heuristic Evaluation

Evaluation: Content
Do not display unsolicited windows or graphics
Severity Rating: 2 Observations: Within the context of this website, an unsolicited graphic would be what could appear to be an advertisement. ere are several areas where the Recycled Reads Bookstore is given space, but the link between the APL and the bookstore seems tenuous at best. All information about the bookstore is easily missed by a user that is just scanning the website. On the Library Locations page, for example, the Bookstore is listed as one of the locations, but seems out of place considering the fact that it is not actually a library. Information about such aliations seems like it would be best presented on the front page. Recommendations: Remove Recycled Reads Bookstore from the Locations page, and potentially rebrand Recycled Reads to make it appear to be directly aliated with the APL system. If the link between APL and Recycled Reads is made clear, the graphics for the bookstore would seem less like advertisements.

Display only necessary information

Severity Rating: 3 Observations: roughout many pages of the website, there is information that easily gets lost in the clutter. is issue is most apparent on the homepage, where the blogs and other seemingly miscellaneous information starts to get in the away. While it seems like a good idea to have as much information as possible presented on the front page, this creates a sense of clutter that distracts the user away from the information that they might actually be trying to access. Furthermore, some very important details (such as main branch locations, etc.) are completely omitted from the front page completely. Recommendations: Sometimes less truly is more. In this case, perhaps a minimalist design that only shows the user exactly what they might need would be appropriate.

Given its change in style in relation to all the other locations on this page, the entry for the Recycled Reads Bookstore seems like an advertisement which could be jarring to some users.

2013 Austin Public Library Website Heuristic Evaluation

15

Evaluation: Content (Cont)

Provide printing options
Severity Rating: 1 Observations: is website provides no standardized printing options. is could be especially frustrating to users that need to have a printed copy of something that they have found on the website. Users are left to try to navigate the printing options found in their web browser which can be a less than optimal experience. Recommendations: Create a print version of most (especially crucial) static pages so that end users will be able to print o a properly formatted copy of what they might need.

While there are many options that allow end users to share various articles amongst one another, there are no options that allow the user to print a properly formatted copy of it.

16

2013 Austin Public Library Website Heuristic Evaluation

Evaluation: Links
Allow link colors to show visited and unvisited states
Severity Rating: 1 Observations: Noticing which pages a user has visited is dicult at rst glance. e two states (the light blue and slightly darker purple) are harder to notice when much of the site has a blue color scheme. e visited link color is even hard to discern at times from the rest of the standard text found throughout the site. is could cause signicant issues for several users, especially users that have trouble dierentiating between dierent shades of blue, purple, and even black. Recommendations: Unfortunately, the blue - purple color scheme for links is a web design standard and is used by many sites on the internet. is color scheme is recognizable by most users and might cause more problems if it is changed. As part of any new design process, there is generally a usability test that takes place near the end of the design cycle, and any new colors should be tested at that point. e best color for visited links (given the general color scheme of the site) would probably be a complementary color for the unvisited links; in this case, the color would be a dark orange (to be even more exact, it is #AA4100) so as to perfectly t with the blues.

Indicate if a link is going to something besides another webpage

Severity Rating: 1 Observations: e link Download Map under the Locations tab on the navigation bar takes the user straight to a .PDF. ere is no warning given to the user that they are about to navigate to a le instead of a webpage and may confuse or frustrate them. Furthermore, there is no clear way back to the homepage after a user has clicked this link. Recommendations: Provide an interstitial page warning the user that they are about to either download a le or access a page that is not another website, and oer them a way back to the homepage here.

is .PDF le opens with no advance warning once a particular link is clicked. Notice how there is no way to get back to the website once this is opened. For users with slower connections, this might cause unnecessary frustration and cause them to abandon the website.

2013 Austin Public Library Website Heuristic Evaluation

17

Evaluation: Links (Cont)

Provide consistent clickability cues
Severity Rating: 2 Observations: Most links are only underlined when they are being hovered over, which creates a sense that there are not vary many links on this particular site. Not only are links not consistently underlined, they are not always the same color. On the front page, for example, there are links in the Featured Events section that are black instead of the dened blue for links. ese links change color when hovered over, but there is no indication otherwise that they are links. Furthermore, there are many graphics that serve as links that have no indication that they are links until you hover over them. On the homepage, the area titled Whats Hot is a prime example of this issue. is can make navigation of the site very confusing and frustrating. Recommendations: Ensure that all links throughout the site are using the same style. Dene a separate style sheet for links and properly reference it in each page. Using a modular approach to coding style sheets will not only make sure that all like elements over the entirety of the site are consistent, it will also make any future edits relatively simple to make.

e areas outlined in red are areas where clickability cues are not consistent with the rest of the website. In the example on the right of the graphic, the cursor is over a link that appeared to be standard text until it was hovered over. e images on the left, however, have no clear indication that they are actually links.

18

2013 Austin Public Library Website Heuristic Evaluation

Evaluation: Other
Pages are not graphically consistent
Severity Rating: 2 Observations: ere are diering styles for each of the links located on the top navigation bar. When a user clicks Explore, they are taken to a webpage with a scrolling horizontal list of books, whereas if they click Locations, they are sent to a long page with many pictures and maps for each of the libraries. Furthermore, clicking on the Recycled Reads link escorts the user to what is essentially a print yer for a bookstore with no clear link back to the main website. Recommendations: ere needs to be one clear layout for the site. e Explore section has a good layout, and most users would get all they need from that section alone. Most pages on this site could be done similarly without breaking usability for most users. What absolutely needs to be xed is the Recycled Reads page, as it is too drastic a jump into a new style and no longer looks aliated with the original site.

Written language of the site is not clearly dened

Severity Rating: 3 Observations: Many of the blog posts are in Spanish. While the idea of having a separate section for those who predominantly speak Spanish is a novel idea, this is distracting and can easily frustrate people of either (or any other) culture. is can create a sense of isolation within the site than can cause users to abandon the site. Recommendations: While it could be quite time-consuming, there need to be translations of major pages and articles. Seeing as the population of Austin is 1/3 Hispanic (source: http://austintx.areaconnect.com/ statistics.htm), there is a great deal of information that your users are needing that is slipping through the cracks. is might be a slippery slope situation, but there needs to be some kind of translation service in place. Some modern browsers (such as Google Chrome) can do this automatically, but that translation service is still limited at best.

While oering articles tailored for dierent groups of users is a good idea, it can create a feeling of exclusion. Articles such as this one might need to have an English translation, and vise versa. If the website creates a feeling of inclusion for all cultures, the end user (regardless of demographic) will have a better experience.

2013 Austin Public Library Website Heuristic Evaluation

19