ASSIGNMENT #2 USABILITY AND ACCESSIBILITY – MYHAMILTON€¦ · 14 February 2012 Page 3 Nielsen and Loranger describe usability as “a quality attribute relating to how easy something

ASSIGNMENT #2 USABILITY AND ACCESSIBILITY – MYHAMILTON.CA Jennifer Coombs February 14th, 2012 Information Architecture Professional Learning Centre Faculty of Information Studies University of Toronto Note: This paper will not cover the actual functionality of 3rd party search engine software such as Bibliocommons, Tumblebooks, Overdrive and others. These engines are proprietary systems that are add-ons to the MyHamilton.ca website, and out of scope of this analysis.

Information Architecture – Assignment # 2 www. Myhamilton.ca

14 February 2012 Page 2

The MyHamilton.ca website (MHW) provides several major functions for the inhabitants

of the city including finding books, exploring city events and activities, and learning about

the city of Hamilton proper. Envisioned as one place to find everything that is “Hamilton”

it aspires to be a community hub, Library, and business center.

Overarching Challenges To Usability

Overall look and feel. MHW has many page alignment issues, duplicate information,

and even some pages that are completely blank. Solution: Site moderation to ensure

consistent look and feel across all departments and user submitted content.

Site Identification is unclear. The questions ‘Who is myHamilton? Are they a Library, a

Government organization?’ are not easily answered. Visual cues from the global

navigation are confusing. Solution: Supply a link to an About MyHamilton.ca page for

context. Create clear distinction between community and Library and present them as

two separate entities that can share information.

Clarify traffic patterns. Pages within the website are very dense with links, and the 3-

column layout adds to visual clutter. There is no obvious next action, instead too many

choices on each page. Solution: create focus on landing pages, and obvious next

actions, leave detailed content for 3rd level links. Add teasers to homepage sparingly.

Multiple search options. The website offers confusing points of interaction (forms,

search tools). In the spirit of highlighting community listings, and not just the Library, the

homepage search only shows 2 search options (Website, Library). There are at least 5

other major ways to search on the Library side of the website. User face anxiety when

there is no summary page listing all available options. Instead these options are

sprinkled throughout the website. Visitors must dig to find them. Solution: Even if the

databases remain separate, creating a summary all search methods (Website,

Bibliocommons Tumbleweed, Freegals Music, Old catalogue, Magazines, Research,

eBooks, Audio Books) will increase usability.



Nielsen and Loranger describe usability as “a quality attribute relating to how easy something is to use. More specifically how quickly people can learn to use something, how efficient they are while using it, how memorable it is, how error-prone it is, and how much users like using it. If people can’t or won’t use a feature, it might as well not exist.” Nielsen, J. & Loranger, H., 2006. Prioritizing web usability. Berkeley, CA, United States: New Riders Press.

Detailed Analysis 10 components of usability, will serve as an outline to analyse myhamilton.ca (MH).

1.0 Site Identification

1.1 Context. What is MyHamilton.ca? – Limited description of the website on the homepage, user need to understand the context of the Library along side 6 other links including Government, About Hamilton, and others. On website launch their was a post about the new website but this was not archived.

1.2 Additional context - No link to site map, no explanation of partners, no obvious join Myhamilton.ca button to sign up or to an explanation of the benefits

of a Myhamilton.ca account 1.3 Brand Identify in deep links. If user enters the website from 3rd level link on

the community side, they are surrounded by business directories, and arts events. There is little context to trust this website as the ‘official’ city Library.

Partial Success: The logo returns the user to either the MH Home, or the Library page. The landing pages give users a better overview of the site.

2.0 Efficient Navigation

2.1 Traffic flow. No obvious traffic pattern, primary and secondary actions should be more overt, too many choices.

2.2 Primary navigation is clearly present, label language is straightforward, buttons are large and multicolored for differentiation, have a hover and down state to give user feedback,

2.3 Overall navigation system is not efficient. See more 3.1. 2.4 Secondary navigation. Secondary nav. breaks and continues on two lines in

several subsections. Challenge when creating a secondary nav. that runs horizontally is that physical space is limited.



