Usability-Redesign

Accessibility & usability are two very important concepts when discussing the using of the web by the worlds very large, and diverse population. Accessibility concerns the idea that everyone should be able to gain the same information and experience/complete the same functions on the web/through software regardless of their level of ability or existence of a disability, or method of access (Thatcher, 2012). The concept of usability, on the other hand, focuses on the design of a web page or software in such a way that one’s experience and ease of access when navigating or otherwise operating said web page or software is maximized and simplified (Nielsen, 1995). In this essay, I will assess the accessibility and usability, via the principles of the three priorities of the Web Accessibility Initiative Guidelines (WCAG) and the aspects of user control & freedom, consistency & standards, aesthetic, and help & documentation respectively, for both my personal web portfolio and a handful of professional organization websites.

My own web portfolio on WordPress.com overall is fairly accessible and moderately usable, however, it does feature several significant short comings. For accessibility, all the checkpoints for the WCAG’s Priority 1 level of accessibility are met, all non-text elements have text equivalents, documents are organized well, the presentation is simple, and the site provides a stable screen interaction experience. Furthermore, my site meets all of the WCAG’s checkpoints for Priority 2, which primarily focus on a site’s handling of color, layout, language, and markup changes, & the controlling of page refreshes, auto-redirects, blinking, and popups. It is worth disclaiming that the reason my site meets these criteria is its simplicity and use of the WordPress.com platform which is, for the most part, already in WCAG/World Wide Web Consortium (W3C) compliance. If you were to add more custom HTML edits, or use a less hand-holding development platform, the Priority 2 level is where you would begin to see major accessibility violations. The last level, Priority 3, is the hardest level of compliance to meet as it primarily handles the exact navigation, specification, and instruction that the site developer would have to personally, and purposefully, implement. My portfolio does not meet the majority of these checkpoints for Priority 3 (World Wide Web Consortium, 1993). Usability is a much less structured analysis, and due to the simplistic/beginner nature of my site, many of the usability principles are not violated; however, the principles of user control & freedom, and consistency & standards, are not necessarily met. The overall navigation of my site is difficult due to the logic-lacking layout from the home page to the individual pages of the blog. Improved navigation and making sure there is content behind all menu clickables (which there currently is not) are two simple redesigns I could make to my site. Additionally, there is no support for the ability to exit, undo, or redo, outside of the functionality provided by WordPress & the user’s browser, if an error were to surface; this violates the user control & freedom aspect of usability. Additionally, again due to poor layout, consistency and standards are completely nonexistent on my site as the experience is fairly random & sporadic outside of the information I personally penned for the purposes of informational content. It should be fairly clear at this point that meeting the principles for accessibility & usability is not an overly difficult task, but it does require careful attention and deliberate planning on behalf of the developer. Next we will see how the websites of ‘professionals’ fare under this same analysis.

To best construct this analysis of professional websites from entities like Nike, Toyota, the CDC, and more, I will first identify the web pages exemplify the principles of accessibility and/or usability as outlined in the analysis of my own web page. Following the good, I will specify the bad sites that do not exemplify those same principles of accessibility and usability. Lastly, I will provide a brief summary of potential redesign options for the sites that exhibited poor adherence to these principles. The websites for Toyota, CDC, and the Canadian Government are all overall compliant with the accessibility priorities and employ the usability principles we’ve discussed. Toyota meets all the criteria of text and non-text elements for WCAG compliance as it does not feature many of the trendy, yet non-compliant, bells & whistles such as moving images, auditory multimedia, and auto-redirection. Toyota’s site excels in accessibility in its handling of images, specifically in its use of basic images and strong complementary text, identified by the left-most red circle in the below screenshot. Additionally, the site has great usability (specifically, control/freedom & aesthetics) as the blow screen shot shows the site’s straightforward presentation, a selection of the most prominent information to reduce the need for deep site searches, and a simple back-to-top button (right-most red circle).

Toyota Screen Shot
Toyota’s handling of ‘important’ information links on its home page.

A very important aspect of accessibility has to do with the handling of multiple languages. The below screen shot shows a very clear and readable example of how the CDC’s website excellently handles this accessibility requirement.

CDC Example 1
Toyota.com offers several language assistance options at the bottom of every page.

Additionally, the CDC does well with the accessibility principles of header element use and consistent use of navigational mechanisms in the top section of the home page (featured in the screen shot below) which features alphabetized index navigation, and a selection of main topics (i.e. “Diseases & Conditions” & “Healthy Living”) that are used in a consistent fashion throughout the site. Furthermore, the site gives you an option for browsing in Spanish upon first entering the home page. From a usability perspective, consistency & standards are clearly met, however, I’d like to draw attention to the ‘minimalistic’ design of the website. A huge problem in most sites, especially in home pages, is the overload of information. Temptations such as advertising revenue & the need to keep users on your page for marketing statistics, many sites disregard the usability principle of keeping a minimalistic view that can be replicated on every page, but the CDC avoids these pitfalls spectacularly.

CDC Example 2
The CDC’s homepage is a perfect example of a site having highly accessible site navigation.

Our last accessibility & usability compliance superstar is the website for the Canadian government. Before ever entering the website, the user is asked of their preferred language.

Canada Example 1
The Canadian government knows its users well enough to preempt potential accessibility issues by asking for language preferences prior to accessing the home page.

