1. Design and Implementation of Software for the Web
Usability Overview
Jeff Offutt
SWE 432
Design and Implementation of Software for the Web
This lecture is drawn from 632, Intro/Admin, Ch 1/Overview and Ch2/Theory.

2. Usability Overview Why we hate computers
Working title
Why we hate computers
And what we can do about them
In mature engineering fields, customers choose products they can use without help
Can I drive the car without extra training?
Can I use this web application without being taught?
Can I program my DVR without the manual?
Can I use my stopwatch without help?
19 September 2018
© Offutt

3. 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
19 September 2018
© Offutt

4. Usability Engineering
This is a design class
Engineers tend to focus on functionality
But slick features are worthless if users cannot use them
VCR programming
Programming was impossible with the original interfaces
It was easy with later models
But why use the intimidating word “programming”?
Making things complicated is easy.
Making things simple is hard.
All new technology requires expertise to use: computers, cameras, cars, telephones. As technology evolves, changes in usability make the functionality more accessible to more people. In many cases, this means eliminating functionality that is not really wanted.
19 September 2018
© Offutt

5. User Friendly The term user friendly is over-used and under-defined
What is “friendly” to one person may be trite, tedious, or confusing to another
“User appropriate” is a much more meaningful term
But we have to know the user
Never use the term “user friendly” again!
Part 1 of this class is largely about communication
Between software and people
19 September 2018
© Offutt

6. Sad Example Blackboard -> Courses Where is my current course?
Courses List
Courses where you are: Instructor
SWE (Spring 2013)
CS (Spring 2013) (not currently available) …
Why show me something not available?
Where are my current courses?
19 September 2018
© Offutt

7. 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
When design decisions are made, either the developer must conform to the user, or the user must conform to the developer
19 September 2018
© Offutt

8. Traditional computer science courses are almost entirely inside-out!
Software Design (2)
Effective software systems could be designed inside-out in the 1970s
Modern systems must be designed outside-in to be effective
Web sites sink or swim based on the usability
Traditional computer science courses are almost entirely inside-out!
This is a big part of what's wrong with current CS curricula and a motivation for this course. Most CS courses ONLY CONSIDER THE COMPUTER, AND EXPECT THE USER TO CONFORM TO THE PROGRAMMER!!
19 September 2018
© Offutt

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)
That is all we can concentrate on!
Sports
Books
People and organizations
Software
User interfaces
When we get more than about 7 items, we get confused
We transfer information from STM to LTM when we sleep. If you are studying and your STM gets full, then you can either:
Keep studying and some information will get lost
Stop studying and come back later
Take a short nap
If you feel sleepy while studying … TAKE A NAP!
If you feel sleepy during a class … ASK THE PROF TO TAKE A BREAK!
Don't talk at the break, rest …
19 September 2018
© Offutt

10. What is the secret to Apple’s success?
Simplicity
An old quote :
“It’s easy to make things hard, it’s hard to make things easy”
Or as Mark Twain said :
“It takes three weeks to prepare a good ad lib speech”
Simple is hard!
A good interface is a lot like a good umpire … you never notice it’s there
It takes talent, diligence, knowledge and skills to design simple things
What is the secret to Apple’s success?
Keep It Simple Stupid!
19 September 2018
© Offutt

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
The most important step was taken by Shneiderman …
Shneiderman wrote the seminal textbook on UI design. We use it in SWE He focused on general computer user interfaces, whereas Nielsen focuses on web-based user interfaces.
19 September 2018
© Offutt

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
These are each explained in more detail in the following slides …
19 September 2018
© Offutt

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
19 September 2018
© Offutt

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:
Buttons
Text boxes
Commands
Speed of UI performance is roughly the number of interactions needed to accomplish a task
This is tricky because people keep thinking about how fast the software runs … natural given the previous CS courses you’ve taken. But it’s not the speed of the software!
Think about typing “ls –l” versus bringing up File Manager, clicking on a pulldown menu, and choosing the option to display the file Details.
19 September 2018
© Offutt

