interaction design basics - tongji university · 2018-02-27 · interaction design basics chapter...

Interaction Design Basics


Hanli Wang (�¢m)

Email: [email protected]

Department of Computer Science and Technology,Tongji University


Table of Contents

Chapter overview

What is design

Design process

User focus

Navigation designLocal structureGlobal structure

User action and control

Prototyping

Summary


Chapter overview

Chapter overviewInteraction design is about creating interventions in often complexsituations using technology of many kinds including PC software,the web and physical devices.

I Design involvesI achieving goals within constraints and trade-offI understanding the raw materials: computer and humanI accepting limitations of humans and of design

I Design process has several stages and is iterativeI Interaction starts with getting to know the users and their

contextI finding out who they are and what they are likeI talking to them, watching them

I Navigation: finding a way around a systemI helping users know where they are, where they have been and

what they can do next

I Complexity of design means we don’t get it right first timeI applying iteration and prototypes to try out and evaluate


Chapter overview


I Design involves

I achieving goals within constraints and trade-offI understanding the raw materials: computer and humanI accepting limitations of humans and of design







Chapter overview


I Design involvesI achieving goals within constraints and trade-off

I understanding the raw materials: computer and humanI accepting limitations of humans and of design







Chapter overview


I Design involvesI achieving goals within constraints and trade-offI understanding the raw materials: computer and human

I accepting limitations of humans and of design







Chapter overview









Chapter overview



I Design process has several stages and is iterative

I Interaction starts with getting to know the users and theircontext

I finding out who they are and what they are likeI talking to them, watching them





Chapter overview




context

I finding out who they are and what they are likeI talking to them, watching them





Chapter overview




contextI finding out who they are and what they are like

I talking to them, watching them





Chapter overview









Chapter overview





I Navigation: finding a way around a system

I helping users know where they are, where they have been andwhat they can do next



Chapter overview









Chapter overview







I Complexity of design means we don’t get it right first time

I applying iteration and prototypes to try out and evaluate


Chapter overview









What is design

What is design

I Achieving goals within constraints

I GoalsI What is the purpose of the design intending to produceI Who is it forI Why do they want itI · · · · · ·

I ConstraintsI What materials must we useI What standards must we adoptI How much can it costI How much time do we have to develop itI Are there health and safety issuesI · · · · · ·

I Trade-off: we cannot always achieve all our goals within theconstraints

I Choosing which goals or constraints can be relaxed so thatothers can be met


What is design

What is design

I Achieving goals within constraintsI Goals

I What is the purpose of the design intending to produceI Who is it forI Why do they want itI · · · · · ·





What is design

What is design


I What is the purpose of the design intending to produce

I Who is it forI Why do they want itI · · · · · ·





What is design

What is design


I What is the purpose of the design intending to produceI Who is it for

I Why do they want itI · · · · · ·





What is design

What is design


I What is the purpose of the design intending to produceI Who is it forI Why do they want it

I · · · · · ·I Constraints

I What materials must we useI What standards must we adoptI How much can it costI How much time do we have to develop itI Are there health and safety issuesI · · · · · ·




What is design

What is design







What is design

What is design



I Constraints

I What materials must we useI What standards must we adoptI How much can it costI How much time do we have to develop itI Are there health and safety issuesI · · · · · ·




What is design

What is design



I ConstraintsI What materials must we use

I What standards must we adoptI How much can it costI How much time do we have to develop itI Are there health and safety issuesI · · · · · ·




What is design

What is design



I ConstraintsI What materials must we useI What standards must we adopt

I How much can it costI How much time do we have to develop itI Are there health and safety issuesI · · · · · ·




What is design

What is design



I ConstraintsI What materials must we useI What standards must we adoptI How much can it cost

I How much time do we have to develop itI Are there health and safety issuesI · · · · · ·




What is design

What is design



I ConstraintsI What materials must we useI What standards must we adoptI How much can it costI How much time do we have to develop it

I Are there health and safety issuesI · · · · · ·




What is design

What is design



I ConstraintsI What materials must we useI What standards must we adoptI How much can it costI How much time do we have to develop itI Are there health and safety issues

I · · · · · ·I Trade-off: we cannot always achieve all our goals within the

constraintsI Choosing which goals or constraints can be relaxed so that

others can be met


What is design

What is design







What is design

The golden rule of design

I The golden rule of design:

understand your materialsI For HCI, the obvious materials are human and computer

I understand computers: limitations, capacities, tools, platformsI understand people: psychological, social aspects, human errorI understand interaction


What is design


I The golden rule of design: understand your materials

