Usability & User Interface Design

What is Usability? More than...

Being ‘user-friendly’ Specifying fonts Specifying colour

schemes ‘User testing’.

Finding Information

Users can only find information 42% of the time

– Jared Spool

62% of web shoppers give up looking for the item they want to buy online

– Zona Research

50% of the potential sales from a site are lost because people cannot find the item they are looking for

– Forrester Research

Reasons for Failure

49% of sites do not comply with simple usability principles

– Forrester Research

Only 24% of internet companies conduct usability testing– Forrester Research

90% of sites have poor usability– Jakob Nielsen

So - What is Usability? ISO defines usability in terms of supporting users in carrying out tasks

efficiently, effectively, and satisfactorily. Efficiency - an appropriate level of resources is required Effectiveness - the task is completed to an appropriate quality Satisfaction - the user experiences satisfaction in doing the work If users can’t complete their tasks efficiently and effectively, the system is

faulty ‘If I can’t use it, it’s broken’ In the Internet arena, usability is crucial. Many potential customers are

simply unable to complete purchasing decisions because the process is too complex.

Fun

Emotionally fullfilling

Rewarding

Satisfying

Entertaining

enjoyable

helpful

Motivating

Aesthetically pleasing

Supportive of creativity

Efficient to use

Easy to remember

Effective to use

Easy to learn

Safe to use

Have good utility

Usability Goals

User Experience Goals

Software Quality & Usability

Software Quality: The extent to which a software product exhibits these characteristics Functionality Reliability Usability Efficiency Maintainability Portability

Some usability principles (‘heuristics’)

Navigation – I can find my way around Functionality – I can do what I need to Control – I’m in charge Language – I understand the terminology Help & support – I can get help when I need it Feedback – I know what the system is doing Consistency – I don’t have to learn new tricks Errors – Mistakes are hard to make, easy to correct Visual clarity – I can recognize things and the design is clear and

appealing.

Benefits

Like any quality activity, benefits are hard to quantify for an individual project

There is ample research that supports incorporation of usability activities as a cost-reduction mechanism

Typical figures quoted are a benefit of between 10:1 and 100:1 (that is, a saving of between $10 and $100 for every dollar spent).

What benefits can usability provide? Increased productivity for users Increased usage levels Reduced training and documentation costs Reduced support costs Reduced development time and cost Minimisation of re-development and other post-

release work.

Costs

Conducting usability activities does represent a cost

Many organisations:overestimate the cost of usabilityunderestimate their own capability in the areaunderestimate the risks associated with

usability problems.

Barriers to embracing usability

Lack of knowledge about what usability means Lack of knowledge about usability techniques Tight delivery schedules A feeling that ‘We already know what users want’ and that ‘Our

system is intuitive’ Perception that usability is expensive Perception that usability activities are too hard to conduct The optional nature of usability activities.

The trouble with Users Any developer can tell you that users are lazy,

demanding, careless and incompetent In particular, developers are often frustrated that so

many users apparently lack ‘computer literacy’ Some day we’ll hook up all the machines and eliminate

the middle-man What can we do in the meantime? There are some

common strategies...

First strategy - Wait for them to die

Strategy flaws

New ‘bad’ users will replace them There will always be some users who are

new to the current generation of technology.

Second strategy - Wait for the superuser to evolve

Strategy flaws

No noticeable recent evolutionary leaps Expert users are even less forgiving of

usability problems than novices... … so we have to deal with the users we’ve

got.

Third strategy - Educate them

Strategy flaw

Designing usable systems - 3 phases Analysis - Understand the users and their

tasks Design - Apply this understanding during

design activities Evaluate - Validate design decisions to

see whether people can actually use the system.

Analysis

Analysis - Understanding the User Who will use the system? What are their characteristics - age,

education, language, motivation, domain knowledge, knowledge of computers?

It is important that the development team have a realistic view of the users.

Analysis - Understanding the user’s tasks How do people currently conduct the task? What is the context of use? What issues exist? What changes would users like?

Questions to Ask Do you understand your users?

Do you understand the medium?

Do you understand technologies?

Do you have commitment?

Personas

“Hypothetical Archetypes” Archetype: (American Heritage Dictionary)

An original model or type after which other similar things are patterned; a prototype

An ideal example of a type; quintessence

A precise description of a user and what they want to accomplish Imaginary, but precise Specific, but stereotyped

Real people have non-representative quirks

The Essence of Personas

Describe a person in terms of their Goals in life (especially relating to this project) Capabilities, inclinations, and background

People have a “intuitive” ability to generalize about real and fictional people We can have detailed discussions about what Harry Potter,

Imran Khan, or a shopkeeper will think or do. They won’t be 100% accurate, but it feels natural to think about

