Transcript Usability Overview

Usability Overview
Upsorn Praphamontripong
CS 4501-006
Design and Implementation of Software for the Web
Fall 2016
Review: Web Applications
http://www.virginia.edu/
Http
Request
Web client
Http
Response
Web application
HttpServlet
Request
HttpServlet
Response
Web
component1
Web
component2
DB
Web
componentn
Web server
CS 4501-006
2
Review: Web Applications
Web application
Usability
Web client
HTML
JS
CSS
Http
Request
Http
Response
HttpServlet
Request
HttpServlet
Response
Web
component1
Web
component2
Web
componentn
DB
Java servlets
JSPs
Web server
CS 4501-006
3
CS 4501 - Overview
2 main aspects: User interface design and Software
User interface design
• Usability: how to design UIs that is usable and appropriate to
users
Software
• Client side: HTML, JS, CSS
• Server side: Java servlet, JSP
• Other: Ajax, XML, JDBC
• Testing: Input validation
CS 4501-006
4
Usability Overview
http://support.casio.com/storage/en/m
anual/pdf/EN/009/qw3252.pdf
36-pages manual
Button
#1
Button
#2
Can I set time without
looking at the manual?
Button
#2
Button
#4
How about a stopwatch
feature?
Button
#5
CS 4501-006
5
Do users look at web apps the way they are?
Or do users look at web apps the way they think?
Who?
What
tools?
Add
rosters?
CS 4501-006
6
What Will You Learn About Usability ?
• How to break down the essential characteristics of usable
software from an analytical viewpoint
• Engineering principles for designing and building software
interfaces that are
• Fast to learn
• Speedy to use
• Avoid user errors
• How to recognize and articulate the difference between
“this program sucks” and “I can improve this program by
changing X,Y, and Z”
• Life-long habits for engineering usable products
CS 4501-006
7
Usability Engineering
• This is a design class
• Engineers tend to focus on functionality
• But slick features are worthless if users cannot use them
Making things complicated is easy.
Making things simple is hard.
CS 4501-006
8
Software Design
• Inside-out
• Develop a system
• Then add the interface
Traditional computer
science courses are almost
entirely inside-out!
• Outside-in
• Develop the interface
• Then build the system to support it
When design decisions are made,
either the developer must conform to the users,
or the user must conform to the developer.
Web sites sink or swim based on the usability
CS 4501-006
9
Fundamental Software Design Principle
The 7  2 Rule
• Human’s short term memory can only hold about seven
things at a time (plus or minus 2)
When we get more
than about 7 items,
we get confused
CS 4501-006
10
Shneiderman’s Measurable Criteria
• User interface design has long been considered an art
rather than a science
• That is, decisions have been made subjectively rather than
objectively
• There has been a lot of effort to make UI design more
objective – that is, an engineering activity
• This course will teach you some of that
CS 4501-006
11
Shneiderman’s Measurable Criteria (2)
1.
Time to learn : The time it takes to learn some basic
level of skills
2.
Speed of UI performance : Number of UI “interactions”
it takes to accomplish tasks
3.
Rate of user errors : How often users make mistakes
4.
Retention of skills : How well users remember how to
use the UI after not using for a time
5.
Subjective satisfaction : The lack of annoying features
CS 4501-006
12
1.Time to learn
• With complicated Uis, the users must “plateau”
Plateau 3
additional
commands
Plateau 2
additional
commands
Plateau 1
initial
set of
commands
More tasks,
more choices,
or more speed
More tasks,
more choices,
or more speed
Ability to
complete at least
one simple task
• Well designed interfaces make
• the first plateau easy to get to
• subsequent plateaus clearly available
CS 4501-006
13
2. Speed of UI Performance
• This is about navigating through the interface, not how
fast the software or network runs
• Interaction points are places where the users interact with
the software (e.g., buttons, text boxes, or commands)
• Speed of UI performance is roughly the number of
interactions needed to accomplish a task
• Good UI designers need to reduce the number of
keyboard-to-mouse switches
CS 4501-006
14
3. Rate of User Errors
• Users will always make mistakes
• UIs can encourage or discourage mistakes
• Consistency, instructions, navigation, …
• Consider :
• Entering letter grades in a dropdown instead of radio
buttons
CS 4501-006
15
4. Retention of Skills
• “Once you learn to ride a bicycle, you never forget”
• Some interfaces are easy to remember, some are hard
• If they flow logically (that is, match the user’s mental
model or expectations), they are very easy to remember
• If an interface is very easy to learn, then the retention is
not important – users can just learn again
• Retention is typically more important with UIs that are
hard to learn
CS 4501-006
16
5. Subjective Satisfaction (SS)
• Subjective satisfaction is defined to be how much the
users “like” the UI
• This depends on the user (thus the word “subjective”)
• Think of it in reverse: Users are unhappy when there is
something annoying in the interface
• Blinking
• Ugly colors
• Spelling errors in masssages
• Most important in competitive software systems
• Like … everything on the Web !
CS 4501-006
17
Establishing Criteria Priorities
• Before designing, decide what is acceptable for each of the
five criteria
• Order of priorities
• Minimally acceptable
• Optimistic goal
CS 4501-006
18
Any Key
CS 4501-006
19
Summary of New Concepts
1. Usability engineering
2. Goals for the class
3. Design for the user
4. “Outside-in” design
5. 7  2 rule
6. Five criteria :
• Learn, Speed, Errors, Skills, SS
CS 4501-006
20