I For HCI, the obvious materials are human and computerI understand computers: limitations, capacities, tools, platformsI understand people: psychological, social aspects, human errorI understand interaction


What is design


I The golden rule of design: understand your materialsI For HCI, the obvious materials are human and computer



What is design



I understand computers:

limitations, capacities, tools, platformsI understand people: psychological, social aspects, human errorI understand interaction


What is design



I understand computers: limitations, capacities, tools, platforms

I understand people: psychological, social aspects, human errorI understand interaction


What is design



I understand computers: limitations, capacities, tools, platformsI understand people:

psychological, social aspects, human errorI understand interaction


What is design



I understand computers: limitations, capacities, tools, platformsI understand people: psychological, social aspects, human error

I understand interaction


What is design





What is design

Human error and central message

I It is the nature of humans to make errors

I Systems should be designed to reduce the likelihood of errorsand to minimize the consequences when errors happen

I Under stress, arcane or inconsistent interfaces will lead toerrors

I Treat humans as ‘physical materials’, and understand the wayhuman failures occur and build the rest of the interfaceaccordingly

I The core of interaction design: userI put the user first, keep the user in the center, and remember

the user at the end


What is design


I It is the nature of humans to make errorsI Systems should be designed to reduce the likelihood of errors

and to minimize the consequences when errors happen

I Under stress, arcane or inconsistent interfaces will lead toerrors



the user at the end


What is design



and to minimize the consequences when errors happenI Under stress, arcane or inconsistent interfaces will lead to

errors



the user at the end


What is design




errorsI Treat humans as ‘physical materials’, and understand the way

human failures occur and build the rest of the interfaceaccordingly


the user at the end


What is design






I The core of interaction design: user

I put the user first, keep the user in the center, and rememberthe user at the end


What is design







the user at the end


Design process

The process of design

I Requirements - what is wantedI interviewing people, videotaping them, looking at the

documents and objects that they work with, observing themdirectly


Design process


I Requirements

- what is wantedI interviewing people, videotaping them, looking at the



Design process


I Requirements - what is wanted

I interviewing people, videotaping them, looking at thedocuments and objects that they work with, observing themdirectly


Design process


I Requirements - what is wantedI interviewing people, videotaping them, looking at the



Design process


I Analysis - the results of observation and interview need to beordered to bring out key issues and communicate with laterstages of design

I Applying task models to capture how people carry out varioustasks

I Scenarios, rich stories of interaction, used in conjunction withtask analysis or on their own to record and make interaction


Design process


I Analysis

- the results of observation and interview need to beordered to bring out key issues and communicate with laterstages of design




Design process


I Analysis - the results of observation and interview need to beordered to bring out key issues and communicate with laterstages of design




Design process


I Design - the central stage when you move from what youwant, to how to do it

I numerous rules, guidelines and design principles for designI taking into account different kinds of userI cognitive models, organizational issues and understanding

communication for design


Design process


I Design

- the central stage when you move from what youwant, to how to do it




Design process






Design process



I numerous rules, guidelines and design principles for design

I taking into account different kinds of userI cognitive models, organizational issues and understanding



Design process



I numerous rules, guidelines and design principles for designI taking into account different kinds of user

I cognitive models, organizational issues and understandingcommunication for design


Design process






Design process


I Iteration and prototypingI humans are complex and we cannot expect to get designs right

first timeI need to evaluate a design to see how well it is and where

improvements requiredI prototyping provides early versions of systems to try out with

real users


Design process


I Iteration and prototyping

I humans are complex and we cannot expect to get designs rightfirst time

I need to evaluate a design to see how well it is and whereimprovements required

I prototyping provides early versions of systems to try out withreal users


Design process



first time

I need to evaluate a design to see how well it is and whereimprovements required



Design process




improvements required



Design process




improvements requiredI prototyping provides early versions of systems to try out with

real users


Design process


I Implementation and deploymentI when happy with design, we need to create it and deploy itI writing code, perhaps making hardware, writing documentation

and manuals - everything that goes into a real system


Design process


I Implementation and deployment

I when happy with design, we need to create it and deploy itI writing code, perhaps making hardware, writing documentation



Design process


I Implementation and deploymentI when happy with design, we need to create it and deploy it

I writing code, perhaps making hardware, writing documentationand manuals - everything that goes into a real system


Design process


I Implementation and deploymentI when happy with design, we need to create it and deploy itI writing code, perhaps making hardware, writing documentation



Design process


I ‘help! how can I ever do all this?’I your time is limited - there is a trade-off between the length of