people this way

Mental Model Human (uses) understanding (conceptual model) of the way

Objects work Events take place People behave

ObjectObject

User Designer

Uses object Design object

DesignPerceive

Conceptual Model

MentalModel

Design Ensure that the design is focused on meeting the users’

requirements Use ‘personas’ or user profiles to ensure the

development team has a good knowledge of the users Use scenarios to describe typical interactions, and base

the design on those scenarios Use participatory design techniques Design on paper.

Visibility

Correct parts must be visible

More visible functions are, more likely users will be able to know what to do next

“Out of sight” functions make them difficult to use and find

Make relevant parts visible

This critical principle violated again and again in everyday things Crucial parts carefully hidden away

Visibility – Good Example

Controls on a car

Controls for different operations Indicators Headlights Horn Hazard lights

Visibility Example

Modern Telephone

This is a control panel for an elevator. • How does it work?• Push a button for the floor you want?

• Nothing happens. Push any other button? Still nothing. What do you need to do?

It is not visible as to what to do!

Visibility Example Many do not have large enough display

Forget sequence of steps, what was entered before, and what to do next

Better to have television on-screen programming

Other Examples Song title for CDs Names of Television Programs Cooking information for foods on food

containers

Affordance

The presence and actual properties of a thing These properties determine how the things could be used

Attribute of an object that allows people to know how to use it

To Afford - to give a clue

If affordances of a physical object are perceptually obvious, it is easy to know how to interact with it.

Affordance - Examples

pushing

pulling

Sitting

Affordance - Examples

Bouncing

Solidity, Support Turning

Inserting

Affordance in UI

Interface elements design

Icons

Scroll bars

Button

Affordance in UI Hyperlinks – underlined (web)

Button – 3D (software, web)

Constraints

“Restricting the kind of user interaction that can take place at a given moment in time”

Prevents user from taking the wrong actions

Types of Constraints

Physical

Logical

Cultural

Physical Constraints

Refer to the way physical objects restrict the movement of things E.g. only one way you can insert a key into a lock

How many ways can you insert a CD or DVD disk into a computer?

How physically constraining is this action?

How does it differ from the insertion of a floppy disk into a computer

Designing them More Logically

(i) A provides direct adjacent mapping between icon and connector

(ii) B provides colour coding to associate the connectors with the labels

Mapping

Relationship between controls and their effects in the world

Mapping

Why is this a better mapping?

The control buttons are mapped better onto the sequence of actions of fast rewind, rewind, play and fast forward Map configuration onto directionality of actions

Activity on Mappings

Which controls go with which rings (burners)?

A B C D

Why is this a Better Design?

Consistency

Design interfaces to have similar operations and use similar elements for similar tasks

For example: always use ctrl key plus first initial of the command for an operation –

ctrl+C, ctrl+S, ctrl+O

Main benefit is consistent interfaces are easier to learn and use

When Consistency Breaks Down What happens if there is more than one command starting with the

same letter? e.g. save, spelling, select, style

Have to find other initials or combinations of keys, thereby breaking the consistency rule E.g. ctrl+S, ctrl+Sp, ctrl+shift+L

Increases learning burden on user, making them more prone to errors

Internal and External Consistency Internal consistency refers to designing operations to behave the

same within an application Difficult to achieve with complex interfaces

External consistency refers to designing operations, interfaces, etc., to be the same across applications and devices Very rarely the case, based on different designer’s preference

Feedback

Sending information back to the user about what has been done

Includes sound, highlighting, animation and combinations of these

e.g. when screen button clicked on provides sound or red highlight feedback:

“ccclichhk”

Heuristics and Usability Principles

1. Visibility of system status2. Match between system and the real world3. User control and freedom4. Consistency and standards5. Help users recognize, diagnose, and recover from errors6. Error prevention7. Recognition rather recall8. Flexibility and efficiency of use9. Aesthetic and minimalist design10. Help and documentation (Nielsen)

Scene from a Shopping Mall

Saturday afternoon Head for shopping mall Want to buy a chainsaw

You may decide to ask someone instead

This depends on Familiarity with store Your trust in the store’s ability to organize sensibly How much hurry you’re in How sociable you are

Web Navigation 101

You go through a similar process when you enter a Web site:

You are trying to find something

You decide whether to ask first of browse first

Web Navigation 101

Search-dominant usersLook for search box as soon as they enter a

site Link-dominant users

Browse firstSearch only if browsing fails

Problems with the Web Experience

Web experience similar to physical experiences in the real worldMoving around in a space“Cruising”, “Browsing”, “Surfing”

Web experience misses many of the cues we’ve relied on all our lives to negotiate spaces

