11

COSC 4107COSC 4107Human Computer InteractionHuman Computer Interaction

Haibin Zhu, PhD.Haibin Zhu, PhD.

Assistant ProfessorAssistant Professor

Department of Computer ScienceDepartment of Computer Science

Nipissing UniversityNipissing University

(C) 2002(C) 2002

22

InstructorInstructor

Haibin Zhu, Ph. D.Haibin Zhu, Ph. D.Assistant Professor Assistant Professor Department of CS and MathDepartment of CS and MathNipissing UniversityNipissing UniversityRoom: A124ARoom: A124AExt.: 4434Ext.: 4434Email: Email: haibinz@nipissingu.cahaibinz@nipissingu.caURL: URL: http://http://www.nipissingu.ca/faculty/haibinzwww.nipissingu.ca/faculty/haibinzOffice Hour: Mon. Tue. Thurs. Fri. 2:30pm-Office Hour: Mon. Tue. Thurs. Fri. 2:30pm-4:30pm; and by appointment4:30pm; and by appointment

33

Course DescriptionCourse DescriptionThe study of how users interact with computing technology. The study of how users interact with computing technology. HCI has become one of the most important areas of study and HCI has become one of the most important areas of study and endeavor in Information Science, Library Science and Technology endeavor in Information Science, Library Science and Technology Management. Management. Consumers often find that it is frustrating, confusing and difficult to work Consumers often find that it is frustrating, confusing and difficult to work with. with. Through its methods, techniques, and practices attempts to understand Through its methods, techniques, and practices attempts to understand the reason for this failure and to find user-centered solutions. the reason for this failure and to find user-centered solutions. The course is to introduce students to HCI/Usability presenting a The course is to introduce students to HCI/Usability presenting a corpus of knowledge, and a practical set of well known, tested and corpus of knowledge, and a practical set of well known, tested and necessary skills. We will consider the impact of technology on society necessary skills. We will consider the impact of technology on society and culture. and culture. – Students will also learn how to gauge the usability of digital environments, Students will also learn how to gauge the usability of digital environments,

tools and interfaces. tools and interfaces. – Students will be exposed to the most recent research behind the Students will be exposed to the most recent research behind the

development process. development process. – Students will learn how to conduct user and task analysis through a hands-Students will learn how to conduct user and task analysis through a hands-

on project and class discussion of the most relevant literature. on project and class discussion of the most relevant literature.

44

TextsTexts

Textbook:Textbook:– Preece, H. Rogers, J. and Sharp, Y. Beyond Preece, H. Rogers, J. and Sharp, Y. Beyond

Human-Computer Interaction, Wiley, Inc., Human-Computer Interaction, Wiley, Inc., 20022002

References:References:– Shneiderman, B., Designing the User Shneiderman, B., Designing the User

Interface, Addison-Wesley, 3rd ed, 2003Interface, Addison-Wesley, 3rd ed, 2003

Websites:Websites:– http://www.baddesigns.com

55

What is Interaction Design?What is Interaction Design?

66

AimsAims

Explain the difference between good and poor interaction Explain the difference between good and poor interaction design.design.Describe what interaction design is and how it relates to Describe what interaction design is and how it relates to human-computer interaction and other fields.human-computer interaction and other fields.Explain what usability is.Explain what usability is.Describe what is involved in the process of interaction Describe what is involved in the process of interaction design.design.Outline the different forms of guidance used in Outline the different forms of guidance used in interaction design.interaction design.Enable you to evaluate an interactive product and Enable you to evaluate an interactive product and explain what is good and bad about it in terms of the explain what is good and bad about it in terms of the goals and principles of interaction design. goals and principles of interaction design.

77

What is interaction design?What is interaction design?Designing interactive products to support people Designing interactive products to support people in their everyday and working livesin their everyday and working lives

– Sharp, Rogers and Preece (2002)Sharp, Rogers and Preece (2002)

The design of spaces for human communication The design of spaces for human communication and interaction and interaction

– Winograd (1997)Winograd (1997)

Analogue:Analogue:– Architect vs. civil engineersArchitect vs. civil engineers– Designing a house vs. building a houseDesigning a house vs. building a house– Interaction designers vs. software engineersInteraction designers vs. software engineers– Designing an interactive software vs. implementing the Designing an interactive software vs. implementing the

softwaresoftware

88

Goals of interaction designGoals of interaction design

Develop usable productsDevelop usable products– Usability means easy to learn, effective to use Usability means easy to learn, effective to use

and provide an enjoyable experienceand provide an enjoyable experience

Involve users in the design processInvolve users in the design process

99