the design period and the quality of the final designI sometimes has to accept a design as final even if not perfectI often better to have a product acceptable but on time and to

cost than to have perfect one but is late and over budgetI the real problem is not to find faults nor to work out how to fix

them; instead the issue is: which usability problems worthfixing


Design process


I ‘help! how can I ever do all this?’

I your time is limited - there is a trade-off between the length ofthe design period and the quality of the final design

I sometimes has to accept a design as final even if not perfectI often better to have a product acceptable but on time and to




Design process


I ‘help! how can I ever do all this?’I your time is limited

- there is a trade-off between the length ofthe design period and the quality of the final design





Design process



the design period and the quality of the final design





Design process



the design period and the quality of the final designI sometimes has to accept a design as final even if not perfect

I often better to have a product acceptable but on time and tocost than to have perfect one but is late and over budget

I the real problem is not to find faults nor to work out how to fixthem; instead the issue is: which usability problems worthfixing


Design process




cost than to have perfect one but is late and over budget

I the real problem is not to find faults nor to work out how to fixthem; instead the issue is: which usability problems worthfixing


Design process





them;

instead the issue is: which usability problems worthfixing


Design process







User focus

User focus

I The start of any interaction design must be the intended useror users

I Know your usersI Who are they

I young or old, experienced computer users or novicesI tempting to think of a generic user with generic skills and

generic goals; however, it is probably better, either instead orin addition, to think of several specific users

I Probably not like youI when designing a system you assume your own interests and

abilitiesI individuals differ a lot

I Talk to themI interviews, open-ended discussions, or bringing the potential

users fully into the design process

I Watch themI sitting and taking notes of how they spend a day, watching

particular activities, using a video camera or tape recorder


User focus

User focus



I young or old, experienced computer users or novices

I tempting to think of a generic user with generic skills andgeneric goals; however, it is probably better, either instead orin addition, to think of several specific users








User focus

User focus




generic goals;

however, it is probably better, either instead orin addition, to think of several specific users








User focus

User focus












User focus

User focus





I Probably not like you

I when designing a system you assume your own interests andabilities

I individuals differ a lot






User focus

User focus






abilities

I individuals differ a lot






User focus

User focus












User focus

User focus







I Talk to them

I interviews, open-ended discussions, or bringing the potentialusers fully into the design process




User focus

User focus












User focus

User focus









I Watch them

I sitting and taking notes of how they spend a day, watchingparticular activities, using a video camera or tape recorder


User focus

User focus












User focus

User focus (Cont’d)

I Stanford online course videos by Prof. Scott Klemmer aboutusers and goal:

I Interviewing

I Participant observation

I Additional needfinding

I Creating design goals


Navigation design

Navigation design

I During interaction, we need to be able to understand whatwill happen after performing an action (e.g., a button ispressed), to understand where we are in the interaction.

I Thinking about structure:I local structure - looking from one screen or page outI global structure - structure of site, movement between screens


Navigation design

Navigation design


I Thinking about structure:I local structure

- looking from one screen or page outI global structure - structure of site, movement between screens


Navigation design

Navigation design


I Thinking about structure:I local structure - looking from one screen or page out

I global structure - structure of site, movement between screens


Navigation design

Navigation design


I Thinking about structure:I local structure - looking from one screen or page outI global structure

- structure of site, movement between screens


Navigation design

Navigation design


I Thinking about structure:I local structure - looking from one screen or page outI global structure - structure of site, movement between screens


Navigation design

Local structure

Local structure

I Much of interaction involves goal-seeking behavior

I Users have some idea of what they are after and a partialmodel of the system.

I If users had perfect knowledge of what they wanted and howthe system worked they could simply take the shortest path towhat they want, pressing all the right buttons and links.

I However, in a world of partial knowledge users meanderthrough the system.

I At each point in the interaction users can make someassessment of whether they are getting closer to their goal

I To do goal seeking, each state of the system or eachscreen needs to give users enough knowledge of what todo to get closer to the goal.


Navigation design

Local structure

Local structure

I Much of interaction involves goal-seeking behaviorI Users have some idea of what they are after and a partial

model of the system.

I If users had perfect knowledge of what they wanted and howthe system worked they could simply take the shortest path towhat they want, pressing all the right buttons and links.





Navigation design

Local structure

Local structure

I Much of interaction involves goal-seeking behaviorI Users have some idea of what they are after and a partial

model of the system.I If users had perfect knowledge of what they wanted and how

the system worked they could simply take the shortest path towhat they want, pressing all the right buttons and links.





Navigation design

