1. CS 4963: UI Design Interaction Design, Part 1

2. Today: What is Interaction Design, anyways? How do we do interaction design? – Fundamentals and Building Blocks – Heuristics and Patterns Next Interaction Design lesson: – Deliverables – Documentation

3. “Interaction Design (IxD) defines the structure and behavior of interactive systems. Interaction Designers strive to create meaningful relationships between people and the products and services that they use, from computers to mobile devices to appliances and beyond.” —Interaction Design Association (IxDA)

4. “Interaction design defines workflows that support users’ goals and tasks, the affordances through which digital products and services communicate their functionality and interactivity to users, the ways in which users can interact with those affordances, products’ behaviors in response to user interactions, and the methods by which products indicate state changes. Good interaction design facilitates people’s tasks and ensures that digital products are both learnable and usable by reducing complexity as much as possible, preventing user error, adhering to standards when appropriate, and through consistency across an entire product or product line. Typical interaction design deliverables include specifications, wireframes, usage scenarios, and prototypes.” —Pabini Gabriel-Petit UXMatters.com

5. “Interaction design defines workflows that support users’ goals and tasks, the affordances through which digital products and services communicate their functionality and interactivity to users, the ways in which users can interact with those affordances, products’ behaviors in response to user interactions, and the methods by which products indicate state changes. Good interaction design facilitates people’s tasks and ensures that digital products are both learnable and usable by reducing complexity as much as possible, preventing user error, adhering to standards when appropriate, and through consistency across an entire product or product line. Typical interaction design deliverables include specifications, wireframes, usage scenarios, and prototypes.” —Pabini Gabriel-Petit …call and response.

6. Call and response. from http://www.flickr.com/photos/anirudhkoul/2045497777/ http://www.flickr.com/photos/anirudhkoul/2045497777/ (YOU)

7. Call and response. from http://www.flickr.com/photos/anirudhkoul/2045497777/ http://www.flickr.com/photos/anirudhkoul/2045497777/ Sing it! WHOO OOOA!!

8. Call and response. from http://www.flickr.com/photos/anirudhkoul/2045497777/ http://www.flickr.com/photos/anirudhkoul/2045497777/ We love you! Freebird! FREEEBIRD! Encore! AAAAH! FIRE!!! THE DRUMMER’S HAIR IS ON FIRE! Yeah!! We’ll play another song as soon as I extinguish the drummer.

9. “Interaction is acting on the world and receiving feedback from the world.” Interaction design is defining how do you [as a user] … - do? Affordances? - feel? Interactivity? - know? Mental models? —Bill Verplank (helped develop Xerox Star, establish IDII) from designinginteractions.comdesigninginteractions.com

10. How is IxD done? Building blocks – Affordances (and common controls) – States (and Transitions …context!) – Feedback (Behavior) Heuristics – General approaches – Human-Computer Interaction methods – Interaction Design Patterns

11. BUILDING BLOCKS

12. Affordances from http://www.flickr.com/photos/arrrika/315335846/http://www.flickr.com/photos/arrrika/315335846/ from http://www.flickr.com/phot os/smig44/2690249520/ http://www.flickr.com/phot os/smig44/2690249520/ Affordances + Constraints => Mappings

13. Common Controls from http://www.flickr.com/photos/brook/5259347/http://www.flickr.com/photos/brook/5259347/ from http://www.flickr.com/photos/tonyjcase/2759363747/http://www.flickr.com/photos/tonyjcase/2759363747/ ?

14. Feedback from http://www.flickr.com/photos/24thcentury/2381462463/ http://www.flickr.com/photos/24thcentury/2381462463/ from http://www.flickr.com/photos/rachelfordjames/2397592716/ vs.

15. States You’re CS students. You know what states are. Help your user know what state the system is in Helps with mental map Prevents mistakes from http://www.flickr.com/photos/tonyjcase/2375636885/ http://www.flickr.com/photos/tonyjcase/2375636885/

16. “Experience is a temporal phenomenon.... You need to have as much detail in the transitions as in the states, otherwise you’re going to get it wrong.” —Bill Buxton Microsoft Research

17. Transitions! from http://www.flickr.com/photos/ultimorollo/sets/72157615748412640/ http://www.flickr.com/photos/ultimorollo/sets/72157615748412640/ ??? (these are the same animal?!?)

18. State transition revisited

19. GENERAL HEURISTICS

20. Make it easy to recover. First, do no harm! General rule: If it’s something that’s not undoable—a destructive action—, warn.

21. Be consistent. Make common things behave in the same way Make behavior predictable from http://www.youtube.com/watch?v=yUSIpRo13oc On Android phones, the long press always brings up a context menu (or at least, it should).http://www.youtube.com/watch?v=yUSIpRo13oc

22. Consider the locus of attention. Where possible, put actions for the task at hand at the locus of attention, put other things at the periphery. from Flickr: edit action is right there. Remember this, from slide 18?

23. Be conversational. People like it. from GMail from Google Reader from Google Search

24. Level of interaction? Some things you want to be interactive, some you don’t. Many times, the user just wants to get to Point B from http://www.worrydream.com/MagicInk/ (Note that the UI on the right takes less clicks AND makes more information visible.)http://www.worrydream.com/MagicInk/

25. Don’t annoy. from http://www.flickr.com/photos/anirudhkoul/2045497777/ http://www.flickr.com/photos/anirudhkoul/2045497777/ Hey, do you want to allow this app to run as administrator? I know you said yes the last 20 times, but… Beep! Beep! BEEEEEEEP! Have I told you about this great deal on SPAM? Earn points! ARE YOU REEEALLY SURE YOU WANT TO SAVE THIS FILE? REALLY?? JUST LET ME SING FERGOODNESSSAKES

26. Surface simplicity, hide complexity. More choices make people …unhappier?

27. HUMAN-COMPUTER INTERACTION (There is a whole course on this, yes.)

28. Hick’s Law More choices visible? Faster... Time (in msec) = a + b log (n+1) 2 Remember this from slide 14? nLog 2 (n+1) 21.584963 42.321928 83.169925 164.087463

29. Fitts’ Law! Larger targets, targets on screen edges are easier to hit Time (in msec) = a + b log (D / S + 1) 2 D S

30. GOMS Keystroke-Level Model Way to measure efficiency of an interface LetterTime (s)Meaning K0.2pressing a Key or button P1.1Pointing to position (moving cursor) H0.4Homing: switching input context M1.35Mentally preparing for next step R???waiting for computer to Respond Example: MKKKKKKKMHPK = 1.35 + 0.2*7 + 1.35 + 0.4 + 1.1 + 0.2 = 13.9 sec

31. Human Interface Guidelines On top of all this, everyone has their own HIGs and UI Guidelines (Helps with consistency)

32. INTERACTION DESIGN PATTERNS Not just for breakfast anymore.

33. Patterns People have done this before Codified best practices from Chris Messina’s Flickr collection linked in the notes of this slide

34. Summary Interaction design is crafting the behavior of your software/app/system. It’s call-and-response, feedback to action. Affordances, constraints, mental models… …and designing the transitions between states. There are general rules, design patterns, and HCI methods that can help.

35. TO BE CONTINUED…

36. For next time… 1.Take your first assignment’s BAD design, and make two sketches (plus paragraph each) for how you might make it work better (better affordances, improved feedback, clearer state transitions). For the first, keep the same hardware/controls, but relabel/change the interaction as needed. For the second, you can change anything. 2. Readings for next lesson: on the class blog.

37. Contact Us Matthias Shapiro matthias.shapiro@gmail.com Jason Alderman Jason.alderman@utah.edu http://huah.net/cs4963