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


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
1 Comment
1 Like
No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • design disciplines.We are well-known for our long-standing mastery of Interaction Design and Information Architecture, while Product Design, Safety-Critical Designand Service Design are fairly new additions to our offering. 
  • Understand: the user of the product, the context he is working in, hismaintasks, hismain goals, (+ the goals of the stakeholders)Explore: exploresolutions, create design concepts, prototype and iterateDefine: specify, document the (final) design solutionyou have constructed
  • Film (2003,Norway/Sweden): A scientific observer's job of observing an old single man's kitchen habits is complicated by his growing friendship with him.Story: In post war Sweden it was discovered that every year, an average housewife walks the equivalent number of miles as the distance between Stockholm and Congo, while preparing her family meals. So the Home Research Institute sent out eighteen observers to a rural district of Norway to map out the kitchen routines of single men. The researchers were on twenty-four-hour call, and sat in special strategically placed chairs in each kitchen. Furthermore, under no circumstances were the researchers to be spoken to, or included in the kitchen activities.let's say you're an employee of an enterprise that's looking forward to optimize the arrangement of people's houses to make their life more comfortable (???). You just sit there and watch your assigned "specimen". No talking, no communication between you and him. Now imagine you're the "specimen", and that there's a man sit on your kitchen observing your behavior!!!
  • What is a field study? Basically, - collection of “raw data” in the fieldFocus and study ofThe actual user of the product always taking place at the user’s location you want to knowfocus on current use and contextno need to hypothesis on future useconduct on site, as contrasted with studies of behaviour in isolated environments (e.g. lab)User date you gather should beAccuratebSources:- Holtzblatt K., Contextual design, Defining customer-centered systems (1995)- Courage C. & Baxter K., Understanding your users, A practical guide to user requirements (2005)
  • = a model to measure the process maturity of the information development in an organisation.IPMM describes the practices that make an information development organization successful
  • Heat map fromaneye-trackingsession
  • Ideation is different than traditional validation market research. Ideation is about exploring possibilities, generating new concepts and discovering new opportunities,
  • Good to get current thinking on the table and share ideasUsually not enough to generate high-potential opportunities
  • Left: ideas for connecting a car with the cloudRight: interface modelling of a dental implant application
  • Painting: The Boyhood of Raleigh by Sir John Everett Millais, oil on canvas, 1870.A seafarer tells the young Sir Walter Raleigh and his brother the story of what happened out there at sea.
  • Storyboards
  • Example of idioms: Office 2007Office menu buttonContextual barRich dropdown4. SQL diagnostic manager by Idera (USA): Database performance monitoring and diagnostics.Taken from:10 Best ApplicationUis( )Office 2007 Ribbon Sees Fast UptakeSeveral winners employed a ribbon as their main control, taking a lead from Microsoft Office 2007's new user interface. Considering how revolutionary it is to abandon traditional pull-down menus, having additional applications implement this idea only For decades, we've heard enterprise users say, "just give me a UI that looks like Office." There is definitely much to be said for familiarity and for leveraging users' existing knowledge and expectations, but we've been a bit cautious about following this request for several reasons.Based on this year's winners, however, it seems that the ribbon has legs and transfers beyond its document-editing origins.
  • 2.0contextualnavigation design patterns1) Linkedin: levels – reward2) (public) feedback loop = ouractionswillmodify feature results (zie ook Amazon, BBC)3) (individual) feedback loop = myactionswillmodifyresult: I looked at a book, so I mightalsoconsider…(=Seduction in web 2.0)Zie onderaan bbc artikel
  • ><graphic designQuote: “Regardless of the fidelity, creating a prototype helps us get a closer look at the intended design. The process of building one removes ambiguity by crystalizing a number of decisions into a design that can be experienced, just like the real software.”(designer @ Microsoft, workingon SharePoint 2010)
  • Different possibilities:- Detailedspecification of a single application- Company styleguide- Patternlibrary
  • Hope this was helpfull, and thatyou are ready to getstartedwith HCIDPick up a poster
  • The very basics of human-Centered Interaction Design ( 11/2010)

    1. 1. Human-Centered Interaction Design<br />(the very basics)<br />Contact: Koen Peters| | 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 /><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:<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 /><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.<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<br />