Problems with the Web Experience

No sense of scale1 page? 100 pages? 50,000 pages?Have I missed something?

c/w magazine, museum, department store

How do I know when to stop looking Coloring visited links

Problems with the Web Experience

No sense of directionNo left, right, up, down

No sense of location In physical spaces, we accumulate knowledgeDevelop a sense of where things areDevelop shortcuts

In the physical world …

On the Web …

No physical sense

Reliance on remembering conceptual hierarchy

Bookmarks stored personal shortcuts

Back button Accounts for 30-40% of Web clicks

Home Pages Akin to North Star

Lack of Web’s Physicality

Plus side Sense of

weightlessness Easy to lose track of

time

Negative side Figuring out where

you are Figuring out how to

go from one place to another

Definition of Navigation

It’s about doing two thingsGetting from one place to anotherFiguring out where you are

Significance of Web Navigation

We don’t talk about “Department Store Navigation” or “Library Navigation”

Navigation embodies the site’s hierarchy creating a sense of space

Purpose of Web Navigation

Helps us find what we’re looking for

Tells us where we are

Purpose of Web Navigation

Tells us what’s here Reveals content

Tells us how to use the site Implicitly gives instructions Where to begin What options are available

Gives user confidence in builders Good navigation creates good impression

Conventions for Navigating the Physical World

Cities and BuildingsStreet signs

Books and MagazinesPage numbers, chapter titles

Conventions for Navigation Elements

Put them in a standard place

Standardize appearance

Web Navigation Conventions

Evolved from print media

Consist of ...

Global Navigation

A.k.a. Persistent Navigation Should be consistent Should consist of:

Site ID Sections Utilities Home Search

Global Navigation

Exceptions in consistency Home Page Forms

e.g., e-commerce site

Printable pages

Exceptions can have minimal versions

Site ID (or Logo)

Building name for a Web site

Only need to see it once on a building

Need to see it on every page on the Web Why? Primary mode of transportation is teleportation

Site ID (or Logo)

Placement Top of page

Represents whole site Highest thing in logical hierarchy of the site

Site ID (or Logo)

Two ways of getting primacy of site ID acrossMost prominent thingMake it frame everything else

Site ID (or Logo)

Two ways of getting primacy of site ID acrossMost prominent thingMake it frame everything else

Site ID (or Logo)

Should have certain attributesDistinctive typefaceGraphic recognizable at any size

Sections

A.k.a. ‘Primary Navigation’

Links to main sections of the site (top level)

Sub-sections

A.k.a. ‘Secondary Navigation’ Links to sub-sections of a site (2nd level)

Utilities

Important elements Not part of site content Provide help or info about publisher

Utilities

Should be less prominent than sections

Utilities

Utilities will vary for different types of sites

Utilities

‘Home’ button provides reassurance

Site ID has dual roleProvides link to home page

Low-Level Navigation

Low-Level Navigation

Page Names

I love driving in LA

Page Names

Page Names are the street signs of the Web

Need them as soon as something starts going wrong

4 things about page names

“You are Here” Indicators

Where am I in the scheme of things

“You are Here” Indicators

“You are Here” Indicators

Breadcrumbs

Evaluation

Evaluation

The process of systematically collecting data that informs us about what it is like for a

particular or group of users to use a product for a particular task in a certain

type of environment

Trunk Test

Trunk Test

Imagine yourself:BlindfoldedLocked in trunk of carDriven around for a whileAnd then ….

Trunk Test

Acid test for good Web navigation True test isn’t if you can figure out given enough

time and close scrutiny Elements should pop off the page

Whether looking closely or not

Reliance should be on overall appearance rather than details

Trunk Test

What site is this? (Site ID) What page am I on? (Page Name) What are the major sections of this site? (Sections) What are my options at this level? (Local navigation) Where am I on the scheme of things? (“You are here”

indicators) How can I search?

Trunk Test

Step 1Choose a page anywhere in the site (print)

Step 2Position yourself so you can study the page

Step 3Quickly find and circle each item

Other Evaluation Techniques

Without UsersCognitive Walkthroughs

With UsersThinkalouds

Evaluation

Every product undergoes usability testing - but in many cases it happens in the field where failure is costliest

Evaluate early Evaluate often You must evaluate with real users Evaluation does not have to be expensive.

Conclusion Usability can reduce costs Usability activities can be conducted in-house Embracing usability can impart a competitive advantage Usability should be central to the design process Usability is about Quality - you do your organisation and

your customers a disservice if you fail to design user-centred systems.

References

Special thanks to Mr. Imran Hussain of UMT who provided me some of these slides.

Task Centered User Interface designhttp://hcibib.org/tcuid/

usability.gov