1. Usability Overview Upsorn Praphamontripong CS 4501-006
Design and Implementation of Software for the Web
Fall 2016

2. Review: Web Applications
Web server
Web application
Http
Request
Web component1
Web component2
Web componentn
HttpServlet
Request
Web client DB
HttpServlet
Response
Http
Response CS

3. Review: Web Applications
Web server
Web application
Http
Request
Java servlets
JSPs
Usability
Web component1
Web component2
Web componentn
HttpServlet
Request
HTML JS
CSS
Web client DB
HttpServlet
Response
Http
Response CS

4. CS 4501 - Overview 2 main aspects: User interface design and Software
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

5. Usability Overview Can I set time without looking at the manual?
36-pages manual
Button #1
Button #2
Can I set time without looking at the manual?
How about a stopwatch feature?
Button #2
Button #4
Button #5 CS

6. Do users look at web apps the way they are
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

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

8. 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

9. Software Design Inside-out Outside-in Develop a system
Then add the interface
Outside-in
Develop the interface
Then build the system to support it
Traditional computer science courses are almost entirely inside-out!
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

10. 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

11. 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

12. Shneiderman’s Measurable Criteria (2)
Time to learn : The time it takes to learn some basic level of skills
Speed of UI performance : Number of UI “interactions” it takes to accomplish tasks
Rate of user errors : How often users make mistakes
Retention of skills : How well users remember how to use the UI after not using for a time
Subjective satisfaction : The lack of annoying features CS

13. 1. Time to learn With complicated Uis, the users must “plateau”
additional
commands
Plateau 3
More tasks, more choices, or more speed
additional
commands
Plateau 2
More tasks, more choices, or more speed
Plateau 1
Ability to complete at least one simple task
initial
set of
commands
Well designed interfaces make
the first plateau easy to get to
subsequent plateaus clearly available CS

14. 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

15. 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

16. 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

17. 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

18. Establishing Criteria Priorities
Before designing, decide what is acceptable for each of the five criteria
Order of priorities
Minimally acceptable
Optimistic goal CS

19. Any Key CS

20. Summary of New Concepts
Usability engineering
Goals for the class
Design for the user
“Outside-in” design
7  2 rule
Five criteria :
Learn, Speed, Errors, Skills, SS CS