2.5 Search is the most important feature on the website, but is not always in the same position which in not effective. The search box in the 3rd party software changes location and looks very different. The result creates a disjointed site design and visitor unease.

2.6 Alternate Search Options: (a) Navigation by Search box. The search on all MH pages includes

two filters, Website and Library. Tooltips further define each filter option. See more about challenges and search results in 9.2 through 9.5.

(b) Navigation by Browsing. Cross listings (know as a polyhierarchical model) allow for flexible browsing, however the amount of options in the side bar takes value away from the main content area. When too many items are cross-listed, the hierarchy loses value.

(c) Navigation through interactive elements. Javascript slideshow (with HTML text for accessibility) provides an alternate browsing mechanism. Visually a nice break from text heavy pages.

(d) Navigation through Breadcrumbs – Breadcrumbs should provide valuable wayfinding on such a large site. Users cannot rely on MH breadcrumbs. Although they are in the same place when they do exist -they are missing from both 3rd party search engine pages, and missing randomly throughout the site (e.g. Jobs & Learning, About Hamilton)

Success: Colour coded navigation by section, good indication of change in section

Success: Alternate navigation by footer links – set of text links listing an informal site architecture, alternate method of navigation, great for SEO.

3.0 Organizational Clarity

3.1 Information hierarchy. Library is more than 90% of the website, yet sits at the same level of importance as 6 other primary categories. Some sections (Government) are only one page long. This is one of the major flaws in the information architecture of this website. It is very hard to fully reconcile this navigation in context of real world expectations of a Library. Why there is so much emphasis on a handful of pages, and so little emphasis devoted to the Library at the primary navigation level create confusion.

3.2 Secondary page content is disorganized. No standard design pattern utilized. See more in 4.2



3.3 Secondary navigation menu in Library section. 2 out of 6 links in the Library section are direct links to 3rd party search engines. These pages take longer to load (with no status indicators) and when you arrive, look different than the regular pages. There is no warning that these pages behave differently than the other 4 links in this menu. Solution: These task-oriented links should be grouped with the search box and not sit in association with more topic based links. Mixed organizational schemes can co-exist (preferably in the top level nav.), however the search features on this website deserve more prominence since it is one of the most used features.

3.4 Multiple navigation areas for the same kinds of links - put one function in one place on the page and leave it there. Kids and Teens – why aren’t these categories included in the primary navigation, what makes them different to merit their own separate navigation?

3.5 Interactive Elements. Log Ins. Two website Log Ins cause confusion and distrust. The Library and MH both have separate sign up/ log In procedures. Catalogue log In is at the uppermost right hand corner of the main page. MH log In is only found when you want to register an event. There is limited help, or marketing as to the benefits of account membership for MH.

3.6 Intuitive linking. Events and How Do I? sub headers should be actual links. If they were actual links, unnecessary icons/ could be removed to help declutter page. In this case, Full Listing (as a graphic) could be removed.

3.7 Archives. Where do old posts, news announcements go to live permanently? For example The Music page (Library>Books, Movies, And Music>Music) lists several suggested databases to search for movies. What if 4 years from now there are dozens of suggestions. How is this information stored? Presumably simply adding more and more pages is not the strategy. Will the older posts drop out of view? Or will an unseen sorting mechanism take over? MH needs a strategy for adding and managing new content to the existing.

3.8 Content Pages. Each page needs immediate recognition of a central message. In Library >Books, Movies, and Music, the main landing page has immaterial content. This local hierarchy should be further analyzed. Through my short run testing sessions with colleagues this section particularly created uncertainty. I question why the added layer of Books, Movies, and Music should exist, when each page also had their own landing page. The amount of information on the upper ‘umbrella’ page does not merit the extra page. Top level label should be reworded (Collections?). Book Club Kit could also move to Programs and Services.



4.0 Clear Labeling

4.1 Repeating labels. Avoid duplicates such as the set of links labeled “How Do I?” and the set called “Are You Looking For?” Instead group related items together where at all possible. They are to close in meaning for a visitor that faces language barriers. Any exact duplicates on the page should also be removed to reduce clutter.

