what is interaction design?faculty.csuci.edu › david.claveau › comp549s18 ›...
TRANSCRIPT
![Page 1: What is interaction design?faculty.csuci.edu › David.Claveau › COMP549S18 › chapter1_slides.pdf · • Why is the TiVo remote so much better designed? – Peanut shaped to fit](https://reader036.vdocuments.mx/reader036/viewer/2022062921/5f0357397e708231d408bba9/html5/thumbnails/1.jpg)
©2011 1 www.id-book.com
What is interaction design?
Chapter 1
![Page 2: What is interaction design?faculty.csuci.edu › David.Claveau › COMP549S18 › chapter1_slides.pdf · • Why is the TiVo remote so much better designed? – Peanut shaped to fit](https://reader036.vdocuments.mx/reader036/viewer/2022062921/5f0357397e708231d408bba9/html5/thumbnails/2.jpg)
©2011 2 www.id-book.com
![Page 3: What is interaction design?faculty.csuci.edu › David.Claveau › COMP549S18 › chapter1_slides.pdf · • Why is the TiVo remote so much better designed? – Peanut shaped to fit](https://reader036.vdocuments.mx/reader036/viewer/2022062921/5f0357397e708231d408bba9/html5/thumbnails/3.jpg)
©2011 3 www.id-book.com
Good/Bad Designs
– Elevator controls and labels on the bottom row all look the same, so it is easy to push a label by mistake instead of a control button
– People do not make same mistake for the labels and buttons on the top row. Why not?
From: www.baddesigns.com
![Page 4: What is interaction design?faculty.csuci.edu › David.Claveau › COMP549S18 › chapter1_slides.pdf · • Why is the TiVo remote so much better designed? – Peanut shaped to fit](https://reader036.vdocuments.mx/reader036/viewer/2022062921/5f0357397e708231d408bba9/html5/thumbnails/4.jpg)
©2011 4 www.id-book.com
How about this vending machine ?
• Need to push button first to activate reader
• Usually insert money before making selection
• Breaks well known convention
![Page 5: What is interaction design?faculty.csuci.edu › David.Claveau › COMP549S18 › chapter1_slides.pdf · • Why is the TiVo remote so much better designed? – Peanut shaped to fit](https://reader036.vdocuments.mx/reader036/viewer/2022062921/5f0357397e708231d408bba9/html5/thumbnails/5.jpg)
©2011 5 www.id-book.com
Good/Bad Design
• What is wrong with the remote on the right?
• Why is the TiVo remote so much better designed? – Peanut shaped to fit in
hand – Logical layout and
color-coded, distinctive buttons
– Easy to locate buttons
![Page 6: What is interaction design?faculty.csuci.edu › David.Claveau › COMP549S18 › chapter1_slides.pdf · • Why is the TiVo remote so much better designed? – Peanut shaped to fit](https://reader036.vdocuments.mx/reader036/viewer/2022062921/5f0357397e708231d408bba9/html5/thumbnails/6.jpg)
©2011
New ways to interact...
6 www.id-book.com
![Page 7: What is interaction design?faculty.csuci.edu › David.Claveau › COMP549S18 › chapter1_slides.pdf · • Why is the TiVo remote so much better designed? – Peanut shaped to fit](https://reader036.vdocuments.mx/reader036/viewer/2022062921/5f0357397e708231d408bba9/html5/thumbnails/7.jpg)
©2011 7 www.id-book.com
Designing Interactive Systems
• Need to improve the interaction with a machine or ‘system’ so that it meets the needs of the users
• Need to take into account:
– Who the users are – What activities are being carried out – Where the interaction is taking place
![Page 8: What is interaction design?faculty.csuci.edu › David.Claveau › COMP549S18 › chapter1_slides.pdf · • Why is the TiVo remote so much better designed? – Peanut shaped to fit](https://reader036.vdocuments.mx/reader036/viewer/2022062921/5f0357397e708231d408bba9/html5/thumbnails/8.jpg)
©2011 8 www.id-book.com
Understanding the Needs of Users
• Listen to what people want and get them involved in the design process
• Consider what humans are good and bad at doing
• Consider how people currently do things
![Page 9: What is interaction design?faculty.csuci.edu › David.Claveau › COMP549S18 › chapter1_slides.pdf · • Why is the TiVo remote so much better designed? – Peanut shaped to fit](https://reader036.vdocuments.mx/reader036/viewer/2022062921/5f0357397e708231d408bba9/html5/thumbnails/9.jpg)
©2011 9 www.id-book.com
Activity
• How does making a call differ when using a: –Cell phone –Public phone booth?
• Consider the kinds of user, type of activity and context of use
![Page 10: What is interaction design?faculty.csuci.edu › David.Claveau › COMP549S18 › chapter1_slides.pdf · • Why is the TiVo remote so much better designed? – Peanut shaped to fit](https://reader036.vdocuments.mx/reader036/viewer/2022062921/5f0357397e708231d408bba9/html5/thumbnails/10.jpg)
©2011 10 www.id-book.com
What is Interaction Design (ID) ?
• The design of interactive systems to support the way people work and communicate in their daily lives
• What is design?
![Page 11: What is interaction design?faculty.csuci.edu › David.Claveau › COMP549S18 › chapter1_slides.pdf · • Why is the TiVo remote so much better designed? – Peanut shaped to fit](https://reader036.vdocuments.mx/reader036/viewer/2022062921/5f0357397e708231d408bba9/html5/thumbnails/11.jpg)
©2011 11 www.id-book.com
Goals of Interaction Design
• usability goals
• user experience goals
![Page 12: What is interaction design?faculty.csuci.edu › David.Claveau › COMP549S18 › chapter1_slides.pdf · • Why is the TiVo remote so much better designed? – Peanut shaped to fit](https://reader036.vdocuments.mx/reader036/viewer/2022062921/5f0357397e708231d408bba9/html5/thumbnails/12.jpg)
©2011 12 www.id-book.com
Usability Goals
• Effective to use • Efficient to use • Safe to use • Easy to learn and remember
![Page 13: What is interaction design?faculty.csuci.edu › David.Claveau › COMP549S18 › chapter1_slides.pdf · • Why is the TiVo remote so much better designed? – Peanut shaped to fit](https://reader036.vdocuments.mx/reader036/viewer/2022062921/5f0357397e708231d408bba9/html5/thumbnails/13.jpg)
©2011 13 www.id-book.com
Activity on usability
• How long should it take and how long does it actually take to: –Use a new smartphone? –Set the volume for a daily reminder? –Pay your phone bill online?
![Page 14: What is interaction design?faculty.csuci.edu › David.Claveau › COMP549S18 › chapter1_slides.pdf · • Why is the TiVo remote so much better designed? – Peanut shaped to fit](https://reader036.vdocuments.mx/reader036/viewer/2022062921/5f0357397e708231d408bba9/html5/thumbnails/14.jpg)
©2011 14 www.id-book.com
The User Experience
• the way people feel about the device/system, and their pleasure and satisfaction when using it, looking at it, holding it, and opening or closing it
– “every product that is used by someone has a user experience: newspapers, ketchup bottles, reclining armchairs, cardigan sweaters.” (Garrett, 2003)
![Page 15: What is interaction design?faculty.csuci.edu › David.Claveau › COMP549S18 › chapter1_slides.pdf · • Why is the TiVo remote so much better designed? – Peanut shaped to fit](https://reader036.vdocuments.mx/reader036/viewer/2022062921/5f0357397e708231d408bba9/html5/thumbnails/15.jpg)
©2011
Apple Products
15 www.id-book.com
![Page 16: What is interaction design?faculty.csuci.edu › David.Claveau › COMP549S18 › chapter1_slides.pdf · • Why is the TiVo remote so much better designed? – Peanut shaped to fit](https://reader036.vdocuments.mx/reader036/viewer/2022062921/5f0357397e708231d408bba9/html5/thumbnails/16.jpg)
©2011
Apple Products
16 www.id-book.com
Simple, elegant, distinct brand, pleasurable, must have fashion item, catchy names, cool...ecosystem!
![Page 17: What is interaction design?faculty.csuci.edu › David.Claveau › COMP549S18 › chapter1_slides.pdf · • Why is the TiVo remote so much better designed? – Peanut shaped to fit](https://reader036.vdocuments.mx/reader036/viewer/2022062921/5f0357397e708231d408bba9/html5/thumbnails/17.jpg)
©2011 17 www.id-book.com
User Experience Goals Desirable aspects satisfying helpful fun enjoyable motivating provocative engaging challenging surprising pleasurable enhancing sociability rewarding exciting supporting creativity emotionally fulfilling entertaining cognitively stimulating Undesirable aspects boring unpleasant frustrating patronizing making one feel guilty making one feel stupid annoying cutesy childish gimmicky
![Page 18: What is interaction design?faculty.csuci.edu › David.Claveau › COMP549S18 › chapter1_slides.pdf · • Why is the TiVo remote so much better designed? – Peanut shaped to fit](https://reader036.vdocuments.mx/reader036/viewer/2022062921/5f0357397e708231d408bba9/html5/thumbnails/18.jpg)
©2011 18 www.id-book.com
Usability and User Experience Goals
• How do usability goals differ from user
experience goals?
• Are there trade-offs between the two kinds of goals? – e.g. can a product be both fun and safe?
• How easy is it to measure usability goals compared to user experience goals?
![Page 19: What is interaction design?faculty.csuci.edu › David.Claveau › COMP549S18 › chapter1_slides.pdf · • Why is the TiVo remote so much better designed? – Peanut shaped to fit](https://reader036.vdocuments.mx/reader036/viewer/2022062921/5f0357397e708231d408bba9/html5/thumbnails/19.jpg)
©2011 19 www.id-book.com
Interaction Design is an Umbrella Term
user-interface (UI) design/human-computer interaction (HCI): emphasis on creating an interface that is easy to use
user experience design (UX): emphasis on creating a positive user experience
human-centered design (HCD)/user-centered design (UCD): emphasis on understanding the user and involving the user in every stage of the design
![Page 20: What is interaction design?faculty.csuci.edu › David.Claveau › COMP549S18 › chapter1_slides.pdf · • Why is the TiVo remote so much better designed? – Peanut shaped to fit](https://reader036.vdocuments.mx/reader036/viewer/2022062921/5f0357397e708231d408bba9/html5/thumbnails/20.jpg)
©2011 20 www.id-book.com
Relationship with other Fields
• Academic disciplines that contribute to ID:
– Psychology and Cognitive Science –Sociology –Anthropology –Computer Science and Information Tech –Electrical Mechanical Engineering – Industrial Design –Ergonomics
![Page 21: What is interaction design?faculty.csuci.edu › David.Claveau › COMP549S18 › chapter1_slides.pdf · • Why is the TiVo remote so much better designed? – Peanut shaped to fit](https://reader036.vdocuments.mx/reader036/viewer/2022062921/5f0357397e708231d408bba9/html5/thumbnails/21.jpg)
©2011 21 www.id-book.com
Relationship with other Fields
• Design practices that contribute to ID:
–Graphic design –Product design – Industrial design – Fashion design – Interior design –Architecture
![Page 22: What is interaction design?faculty.csuci.edu › David.Claveau › COMP549S18 › chapter1_slides.pdf · • Why is the TiVo remote so much better designed? – Peanut shaped to fit](https://reader036.vdocuments.mx/reader036/viewer/2022062921/5f0357397e708231d408bba9/html5/thumbnails/22.jpg)
©2011 22 www.id-book.com
Working on Multidisciplinary Teams
• Many people from different backgrounds involved in ID
• Different perspectives and ways of seeing and talking about things
• Advantages – more design ideas
• Disadvantages
– sometimes difficult to communicate
![Page 23: What is interaction design?faculty.csuci.edu › David.Claveau › COMP549S18 › chapter1_slides.pdf · • Why is the TiVo remote so much better designed? – Peanut shaped to fit](https://reader036.vdocuments.mx/reader036/viewer/2022062921/5f0357397e708231d408bba9/html5/thumbnails/23.jpg)
©2011 23 www.id-book.com
The Interaction Design Business • Increasing number of ID consultancies,
examples of well known ones include: – Nielsen Norman Group: “help companies enter the age of the
consumer, designing human-centered products and services” – Cooper: ”From research and product to goal-related design” – Swim: “provides a wide range of design services, in each case
targeted to address the product development needs at hand” – IDEO: “creates products, services and environments for
companies pioneering new ways to provide value to their customers”
![Page 24: What is interaction design?faculty.csuci.edu › David.Claveau › COMP549S18 › chapter1_slides.pdf · • Why is the TiVo remote so much better designed? – Peanut shaped to fit](https://reader036.vdocuments.mx/reader036/viewer/2022062921/5f0357397e708231d408bba9/html5/thumbnails/24.jpg)
©2011 24 www.id-book.com
A Design Process for ID
• Requirements
• Alternatives
• Prototypes
• Evaluation
![Page 25: What is interaction design?faculty.csuci.edu › David.Claveau › COMP549S18 › chapter1_slides.pdf · • Why is the TiVo remote so much better designed? – Peanut shaped to fit](https://reader036.vdocuments.mx/reader036/viewer/2022062921/5f0357397e708231d408bba9/html5/thumbnails/25.jpg)
©2011 25 www.id-book.com
Characteristics of a Good Design Process for ID
• users should be involved at every stage
• the requirements document identifies specific usability and user experience goals
• iteration !
![Page 26: What is interaction design?faculty.csuci.edu › David.Claveau › COMP549S18 › chapter1_slides.pdf · • Why is the TiVo remote so much better designed? – Peanut shaped to fit](https://reader036.vdocuments.mx/reader036/viewer/2022062921/5f0357397e708231d408bba9/html5/thumbnails/26.jpg)
©2011 26 www.id-book.com
Design principles
• The dos and don’ts of interaction design
• Derived from a mix of knowledge, experience and common-sense
![Page 27: What is interaction design?faculty.csuci.edu › David.Claveau › COMP549S18 › chapter1_slides.pdf · • Why is the TiVo remote so much better designed? – Peanut shaped to fit](https://reader036.vdocuments.mx/reader036/viewer/2022062921/5f0357397e708231d408bba9/html5/thumbnails/27.jpg)
©2011 27
Principle latin, principium: that which comes first noun 1. a rule or law discovered in natural phenomena or the workings of a machine: “the principle of capillary attraction” 2. a fundamental law or truth from which others are derived: “the principles of modern physics” 3. an accepted or professed rule of action or conduct: “a set of good design principles” 4. a personal rule of conduct: “to adhere to one's principles” 5. a fundamental doctrine or tenet of a group: “the principles of the Stoics”
![Page 28: What is interaction design?faculty.csuci.edu › David.Claveau › COMP549S18 › chapter1_slides.pdf · • Why is the TiVo remote so much better designed? – Peanut shaped to fit](https://reader036.vdocuments.mx/reader036/viewer/2022062921/5f0357397e708231d408bba9/html5/thumbnails/28.jpg)
©2011 28 www.id-book.com
Design principles
1. Affordance 2. Consistency 3. Constraints 4. Feedback 5. Visibility
![Page 29: What is interaction design?faculty.csuci.edu › David.Claveau › COMP549S18 › chapter1_slides.pdf · • Why is the TiVo remote so much better designed? – Peanut shaped to fit](https://reader036.vdocuments.mx/reader036/viewer/2022062921/5f0357397e708231d408bba9/html5/thumbnails/29.jpg)
©2011 29 www.id-book.com
Affordance
Psychologist James J. Gibson originally introduced the term... all "action possibilities" latent in the environment... always in relation to people or animals and therefore dependent on their capabilities. eg. a set of steps affords climbing but not for a crawling infant. James J. Gibson (1977), The Theory of Affordances. In Perceiving, Acting, and Knowing, edited by Robert Shaw and John Bransford James J. Gibson (1979), The Ecological Approach to Visual Perception
1
![Page 30: What is interaction design?faculty.csuci.edu › David.Claveau › COMP549S18 › chapter1_slides.pdf · • Why is the TiVo remote so much better designed? – Peanut shaped to fit](https://reader036.vdocuments.mx/reader036/viewer/2022062921/5f0357397e708231d408bba9/html5/thumbnails/30.jpg)
©2011 30 www.id-book.com
Affordance
• Attributes of an object that suggest its use: a door handle invites/suggests/affords pulling a button invites/suggests/affords pushing
![Page 31: What is interaction design?faculty.csuci.edu › David.Claveau › COMP549S18 › chapter1_slides.pdf · • Why is the TiVo remote so much better designed? – Peanut shaped to fit](https://reader036.vdocuments.mx/reader036/viewer/2022062921/5f0357397e708231d408bba9/html5/thumbnails/31.jpg)
©2011 31 www.id-book.com
Affordance and Interaction Design
• Interface objects are often 2-D images on a display and do not have physical attributes like real objects
• Don Norman argues that interfaces have ‘perceived’ or virtual affordances – learned conventions of arbitrary mappings
– some mappings are better than others
![Page 32: What is interaction design?faculty.csuci.edu › David.Claveau › COMP549S18 › chapter1_slides.pdf · • Why is the TiVo remote so much better designed? – Peanut shaped to fit](https://reader036.vdocuments.mx/reader036/viewer/2022062921/5f0357397e708231d408bba9/html5/thumbnails/32.jpg)
©2011 32 www.id-book.com
Physical affordances
What do the following physical objects afford?
![Page 33: What is interaction design?faculty.csuci.edu › David.Claveau › COMP549S18 › chapter1_slides.pdf · • Why is the TiVo remote so much better designed? – Peanut shaped to fit](https://reader036.vdocuments.mx/reader036/viewer/2022062921/5f0357397e708231d408bba9/html5/thumbnails/33.jpg)
©2011 33 www.id-book.com
Virtual affordances What do the following images on a display afford? Would you know what to do with them?
![Page 34: What is interaction design?faculty.csuci.edu › David.Claveau › COMP549S18 › chapter1_slides.pdf · • Why is the TiVo remote so much better designed? – Peanut shaped to fit](https://reader036.vdocuments.mx/reader036/viewer/2022062921/5f0357397e708231d408bba9/html5/thumbnails/34.jpg)
©2011 34 www.id-book.com
Consistency
• Design an interface that uses similar elements for similar tasks
ctrl key plus first letter of command for an operation – ctrl+C, ctrl+V, ctrl+X
• Consistent interfaces are easier to learn and use
2
![Page 35: What is interaction design?faculty.csuci.edu › David.Claveau › COMP549S18 › chapter1_slides.pdf · • Why is the TiVo remote so much better designed? – Peanut shaped to fit](https://reader036.vdocuments.mx/reader036/viewer/2022062921/5f0357397e708231d408bba9/html5/thumbnails/35.jpg)
©2011 35 www.id-book.com
When consistency breaks down...
• What happens if there is more than one command starting with the same letter? – e.g. save, spelling, select, style
• Have to find other initials or combinations of
keys, thereby breaking the consistency rule – e.g. ctrl+S, ctrl+Sp, ctrl+shift+L
• Increases learning burden on user, making them
more prone to errors
![Page 36: What is interaction design?faculty.csuci.edu › David.Claveau › COMP549S18 › chapter1_slides.pdf · • Why is the TiVo remote so much better designed? – Peanut shaped to fit](https://reader036.vdocuments.mx/reader036/viewer/2022062921/5f0357397e708231d408bba9/html5/thumbnails/36.jpg)
©2011 36 www.id-book.com
Internal and External Consistency
• Internal consistency refers to designing operations to behave the same within an application
• External consistency refers to designing operations, interfaces, etc., to be the same across applications and devices
![Page 37: What is interaction design?faculty.csuci.edu › David.Claveau › COMP549S18 › chapter1_slides.pdf · • Why is the TiVo remote so much better designed? – Peanut shaped to fit](https://reader036.vdocuments.mx/reader036/viewer/2022062921/5f0357397e708231d408bba9/html5/thumbnails/37.jpg)
©2011 37 www.id-book.com
Keypad Layout
• A case of external inconsistency
1 2 3 4 5 6
7 8 9
7 8 9
1 2 3
4 5 6
0 0
phones, remote controls calculators, computer keypads
![Page 38: What is interaction design?faculty.csuci.edu › David.Claveau › COMP549S18 › chapter1_slides.pdf · • Why is the TiVo remote so much better designed? – Peanut shaped to fit](https://reader036.vdocuments.mx/reader036/viewer/2022062921/5f0357397e708231d408bba9/html5/thumbnails/38.jpg)
©2011 38 www.id-book.com
Constraints
• Limit the actions that are possible
• Help users avoid incorrect/dangerous actions
• Physical objects can be designed to constrain actions
e.g. only one way you can insert a key into a lock
3
![Page 39: What is interaction design?faculty.csuci.edu › David.Claveau › COMP549S18 › chapter1_slides.pdf · • Why is the TiVo remote so much better designed? – Peanut shaped to fit](https://reader036.vdocuments.mx/reader036/viewer/2022062921/5f0357397e708231d408bba9/html5/thumbnails/39.jpg)
©2011 39 www.id-book.com
• Where do you plug the mouse?
• Where do you plug the keyboard?
• top or bottom connector?
• Do the color coded icons help? From: www.baddesigns.com
![Page 40: What is interaction design?faculty.csuci.edu › David.Claveau › COMP549S18 › chapter1_slides.pdf · • Why is the TiVo remote so much better designed? – Peanut shaped to fit](https://reader036.vdocuments.mx/reader036/viewer/2022062921/5f0357397e708231d408bba9/html5/thumbnails/40.jpg)
©2011 40 www.id-book.com
(i) A provides direct adjacent mapping between icon and connector
(ii) B provides color
coding to associate the connectors with the labels
From: www.baddesigns.com
![Page 41: What is interaction design?faculty.csuci.edu › David.Claveau › COMP549S18 › chapter1_slides.pdf · • Why is the TiVo remote so much better designed? – Peanut shaped to fit](https://reader036.vdocuments.mx/reader036/viewer/2022062921/5f0357397e708231d408bba9/html5/thumbnails/41.jpg)
©2011 41 www.id-book.com
Feedback
• Send information back to the user about what has been done
• Includes sound, graphic highlight, animation and combinations of these – e.g. when screen button clicked, provide sound or red
highlight feedback:
“ccclichhk”
4
![Page 42: What is interaction design?faculty.csuci.edu › David.Claveau › COMP549S18 › chapter1_slides.pdf · • Why is the TiVo remote so much better designed? – Peanut shaped to fit](https://reader036.vdocuments.mx/reader036/viewer/2022062921/5f0357397e708231d408bba9/html5/thumbnails/42.jpg)
©2011 42 www.id-book.com
Visibility
• This is a control panel for an elevator • How does it work? • Push a button for the floor you want? • Nothing happens. Push any other
button? Still nothing. What do you need to do?
The required action is not visible !
From: www.baddesigns.com
5
![Page 43: What is interaction design?faculty.csuci.edu › David.Claveau › COMP549S18 › chapter1_slides.pdf · • Why is the TiVo remote so much better designed? – Peanut shaped to fit](https://reader036.vdocuments.mx/reader036/viewer/2022062921/5f0357397e708231d408bba9/html5/thumbnails/43.jpg)
©2011 43 www.id-book.com
Visibility
…you need to insert your room card in the slot by the buttons to get the elevator to work!
How would you make this action more visible? • make the card reader more obvious • provide an auditory message, that says what
to do (which language?) • provide a big label next to the card reader
that flashes when someone enters
• make relevant parts visible • make what has to be done obvious
![Page 44: What is interaction design?faculty.csuci.edu › David.Claveau › COMP549S18 › chapter1_slides.pdf · • Why is the TiVo remote so much better designed? – Peanut shaped to fit](https://reader036.vdocuments.mx/reader036/viewer/2022062921/5f0357397e708231d408bba9/html5/thumbnails/44.jpg)
©2011 44 www.id-book.com
What do I do if I am wearing black?
• Invisible automatic controls can make it more difficult to use