Example of bad and good designExample of bad and good design– Elevator controls and labels on the bottom row all Elevator controls and labels on the bottom row all

look the same, so it is easy to push a label by look the same, so it is easy to push a label by mistake instead of a control buttonmistake instead of a control button

– People do not make same mistake for the labels People do not make same mistake for the labels and buttons on the top row. Why not?and buttons on the top row. Why not?

From: http://www.baddesigns.com/elecon.html

1010

Why is this vending machine so Why is this vending machine so bad?bad?

Need to Need to push buttonpush button firstfirst to activate reader to activate reader

Normally Normally insert billinsert bill first before making first before making selectionselection

Contravenes well Contravenes well known conventionknown convention

From: http://www.baddesigns.com/parking2.html

1111

What to designWhat to design

Need to take into account:Need to take into account:– Who the users areWho the users are– What activities are being carried outWhat activities are being carried out– Where the interaction is taking placeWhere the interaction is taking place

Need to optimise the interactions users have Need to optimise the interactions users have with a productwith a product– Such that they match the users activities and needsSuch that they match the users activities and needs

1212

Understanding users’ needsUnderstanding users’ needs

– Need to take into account what people are Need to take into account what people are good and bad atgood and bad at

– Consider what might help people in the way Consider what might help people in the way they currently do thingsthey currently do things

– Listen to what people want and get them Listen to what people want and get them involvedinvolved

– Use tried and tested user-based methodsUse tried and tested user-based methods

1313

ActivityActivity

How does making a call differ when using How does making a call differ when using a:a:– Cell phoneCell phone– Public phone box?Public phone box?

Consider the kinds of user, type of activity Consider the kinds of user, type of activity and context of useand context of use

1414

What is an interface?What is an interface?

??

1515

Evolution of HCI ‘interfaces’Evolution of HCI ‘interfaces’50s50s - Interface at the hardware level for - Interface at the hardware level for engineers - switch panelsengineers - switch panels60-70s60-70s - interface at the programming level - - interface at the programming level - COBOL, FORTRANCOBOL, FORTRAN70-90s70-90s - Interface at the terminal level - - Interface at the terminal level - command languages command languages 80s80s - Interface at the interaction dialogue level - Interface at the interaction dialogue level - GUIs, multimedia- GUIs, multimedia90s90s - Interface at the work setting - networked - Interface at the work setting - networked systems, groupware systems, groupware 00s00s - Interface becomes pervasive - Interface becomes pervasive– Mobile devices, consumer electronics, Mobile devices, consumer electronics,

interactive screens, embedded technologyinteractive screens, embedded technology

1616

From HCI to Interaction DesignFrom HCI to Interaction DesignHuman-computer interactionHuman-computer interaction (HCI)(HCI) is: is: ““concerned with the design, evaluation and concerned with the design, evaluation and implementation of interactive computing systems for implementation of interactive computing systems for human use and with the study of major phenomena human use and with the study of major phenomena surrounding them” (ACM SIGCHI, 1992, p.6)surrounding them” (ACM SIGCHI, 1992, p.6)

Interaction design (ID)Interaction design (ID) is: is: “the design of spaces for human communication and “the design of spaces for human communication and interaction” interaction”

– Winograd (1997)Winograd (1997)

Increasingly, more application areas, more Increasingly, more application areas, more technologies and more issues to consider when technologies and more issues to consider when designing ‘interfaces’designing ‘interfaces’

1717

Relationship between ID, HCI Relationship between ID, HCI and other fieldsand other fields

Interdisciplinary fields (e.g HCI, CSCW)

Design practices(e.g. graphic design)

Academicdisciplines(e.g. computer science,psychology)

InteractionDesign

1818

Relationship between ID, HCI Relationship between ID, HCI and other fieldsand other fields

Academic disciplines contributing to ID: Academic disciplines contributing to ID: – PsychologyPsychology– Social SciencesSocial Sciences– Computing SciencesComputing Sciences– EngineeringEngineering– ErgonomicsErgonomics– Informatics Informatics

1919

Relationship between ID, HCI Relationship between ID, HCI and other fieldsand other fields

Design practices contributing to ID:Design practices contributing to ID:– Graphic designGraphic design– Product designProduct design– Artist-designArtist-design– Industrial designIndustrial design– Film industryFilm industry

2020

Relationship between ID, HCI Relationship between ID, HCI and other fieldsand other fields

Interdisciplinary fields that ‘do’ interaction Interdisciplinary fields that ‘do’ interaction design:design:

– HCIHCI– Human FactorsHuman Factors– Cognitive EngineeringCognitive Engineering– Cognitive ErgonomicsCognitive Ergonomics– Computer Supported Co-operative WorkComputer Supported Co-operative Work– Information SystemsInformation Systems

