Interaction design workshop

2,262 views

Published on

Published in: Technology, News & Politics

Interaction design workshop

  1. 1. Shyamala PrayagaInteraction Design Bootcamp
  2. 2. Introduction to Interaction DesignCognitive and Conceptual Model3 ACTIVITES – INTERACTION DESIGN
  3. 3. Interaction Design Basics3 ACTIVITES
  4. 4. User Interfaces & Effects on UsersInterface Types3 ACTIVITES – INTERACTION DESIGN
  5. 5. Why bother about InteractionDesign?
  6. 6. What makes the DIFFERENCE between them?
  7. 7. And these?
  8. 8. Its INTERACTION
  9. 9. How do you define GOODInteraction?
  10. 10. effortless
  11. 11. easy
  12. 12. enjoyable to use
  13. 13. In a NUTSHELLInteraction design is the field concerned with thedesign of interactive products that are easy, effectiveand enjoyable to use.
  14. 14. Interaction Design RELATED field
  15. 15. Who is Involved in Interaction DesignInteraction DesignersProduct DesignersGraphic DesignersArtistsAnimatorsPhotographersFilm Makers
  16. 16. Interaction Design RolesInteraction DesignersInvolved in all aspects of interaction designUsability EngineersFocus on user-based evaluation of productsInformation ArchitectsPlan and structure interactive productsUser-Experience DesignersConduct field studies to inform the design of products
  17. 17. The Goals of Interaction DesignEffectivenessEfficiencySafetyUtilityLearnabilityMemorabilityEnjoyabilityAestheticsUsability Goals User Experience Goals
  18. 18. Interaction Design PrinciplesVisibility:Make important information visible.Feedback:Provide feedback about processes.Constraints:Restrict interactions in a context.Mapping:Effects of controls should be obvious.Consistency:Similar controls, similar effects.Affordance:Provide clues about use of controls.
  19. 19. Usability PrinciplesVisibility:Keep the user informed.Familiarity:Speak the user’s language.Freedom:Provide easy escape routes.Consistency:Use appropriate standards.Helpfulness:Help users recover from errors.Prevention:Prevent users from making errors.
  20. 20. Recognition:Don’t make users rely on memory.Efficiency:Provide short-cuts for expert users.Minimalism:Avoid overloading users with info.Help:Provide users with helpful documentation.Usability Principles Contd…
  21. 21. What’s the DIFFERENCE?“Design Principles and Usability Principles are very similarbut they come from different disciplines and have differentuses”The design principles are intended to be used as prescriptions during the design ofinteractive product.The usability principles are intended to be uses as guidelines during the evaluationof interactive products.
  22. 22. Control Redesign – 30 minutes1. Look for real world controls that need to be improved from among the enclosed listof contexts from the activity sheet2. Redesign a control of your choice3. Present the design as a poster in the workshop with details mentioned in the activitysheet
  23. 23. Breather Time – 5 minutes
  24. 24. Quick Question
  25. 25. Where does interaction design start?The User Interface?The System Architecture?The Computer Program?None of the Above
  26. 26. Interaction design starts with the USERS...
  27. 27. Hence its important to understandCOGNITIVE and CONCEPTUAL Models
  28. 28. Cognitive Model?What is that?
  29. 29. Cognition is what goes on in our heads.ThinkingSensingUnderstandinglearningreasoningplanningimaginingdecision makingproblem solvingusing language
  30. 30. Cognition has 2 parts
  31. 31. Experiential:perceiving, acting and reacting to events
  32. 32. Reflective:thinking, planning and decision-making
  33. 33. What are cognitive models?
  34. 34. Cognitive models are models of humancognition
  35. 35. How are cognitivemodels developed?Psychologists and cognitivescientists study how humansperceive, think, act inlaboratory tests
  36. 36. What do cognitive models tell us?Cognitive models tell us about human cognitive strengths andweaknesses, i.e. what humans are good and bad at.
  37. 37. Benefits of Cognitive Modelling
  38. 38. Cognitive models can help interaction designers in anumber of ways:Inform design decisionsHelp designers produce better designsExtend human capabilitiesHelp designers produce systems that build on what humans are already good atCompensate for human weaknessesHelp designers produce systems that can help people do things that that finddifficult
  39. 39. Cognitive ProcessesCognitive is often described as processesAttentionPaying attention to what’s important in the worldPerceptionPerceiving and recognizing things in the worldMemoryRemembering useful things about the world
  40. 40. LearningLearning new things about the worldUsing LanguageListening, speaking, reading and writingProblem-SolvingPlanning, reasoning and decision-making
  41. 41. AttentionSelecting things to concentrate onDepends upon a person’s goals and the informationavailable in the person’s situationGoalsThe goals that a person is trying to achieve can greatlyaffect what people will consider important.InformationHow information is presented can greatly effect whatpeople attend to in an interface.
  42. 42. Design Implications of AttentionMake information salient when it’s neededUse techniques like animation, color, decoration, ordering,sequencing and layout to draw attention.Avoid cluttering up an interfaceInterfaces that are plain are much easier to use because it iseasier for users to find important information.
  43. 43. PerceptionGetting information from theenvironmentInformation is sensed and transformed intoexperiences through pattern recognitionDuring perception sense data iscombinedPerceptions often involve multiple sensesmaking multimedia a powerful interactiondesign too
  44. 44. Design Implications of PerceptionInformation needs to be represented in ways that areeasily recognized• The meaning of icons and symbols should beobvious• Sounds should be easily distinguished from eachother• Text should be easily distinguished from itsbackground• Speech should be easily distinguished andunderstood• Tactile feedback should be distinct and appropriate
  45. 45. MemoryRecalling knowledge and experiencesMemories are recalled to support cognition and take appropriateactionsMemories do not store every detailTypically, memories of experiences do not contain every sight, smell,sound etc.Memories aren’t perfectWe forget things we’d like to remember and we remember thingswe’d like to forgetContext is importantContext can greatly affect what we remember and can lead to theconstruction of false memories
  46. 46. Strategies for RememberingMnemonicsMnemonics turn unmemorable sequences into easily remembered phrasese.g. Many people find it difficult to remember the order of the compass directions ina clockwise order is NESW, especially the positions of east and west, a mnemonic is“Never Eat Shredded Wheat”
  47. 47. Design Implications of MemoryDo not overload the user’s memory with complicatedproceduresKeep procedures short and make them consistentDesign interfaces that promote recognition rather than recallMenus, icons, organisation, feedback, etc.Provide users with useful ways to help them support theirmemoryFolders, labels, colors, flags, tags, timestamps, icons, etc.
  48. 48. LearningLearning can be through first-person “doing”or third-person “reading”People find learning through doing to be much easier than learning throughreading
  49. 49. Design interfaces to encourage explorationAllow users to explore possibilities and undo mistakesDesign interfaces that constrain and guideGuide users to help them select appropriate actionsDesign interfaces to encourage learningProvide users with helpful context-sensitive informationDesign Implications of Learning
  50. 50. Activity – 10 minutesDraw a sketch with all the following objects being a partof it1. House2. Tree3. Flight4. Car5. Truck
  51. 51. We understand objects based on their normalappearances in our everyday lifeThis is how we interpret
  52. 52. • All objects in the pictureare shown in a randomorder• these kinds of picturesare difficult to interpret
  53. 53. Mobile Information SystemsPart 1: Need Finding/Brainstorming – 30 minutes1. Urban elders retrieving location information about friends and family members insupport of opportunistic rendezvous.2. Commuters sharing, seeking, and retrieving information in support of their commute.3. Mobile workers (plumber, realtor, in-home yoga instructor, etc.) looking for a place tobe (food/coffee) between jobs.4. Moms retrieving status information on their kids from across their online socialnetworking services and communication channels.Working in teams of three or four, students will explore the issues and design challengesaround mobile information systems. Teams will design interfaces that allow a unique setof users to navigate information in the completion of one the following tasks:
  54. 54. Breather Time – 5 minutes
  55. 55. So what’sConceptual Model?
  56. 56. while interacting with any system a personhas a concept of what the system is: what itscomponents are, what properties they haveand and what interactions they can enterinto.
  57. 57. CONCEPTUAL MODEL…A conceptual model is a high level description of:“the proposed system in terms of a set of integrated ideas and conceptsabout what it should do, behave and look like, that will beunderstandable by the users in the manner intended”• Many kinds and ways of classifying them• We describe them in terms of core activities and objects• Also in terms of interface metaphors
  58. 58. Conceptual models include mental models,information processing, external cognition
  59. 59. Always keep in mind when making design decisionshow the user will understand and remember theunderlying conceptual model
  60. 60. ComponentsConcepts that people are exposed to through the producttask–domain objects, their attributes, and operations (e.g. saving, revisiting,organizing)Metaphors and analogiesunderstand what a product is for and how to use it for an activityRelationship and mappings between these concepts
  61. 61. First steps in formulating a conceptualmodel• What will the users be doing when carrying out their tasks?• How will the system support these?• What kind of interface metaphor, if any, will be appropriate?• What kinds of interaction modes and styles to use?
  62. 62. Different Interaction modes“Tell” the system to do something• Delegation mode• Issue instruction“Do” something on the system• Control mode• Acting“Exploring” the system• Navigation mode• Browsing
  63. 63. Conceptual Models Based on interaction modes1. Instructing2. Conversing3. Manipulating and navigating4. Exploring and browsing
  64. 64. Conceptual Models Based on interaction modesInstructingdescribes how users carry out theirtasks through instructing the systemwhat to do. 1 way Process:like tell the time, print a file, save a fileE.g. Commands in DOS or Unix,E.g. Word processing, CAD, EmailE.g. vending machines
  65. 65. Conceptual Models Based on interaction modesConversingUser converses with the system, where the system acts as a dialogueperformer. 2 way ProcessRange from simple voice recognition menu-driven systems to morecomplex ‘natural language’ dialoguesE.g. help systems, search engines, timetables, advice-giving systems etc.E.g. Voice or natural language based system
  66. 66. Conceptual Models Based on interaction modesManipulating andnavigatingExploit’s user’s knowledge of howthey move and manipulate in thephysical worldInvolves dragging, selecting,opening, closing and zoomingactions on virtual objectsE.g. Video GamesE.g. Virtual Reality
  67. 67. Conceptual Models Based on interaction modesExploring and browsingallows people to browse / navigatethrough informationSimilar to how people browseinformation with existing media (e.g.newspapers, magazines, libraries,pamphlets)E.g. CD-ROMs, DVD’sE.g. web pages, Multimedia
  68. 68. Which conceptual model is best?Manipulation is good for ‘doing’ types of tasks, e.g. designing, drawing,playing (flying, driving), sizing windowsIssuing instructions is good for repetitive tasks, e.g. spellchecking, filemanagementHaving a conversation is good for children, computerphobic, disabledusers and specialized applications (e.g. phone services) or for FUN
  69. 69. What Conceptual Model does the following productssupport?Activity – 10 mins
  70. 70. iTunes Music Store
  71. 71. Photoshop
  72. 72. AIM/MSN Messenger
  73. 73. Arent you Hungry?
  74. 74. How do user interfaces affect people?
  75. 75. User interfaces can motivateusers to:learn or play,to explore and be creative,encourage users to be social,provide a calm environment forworking,engender feelings of trust, etc.
  76. 76. At the same TIME…
  77. 77. An application doesn’t work properly or crashesA system doesn’t do what the user wants it toA user’s expectations are not met (e.g. it is too slow)A system doesn’t provide sufficient informationAn error message is vague, obtuse, or condemningAn interface is unattractive (e.g. noisy, garish, patronising)A system forces a user to restart after a long processUser interfaces can elicit negative responses tooReasons include:
  78. 78. What’s wrong with this error message?
  79. 79. "Valid authentication credentials were not provided"Hmm... I wonder if that means my password is wrong?
  80. 80. What is a "value state" I wonder?
  81. 81. Level of Frustration: HighUsers feel helpless inthe face of anincomprehensibleerror message.Cause: A system or application crashes and provides an unhelpful error message
  82. 82. Remedy: Provide useful information about how to fix aproblem in the error message.
  83. 83. Do you see any problem with this interface?
  84. 84. Level of Frustration: MildUsers are annoyed at the effort gone into the gimmickCause: Expectations are not met and a user is presented with a gimmicky display.Remedy: Avoid using gimmicks in an attempt to cover up a realproblem.e.g. Only make a website live once the material has been created, people rarelyreturn to websites that have been “under construction” the last time they visited
  85. 85. Ok now we understandinteractions andinterfaces….next what?
  86. 86. Types of Interfaces
  87. 87. Command-based Interface
  88. 88. Graphical User Interface
  89. 89. Natural User Interface
  90. 90. Voice user interface
  91. 91. Augmented Reality
  92. 92. Virtual Reality
  93. 93. Brain Computer Interface
  94. 94. Command Line Interface Design – 30 minutesDesign a Command Line Interface for a phone1. analyze all basic functions of the phone on your desk1. design a Command Line (incl. abbreviations) for this machine;
  95. 95. Natural User Interface Design – 30 minutesDesign a Natural User Interface for an ATM Machine1. Identify and analyze all basic functions of the ATM Kiosk1. Design a NUI with the aid of voice, touch etc
  96. 96. Recap
  97. 97. Recap
  98. 98. Recap
  99. 99. Process of Interaction DesignNeed finding and establishing requirementsDevelop a set of alternative designs3 ACTIVITES – INTERACTION DESIGN
  100. 100. Interaction Design Basics3 ACTIVITES
  101. 101. Process of Interaction DesignBuild iterative prototypes for testingEvaluate designs throughout the process3 ACTIVITES – INTERACTION DESIGN
  102. 102. Quiz Time
  103. 103. The Process of Interaction Design1. Identify needs and establish requirements2. Develop a set of alternative designs3. Build iterative prototypes for testing4. Evaluate designs throughout the process
  104. 104. Identifying Needs and EstablishingRequirementsNeeds and requirements are identified at the start
  105. 105. Userspeople who will directly interact with the design.Who is concerned with your product?Stakeholderspeople who will be affected by the design.
  106. 106. Good Designer?Although it is tempting for a designer to design what they would want, but agood designer is able to design for the needs of the users of a product.
  107. 107. Different types of requirementsFunctional :what should the product do?Data:what types of data should the product handle?Environmental:physical/social/organisational/technicalUser:characteristics of the target user groupUsability:important usability goals and measures
  108. 108. Techniques for gathering requirementsQuestionnairesuseful for asking specific questions from a number group ofpeople, questionnaires are often combined with othertechniques
  109. 109. Techniques for gathering requirementsInterviewsuseful for exploring issues that arise as the result of askingquestions, but they are time-consuming
  110. 110. Techniques for gathering requirementsFocus Groupsgood for gaining a consensus view of an issue and/orhighlighting areas of conflict/disagreement
  111. 111. Techniques for gathering requirementsObservationsshadowing people as they work with a system canprovide important insight into what people actuallydo (compared to what they say they do)
  112. 112. ScenarioAn informal narrative descriptionof a user performing a task thatallows the exploration of thecontext, needs and requirementsTechniques for gathering requirements
  113. 113. Use CaseA description of how a user (actor) would interact with a system toachieve a task, allowing the description of the interactions requiredthroughoutTechniques for gathering requirements
  114. 114. Studying Documentationexisting documentation can be a good source of information aboutuser activitiesTechniques for gathering requirements
  115. 115. Observation – 30 minutes1. Select a person performing an activity in a public space such as a restaurant, healthclub, the student union, or a shopping center and observe them for a minimum of 10minutes.2. The person you observe must be a stranger to you. If you feel it is appropriate, youmay want to introduce yourself and ask if you can observe them, explaining that it ispart of a class assignment and assure them of confidentiality.3. Make detailed notes while you observe. You must include descriptions of the physicalsetting (make a sketch of the layout), the person, the actions of the person, and anythoughts that occur to you about the work the individual is doing while you areobserving.4. Create field notes from the data you collected.
  116. 116. Breather Time – 10 minutes
  117. 117. Mobile Information SystemsPart 2: Scenario Development– 30 minutesWrite a scenario for how someone would interact with yourMIS application.Tell a short story about how someone would use your application in theireveryday life.
  118. 118. Breather Time – 10 minutes
  119. 119. Ways to develop alternative designsGenerating design ideasMethods for generating design ideasCross-fertilisation of existing idease.g. analogy, bisociation, case-based reasoning, mutationEvolution of existing idease.g. addition of new features, extrapolation of trendsReproduction of existing idease.g. application of ideas to new domains
  120. 120. Develop a set of alternative designsDeveloping conceptual and detailed designsConceptual DesignConceptual models for products that describe what a product should do and howthe product should behaveDetailed DesignDetailed models for products that describe aspects of an interface, e.g. colors, sounds,images, icons, menus, etc.
  121. 121. Developing a Conceptual ModelThree perspectivesInteraction ModeHow the user invokes actions when interacting with the deviceInterface MetaphorCombining familiar knowledge with new knowledge in a way that helps the userunderstand the systemInteraction ParadigmParticular way of thinking about interaction design
  122. 122. Techniques used in Conceptual DesignScenarios/Use Cases• Basis for the overall design• Basis for technical implementation• Means of cooperation within design teams• Means of cooperation across professional boundaries (multidisciplinary teams)Prototyping
  123. 123. What functions will the product perform?(how will tasks be divided up?)How are the functions related to each other?• Temporal (sequential or parallel)• CategorizationWhat information needs to be available?• What data is required to perform the task?• How is this data to be transformed by the system?Expanding the Conceptual Model
  124. 124. Mobile Information SystemsPart 3: Conceptual Design– 30 minutesWork in a group, ideate and develop the Conceptual Design using thescenarios which you developed
  125. 125. LUNCH
  126. 126. PrototypingWhat is a prototype?Limited representation of a productdesign• Scale models, etc.• In interaction design it can be (among otherthings):• a series of screen sketches• a storyboard, i.e. a cartoon-like series ofscenes• a piece of software with limitedfunctionality
  127. 127. Why Prototyping“People cannot describe what they want, but they are quick to recognize what they donot like!”• Interactive exploration with envisioned product• Clarifies vague requirements with concrete communication betweenstakeholders• Answers questions and supports design decisions with forced reflection• Tests feasibility & compatibility• Sells product ideas• Inspires innovation in “prototyping cultures”
  128. 128. Prototyping Types• Low-Fi: Cheap to produce,does not realistically simulatethe final productConceptual Design• Hi-Fi: Increased similarity tofinal product, possibly evenusing the same “parts”Physical Design• Prototypes should shiftfrom Low-Fi to Hi-Fi asproject progresses
  129. 129. Mobile Information SystemsPart 4: Prototyping – 1 hourConvert your ideas, concepts and functionalities into a medium paper prototype withall affordances.
  130. 130. EvaluatingObservation of userse.g. number of errors made using the designQuestionnaires of userse.g. how appealing is the designObjective evaluatione.g. how well does the design match requirements
  131. 131. Mobile Information SystemsPart 5: Evaluating– 1 hour
  132. 132. Quick Assessment

×