usability & user interface design. what is usability? more than... being ‘user-friendly’...
TRANSCRIPT
![Page 1: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/1.jpg)
Usability & User Interface Design
![Page 2: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/2.jpg)
What is Usability? More than...
Being ‘user-friendly’ Specifying fonts Specifying colour
schemes ‘User testing’.
![Page 3: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/3.jpg)
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
![Page 4: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/4.jpg)
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
![Page 5: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/5.jpg)
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.
![Page 6: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/6.jpg)
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
![Page 7: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/7.jpg)
Software Quality & Usability
Software Quality: The extent to which a software product exhibits these characteristics Functionality Reliability Usability Efficiency Maintainability Portability
![Page 8: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/8.jpg)
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.
![Page 9: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/9.jpg)
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).
![Page 10: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/10.jpg)
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.
![Page 11: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/11.jpg)
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.
![Page 12: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/12.jpg)
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.
![Page 13: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/13.jpg)
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...
![Page 14: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/14.jpg)
First strategy - Wait for them to die
![Page 15: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/15.jpg)
Strategy flaws
New ‘bad’ users will replace them There will always be some users who are
new to the current generation of technology.
![Page 16: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/16.jpg)
Second strategy - Wait for the superuser to evolve
![Page 17: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/17.jpg)
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.
![Page 18: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/18.jpg)
Third strategy - Educate them
![Page 19: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/19.jpg)
Strategy flaw
![Page 20: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/20.jpg)
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.
![Page 21: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/21.jpg)
Analysis
![Page 22: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/22.jpg)
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.
![Page 23: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/23.jpg)
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?
![Page 24: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/24.jpg)
Questions to Ask Do you understand your users?
Do you understand the medium?
Do you understand technologies?
Do you have commitment?
![Page 25: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/25.jpg)
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
![Page 26: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/26.jpg)
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
![Page 27: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/27.jpg)
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
![Page 28: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/28.jpg)
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.
![Page 29: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/29.jpg)
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
![Page 30: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/30.jpg)
Visibility – Good Example
Controls on a car
Controls for different operations Indicators Headlights Horn Hazard lights
![Page 31: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/31.jpg)
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!
![Page 32: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/32.jpg)
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
![Page 33: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/33.jpg)
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.
![Page 34: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/34.jpg)
Affordance - Examples
pushing
pulling
Sitting
![Page 35: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/35.jpg)
Affordance - Examples
Bouncing
Solidity, Support Turning
Inserting
![Page 36: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/36.jpg)
Affordance in UI
Interface elements design
Icons
Scroll bars
Button
![Page 37: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/37.jpg)
Affordance in UI Hyperlinks – underlined (web)
Button – 3D (software, web)
![Page 38: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/38.jpg)
Constraints
“Restricting the kind of user interaction that can take place at a given moment in time”
Prevents user from taking the wrong actions
![Page 39: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/39.jpg)
Types of Constraints
Physical
Logical
Cultural
![Page 40: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/40.jpg)
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
![Page 41: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/41.jpg)
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
![Page 42: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/42.jpg)
Mapping
Relationship between controls and their effects in the world
![Page 43: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/43.jpg)
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
![Page 44: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/44.jpg)
Activity on Mappings
Which controls go with which rings (burners)?
A B C D
![Page 45: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/45.jpg)
Why is this a Better Design?
![Page 46: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/46.jpg)
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
![Page 47: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/47.jpg)
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
![Page 48: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/48.jpg)
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
![Page 49: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/49.jpg)
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”
![Page 50: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/50.jpg)
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)
![Page 51: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/51.jpg)
Scene from a Shopping Mall
Saturday afternoon Head for shopping mall Want to buy a chainsaw
![Page 52: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/52.jpg)
![Page 53: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/53.jpg)
![Page 54: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/54.jpg)
![Page 55: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/55.jpg)
![Page 56: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/56.jpg)
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
![Page 57: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/57.jpg)
![Page 58: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/58.jpg)
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
![Page 59: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/59.jpg)
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
![Page 60: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/60.jpg)
![Page 61: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/61.jpg)
![Page 62: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/62.jpg)
![Page 63: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/63.jpg)
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
![Page 64: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/64.jpg)
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
![Page 65: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/65.jpg)
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
![Page 66: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/66.jpg)
In the physical world …
![Page 67: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/67.jpg)
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
![Page 68: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/68.jpg)
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
![Page 69: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/69.jpg)
Definition of Navigation
It’s about doing two thingsGetting from one place to anotherFiguring out where you are
![Page 70: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/70.jpg)
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
![Page 71: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/71.jpg)
Purpose of Web Navigation
Helps us find what we’re looking for
Tells us where we are
![Page 72: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/72.jpg)
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
![Page 73: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/73.jpg)
Conventions for Navigating the Physical World
Cities and BuildingsStreet signs
Books and MagazinesPage numbers, chapter titles
![Page 74: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/74.jpg)
Conventions for Navigation Elements
Put them in a standard place
Standardize appearance
![Page 75: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/75.jpg)
![Page 76: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/76.jpg)
Web Navigation Conventions
Evolved from print media
Consist of ...
![Page 77: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/77.jpg)
![Page 78: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/78.jpg)
Global Navigation
A.k.a. Persistent Navigation Should be consistent Should consist of:
Site ID Sections Utilities Home Search
![Page 79: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/79.jpg)
Global Navigation
Exceptions in consistency Home Page Forms
e.g., e-commerce site
Printable pages
Exceptions can have minimal versions
![Page 80: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/80.jpg)
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
![Page 81: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/81.jpg)
Site ID (or Logo)
Placement Top of page
Represents whole site Highest thing in logical hierarchy of the site
![Page 82: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/82.jpg)
Site ID (or Logo)
Two ways of getting primacy of site ID acrossMost prominent thingMake it frame everything else
![Page 83: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/83.jpg)
Site ID (or Logo)
Two ways of getting primacy of site ID acrossMost prominent thingMake it frame everything else
![Page 84: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/84.jpg)
Site ID (or Logo)
Should have certain attributesDistinctive typefaceGraphic recognizable at any size
![Page 85: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/85.jpg)
Sections
A.k.a. ‘Primary Navigation’
Links to main sections of the site (top level)
![Page 86: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/86.jpg)
Sub-sections
A.k.a. ‘Secondary Navigation’ Links to sub-sections of a site (2nd level)
![Page 87: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/87.jpg)
Utilities
Important elements Not part of site content Provide help or info about publisher
![Page 88: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/88.jpg)
Utilities
Should be less prominent than sections
![Page 89: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/89.jpg)
Utilities
Utilities will vary for different types of sites
![Page 90: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/90.jpg)
Utilities
‘Home’ button provides reassurance
Site ID has dual roleProvides link to home page
![Page 91: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/91.jpg)
Low-Level Navigation
![Page 92: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/92.jpg)
Low-Level Navigation
![Page 93: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/93.jpg)
Page Names
I love driving in LA
![Page 94: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/94.jpg)
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
![Page 95: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/95.jpg)
“You are Here” Indicators
Where am I in the scheme of things
![Page 96: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/96.jpg)
“You are Here” Indicators
![Page 97: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/97.jpg)
“You are Here” Indicators
![Page 98: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/98.jpg)
Breadcrumbs
![Page 99: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/99.jpg)
Evaluation
![Page 100: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/100.jpg)
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
![Page 101: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/101.jpg)
Trunk Test
![Page 102: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/102.jpg)
Trunk Test
Imagine yourself:BlindfoldedLocked in trunk of carDriven around for a whileAnd then ….
![Page 103: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/103.jpg)
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
![Page 104: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/104.jpg)
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?
![Page 105: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/105.jpg)
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
![Page 106: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/106.jpg)
Other Evaluation Techniques
Without UsersCognitive Walkthroughs
With UsersThinkalouds
![Page 107: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/107.jpg)
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.
![Page 108: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/108.jpg)
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.
![Page 109: Usability & User Interface Design. What is Usability? More than... Being ‘user-friendly’ Specifying fonts Specifying colour schemes ‘User testing’](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649e675503460f94b62f85/html5/thumbnails/109.jpg)
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