IAT-339: 06 Usefulness

IAT-339: 06 Usefulness — A slide deck


Lecture outline

Covered this week:

  • Web accessibility
  • Usability

Lecture slides will be made available on the day of the lecture.


Where usability meets utility

P02 Scope

Just some reminders

We are expecting the site to be built out fully, with no broken links, but:

  • Only showing us 2-3 items (and having all other links direct to those items) is ok
  • Only showing us one flow through the purchase process (and having all links direct there) is ok
  • Having forms act as links instead of actually collecting information is ok
  • Duplicated content such as the same product image (x20) is not ok

Moving Up

Experiencing an interface

Maslow's hierarchy of needs converted to web-design consideration
Designing for Emotion (Walter, 2011)


The user must be able to complete their task.

Usefulness vs Usability

Including utility

Nielsen Norman Group and usability:

  • Usability: how easy and pleasant the website is to use
  • Utility: whether you get the features you need
  • Usefulness: usability + utility

Utility Concerns

The user's revenge

0.1 second, 1 second and 10 seconds are the numbers to remember for, making something feel instantaneous, keeping the user's flow of thought, and keeping the user's attention.

"Response Times: the 3 Important Limits" (Nielsen Norman Group)


The web is built to be accessible by default, we tend to be the ones who break it.

Accessibility for Everyone

Regardless of if you have a disability, how might the accessibility of a website you are using be hindered?

Design Ethics

Considering your users

"...it is essential that the Web is accessible in order to provide equal access and equal opportunity to people with disabilities."
Social Factors in Developing Web Accessibility (W3C Web Accessibility Initiative)

Why Accessibility Matters

Blind and visually impaired make up 285,000,000 people according to the World Health Organization (June 2012) with 39,000,000 categorized as legally blind and the remaining 246,000,000 visually impaired. Deaf and hearing impaired make up 275,000,000 (2004) in the moderate-to-profound hearing impairment category.
"Why accessibility is important" — The A11Y Project

Tools for Accessibility

Some of what we use to access web content

Including (but not limited to):

  • Screen
  • Screen readers
  • Zoom tools
  • Keyboard/mouse
  • Microphones
  • Refreshable braille devices
  • Speakers

Limitations to Senses

How these become affected

  1. Feeling: Muscular or fine-motor issues
  2. Seeing: Blind, colour-blind, dyslexia
  3. Hearing: Deafness


Dyslexia is a brain-based language fluency disorder. Dyslexics experience varying levels of symptoms including difficulty reading, writing, spelling, or understanding spoken language fluenty.
The term blindness is used for complete or nearly complete vision loss.
Salesforce Icons
Colour Tester
Bad Hombres, Nasty Woman

Hand Tremors

The key principle of web accessibility for users with motor disabilities is: Operable — because not everyone can use a mouse, click on small links, or operate dynamic elements effectively.

Considering Accessibility

What design decisions might be problematic, and how?

  • Dyslexia
  • Colour blind
  • Hand tremors
  • Deaf
  • Blind
A refreshable braille display in use
A refereshable braille display

Accessible SEO

Remember what Google sees...

"Google is blind. Google doesn’t use a mouse. Google relies on structural cues in the content to make more sense of the page."
SEO and Accessibility Overlap by Liam McGee

Alts, Captions and Images

Key thing: use them

<img src="Forms.jpg" alt="Four kittens sitting on a pillow looking off to the side" >

Closed Captioning

HTML5 offers us new ways to embed accessible captioning for video or audio.


00:00:01.000 --> 00:00:03.000

00:00:14.024 --> 00:00:17.105
[ROWAN] My favourite thing about
SIAT is probably the vast array of

00:00:17.105 --> 00:00:19.091
really smart creative people here.

Keeping it Accessible

Some key points:

  • Use the semantic elements, code to standards
  • Let users control the interface
  • Create clear and consistent interaction cues
  • Describe interactive or rich media elements
VirginAmerica.com Voiceover Demo

Using ARIA Roles

ARIA (Accessible Rich Internet Application) roles provide further context for different elements.

<label for="search_box">Search:</label>
<input role="search" id="search_box">

<div aria-hidden="true" class="background_box"></div>

Further reading at Using WAI-ARIA Landmarks.

HTML5 and ARIA Roles

As HTML5 presents a more semantic markup, some elements have ARIA roles already defined.

<article role="article">
<aside role="complementary">
<footer role="contentinfo">
<header role= "banner">
<nav role="navigation">
<section role="region">
<main role="main">

Keyboard Accessibility

a:hover { /* When we hover */ }
a:active { /* When we press down */ }
a:focus { /* When we select with a keyboard */ }

Tab Index

<input tabindex="2" value="field #2">
<input tabindex="4" value="field #4">
<input tabindex="-1" value="ignored">
<input tabindex="3" value="field #3">
<input tabindex="1" value="field #1">

Touch Accessibility

Areas of touch accessibility on phones
Areas of touch accessibility on tablets
Areas of touch accessibility on laptops

"Responsive Navigation" (Luke Wroblewski)

Testing Accessibility

Tools of the trade

There are a variety of online tools for testing accessibility concerns — W3C has a good list — including things such as colour contrast, disabling javascript and keyboard navigability.


The user must be able to complete their task, repeatedly.

How We Connect to Servers

Web Page Speed Testing

Responsive Images

The future of responsive images is aiming towards allowing the device to select resolution.

<img src="fallback.jpg" srcset="low-res.jpg x1, 2x-res.jpg x2, 3x-res.jpg x3" alt="Photo of a kitten perched on a log">


The user must be able to complete their task with relative ease, repeatedly.

Starting with Usability

The basics

What is a heuristic?

Cheap Testing

The advantages to heuristics

Nielsen's Heuristics

  1. Visibility of system status
  2. Match between system/real world
  3. User control and freedom
  4. Consistency and standards
  5. Error prevention
  6. Recognition rather than recall
  7. Flexibility and efficiency of use
  8. Aesthetic and minimalist design
  9. Help users recognize/diagnose/recover errors
  10. Help and documentation

"Ten Usability Heuristics" (Nielsen Normal Group)

Nielsen to the Rescue!

Or is he?

Nielson's heuristics can be good for getting a good scope of the problems at hand, but can also bring up a lot of small details that may be specific to the individual evaluating the site.

Two different airline forms; one long and detailed, one brief and succinct
How do these effect efficiency of use? (Image from Luke Wroblewski)
Two different displays illustrating layouts suggesting scrolling or not
How do these effect efficiency of use? (Image from Luke Wroblewski)

How do these effect 'recognition rather than recall'?

A selection of different hamburger icons
"The Hamburger is Bad for You" (Morten Rand-Hendriksen)
A combination back and hamburger button

Neilsen vs Norman

Cage match, in the OCTAGON

"Good design means that beauty and usability are in balance. An object that is beautiful to the core is no better than one that is only pretty if they both lack usability"
Emotion and Design: Attractive things work better (Don Norman)


Runaway! Runaway...

See you in X minutes.

Where X is equal to the unladen air speed velocity of a swallow.

This week's labs

The low-down

  • Big crit-time

Next week in lecture we will talk about the necessity of quality content on the web.

Contacting Andrew

Your Lecturer

Reachable at:

  • Office hours — Tuesdays from 3:00-3:50pm and Thursdays from 12:30-1:20pm at the Surrey campus mezzanine.
  • ac.ufs@h_werdna