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

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!

A project inspiration https://www.youtube.com/watch?v=ejczMs6b1Q4&t

Let’s recap…

What are the three dimensions of usability? Learnability Efficiency Safety

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

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

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.

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

Example demo

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

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

Efficiency

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

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.

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.

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.

Pointing and Steering Tasks Linear menus Pie menus

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.

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)

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

Marking Menus https://www.youtube.com/watch?v=dtH9GdFSQaw

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

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.

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?

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

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

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

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

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.

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)

Other form of shortcuts History Autocomplete Anticipation Aggregation

Next week User-centered Design