Human-Centered Interaction Design<br />(the very basics)<br />Contact: Koen Peters| kp@namahn.com | November 2010<br />
Introduction:Human-Centered Interaction Design<br />
3<br />Interaction design...<br />It needs to matter to you, but to your customer, it doesn’t matter, because good interac...
4<br />
Namahn’sHuman-CenteredInteraction Design Process<br />
Namahn Poster<br />http://www.namahn.com/resources/poster.htm<br />
Overview of HCID techniques<br />Understand<br />Field study<br />Assessment<br />Explore<br />Ideation<br />Storytelling<...
field study<br />Stills fromKitchenStories (...)<br />
Defining field studies<br />Collecting data in the field<br />cfr. anthropology,  ethnography & ethnomethodology<br />Stud...
11<br />Observationsof pump users, image by Namahn<br />
assessment<br />
IPMM assessment<br />Information Process Maturity Model, by JoAnnHackos<br />13<br />
Usability testing<br />Observation session<br />during which participants interact with (an existing version of) the digit...
heat maps, reports from formal testing with eye trackingsource: http://www.jasonmorrison.net/content/2006/formal-usability...
16<br />Testing  the design for a mobile application, image by Namahn<br />
ideation<br />
19<br />About ideation...<br />Ideation is the systematic search for targeted opportunities in the form of new features, n...
Creative thinking -  brainstorm<br />20<br />Post-it sessions<br />
Presenting ideas - rapid prototyping<br />Prototype material<br />Post-its, large paper (flip chart), thick markers<br />L...
storytelling<br />
23<br />
Scenarios of use - definition<br />Story in which one or more users (e.g. a persona) use an artefact (digital application)...
Personas<br />“(…) fictional, detailed archetypical characters that represent distinct groupings of behaviours, goals and ...
mental modeling<br />
valve?<br />switch?<br />
Mental model definition<br />For the designer, it is a target mental model<br />Is a theory of reality that the designer o...
conceptual design<br />
Conceptual design steps<br />30<br />Being aware of the interface idioms<br />Classifying the information, and defining th...
Interface idiom: Windows Office 2007<br />http://blogs.msdn.com/jensenh/<br />
Application structure- example<br />32<br />
High-level patterns – examples<br />Source: Tidwell (2005)<br />33<br />
Navigation scheme<br />Where am I? – Where do I go? – How do I get there?<br />Every “context switch” involves a new cogni...
2.0 contextualnavigation:  levels-reward; feedback loop<br />
prototyping<br />
Definition<br />Definition:<br />The prototype is a refinement of the conceptual design and results in a more or less real...
What kind of mock-up do I need?<br />What is the purpose of the mock-up?<br />(Brief the developers? Conduct usability tes...
http://code.google.com/p/viscomlib/<br />
engineering specification<br />
A definition<br />A description of the detailed designthat wishes to<br />capture design decisions, solutions and elements...
43<br />Ready to go...<br />
44<br />Koen Peterskp@namahn.comwww.namahn.com<br />
Upcoming SlideShare
Loading in …5
×

The very basics of human-Centered Interaction Design (sigchi.be 11/2010)

1,689 views

Published on

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

Published in: Design

The very basics of human-Centered Interaction Design (sigchi.be 11/2010)

  1. 1. Human-Centered Interaction Design<br />(the very basics)<br />Contact: Koen Peters| kp@namahn.com | November 2010<br />
  2. 2. Introduction:Human-Centered Interaction Design<br />
  3. 3. 3<br />Interaction design...<br />It needs to matter to you, but to your customer, it doesn’t matter, because good interaction is natural and should be totally transparent.<br />Source: R. Brummer & S. Emery, 2009<br />
  4. 4. 4<br />
  5. 5. Namahn’sHuman-CenteredInteraction Design Process<br />
  6. 6. Namahn Poster<br />http://www.namahn.com/resources/poster.htm<br />
  7. 7. Overview of HCID techniques<br />Understand<br />Field study<br />Assessment<br />Explore<br />Ideation<br />Storytelling<br />(Mental modeling)<br />Conceptual design<br />Prototyping ( & visual design)<br />Define<br />Engineering specification<br />7<br />
  8. 8.
  9. 9. field study<br />Stills fromKitchenStories (...)<br />
  10. 10. Defining field studies<br />Collecting data in the field<br />cfr. anthropology, ethnography & ethnomethodology<br />Study of…<br />the user<br />in his/her natural habitat (“context of use”)<br />while using the digital product<br />in the present<br />Aka<br />“site visit”<br />“field research”<br />“ethnographic study”<br />10<br />
  11. 11. 11<br />Observationsof pump users, image by Namahn<br />
  12. 12. assessment<br />
  13. 13. IPMM assessment<br />Information Process Maturity Model, by JoAnnHackos<br />13<br />
  14. 14. Usability testing<br />Observation session<br />during which participants interact with (an existing version of) the digital product<br />while performing real-life tasks<br />Following a protocol (test case)<br />Managed and interpreted by a usability expert<br />Typology<br />Formative / summative testing<br />Qualitative / quantitative evaluation<br />14<br />
  15. 15. heat maps, reports from formal testing with eye trackingsource: http://www.jasonmorrison.net/content/2006/formal-usability-testing-with-eye-tracking-mealographer/<br />
  16. 16. 16<br />Testing the design for a mobile application, image by Namahn<br />
  17. 17.
  18. 18. ideation<br />
  19. 19. 19<br />About ideation...<br />Ideation is the systematic search for targeted opportunities in the form of new features, new products, new markets, and new services<br />
  20. 20. Creative thinking - brainstorm<br />20<br />Post-it sessions<br />
  21. 21. Presenting ideas - rapid prototyping<br />Prototype material<br />Post-its, large paper (flip chart), thick markers<br />Lego, Playmobil, wood blocks, …<br />Modelling clay, pipe cleaners, …<br />21<br />
  22. 22. storytelling<br />
  23. 23. 23<br />
  24. 24. Scenarios of use - definition<br />Story in which one or more users (e.g. a persona) use an artefact (digital application) in order to execute a task<br />Narrative style; informal, natural language<br />Describes:<br />Context, actors, objects, actions, events, feed-back<br />
  25. 25. Personas<br />“(…) fictional, detailed archetypical characters that represent distinct groupings of behaviours, goals and motivations observed and identified during the research phase<br />Characteristics<br />Focus on goals, needs, attitudes<br />Made concrete by name, picture, personality...<br />But NOT market segments, user profiles, stereotypes or use case actors<br />Sources: Goodwinn & Reimann (2002)<br />
  26. 26. mental modeling<br />
  27. 27. valve?<br />switch?<br />
  28. 28. Mental model definition<br />For the designer, it is a target mental model<br />Is a theory of reality that the designer offers to the user. This theory can consist of objects, states, or sequences.<br />May take liberties with the underlying reality<br />Can be made easier to grasp if analogous to mental models that the user has acquired already: metaphors<br />Different types of users may need different mental models.<br />28<br />
  29. 29. conceptual design<br />
  30. 30. Conceptual design steps<br />30<br />Being aware of the interface idioms<br />Classifying the information, and defining the application structure<br />Selecting the high-level patterns<br />Drawing the navigation scheme<br />What platform are we designing for?<br />
  31. 31. Interface idiom: Windows Office 2007<br />http://blogs.msdn.com/jensenh/<br />
  32. 32. Application structure- example<br />32<br />
  33. 33. High-level patterns – examples<br />Source: Tidwell (2005)<br />33<br />
  34. 34. Navigation scheme<br />Where am I? – Where do I go? – How do I get there?<br />Every “context switch” involves a new cognitive effort, so:<br />Keep distances short<br />Most frequent tasks => strive for less context switches<br />Less frequent tasks =>  hide at first<br />34<br />
  35. 35. 2.0 contextualnavigation: levels-reward; feedback loop<br />
  36. 36. prototyping<br />
  37. 37. Definition<br />Definition:<br />The prototype is a refinement of the conceptual design and results in a more or less realistic, possibly working, simulation of the user interface. <br />Design ideas and concepts are made more concrete, visible and tangible, resulting in low-fidelity or high-fidelity simulations of the future experience<br />Can be used for usability testing<br />Terminology:<br />Mock-up, prototype, wireframe, interaction design, detailed design<br />
  38. 38. What kind of mock-up do I need?<br />What is the purpose of the mock-up?<br />(Brief the developers? Conduct usability tests?)<br />How interactive does it need to be?<br />(Linking? Dropdowns that work? Transition animations?)<br />How much visual refinement is necessary?<br />(Do I need to convince management?)<br />(What tool will I use?)<br />
  39. 39. http://code.google.com/p/viscomlib/<br />
  40. 40.
  41. 41. engineering specification<br />
  42. 42. A definition<br />A description of the detailed designthat wishes to<br />capture design decisions, solutions and elementsas if it were<br />a blueprint for the productto be able to<br />communicate the design as effectively as possible<br />aka design specification, functional specification, form & behaviour specification, style guide, ...<br />42<br />
  43. 43. 43<br />Ready to go...<br />
  44. 44. 44<br />Koen Peterskp@namahn.comwww.namahn.com<br />

×