An introductory overview of contemporary and pragmatic HCID techniques such as field study, usability testing, ideation, storytelling, conceptual design and prototyping, structured along the lines of the Namahn HCD poster. (This is a slimmed-down version of the full tutorial presentation).

1. Human-Centered Interaction Design (the very basics) Contact: Koen Peters| kp@namahn.com | November 2010

2. Introduction:Human-Centered Interaction Design

3. 3 Interaction design... It needs to matter to you, but to your customer, it doesn’t matter, because good interaction is natural and should be totally transparent. Source: R. Brummer & S. Emery, 2009

4. 4

5. Namahn’sHuman-CenteredInteraction Design Process

6. Namahn Poster http://www.namahn.com/resources/poster.htm

7. Overview of HCID techniques Understand Field study Assessment Explore Ideation Storytelling (Mental modeling) Conceptual design Prototyping ( & visual design) Define Engineering specification 7

9. field study Stills fromKitchenStories (...)

10. Defining field studies Collecting data in the field cfr. anthropology, ethnography & ethnomethodology Study of… the user in his/her natural habitat (“context of use”) while using the digital product in the present Aka “site visit” “field research” “ethnographic study” 10

11. 11 Observationsof pump users, image by Namahn

12. assessment

13. IPMM assessment Information Process Maturity Model, by JoAnnHackos 13

14. Usability testing Observation session during which participants interact with (an existing version of) the digital product while performing real-life tasks Following a protocol (test case) Managed and interpreted by a usability expert Typology Formative / summative testing Qualitative / quantitative evaluation 14

15. heat maps, reports from formal testing with eye trackingsource: http://www.jasonmorrison.net/content/2006/formal-usability-testing-with-eye-tracking-mealographer/

16. 16 Testing the design for a mobile application, image by Namahn

18. ideation

19. 19 About ideation... Ideation is the systematic search for targeted opportunities in the form of new features, new products, new markets, and new services

20. Creative thinking - brainstorm 20 Post-it sessions

21. Presenting ideas - rapid prototyping Prototype material Post-its, large paper (flip chart), thick markers Lego, Playmobil, wood blocks, … Modelling clay, pipe cleaners, … 21

22. storytelling

23. 23

24. Scenarios of use - definition Story in which one or more users (e.g. a persona) use an artefact (digital application) in order to execute a task Narrative style; informal, natural language Describes: Context, actors, objects, actions, events, feed-back

25. Personas “(…) fictional, detailed archetypical characters that represent distinct groupings of behaviours, goals and motivations observed and identified during the research phase Characteristics Focus on goals, needs, attitudes Made concrete by name, picture, personality... But NOT market segments, user profiles, stereotypes or use case actors Sources: Goodwinn & Reimann (2002)

26. mental modeling

27. valve? switch?

28. Mental model definition For the designer, it is a target mental model Is a theory of reality that the designer offers to the user. This theory can consist of objects, states, or sequences. May take liberties with the underlying reality Can be made easier to grasp if analogous to mental models that the user has acquired already: metaphors Different types of users may need different mental models. 28

29. conceptual design

30. Conceptual design steps 30 Being aware of the interface idioms Classifying the information, and defining the application structure Selecting the high-level patterns Drawing the navigation scheme What platform are we designing for?

31. Interface idiom: Windows Office 2007 http://blogs.msdn.com/jensenh/

32. Application structure- example 32

33. High-level patterns – examples Source: Tidwell (2005) 33

34. Navigation scheme Where am I? – Where do I go? – How do I get there? Every “context switch” involves a new cognitive effort, so: Keep distances short Most frequent tasks => strive for less context switches Less frequent tasks => hide at first 34

35. 2.0 contextualnavigation: levels-reward; feedback loop

36. prototyping

37. Definition Definition: The prototype is a refinement of the conceptual design and results in a more or less realistic, possibly working, simulation of the user interface. Design ideas and concepts are made more concrete, visible and tangible, resulting in low-fidelity or high-fidelity simulations of the future experience Can be used for usability testing Terminology: Mock-up, prototype, wireframe, interaction design, detailed design

38. What kind of mock-up do I need? What is the purpose of the mock-up? (Brief the developers? Conduct usability tests?) How interactive does it need to be? (Linking? Dropdowns that work? Transition animations?) How much visual refinement is necessary? (Do I need to convince management?) (What tool will I use?)

39. http://code.google.com/p/viscomlib/

41. engineering specification

42. A definition A description of the detailed designthat wishes to capture design decisions, solutions and elementsas if it were a blueprint for the productto be able to communicate the design as effectively as possible aka design specification, functional specification, form & behaviour specification, style guide, ... 42

43. 43 Ready to go...

44. 44 Koen Peterskp@namahn.comwww.namahn.com