Heuristic Evaluation. An Analysis of The Toronto Public Library Website. By: Chris Dacol

Size: px

Start display at page:

Download "Heuristic Evaluation. An Analysis of The Toronto Public Library Website. By: Chris Dacol"

Bertram Francis
5 years ago
Views:

1 Heuristic Evaluation An Analysis of The Toronto Public Library Website By: Chris Dacol

Global High-level Evaluation After evaluating the Toronto Public Library desktop website I have identified several issues and strengths with its design.

2 Global High-level Evaluation After evaluating the Toronto Public Library desktop website I have identified several issues and strengths with its design. The evaluation is based on consistency, simplicity, efficiency, and overall usability of the site. I will be looking through the site using a high-level analysis. I will report findings from a global view to create a strategy for improvement and implementation. Starting on some positive notes. The home button is visible throughout most pages and has a visible hover state. The main horizontal blue navigation bar cleverly displays additional information through the rollover drop-down menus. Most sections follow the same basic colour scheme. This helps cue the user to useable information. Some established interaction patterns were used in the site design. The home button is the top left and is the logo. Similarly, the user login and profile are on the top right. The use of tabs, colour cues, and hover states are well used to indicate interactivity. These elements are well placed and have good contrast. The language used for categories and links are well chosen to match users real-world expectations. They are simple to read and comprehend. The main menu bar is simple and only has 4 main categories. Thus, chunking the information aiding the user to navigate through main sections easily. All these have helped reduce the time a user takes to achieve their task by making the system status visible. Additionally, there are a few different ways to access information. Allowing flexibility that enhances the user's efficiency to find information. A prime example is the advanced search option it allows more experienced users to enter to specific parameters. Once search results are displayed sorting and viewing options are also available allowing users to see content as a list or grid view or by selected criteria like the author. 1

The above design choices have helped the user, however, with further analysis, it is evident that there is room for improvement.

Another example would be how links and submenus move to the left or right of the screen in different sections of the site.

Below is an example of how sometimes the search bar is bellow to and left justified other times it is above and center justified.

3 The above design choices have helped the user, however, with further analysis, it is evident that there is room for improvement. The current locations of main navigation buttons and search bar shift from page to page. This issue of consistency is throughout the site. Another example would be how links and submenus move to the left or right of the screen in different sections of the site. This design choice slows down users as they have to reorient themselves on each page to find the navigation and content. Below is an example of how sometimes the search bar is bellow to and left justified other times it is above and center justified. Another thing to notice is users do not always have the same options available across pages. For example, the search bar in the magazine section behaves differently from any of the other search bars found on the website. The search parameters depend on the first selection to sort information correctly. After a search is conducted the options on sidebar also differ depending on if you are in the Books or ebooks sections for example. It is yet another example of the changing options available to users across pages. 2

4 There are some design choices that enforce recognition rather than recall like menu icons and graphics are flat simple. These use a minimalist approach and with standardized imagery making them more easily interpreted. That being said there are some issues noted across the pages. Visually buttons that do the same things change colour and size often. Below are some examples of inconsistent visual content. Some variations in the design of iconography and can be misinterpreted throughout the website. Below are examples of book and bookmark icons that are used in many different contexts and represent different things throughout the site. This can be confusing to the user as it sends mixed messages. 3

There are some additional inconsistencies within library pages and sites. It is particularly evident in the kid s sections. These pages do not follow any of the structure of the main library page.

The recommended solution here is to review all content and ensure they are used consistently across pages.

These types of changes would not require a major overhaul but would enhance the overall usability of the site.

5 There are some additional inconsistencies within library pages and sites. It is particularly evident in the kid s sections. These pages do not follow any of the structure of the main library page. In the images below you can clearly see differences shown with Kids Space and Kids (Birth to 5) pages. The recommended solution here is to review all content and ensure they are used consistently across pages. The pages that have structural changes can be organized to mimic the same colour and location cues from the main page. These types of changes would not require a major overhaul but would enhance the overall usability of the site. There are several different transfer points to outside websites such as Overdrive and Libby. Users are required to create accounts and download software to access certain copyrighted content digitally. These partner sites do not match the library website and do not link back the library. When leaving the library page there was only one instance where the user was notified. However, the method used to transfer the user such as opening a new tab in the browser is never specified. A simple solution would be to try to better inform users where they are going and how to get back to the library site. This includes informing the user if there will be a new window 4

opened or if they will be sent to a new tab. Additionally researching if partner sites could collaborate to better inform the user of this transfer would be mutually beneficial.

6 opened or if they will be sent to a new tab. Additionally researching if partner sites could collaborate to better inform the user of this transfer would be mutually beneficial. The site has put in place measures to prevent users from making errors. There are notices to remind users of things like renewing their library card. Some of these notices help users recover from their errors such as notices instructing users for requirements on forms. Below are some examples of ways the site displays these messages. Some notices must be activated by going through special options. Such an options like reminders to be notified when items are due. These options could be more transparent as it is a function that strongly relates to the user's goals for using the site. Not all users are aware of this information and would not know where to find them. If all else fails a help link is available on the main menu bar under Using the Library tab. Additionally, there is a small help link on the page footer. There are three main subsections to aid the user. Help with your account, help with searching, and troubleshooting technical problems. 5