4.2 Page subtitles. Content within the community pages is classified by topic. Since the actual content lacks uniformity each sub page becomes a bit of a dumping ground of loosely related information. Solutions: (i) develop a set of sub titles for all community pages. Preferably the set of sub titles will be broad enough to cover all scenarios, yet small enough so that consistency and patterns will develop page to page.(ii) revise layout, reduce the amount of links in the left and right columns. Very difficult to read a busy page with links on both left and right hand sides.

4.3 Inconsistent Labels. Link names do not always match the page title. For example, in the About Hamilton section (i) Living in Hamilton (is the label), and “Your Guide to Health, Environment, and Public Transit in Hamilton” is the page title.,(ii) In the Books, Music and Movies section, Music (is the label) and “Music Collections” is the page title.

5.0 Consistent Design

5.1 Link styles. Although size and colour are fairly consistent, link hover styles are not. Within the primary and secondary navigation elements, for example, one type of links have an underline on hover and others do not. Purpose? See more in table 1.

5.2 Inconsistencies. Update errors, and page layout inconsistencies (missing links, missing breadcrumbs, random sub titles). Solution: Site moderators would ensure that the quality and consistency of design and page layout was appropriate across the entire website.

5.3 Similar placement. Keep like information grouped together. Do not move the placement from page to page. For example search box moves, and search page results (SERPS) are formatted differently on the website and Bibliocommons page. Solution: Since Bibliocommons is a 3rd party system, why not follow their lead and make MH consistent with it.



Table 1. Inconsistent link behavior.

What Link with

Underline that disappears on hover

Link with nothing on hover

Link that has underline which appears on hover

Link with colour background change

Primary Nav - - yes Secondary Nav yes - - Contact Us in left column yes Content Sub Headers yes Events Links yes How Do I? Links yes Footer Links yes Footer Utilities yes

6.0 Matching User Expectations with real world metaphor

6.1 Clarify branding. Reposition categories to present Library as an autonomous

entity to model a bricks and mortar Library. See more 3.1 6.1 Organization based on departments. The Books, Movies and Music section

showcases the types of items available at the Library. The hierarchy feels confusing. It feels that the organization is re-creating the way the Library departments are set up, instead of focusing on user needs. There is nothing wrong with the labels, however this list of Books etc.. has the same hierarchical weight as the Catalogue. This list of topical items Books, Movies and Music should be contained within the Catalogue instead.

7.0 Effective Visual Design

7.1 Thumbnail Photos. Better image choice for teaser information. Need macro photography to make small thumbnail photos more engaging. If not available remove photos. At the current scale they are ineffective. See teaser information example 7.1.1

7.2 Competing elements, no one focus on page. Items are too similar in weight. Increase size difference of fonts for better hierarchy, use graphics of different sizes for texture and variation. Lead the eye around the page, instead of having user frantically dart from one object the next.



7.3 Non-essential items clutter page. Get rid of all but essential elements (e.g. get rid of AskOn Logo, move affiliated link to Programs and Services). Reduce the amount of links on landing pages, reserve this level of detail for deep links.

7.4 Inflexible 3-column layout – Solution: revise with a 12-column grid for more flexibility.

7.5 Placement of buttons: In the secondary library navigation, the button Library is physically too far away from the Catalogue button. Awkward, considering it is the most used feature on the site. A visitor must go the far right of the screen, hit a button, and then move the cursor to the far left to hit another button.

7.6 Useless Links. More Like This category does not have enough closely matching content to merit a grouping of items. Most items that are posted on this list are not closely related, and in some cases are not related at all to the current page article. Should be removed until descriptive metadata can be organized for better cross-referencing.

7.7 Unprofessional layout. MH is in need of an overhaul for page layout failures. There are too many to list fully. Here are two examples: (i) Community Hubs; blank pages, broken secondary navigation (spills over to two lines, looks unprofessional), see Example 7.2.1. (ii)Logo on Bibliocommons page header have severe alignment issues.

Example 7.1.1 Ineffective scale of photography. Teaser information in general is hard to scan.



Example 7.2.1 Missing content .

8.0 Supporting Readability and Scannability