Local structure

Local structure (Cont’d)

I When looking at a single web page, screen or state of adevice, consider

I knowing where you areI knowing what you can doI knowing where you are going - or what will happenI knowing where you’ve been - or what you’ve done


Navigation design

Local structure



I knowing where you are

I knowing what you can doI knowing where you are going - or what will happenI knowing where you’ve been - or what you’ve done


Navigation design

Local structure



I knowing where you areI knowing what you can do

I knowing where you are going - or what will happenI knowing where you’ve been - or what you’ve done


Navigation design

Local structure



I knowing where you areI knowing what you can doI knowing where you are going - or what will happen

I knowing where you’ve been - or what you’ve done


Navigation design

Local structure



I knowing where you areI knowing what you can doI knowing where you are going - or what will happenI knowing where you’ve been - or what you’ve done


Navigation design

Local structure

where you are

I The screen, web page or device displays should make clearwhere you are in terms of the interaction or state of thesystem.


Navigation design

Local structure

what you can do

I What can be pressed or clicked to go somewhere or dosomething

I Some web pages are particularly badI unclear which images are pure decoration and which are links

to take you somewhere

I On web the standard underlined links make it clear which textis clickable and which is not


Navigation design

Local structure

what you can do


I Some web pages are particularly bad

I unclear which images are pure decoration and which are linksto take you somewhere



Navigation design

Local structure

what you can do


I Some web pages are particularly badI unclear which images are pure decoration and which are links

to take you somewhere



Navigation design

Local structure

where you are going

I Where you are going or what will happen

I You can try clicking the button to see - not recommendedI you then have to use some sort of ‘back’ mechanism to returnI clicking button may already have caused some bad effectI particularly annoying where response times are slow


Navigation design

Local structure

where you are going

I Where you are going or what will happenI You can try clicking the button to see

- not recommendedI you then have to use some sort of ‘back’ mechanism to returnI clicking button may already have caused some bad effectI particularly annoying where response times are slow


Navigation design

Local structure

where you are going

I Where you are going or what will happenI You can try clicking the button to see - not recommended

I you then have to use some sort of ‘back’ mechanism to returnI clicking button may already have caused some bad effectI particularly annoying where response times are slow


Navigation design

Local structure

where you are going


I you then have to use some sort of ‘back’ mechanism to return

I clicking button may already have caused some bad effectI particularly annoying where response times are slow


Navigation design

Local structure

where you are going


I you then have to use some sort of ‘back’ mechanism to returnI clicking button may already have caused some bad effect

I particularly annoying where response times are slow


Navigation design

Local structure

where you are going


I you then have to use some sort of ‘back’ mechanism to returnI clicking button may already have caused some bad effectI particularly annoying where response times are slow


Navigation design

Local structure

where you have been

I help feel in control and understand navigation of theinformation space

I Most web browsers offer a history system and also a ‘back’button to keep a list of recently visited pages


Navigation design

Global structure

Global structure

I The overall structure of an application

I various screens, pages or device states link to one another

I One way to organize a system is in some form of hierarchyI organized along functional boundaries (or different kinds of things), or by

roles, user type, etc

I The hierarchy links screens, pages or states in logical groupings

I a high-level breakdown of amessaging system

I hierarchy helps during design,

also be used to structure the

actual systemI E.g., this may reflect the

menu structure of anapplication or a web site


Navigation design

Global structure

Global structure

I The overall structure of an applicationI various screens, pages or device states link to one another










Navigation design

Global structure

Global structure


I One way to organize a system is in some form of hierarchy

I organized along functional boundaries (or different kinds of things), or byroles, user type, etc








Navigation design

Global structure

Global structure











Navigation design

Global structure

Global structure








actual system

I E.g., this may reflect themenu structure of anapplication or a web site


Navigation design

Global structure

Global structure











Navigation design

Global structure

Hierarchical and navigation

I Form parts of application

I screens or groups of screens

I Typically functional separationI Deep hierarchies are difficult to navigate

I use broad top-level categories, or to present several levels ofmenu on one screen or web page

I optimal breadth can be quite large (perhaps 60 or more itemsfor a web index page if the items are organized in such a waythat the eye can easily find the right one)


Navigation design

Global structure


I Form parts of applicationI screens or groups of screens





Navigation design

Global structure



I Typically functional separation

I Deep hierarchies are difficult to navigateI use broad top-level categories, or to present several levels of

menu on one screen or web pageI optimal breadth can be quite large (perhaps 60 or more items

for a web index page if the items are organized in such a waythat the eye can easily find the right one)