7 Each help area uses a unique style to aid the user from step by step procedures from images to tables. Overall the content is well written and informative giving users a good mix of formatting information to best aid user troubles. There is some content that appears to be miscellaneous such the Search Widget for Your Site its location may need to be reviewed. Below are some examples of how the aforementioned help procedures are displayed. 6

8 Low-Level Evaluation I have chosen to make a low-level evaluation of the Kids Space page found within the Toronto public library website. I will be evaluating it base on the same principles of consistency, simplicity, efficiency, and overall usability. IE 11 Chrome v61 I will begin by noting that the page layout is broken in modern web browsers. This problem persists on Firefox and Edge browsers as well. I will evaluate the intended layout but encourage that this issue is addressed to increase the number of users who can view the content as designed. The use of playful imagery and child-friendly colours and textures are appealing to a young user. This aspect shows a thoughtful approach to better the experience for the intended user. The use of a character to illustrate what a button does is clever and appealing as it visually instructs the user of where they are going matching their real-world expectations. 7

Having large buttons with large fonts also improve the efficiency of use preventing errors and making information simple and manageable for its intended user.

Having stated these positive aspects I must begin to point out some issues that are apparent. There are inconsistencies with font sizing.

9 Having large buttons with large fonts also improve the efficiency of use preventing errors and making information simple and manageable for its intended user. There is a use of consistent fonts that at bold and sans-serif making them more easily read on smaller screen resolutions increasing readability and users having to overly concentrate to see content. Having stated these positive aspects I must begin to point out some issues that are apparent. There are inconsistencies with font sizing. The most obvious impact on users would be the navigation links. These categories appear to be fairly clear but some can be disputed on necessity E.g. Grownups. Additionally, there are many options a young user would have to remember. The current site location is underlined and could be more prominent. Overall the navigation should be bigger and clearer to suit the intended user base. The search bar in small and in an unconventional location as it is on the top right of the page. This is a common feature in today's website design and should be larger, more centralized, and prominent. This main mage does not address the main goal of the user as its primary goal. The ability to search and find a book should be displayed clearly to help accelerate users to this desired outcome by enhancing user control and efficiency. There is a lot of information that is all centralized on the screen no efficiently using the page real-estate to better chunk content in easier consumable groups. User accounts can only be accessed from a small greyed out link on the footer of the page. I recommend this feature be prominently visible to match user current standards and expectations. 8

10 Link changes can be displayed with more evidence. There are not enough contrasting colour cues to indicate to users if the content is clickable or interactive. I would recommend improving the visible changes for linked content whether it is a hover state or selection. The user base has specific requirements that are currently being underserved. Overall there are many aspects that can be improved on this page. The recommendations I ve made about contrast, positioning, colour, and scale is applicable throughout the design of the webpage. Many of these changes should not be difficult to address and can be implemented without overhauling all aspects of the page. I believe there are already great aspects of usability that work for the user with the previous design and by researching and testing what best works we will be able to incorporate a more refined and enjoyable user experience for the desired audience. Overall Global Improvement Recommendations The Toronto Public Library site overall has many complexities as there are many things to consider from the user s perspective. This is to be expected from such a vast resource catering to so many user types. However, I have a few board recommendations that can improve usability. An important aspect of usability is navigation. The site's navigation could be enhanced by using a breadcrumb system. This will be sitewide and help users quickly get to where they want and know where they are within the site. Below is an example from the Centennial Colleges website and you can clearly see the path that was taken and the current location within the website. The main takeaway I would like to emphasize in my evaluation is the inconsistencies throughout the pages. These must be addressed as they break the user s concentration and pulls them away from the experience the library wishes to promote. The user should not have to learn and relearn how to view and access content. Thus, it is recommended that all efforts are made to standardize content and structure throughout all pages. It is by far the least complex and practical way to improve the usability of the site but requires a solid strategy with 9

11 documented choices so reduce any deviation. This strategy should include legacy sites and partner sites. This is not to say that all areas should be the same as different users have different needs but basic underlying structuring of information can benefit all parties by reinforcing standards. In conclusion, by creating a more consistent experience for the user they will be able to achieve their goals with less confusion and barriers. Creating a more confident user base that can access the desired content with ease and precision improving their overall engagement while reducing negative or erroneous outcomes. Happy users make for better satisfaction across the board and should be what we all strive for as designers. 10

Heuristic Evaluation of Enable Ireland

Heuristic Evaluation of Enable Ireland Aesthetic and minimalist design Pages should not contain information which is irrelevant or rarely needed. Currently, there is too much content on the Enable Ireland