15. 2. Speed of UI Performance: The tyranny of the mouse
The simplest way to slow down a UI is to use the mouse
The mouse is incredibly slow: Most users can type between 8 to 15 keystrokes in the time it takes to move the hand from the keyboard to the mouse
The two activities use different muscles and parts of the brain
Good UI designers need to reduce the number of keyboard-to-mouse switches
Command languages (CLs) are MUCH MUCH faster than comparable GUI systems. The general view is that CLs are about 10 times faster to use.
The tradeoff is that CLs are much harder to learn. So for most users in the world, GUIs are better than CLs. For computer experts, CLs are the better choice.
Software developers who use Windows exclusively over DOS and Unix are making a decision to reduce their efficiency by 30% to 60%!!
But remember: Never ask your mother to learn Unix …
19 September 2018
© Offutt

16. 3. Rate of User Errors Users will always make mistakes
UIs can encourage or discourage mistakes
Consistency, instructions, navigation, …
Consider :
C/C++ : The lack of typing, particularly on pointers, and the complexity of the syntax actively encourages programmers to make mistakes
Thus we become debuggers, not programmers
Unix : The large, complicated command language encourages many mistakes as a result of simple typos and confusion
Blackboard 9.1 has many more features than Blackboard 8
Entering grades in a dropdown instead of radio buttons
This has much to do with organization of the screen and the “flow” of interaction. The error messages also play a huge part – clear error messages mean the users will not make the same mistake over and over.
19 September 2018
© Offutt

17. 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
19 September 2018
© Offutt

18. 5. Subjective Satisfaction
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 massages
Most important in competitive software systems
Like … everything on the Web !
19 September 2018
© Offutt

19. Establishing Criteria Priorities
Before designing, decide what is acceptable for each of the five criteria
Order of priorities
Minimally acceptable
Optimistic goal
This should be part of the requirements.
In order to follow an outside-in design, we need to know our usability priorities so that we can make correct design decisions, particularly when they involve tradeoffs.
19 September 2018
© Offutt

20. Three Categories of Knowledge
Syntactic Knowledge
Varied, depends on computer and OS
Based on rote memorization
Easy to forget
Task Semantic Knowledge
Structured
Independent of computer and OS
More stable in memory
Computer Semantic Knowledge
About how software and hardware works on the inside
Not learned by using software, but from reading and classes
Fundamental psychology and learning theory.
Remember that very few users have much Comp-Sem knowledge. But it’s easy for developers to make mistakes because we have a lot of Comp-Sem knowledge!
19 September 2018
© Offutt

21. Three Categories of Knowledge (2)
Good syntax can :
Decrease the amount of memorization
Decrease time to learn
Decrease rate of errors
Semantic knowledge involves :
Actions – things that can happen
Objects – things that exist
19 September 2018
© Offutt

22. Three Categories of Knowledge (3)
Task
Semantic
Low
High
Users start at one point in this cube, and as they use the system more and more, they progress towards the upper corner.
They primarily move along the syntactic and task semantic axes, but not necessarily along the computer semantic axis. (Towards the top-right-front, not the top-right-back.)
Comp
Semantic
Low
High
Syntactic
Low
High
19 September 2018
© Offutt

23. Any Key
19 September 2018
© Offutt

24. And Our Favorite Dilbert
patriot web
19 September 2018
© Offutt

25. Yahoo! Craziness are they crazy ??? Email a friend
Question : How can I print a receipt?
Answer: Thank you for writing to Yahoo! Travel concerning your receipt request. We are committed to provide quick and efficient service and will be glad to assist you.
Additionally, you may also choose to print your receipt online. Please follow the instructions provided below:
Retrieve your reservation online
Click on the link ‘ a friend’
A different page will be displayed which will have a radio button ‘View/ Print Receipt’
Click on this button and print your receipt for this reservation.
We appreciate your association with us and look forward to being of assistance to you in the future.
Yahoo! Travel/Travelocity Customer Support
are they crazy ???
a friend
19 September 2018
© Offutt

26. Summary of New Concepts
Usability engineering
Goals for the class
Design for the user
“User friendly” is a meaningless term
“Outside-in” design
7  2 rule
Five criteria :
Learn, Speed, Errors, Skills, SS
Three types of knowledge
Syntactic, task-semantic, computer-semantic
19 September 2018
© Offutt