Introduction to Interaction DesignCognitive and Conceptual Model3 ACTIVITES – INTERACTION DESIGN
Interaction Design Basics3 ACTIVITES
User Interfaces & Effects on UsersInterface Types3 ACTIVITES – INTERACTION DESIGN
Why bother about InteractionDesign?
What makes the DIFFERENCE between them?
How do you define GOODInteraction?
enjoyable to use
In a NUTSHELLInteraction design is the field concerned with thedesign of interactive products that are easy, effectiveand enjoyable to use.
Interaction Design RELATED field
Who is Involved in Interaction DesignInteraction DesignersProduct DesignersGraphic DesignersArtistsAnimatorsPhotographersFilm Makers
Interaction Design RolesInteraction DesignersInvolved in all aspects of interaction designUsability EngineersFocus on user-based evaluation of productsInformation ArchitectsPlan and structure interactive productsUser-Experience DesignersConduct ﬁeld studies to inform the design of products
The Goals of Interaction DesignEffectivenessEfﬁciencySafetyUtilityLearnabilityMemorabilityEnjoyabilityAestheticsUsability Goals User Experience Goals
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.
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.
Recognition:Don’t make users rely on memory.Efﬁciency:Provide short-cuts for expert users.Minimalism:Avoid overloading users with info.Help:Provide users with helpful documentation.Usability Principles Contd…
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.
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
Breather Time – 5 minutes
Where does interaction design start?The User Interface?The System Architecture?The Computer Program?None of the Above
Interaction design starts with the USERS...
Hence its important to understandCOGNITIVE and CONCEPTUAL Models
Cognitive Model?What is that?
Cognition is what goes on in our heads.ThinkingSensingUnderstandinglearningreasoningplanningimaginingdecision makingproblem solvingusing language
Cognition has 2 parts
Experiential:perceiving, acting and reacting to events
Reﬂective:thinking, planning and decision-making
What are cognitive models?
Cognitive models are models of humancognition
How are cognitivemodels developed?Psychologists and cognitivescientists study how humansperceive, think, act inlaboratory tests
What do cognitive models tell us?Cognitive models tell us about human cognitive strengths andweaknesses, i.e. what humans are good and bad at.
Beneﬁts of Cognitive Modelling
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 ﬁnddifﬁcult
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
LearningLearning new things about the worldUsing LanguageListening, speaking, reading and writingProblem-SolvingPlanning, reasoning and decision-making
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.
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 ﬁnd important information.
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
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
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
Strategies for RememberingMnemonicsMnemonics turn unmemorable sequences into easily remembered phrasese.g. Many people ﬁnd it difﬁcult 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”
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, ﬂags, tags, timestamps, icons, etc.
LearningLearning can be through ﬁrst-person “doing”or third-person “reading”People ﬁnd learning through doing to be much easier than learning throughreading
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
Activity – 10 minutesDraw a sketch with all the following objects being a partof it1. House2. Tree3. Flight4. Car5. Truck
We understand objects based on their normalappearances in our everyday lifeThis is how we interpret
• All objects in the pictureare shown in a randomorder• these kinds of picturesare difficult to interpret
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:
Breather Time – 5 minutes
So what’sConceptual Model?
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.
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
Conceptual models include mental models,information processing, external cognition
Always keep in mind when making design decisionshow the user will understand and remember theunderlying conceptual model
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
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?
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
Conceptual Models Based on interaction modes1. Instructing2. Conversing3. Manipulating and navigating4. Exploring and browsing
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
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
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
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
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
What Conceptual Model does the following productssupport?Activity – 10 mins
iTunes Music Store
Arent you Hungry?
How do user interfaces affect people?
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.
At the same TIME…
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 sufﬁcient 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:
What’s wrong with this error message?
"Valid authentication credentials were not provided"Hmm... I wonder if that means my password is wrong?
What is a "value state" I wonder?
Level of Frustration: HighUsers feel helpless inthe face of anincomprehensibleerror message.Cause: A system or application crashes and provides an unhelpful error message
Remedy: Provide useful information about how to ﬁx aproblem in the error message.
Do you see any problem with this interface?
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
Ok now we understandinteractions andinterfaces….next what?
Types of Interfaces
Graphical User Interface
Natural User Interface
Voice user interface
Brain Computer Interface
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;
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
Process of Interaction DesignNeed finding and establishing requirementsDevelop a set of alternative designs3 ACTIVITES – INTERACTION DESIGN
Interaction Design Basics3 ACTIVITES
Process of Interaction DesignBuild iterative prototypes for testingEvaluate designs throughout the process3 ACTIVITES – INTERACTION DESIGN
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
Identifying Needs and EstablishingRequirementsNeeds and requirements are identiﬁed at the start
Userspeople who will directly interact with the design.Who is concerned with your product?Stakeholderspeople who will be affected by the design.
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.
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
Techniques for gathering requirementsQuestionnairesuseful for asking speciﬁc questions from a number group ofpeople, questionnaires are often combined with othertechniques
Techniques for gathering requirementsInterviewsuseful for exploring issues that arise as the result of askingquestions, but they are time-consuming
Techniques for gathering requirementsFocus Groupsgood for gaining a consensus view of an issue and/orhighlighting areas of conﬂict/disagreement
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)
ScenarioAn informal narrative descriptionof a user performing a task thatallows the exploration of thecontext, needs and requirementsTechniques for gathering requirements
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
Studying Documentationexisting documentation can be a good source of information aboutuser activitiesTechniques for gathering requirements
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.
Breather Time – 10 minutes
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.
Breather Time – 10 minutes
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
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.
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
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
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
Mobile Information SystemsPart 3: Conceptual Design– 30 minutesWork in a group, ideate and develop the Conceptual Design using thescenarios which you developed
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
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”
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
Mobile Information SystemsPart 4: Prototyping – 1 hourConvert your ideas, concepts and functionalities into a medium paper prototype withall affordances.
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
Mobile Information SystemsPart 5: Evaluating– 1 hour