Navigation design

Global structure








Entering information

I Some of the mostcomplicated and difficultscreen layouts are foundin forms-based interfacesand dialog boxes

I informationpresentation + placesto enter information orselect options

I Alignment is important

I A clear logical layout is important for presenting and enteringinformation

I read from left to right and top to bottom ⇒ a screen can bedesigned so that users encounter items in an appropriate orderfor the task (natural order for entering information)








I read from left to right and top to bottom

⇒ a screen can bedesigned so that users encounter items in an appropriate orderfor the task (natural order for entering information)








I read from left to right and top to bottom ⇒ a screen can bedesigned so that users encounter items in an appropriate orderfor the task (natural order for entering information)



Knowing what to do

I Some elements of a screen are passive (only showinginformation); others are active (expecting to fill them in ordoing something)

I where do you clickI where do you type

I Consistent style helpsI e.g., web underlined links

I Labels and icons on menus are clearI Standards can help for common actions such as save, delete or

print



Knowing what to do


I where do you click

I where do you type



print



Knowing what to do





print



Knowing what to do



I Consistent style helps

I e.g., web underlined links


print



Knowing what to do





print



Knowing what to do




I Labels and icons on menus are clear

I Standards can help for common actions such as save, delete orprint



Knowing what to do





print



Affordances

I Things may suggest by their shape and other

attributes what you can do to them

I a handle affords pulling or liftingI a button affords pushing

I These affordances can be used when

designing novel interaction elementsI mimic real-world objects directlyI try to emulate the critical aspects of those

objects

I For screen objectsI buttonõlike object ‘affords’ mouse clickI physical-like objects suggest use

I Depend on the background and culture of usersI icons ‘afford’ clickingI or even double clicking



Affordances


attributes what you can do to themI a handle affords pulling or lifting

I a button affords pushing



objects





Affordances


attributes what you can do to themI a handle affords pulling or liftingI a button affords pushing



objects





Affordances




designing novel interaction elements

I mimic real-world objects directlyI try to emulate the critical aspects of those

objects





Affordances




designing novel interaction elementsI mimic real-world objects directly

I try to emulate the critical aspects of thoseobjects





Affordances





objects





Affordances





objects

I For screen objects

I buttonõlike object ‘affords’ mouse clickI physical-like objects suggest use




Affordances





objects

I For screen objectsI buttonõlike object ‘affords’ mouse click

I physical-like objects suggest use




Affordances





objects





Affordances





objects


I Depend on the background and culture of usersI icons ‘afford’ clicking

I or even double clicking



Affordances





objects




Prototyping

PrototypingI A strategy for efficiently dealing with things that are hard to

predict

I A mock-up of designI Hard to get it right first time

I Stanford online course videos by Prof. Scott Klemmer aboutPrototyping:

I Paper prototyping

I Video prototyping

I Wizard of Oz


Prototyping


predictI A mock-up of design

I Hard to get it right first time


I Paper prototyping

I Video prototyping

I Wizard of Oz


Prototyping


predictI A mock-up of designI Hard to get it right first time


I Paper prototyping

I Video prototyping

I Wizard of Oz


Summary

SummaryI Design can be defined as ‘achieving goals within constraints’.

I To achieve good design we must understand our materials andin the case of interaction design these materials include notjust the computers and technical devices, but also humans.

I The process starts with understanding the situation as it isand the requirements for change: get to know your users, whothey are, remember that they are different from you.

I We looked at the overall navigation design of the systemI Local structure, the way one screen, page or state of an

application relates to those it immediately links to. The usersneed to know where they are, what they can do, what willhappen when they do things, and what has happened in thepast. This can aid users as they goal seek, or move closertowards their goals without having to necessarily understandcompletely the whole route there.

I Global structure: how hierarchy diagrams can give a logicalview of an application, which can be used to design menu orsite structures.

I Prototyping: paper and video prototyping techniques, wizardof Oz technique to evaluate prototyping


Summary

SummaryI Design can be defined as ‘achieving goals within constraints’.I To achieve good design we must understand our materials and

in the case of interaction design these materials include notjust the computers and technical devices, but also humans.







Summary




I We looked at the overall navigation design of the system

I Local structure, the way one screen, page or state of anapplication relates to those it immediately links to. The usersneed to know where they are, what they can do, what willhappen when they do things, and what has happened in thepast. This can aid users as they goal seek, or move closertowards their goals without having to necessarily understandcompletely the whole route there.




Summary








interaction design basics - tongji university · 2018-02-27 · interaction design basics chapter...

Documents