1. Interaction design IS 403: User Interface Design Shaun Kane

2. Today More on interaction design Getting started with user testing

3. Check-in on A6 How is everybody doing? Problems? Need feedback? A7 posted

4. Interaction design “Most people make the mistake of thinking design is what it looks like. People think it’s this veneer – that the designers are handed this box and told, ‘Make it look good!’ That’s not what we think design is. It’s not just what it looks like and feels like. Design is how it works.” – Steve Jobs

5. What makes a good design? What skills have we picked up so far?

6. What makes a good design? Requirements gathering Good information design and architecture (IS 387) Good interaction design Testing, iteration, improvement

7. Some recap from IS 387

8. Consider a web site… What questions might a user have?

9. Consider a web site… What questions might a user have? Where am I? Where can I go? What can I do here? What did I just do?

10. Tools from IS 387 Site ID Global / persistent navigation “You are here” Breadcrumbs

12. Site ID The main site, brand identity Click to go home

13. Global navigation It should be persistent 5 elements

14. Utilities Site-wide elements that are not part of the content hierarchy Separate them, so we don’t have to shoehorn them into content

15. “You are here” Show user’s position in hierarchy Helps user understand hierarchy Can be shown in several ways

16. Breadcrumbs Hierarchical vs. chronological

17. Buttons and links Make them actions

18. More about interaction design

19. The holy texts of usability

20. <- how people think tools, methods -> processes

21. Norman You’ve probably read it before Worth a reread –Now you have fun projects to apply it to

22. Important ideas from Norman It’s not the user’s fault Affordances Conceptual models Make things visible (system status, feedback) Feedback Mapping Constraints Next time: execution and evaluating

23. Affordances Examples in everyday life/this class?

24. Affordances Jared Sinclair, “Untouchtable”. http://blog.jaredsinclair.com/post/64880801326/untouchable

25. Perceived vs. actual affordance Affords sittingAffords pushingPerceived affordance

26. Affordances vs. convention What does this do?

27. Affordances vs. convention What does this do? A cultural convention: blue underlined things are web links

28. Conceptual models How the system works vs. how the user thinks it works Examples?

29. Conceptual models

30. Good conceptual models aren’t always the same as the system model

31. System status and feedback What’s going on? What did I just do?

32. System status

33. Good? Bad?

34. System status Good? - Tells me I need to wait Bad? -Why? -How long? -What is it doing?

35. Feedback

36. Mapping What is it? What is a good mapping?

37. Mapping

38. Natural mapping Arbitrary mapping

40. Constraints What are they? Good/bad?

41. Constraints

42. Don’t do this Phone number: Phone number MUST be formatted XXX-YYY-ZZZZ

43. Class activity Take out your phones (no really!) In groups of two, find good and bad examples of: –Affordances, mapping, feedback, constraints

44. Next time Norman, model of execution Usability heuristics (Nielsen)