2121

How easy is it to work in How easy is it to work in multidisciplinary teams?multidisciplinary teams?

More people involved in doing interaction More people involved in doing interaction design the more ideas and designs design the more ideas and designs generated…but…generated…but…

The more difficult it can be to The more difficult it can be to communicate and progress forwards the communicate and progress forwards the designs being createddesigns being created

2222

Interaction design in businessInteraction design in businessIncreasing number of ID consultancies, examples of well known Increasing number of ID consultancies, examples of well known ones include:ones include:

– Nielsen Norman GroupNielsen Norman Group: “help companies enter the age of : “help companies enter the age of the consumer, designing human-centered products and the consumer, designing human-centered products and

services” services” http://www.nngroup.com/http://www.nngroup.com/– Swim:Swim: “provides a wide range of design services, in each “provides a wide range of design services, in each

case targeted to address the product development needs at case targeted to address the product development needs at

hand” hand” http://www.swimstudio.com/http://www.swimstudio.com/– IDEO: “IDEO: “creates products, services and environments for creates products, services and environments for

companies pioneering new ways to provide value to their companies pioneering new ways to provide value to their

customers” customers” http://www.ideo.com/http://www.ideo.com/

2323

What do professionals do in the What do professionals do in the ID business?ID business?

interaction designersinteraction designers - people involved in the design of all the - people involved in the design of all the interactive aspects of a productinteractive aspects of a product

usability engineersusability engineers - people who focus on evaluating products, - people who focus on evaluating products, using usability methods and principlesusing usability methods and principles

web designersweb designers - people who develop and create the visual design - people who develop and create the visual design of websites, such as layoutsof websites, such as layouts

information architectsinformation architects - people who come up with ideas of how to - people who come up with ideas of how to plan and structure interactive productsplan and structure interactive products

user experience designersuser experience designers - people who do all the above but who - people who do all the above but who may also carry out field studies to inform the design of productsmay also carry out field studies to inform the design of products

2424

What is involved in the process What is involved in the process of interaction design of interaction design

Identify needs and establish requirementsIdentify needs and establish requirements

Develop alternative designsDevelop alternative designs

Build interactive prototypes that can be Build interactive prototypes that can be communicated and assessedcommunicated and assessed

Evaluate what is being built throughout the Evaluate what is being built throughout the processprocess

2525

Core characteristics of Core characteristics of interaction designinteraction design

users should be involved through the users should be involved through the development of the projectdevelopment of the project

specific usability and user experience goals specific usability and user experience goals need to be identified, clearly documented and need to be identified, clearly documented and agreed at the beginning of the projectagreed at the beginning of the project

iteration is needed through the core activitiesiteration is needed through the core activities

2626

Usability goalsUsability goals

Effective to useEffective to use

Efficient to useEfficient to use

Safe to useSafe to use

Have good utilityHave good utility

Easy to learnEasy to learn

Easy to remember how to useEasy to remember how to use

2727

Activity on usabilityActivity on usability

How long should it take and how long How long should it take and how long does it actually take to:does it actually take to:– use a VCR to play a video?use a VCR to play a video?– use a VCR to pre-record two programs?use a VCR to pre-record two programs?– use an authoring tool to create a website?use an authoring tool to create a website?

2828

User experience goalsUser experience goals

– SatisfyingSatisfying - rewarding- rewarding– FunFun - support creativity- support creativity– EnjoyableEnjoyable - emotionally fulfilling- emotionally fulfilling– EntertainingEntertaining …and more…and more– HelpfulHelpful– MotivatingMotivating– Aesthetically pleasingAesthetically pleasing

2929

Usability and user experience Usability and user experience goals goals

How do usability goals differ from user How do usability goals differ from user experience goals?experience goals?

Are there trade-offs between the two kinds Are there trade-offs between the two kinds of goals?of goals?– e.g. can a product be both fun and safe?e.g. can a product be both fun and safe?

How easy is it to measure usability versus How easy is it to measure usability versus user experience goals?user experience goals?

3030

Design principlesDesign principles

Generalizable Generalizable abstractions for thinking about abstractions for thinking about different aspects of designdifferent aspects of design

The do’s and don’ts of interaction designThe do’s and don’ts of interaction design

What to provide and what not to provide at What to provide and what not to provide at the interfacethe interface

Derived from a mix of theory-based Derived from a mix of theory-based knowledge, experience and common-senseknowledge, experience and common-sense

3131

VisibilityVisibility• • This is a control panel for an This is a control panel for an