8.1 Clear indication of primary content on each page. Primary content is in the same place on each page, however some pages use a large box of links right in the middle of the content area with the title “Are You Looking For”. These links are not appropriate right in the middle of content. They scream of an attempt to fix a bad site design. Can’t find something (because we did not put it in the right place? then here, we will interrupt your flow of reading to force more navigational links on you). Solution: Move, and group with other navigational items in the side column.

8.2 Mix of function in column information, must read it all before committing. 8.3 Formatting of teaser information. Text should line up with text not with Image.

Hard to quickly scan down the page with your eye moving over each image. Place images away from the start of each sentence. See Example 7.1.1



9.0 Facilitating User Tasks (Prevention of errors, Provide feedback of errors, recovery or providing an emergency exit…)

9.1 External link warning. When a user clicks on a link in a different format (PDF) it opens in the same page with no warning. Best practices dictates warning the user of format change and a suggestion to open in Acrobat Reader (should also provide link to Reader download page).

9.2 Search terms need to be 100% accurate. For example when searching for

“Perceptions of Promise: Biotechnology, Society and Art, a panel discussion”

both “biotech” and “bio tech” returned null results. Solutions: add allowances for misspellings, as well as strategies such as prioritizing hits based on intrinsic value, lower placement for older documents, explicit page summaries for scanning, and descriptive metadata.

9.3 Search suggestions. Search suggestions are weak (e.g. searched ‘Biotech’ and the search suggested ‘protected’). Solution: more detailed metadata descriptors.

9.4 Search Results (SERPs) should be segmented for easier readability. See better example see 9.4.1 (Overdrive eBook search). In the MH search, first results are delivered in a seemingly random list of results. Can then be filtered.

9.5 SERP discord. Using the ‘website’ filter (one of two options) to search from the homepage, the search returned 12 results with 3 results described as a ‘library item’. When the ‘library’ filter is used for the same search terms it returned 85 results. Why are there 3 items listed for the Library in the ‘website’ only search? Filtering needs more transparency. Varying results make a user distrust SERPs. Unsure, user may try using both searches.

9.6 Dialogues on different pages. Library>Books, Music and Movies> Book Club Kit. When ordering books for a book club you must look at the books in a PDF on a separate page, then you must cut and paste up to 30 choices into entry fields. And fill in corresponding dates in another location. Finally you must then fill in a CAPTCHA challenge to finish the order process. Once finished you cannot review your order before committing. A long arduous process. See example 9.5.1.

9.7 Custom 404 page. An error page on MH directs visitors to the homepage and provides a direct link to the search page. This search looks different from the search box on the main page, and does not have the same options seen on other pages (filters: website and library). It has no options at all. User is not given same choice on both from one page to another. Why?

9.8 Discord in similar lists. The list of Events for MH and the list of Events for the Library produce only slightly different results. The community events have both



sets of events but on the Library side of the website, you can only see Library events. This not obvious and very easy to miss.The lists on both pages are physically identical except for slight variation in the name.

9.9 Form insanity - “if you do not have an email please write [email protected]“ in the form. Enough said.

9.10 Accelerators. No shortcuts for most used items. 9.11 Status updates. Page loads are very slow. No indication of loading page on

website. Children and seniors (and everyone else) would welcome a feedback message while the website or database loads.

9.12 Status updates. MH successfully provides feedback during sign up process. See example 9.12.1

Example 9.4.1. Segmented search result in eBook Collections.



…cut in two due to length…

Example 9.6.1. Multiple dialogues to fill in Book Club Kit Form. Information to be filled in is found on a separate PDF file.



9.12.1 Feedback during account sign up.

10.0 Providing Help

10.1 Missing an overview of all the ways to search. 10.2 Need support file to the different types of log in and benefits of each.

Success: Tooltips in search box – good integration of help directly into the page.



Accessibility Users vary in assumed and unexpected ways. Language, gender, age, cultural

preference, computer skill level, and constraints (cognitive and physical which may be

temporary or permanent) all create accessibility barriers. For the purposes of separating

the terms accessibility and usability, successful accessibility is a subsection of good

usability.

The HPL markets to 3 main user groups - newcomers, families and seniors. A 1995

American census revealed that 51% of people over 65 reported some level of disability.

Making a public Library website accessible not an option.

