IAT-339: 06 Usefulness

IAT-339: 06 Usefulness — A slide deck

Usefulness

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)

Functional

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)

Accessibility

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

Accessibility for Everyone

...

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

Dyslexia is a brain-based language fluency disorder. Dyslexics experience varying levels of symptoms including difficulty reading, writing, spelling, or understanding spoken language fluenty.
WebAIM
The term blindness is used for complete or nearly complete vision loss.
Wikipedia
Salesforce Icons
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.
WebAIM

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

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

Closed Captioning

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

WEBVTT FILE

1
00:00:01.000 --> 00:00:03.000
[UPBEAT MUSIC STARTS]

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

3
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

HTML5 Rocks

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

Using ARIA Roles

ARIA roles provide further context for different elements.

<header role="banner"></header>
<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.

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.

Reliable

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">

Usability

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)

Break-time

Runaway! Runaway...

See you in X minutes.

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

Common P01 Concerns

Code concerns:

  • Not setting a language for your page:<html lang="en">
  • Missing alt attributes
  • Improperly ordered headers (i.e. jumping right to h2 immediately)
  • Ensuring labels and form fields are connected

Design concerns:

  • Styleguide does not demonstrate much 'style'
  • Interaction points are not interactive
  • Flow confusing or unclear (sometimes due to fidelity)
  • Missing elements from styleguide

P01 Grade Concerns

Should you have any concerns with your grade, please review the rubric before contacting me.

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 9-10am and Thursdays from 9-10am at the Surrey campus mezzanine.
  • ac.ufs@h.werdna
1/1