elevator. elevator. • • How does it work?How does it work?• • Push a button for the floor you want?Push a button for the floor you want?

• • Nothing happens. Push any other Nothing happens. Push any other button? Still nothing. What do you button? Still nothing. What do you need to do?need to do?

It is not visible as to what to do!It is not visible as to what to do!From: www.baddesigns.com

3232

VisibilityVisibility

……you need to insert your room card in the slot by the buttons to get the you need to insert your room card in the slot by the buttons to get the elevator to work!elevator to work!

How would you make this action more How would you make this action more visible?visible?

• • make the card reader more obviousmake the card reader more obvious• • provide an auditory message, that says what to do (which provide an auditory message, that says what to do (which

language?)language?)• • provide a big label next to the card reader that flashes when provide a big label next to the card reader that flashes when

someone enterssomeone enters

• • make relevant parts visiblemake relevant parts visible• • make what has to be done obviousmake what has to be done obvious

3333

FeedbackFeedback

Sending information back to the user about Sending information back to the user about what has been donewhat has been done

Includes sound, highlighting, animation and Includes sound, highlighting, animation and combinations of thesecombinations of these

– e.g. when screen button clicked on provides sound e.g. when screen button clicked on provides sound or red highlight feedback:or red highlight feedback:

“ccclichhk”

3434

ConstraintsConstraints

Restricting the possible actions that can Restricting the possible actions that can be performedbe performed

Helps prevent user from selecting Helps prevent user from selecting incorrect optionsincorrect options

Three main types (Norman, 1999)Three main types (Norman, 1999)– physicalphysical– cultural cultural – logicallogical

3535

Physical constraintsPhysical constraints

Refer to the way physical objects restrict the Refer to the way physical objects restrict the movement of thingsmovement of things– E.g. only one way you can insert a key into a lockE.g. only one way you can insert a key into a lock

How many ways can you insert a CD or DVD How many ways can you insert a CD or DVD disk into a computer?disk into a computer?How physically constraining is this action?How physically constraining is this action?How does it differ from the insertion of a floppy How does it differ from the insertion of a floppy disk into a computer?disk into a computer?

3636

Logical constraintsLogical constraints

Exploits people’s everyday common sense Exploits people’s everyday common sense reasoning about the way the world worksreasoning about the way the world works

An example is the logical relationship between An example is the logical relationship between physical layout of a device and the way it works physical layout of a device and the way it works as the next slide illustratesas the next slide illustrates

3737

Logical or ambiguous design?Logical or ambiguous design?

Where do you plug the Where do you plug the mouse? mouse?

Where do you plug the Where do you plug the keyboard?keyboard?

top or bottom connector?top or bottom connector?

Do the color coded icons Do the color coded icons help?help?

From: www.baddesigns.com

3838

How to design them more logicallyHow to design them more logically(i) A provides direct (i) A provides direct

adjacent mapping adjacent mapping between icon and between icon and connectorconnector

(ii) B provides color (ii) B provides color coding to associate coding to associate the connectors with the connectors with the labelsthe labels

From: www.baddesigns.com

3939

Cultural constraintsCultural constraints

Learned arbitrary conventions Learned arbitrary conventions like red triangles for warninglike red triangles for warning

Can be universal or culturally specificCan be universal or culturally specific

4040

Which are universal and which Which are universal and which are culturally-specific?are culturally-specific?

4141

MappingMapping

Relationship between controls and their Relationship between controls and their movements and the results in the worldmovements and the results in the world

Why is this a poor mapping of control Why is this a poor mapping of control buttons?buttons?

4242

MappingMapping

Why is this a better mapping?Why is this a better mapping?

The control buttons are mapped better The control buttons are mapped better onto the sequence of actions of fast onto the sequence of actions of fast rewind, rewind, play and fast forwardrewind, rewind, play and fast forward

4343

Activity on mappings Activity on mappings

– Which controls go with which rings Which controls go with which rings (burners)?(burners)?

A B C D

4444

Why is this a better design?Why is this a better design?

4545

ConsistencyConsistency

Design interfaces to have similar operations and Design interfaces to have similar operations and use similar elements for similar tasksuse similar elements for similar tasks

For example:For example:– always use ctrl key plus first initial of the command for always use ctrl key plus first initial of the command for

an operation – ctrl+C, ctrl+S, ctrl+Oan operation – ctrl+C, ctrl+S, ctrl+O

Main benefit is consistent interfaces are easier Main benefit is consistent interfaces are easier to learn and useto learn and use

4646

When consistency breaks downWhen consistency breaks down

What happens if there is more than one What happens if there is more than one command starting with the same letter?command starting with the same letter?– e.g. save, spelling, select, stylee.g. save, spelling, select, style

