usability & user interface design. what is usability? more than... being ‘user-friendly’...
TRANSCRIPT
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