Upon entering the site, you again are greeted with the option to switch languages (easily undo a site action). The second big accessibility compliance win for this site is the pause/play feature for the site’s moving images. The majority of the sites that include moving images or a set of top stories that automatically cycle through the associated images for the user do not include the ability to stop the movement, which is a W3 compliance must.

Canada Example 2
The Canadian government’s site excels at usability with its ‘most requested services and information’ section and shows strong accessibility with the pause button for the rotating image tiles.

From a usability perspective, the images come with corresponding explanation text, and the links for the “most requested services and information” are immediately there for the user. Secondly, for usability, unique to this site is a button to “Report a problem or mistake on this page.” Although, this feature only roughly fits into the usability principle of help & documentation, this feature is huge for the continuous improvement of the sites accessibility & usability.

Canada Example 3
A key for strong usability is giving yourself a way to obtain feedback on usability shortcomings. Note the red arrow showing how Canada.ca enables feedback.

Unfortunately, not all sites demonstrate the excellence of the above three. Nike.com, libertyvan.com, exmouth-view.co.uk, mrbottles.com, and pennyojuice.com, all fail to demonstrate the necessary principles of accessibility & usability.

Nike Example 1
A key accessibility rule: never have moving non-text elements on a page without enabling the user to stop said movement.

For starters, Nike completely flunks all measurements of accessibility. The image you see is actually a still from a video that never stops. Concerning usability, the help bar in the top right, features only ‘help’ information relevant to Nike’s business operations & its customers; there is no link for someone experiencing accessibility difficulties on the site. Additionally from a usability perspective, the site tries to feel very collage-like, at the expense of the usability principle of standardization & consistency (seen in the below image which is placed directly below the video on the site seen in the above image). Furthermore, none of these non-text elements in the below image feature explanatory text that allows the images to meet accessibility compliance.

Nike Example 2
Accessibility mandates all non-text elements must feature explanatory text. Usability principles explain that a website should have consistency in its layout & presentation.

Our next example is the site for Exmouth View Hotels. This site violates the accessibility principles of consistent background coloring & ensuring a consistent experience across platforms (evidenced by the fact the whole site doesn’t fit in the confines of the web browser window).

Exmouth Example
Websites should consider the degree of contrast their background and other color choices do, or do not, create

The site has problems from a usability standpoint as it features no type of help page what so ever and the headings (on the left side of the page) bring you to other pages that do not keep the heading or the layout consistency of the home page (see image below for intra-site page comparison).

Exmouth Example 2
Intra-site webpages should have a layout and navigation pane that mirrors every other page.

Next, is mrbottles.com, which was very close to full compliance, but not quite. The site features a moving image that cannot be paused (noted by red arrow in first image) and has no associated text with its non-text elements (seen in the second image); both are violations of accessibility principles. The site does poorly with usability as the colors are straining and the navigation layout is nearly non-existent.

Mr Bottles example 1
Note this site’s text descriptions for each bottle
Mr Bottles example 2
This site needs image captions, and a color scheme less eye straining than white text & multicolor images on black.

Our next example is the website of libertyvan.com. It is terrible, on every measure of usability & accessibility. The background colors violate all accessibility guidelines aimed to help the visually impaired. The text is poorly laid out, switches font size, style, and color constantly violating several accessibility and usability principles simultaneously. Lastly for usability, there is, as expected, no help page for the site.

Van Example 1
Libertyvan.com is the perfect example of everything NOT acceptable for usability & accessibility.

Our last example for poor accessibility and usability is pennyojuice.com. First, the site requires flash which makes it unable to be used on many mobile devices. Secondly, there is literally no assistance for any potential errors, nor is there any site documentation what so ever. For usability, just look at the site. I personally have no idea how to physically interact with the site. It is safe to say that if you cannot “use” the site at all, it violates all principles of use-ability.

Penny o Juice example
Accessibility & usability principles require a site be accessible & usable on all platforms users may access the site on; that is, an equivalent experience can be had with any method of access.

For the five sites that failed to meet the principles for accessibility and usability, all hope is not lost as some improvements can be made. All of the webpages can employ the following recommendations to fix the majority of their compliance problems. First, categorize all of your site’s information into 4-8 main buckets that can be used as category headers in a navigation bar that is placed at the top of the website (very similar to the navigation pane for the CDC). Secondly, use a white or off grey background color. Do not use images, patterns, or strong colors for backgrounds, and limit your secondary colors to a maximum of 3 that are not over used and do not create a strong visual clash. If there are concerns of visual accessibility given your color and design choices, implement a “black & white view” button at the top of your page (similar to the click to switch to French button for the Canadian website). Third, no flash or other type of multimedia player that isn’t standard issue for mobile operating systems. Fourth, don’t use videos, image cycles, or moving non-text elements without a pause feature. Lastly, just keep it simple: try to stay under 500 words on the home page, feature only essential non-text elements, and use conventional layout templates/formats.

All this information probably sounds like a headache and a half, however, it isn’t all that difficult as most of the principles are easily tackled with common sense and a little bit of research. Primarily, the most important thing to remember, is that accessibility and usability are vitally important. Not only do they ensure equal access and an ease of use for all patrons of the internet, they ensure that your webpage always has your viewers leaving with a memory of a pleasant experience of both your site and what it stands for.

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s