what is interaction design?faculty.csuci.edu › david.claveau › comp549s18 ›...

©2011 1 www.id-book.com

What is interaction design?

Chapter 1


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


How about this vending machine ?

• Need to push button first to activate reader

• Usually insert money before making selection

• Breaks well known convention


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

©2011

New ways to interact...

6 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


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


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


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?


Goals of Interaction Design

• usability goals

• user experience goals


Usability Goals

• Effective to use • Efficient to use • Safe to use • Easy to learn and remember


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?


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)

©2011

Apple Products

15 www.id-book.com

©2011

Apple Products

16 www.id-book.com

Simple, elegant, distinct brand, pleasurable, must have fashion item, catchy names, cool...ecosystem!


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


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?


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


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


Relationship with other Fields

• Design practices that contribute to ID:

–Graphic design –Product design – Industrial design – Fashion design – Interior design –Architecture


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


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”


A Design Process for ID

• Requirements

• Alternatives

• Prototypes

• Evaluation


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 !


Design principles

• The dos and don’ts of interaction design

• Derived from a mix of knowledge, experience and common-sense

©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”


Design principles

1. Affordance 2. Consistency 3. Constraints 4. Feedback 5. Visibility


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


Affordance

• Attributes of an object that suggest its use: a door handle invites/suggests/affords pulling a button invites/suggests/affords pushing


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


Physical affordances

What do the following physical objects afford?


Virtual affordances What do the following images on a display afford? Would you know what to do with them?


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


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


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


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


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


• 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


(i) A provides direct adjacent mapping between icon and connector

(ii) B provides color

coding to associate the connectors with the labels



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


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 !


5


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


What do I do if I am wearing black?

• Invisible automatic controls can make it more difficult to use

what is interaction design?faculty.csuci.edu › david.claveau › comp549s18 ›...

Documents