2b Usability

Determining purpose, usability, and accessibility

Good web usability is defined as: easy to use, quick to learn, and providing an overall satisfying experience. A well-designed, usable site aims to enhance the user experience by elevating a website’s perceived efficiency, elegance, and clarity. 

Look at the following websites and identify the following:- 
• What is the purpose of the website? 
• What is its functionality? 
• Who is the audience? 
• Who created the website? 
• How will the audience view the website? On desktop or laptop computers? On mobile devices (tablet computers or smartphones)?
• Remember the Design principles!

 EXAMPLE 1: Riverside Art Center  EXAMPLE 2: Gap  EXAMPLE 3: Headhunter Hair Styling



How to design for usability 

In addition to the importance of using industry standard design principles, user-friendly websites also employ appropriate navigation and usability standards. 

Looking again at the above website examples and think about:-

• What categories of information do you find in the websites? 
• Where are these categories located? 
• What can you say about the amount of information you can find in any particular area? On the entire website? 
• What type of navigation appears on the pages? Is it consistent? 
• What navigation choices are provided? • How does the design create consistency? 
• Is the appearance consistent? 
• Are design elements common among the pages? 
• What page elements identify the site? 
• Name some benefits of consistency, such as improved usability. 

Read the HOW TO DESIGN FOR USABILITY guide and make notes.

How to make websites accessible

Creating accessible web pages has never been more important than today. With the adoption of accessibility standards in the United States, Canada, the European Union, Australia, Japan, and other countries, designers and developers need to ensure that people with disabilities can access the contents of websites and web applications, as well as the authoring tools used to create them. 

Read over and make notes on the handout - what considerations will you need to make for your website?


Exploring usability and accessibility

In pairs, explore TWO websites that address the same topic and have the same purpose so you can compare ease of use and accessibility. 

Choose topics of interest, such as: 
• Sports: www.fifa.com, www.ussoccer.com and www.wnba.com 
• News/media: www.cnn.com and www.nytimes.com/ 
• Entertainment: www.ew.com/ew/ and www.etonline.com/ 
 
Using the Usability and accessibility worksheet, compare the two sites for usability and rank the sites, ranging from easy to difficult.

 Questions for guiding inquiry include the following: 
• What types of navigation elements are used: menus, hyperlinks, images, something else? 
• As you navigate, how many clicks does it generally take to get to information you are seeking? 
• As you navigate, do you get to the information you are expecting? 
• Is the site structure apparent? 
• How long does it take for pages to load? (Typical visitors will wait three to five seconds for a page to load before moving on.) 
• Does the website look the same in different browsers, on different operating systems, and on different devices? Is the website responsive to different screen sizes and form factors? 
• Is the text readable? Is the text uniquely styled? If so, does the styling add value to the purpose? 
• How does the use of text, navigation, and site structure make the site easier or more difficult for visitors? 
• Are there clear titles, headings, or other visual elements that specifically help organize the information? 
• Does the site contain interactive media? If so, does the interactive media add to the purpose and usability of the site or is it unnecessary? 
• Is the colour contrast and brightness between the foreground and the background appropriate for users with impaired vision? 

Rank the sites for accessibility, just as you did for usability, ranging from easy to difficult. 

Questions for guiding inquiry include the following: 
• Do the images have alternative text (Alt text) so the text descriptions can be read by screen readers? 
• Are all the links, including embedded links, labeled so they can stand alone? 
• If there is tabular data, do tables have header rows? 
• Are there clear titles and headings that help organise the information for someone using a screen reader? 
• Is the navigation scheme positioned conveniently for someone using a screen reader? 
• Can a site visitor use the tab button to access all elements on the page/site? 
• Is colour the only element used to convey emphasis? 

Write a detailed blog post that shares what you learned about website analysis, usability, and accessibility. Include discussion about how what they learned will inform how they approach future web design projects.