Visual Elements

Colour Hue and Value

According to AERT thresholds (AERT Colour Contrast Analyser) the MH background

navigation colours fail in hue and contrast, Blue light blue link colours fail the both colour

and contrast tests as well. Colour blocks behind the navigation should be removed, or

the colours should be toned down with less saturated colour blocks and to higher

contrast in text. Black text would create a more accessible navigation

Challenge: It becomes apparent when the navigation colours are converted to greyscale

that the Home and About Hamilton buttons are too close in value. There is a white rule



line separating items, but for someone with limited vision, or several kinds of colour

blindness (Deuteranope) these buttons would easily blend together.

Solution: Create a version of the navigation that relies on value over colour. Darker

value, and more saturated hue is needed. Or the reverse,, with unsaturated colours and

black text. Subtle colour effects are unsatisfactory. An alternate accessibility page with

black text on a white screen would be the most effective.

Colour testing with www.vischeck.ca

Headings and subheading. Headings are generally successfully used and concise on

MHW, however subheadings and actual grouping of page information is not as

successful. Sub headers are irregular and lack consistency. On some pages sub

headers don’t exist, and other pages they are not used effectively. (e.g. Arts and

Recreation/Performance/ or /Culture). This will make it difficult for search engines and

screen readers to parse these pages (let alone what it does to readability). Standard use

of page subtitles would help improve readability for visitors with language barriers. See

more 4.3

Screen size. Website was designed as a fixed non-scaling pixel layout. A fluid layout

would increase the ability to view the site across multiple user agents.

Meaningful links. The MHW does a fairly good job at using meaningful links. There are

a few areas links that should be reworked (e.g. A listing of all policies)

Font Size. MH successfully uses scalable text displayed in ems.



Functional Elements

Alt Tags. Missing some descriptive alt tags (e.g. Partner logos),

Form labels. Offer good compliance with label attribute (label for="Library") to

alleviate screen reader confusion when reading/ associating names with form fields}

Interactive elements. Library homepage slideshow uses Javascript and text based

captions. This is accessible to screen readers. The animation features stop and start

buttons allowing for user-controlled timing.

Order of information on page. Sensitivity to alternate screen reader technologies could

be handled through WAI ARIA roles and a consideration of content order on page. At the

moment without CSS turned on the search feature is halfway down the page, the

warning box with timely news announcements is also halfway down the page.

Navigation and the Keyboard. Currently there is no way to use the tab key to cycle

through the navigation.

Automated Accessibility checkers (achecker.ca, wave.webaim.org) were used to do

accessibility testing on MyHamilton.ca; the following problems need to be resolved.

• Declare groupings as fieldsets (radio buttons on main page)

• H6 label in header. Precedes use of H1 element. Used incorrectly for

styling purposes, with no semantic meaning.

• No Declaration of language code.

Successful: Decorative images have been incorporated properly through CSS instead

of HTML (header image).



Accessibility as a continuum

Adherence to rules is good. Breaking rules when there is a reason can also be effective.

Strict adherence to all usability and accessibility guides may lead to a website that

functions but it may look bland and repels visitors. I am a fan of Apple’s user experience

guidelines, in that they use terms like “delight people…”. A sense of wonder is an

important part of user experience that doesn’t necessarily make it to the w3 chapters. If

you love something you will use it again and again. The British Broadcast Corporation

provides a benchmark example of excellent usability and accessibility. Accessibility

features are there if needed, but do not become a liability for those that do not wish to

use them. Their site is visually engaging, clear and easy to read.

Finally, two fun perspectives:

I wrote this while researching to keep some of the acronyms straight:

W3C set up WAI to publish WCAG, these are in turn used by CDNs and others to

reduce access barriers to digital information and protect from 508 lawsuits.

Twitter Fun: For people who use twitter, the most common used hashtag for accessibility

is #A11Y. Some people believe this hashtag itself is inaccessible, and prefer #AxS or

#access or even #accessibility.

Documents

ASSIGNMENT #2 USABILITY AND ACCESSIBILITY – MYHAMILTON€¦ · 14 February 2012 Page 3 Nielsen and Loranger describe usability as “a quality attribute relating to how easy something