Have to find other initials or combinations of Have to find other initials or combinations of keys, thereby breaking the consistency rulekeys, thereby breaking the consistency rule– E.g. ctrl+S, ctrl+Sp, ctrl+shift+LE.g. ctrl+S, ctrl+Sp, ctrl+shift+L

Increases learning burden on user, making them Increases learning burden on user, making them more prone to errors more prone to errors

4747

Internal and external Internal and external consistencyconsistency

Internal consistency refers to designing Internal consistency refers to designing operations to behave the same within an operations to behave the same within an applicationapplication– Difficult to achieve with complex interfacesDifficult to achieve with complex interfaces

External consistency refers to designing External consistency refers to designing operations, interfaces, etc., to be the same operations, interfaces, etc., to be the same across applications and devicesacross applications and devices– Very rarely the case, based on different designer’s Very rarely the case, based on different designer’s

preferencepreference

4848

Keypad numbers layoutKeypad numbers layout

A case of external inconsistencyA case of external inconsistency

1 2 3

4 5 6

7 8 9

7 8 9

1 2 3

4 5 6

0 0

(a) phones, remote controls (b) calculators, computer keypads

4949

Affordances: to give a clueAffordances: to give a clue

Refers to an attribute of an object that allows people to Refers to an attribute of an object that allows people to know how to use itknow how to use it– e.g. a mouse button invites pushing, a door handle affords e.g. a mouse button invites pushing, a door handle affords

pullingpulling

Norman (1988) used the term to discuss the design of Norman (1988) used the term to discuss the design of everyday objectseveryday objects

Since has been much popularised in interaction design Since has been much popularised in interaction design to discuss how to design interface objectsto discuss how to design interface objects– e.g. scrollbars to afford moving up and down, icons to afford e.g. scrollbars to afford moving up and down, icons to afford

clicking on clicking on

5050

What does ‘affordance’ have to What does ‘affordance’ have to offer interaction design?offer interaction design?

Interfaces are virtual and do not have Interfaces are virtual and do not have affordances like physical objectsaffordances like physical objects

Norman argues it does not make sense to talk Norman argues it does not make sense to talk about interfaces in terms of ‘real’ affordances about interfaces in terms of ‘real’ affordances

Instead interfaces are better conceptualised Instead interfaces are better conceptualised as ‘perceived’ affordancesas ‘perceived’ affordances– Learned conventions of arbitrary mappings Learned conventions of arbitrary mappings

between action and effect at the interfacebetween action and effect at the interface– Some mappings are better than othersSome mappings are better than others

5151

Activity Activity

– Physical affordances: Physical affordances: How do the following physical objects afford? Are How do the following physical objects afford? Are

they obvious?they obvious?

5252

Activity Activity

– Virtual affordancesVirtual affordancesHow do the following screen objects afford?How do the following screen objects afford?

What if you were a novice user?What if you were a novice user?

Would you know what to do with them? Would you know what to do with them?

5353

Usability principlesUsability principles

Similar to design principles, except more Similar to design principles, except more prescriptiveprescriptive

Used mainly as the basis for evaluating Used mainly as the basis for evaluating systemssystems

Provide a framework for heuristic Provide a framework for heuristic evaluationevaluation

5454

Usability principles (Nielsen 2001)Usability principles (Nielsen 2001)

Visibility of system statusVisibility of system statusMatch between system and the real worldMatch between system and the real worldUser control and freedomUser control and freedomConsistency and standardsConsistency and standardsHelp users recognize, diagnose and recover from Help users recognize, diagnose and recover from errorserrorsError preventionError preventionRecognition rather than recallRecognition rather than recallFlexibility and efficiency of useFlexibility and efficiency of useAesthetic and minimalist designAesthetic and minimalist designHelp and documentationHelp and documentation

5555

Key pointsKey points

ID is concerned with designing interactive ID is concerned with designing interactive products to support people in their everyday and products to support people in their everyday and working livesworking lives

ID is multidisciplinary, involving many inputs ID is multidisciplinary, involving many inputs from wide-reaching disciplines and fieldsfrom wide-reaching disciplines and fields

ID is big business even after the dot.com crash!ID is big business even after the dot.com crash!

5656

Key pointsKey points

ID involves taking into account a number of ID involves taking into account a number of interdependent factors including context of use, interdependent factors including context of use, type of task and kind of usertype of task and kind of userNeed to strive for usability and user experience Need to strive for usability and user experience goalsgoalsDesign and usability principles are useful Design and usability principles are useful heuristics for analyzing and evaluating heuristics for analyzing and evaluating interactive productsinteractive products