1. Efficiency CS 422: UI Design and Programming
HCI is the study of how people uses computer technologies and in turn how we can design user-friendly computer technologies. HCI drives innovation at the intersection of people and computers
Efficiency

2. Housekeeping Sign up on Piazza. > 25% students have not signed up
Any issues with lecture captures, post on Piazza and the TA will address it.
We will (probably) use Clickers for this class from next week. You will be notified after enrollment closes and I have the final undergrad- graduate split.
Problem statements are due next week. Start looking for teammates. Come to office hours to bounce off ideas. The course project is your opportunity to make your portfolio stand out!

3. A project inspiration

4. Let’s recap…

5. What are the three dimensions of usability?
Learnability
Efficiency
Safety

6. What is the most common way people learn a new UI?
By reading a manual
By interacting with the UI
By taking a class
By reading the help first

7. What is the most common way people learn a new UI?
By reading a manual
By interacting with the UI
By taking a class
By reading the help first

8. Let’s try it out..
iScanner
Magic Needle (iOS only)
Measure (iOS only)
Ventra
Choose any one app. Preferably the one you have never used before.

9. Let’s try it out.. Who are the typical users?
iScanner
Who are the typical users?
What are some typical goals?
How is achieving a goal helping the user to learn the UI?
What are some good UI design choices? Why?
What are some bad UI design choices? Why?
Magic Needle (iOS only)
Measure (iOS only)
Ventra

10. Example demo

11. Let’s revisit Any metaphors used?
iScanner
Any metaphors used?
What kinds of interactions style are in use?
What design aspects are using recognition? What aspects are using recall?
What is the system model? What is the user model?
Magic Needle (iOS only)
Recognition: remembering with the help of a visual cue
uses knowledge in the world
Recall: remembering with no help
uses knowledge in the head
Recognition is much easier!
Measure (iOS only)
Ventra

12. What are the three models of UI design?
System model
Interface model
User model

13. Efficiency

14. Things we will learn today
Three ways to improve UI efficiency
What is chunking?
Fitts’s Law
Shortcuts

15. Chunking Chunk” is a unit of memory or perception
Novices and chess masters were asked to study chess board configurations and recreate them from memory.
The novices could only remember the positions of a few pieces.
Masters, on the other hand, could remember entire boards, but only when the pieces were arranged in legal configurations.

16. Working Memory Small: 4 ± 1 “chunks” Short-lived: ~10 sec
Maintenance rehearsal fends off decay (but costs attention)
Elaborative rehearsal seeks to make connections with existing chunks.
Maintenance rehearsal (repetition) appears to be useless for moving information into long-term memory. Instead, the mechanism seems to be elaborative rehearsal, which seeks to make connections with existing chunks.

17. Take advantage of chunking as a designer
Don’t present information as long undifferentiated strings of random characters or numbers. At the very least, break them up into 3- or 4-character groups
Make the chunks more familiar
Strategies to improve recall
Chunking also applies to Interaction flow. Provide milestones to remember interaction flows.

18. Pointing and Steering Tasks
Linear menus
Pie menus

19. Fitts’s Law
Time T to move your hand to a target of size S at distance D away is:
T = RT + MT = a + b log (D/S + 1)
It’s a fundamental law of the human sensory-motor system, which has been replicated by numerous studies.

20. Explanation of Fitts’s Law
Moving your hand to a target is closed-loop control
Each cycle covers remaining distance D with error εD
T = a + b log (D/S)

21. Implications of Fitts’s Law
Targets at screen edge are easy to hit
Mac menu bar beats Windows menu bar
Unclickable margins are foolish
According to one study, pie menus are 15-20% faster than linear menus (Callahan et al. “An empirical comparison of pie vs. linear menus,” CHI 1991).

22. Marking Menus

23. Fitts’s law as a measure of performance (Throughput)

24. Steering Task Index of difficulty is now linear, not logarithmic
So steering is much harder than pointing
Thus cascading submenus are hard to use
It takes exponentially longer to hit a menu item on a cascading submenu than it would if you weren’t constrained to move down the tunnel to it.
The Mac gets a Hall of Fame nod here:
when a submenu opens, it provides an invisible triangular zone, spreading from the mouse to the submenu, in which the mouse pointer can move without losing the submenu.

25. Shortcuts
What are some of the most common keyboard shortcuts in MS Word?
What kind of interaction style is keyboard short cuts?
Recognition or recall?
Why would users use recall over recognition?

26. Shortcuts (cont.…)
A common way to increase efficiency of an interface is to add keyboard shortcuts — easily-memorable key combinations.
What if users forget (can’t recall) the shortcut?
Display; aid in recognition
_____ users tend to use shortcuts
_____ users tend to use menus

27. Shortcuts (cont.…)
A common way to increase efficiency of an interface is to add keyboard shortcuts — easily-memorable key combinations.
What if users forget (can’t recall) the shortcut?
Display; aid in recognition
Expert users tend to use shortcuts
_____ users tend to use menus

28. Shortcuts (cont.…)
A common way to increase efficiency of an interface is to add keyboard shortcuts — easily-memorable key combinations.
What if users forget (can’t recall) the shortcut?
Display; aid in recognition
Expert users tend to use shortcuts
Novice users tend to use menus

29. Keyboard shortcuts Increase efficiency
Provide accessibility benefits to visually impaired users or motor-impaired users (can’t use mouse well due to physical limitations)

30. Menu accelerators: another type of keyboard shortcuts
Menu bars and buttons often have accelerators as well (the underlined letters, which are usually invoked by holding down Alt to give keyboard focus to the menu bar, then pressing the underlined letter). Choose keyboard shortcuts so that they are easily associated with the command in the user’s memory.
Choose keyboard shortcuts so that they are easily associated with the command in the user’s memory.

31. Defaults & Pending Delete
efaults should be fragile; when you click on or Tab to a field containing a default value, it should be fully selected so that frequent users can replace it immediately by simply starting to type a new value. (This technique, where typing replaces the selection, is called pending delete.
Fill in a form with defaults
from history, by prediction
Make the defaults fragile (pending delete mechanism)

32. Other form of shortcuts
History
Autocomplete
Anticipation
Aggregation

33. Next week
User-centered Design