SlideShare una empresa de Scribd logo
1 de 92
chapter 5 interaction design basics
interaction design basics ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
interactions and interventions ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
what is design?
what is design? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
golden rule of design ,[object Object]
for Human–Computer Interaction ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
To err is human ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Central message … ,[object Object]
The process of design what is wanted analysis design implement and deploy prototype interviews ethnography what is there vs. what is wanted guidelines principles dialogue notations precise specification architectures documentation help evaluation heuristics scenarios task analysis
Steps … ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
… but how can I do it all ! ! ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object], 
 
user focus know your user personae cultural probes
know your user ,[object Object],[object Object],[object Object],[object Object],[object Object]
persona ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
example persona ,[object Object]
cultural probes ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
scenarios stories for design use and reuse
scenarios ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
scenarios … ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
scenario – movie player ,[object Object]
also play act … ,[object Object],[object Object],[object Object],use toothpick as stylus  but where is that thumb?
… explore the depths ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
use scenarios to .. ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
linearity ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
 
navigation design local structure – single screen global structure – whole site  start the systems info and help management messages add user remove user main screen remove user confirm add user
levels ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
the web … ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
physical devices ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
think about structure ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
local from one screen looking out
goal seeking goal start
goal seeking start goal progress with local knowledge only ...
goal seeking goal start …  but can get to the goal
goal seeking …  try to avoid these bits! goal start
four golden rules ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
where you are – breadcrumbs ,[object Object],web site top level category sub-category this page live links to higher levels
beware the big button trap ,[object Object],[object Object],things the thing from outer space more things other things
modes ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
global between screens within the application
hierarchical diagrams  the system info and help management messages add user remove user
hierarchical diagrams ctd. ,[object Object],[object Object],[object Object],the systems info and help management messages add user remove user
navigating hierarchies ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],see /e3/online/menu-breadth/
think about dialogue ,[object Object],Minister:  do you  name  take this woman … Man:  I do Minister: do you  name  take this man … Woman:  I do Minister:  I now pronounce you man and wife
think about dialogue ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Minister:  do you  name  take this woman …
network diagrams ,[object Object],main screen remove user confirm add user
network diagrams ctd. ,[object Object],[object Object],[object Object],[object Object],main screen remove user confirm add user
wider still between applications and beyond ...
wider still … ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
 
screen design and layout basic principles grouping, structure, order alignment use of white space A B C D E F  H I J K L M N O P Q R S T U V W X Y Z Dix , Alan Finlay, Janet Abowd, Gregory Beale, Russell 
basic princ iples ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
available tools ,[object Object],[object Object],[object Object],[object Object],[object Object]
grouping and structure ,[object Object],Billing details : Name Address: … Credit card no Delivery details : Name Address: … Delivery time Order details : item  quantity  cost/item  cost size 10 screws (boxes)  7  3.71  25.97 ……   …   …  …
order of groups and items ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
decoration ,[object Object],[object Object],[object Object],A B C D E F  H I J K L M N O P Q R S T U V W X Y Z
alignment - text ,[object Object],[object Object],Willy Wonka and the Chocolate Factory Winston Churchill - A Biography Wizard of Oz Xena - Warrior Princess Willy Wonka and the Chocolate Factory Winston Churchill - A Biography Wizard of Oz Xena - Warrior Princess fine for special effects but hard to scan boring but readable!
alignment - names ,[object Object],Alan Dix Janet Finlay Gregory Abowd Russell Beale Alan  Dix Janet  Finlay Gregory  Abowd Russell  Beale Dix , Alan Finlay, Janet Abowd, Gregory Beale, Russell   
alignment - numbers ,[object Object],[object Object],532.56 179.3 256.317 15 73.948 1035 3.142 497.6256
alignment - numbers ,[object Object],[object Object],[object Object],[object Object],627.865 1.005763 382.583 2502.56 432.935 2.0175 652.87 56.34
multiple  columns ,[object Object],sherbert 75 toffee 120 chocolate 35 fruit gums 27 coconut dreams 85
multiple  columns -  2 ,[object Object],sherbert 75 toffee 120 chocolate 35 fruit gums 27 coconut dreams 85
multiple  columns -  3 ,[object Object],sherbert 75 toffee 120 chocolate 35 fruit gums 27 coconut dreams 85
multiple  columns -  4 ,[object Object],sherbert 75 toffee 120 chocolate 35 fruit gums 27 coconut dreams 85
white space - the counter WHAT YOU SEE
white space - the counter WHAT YOU SEE THE  GAPS  BETWEEN
space to separate
space to structure
space to highlight
physical controls ,[object Object],[object Object],[object Object],[object Object],type of food time to cook defrost settings
physical controls ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],4 4) start 2 2) temperature 3 3) time to cook 1 1) type of heating
physical controls ,[object Object],[object Object],[object Object],[object Object],[object Object],different colours for different functions lines around related  buttons  (temp up/down)
physical controls ,[object Object],[object Object],[object Object],[object Object],[object Object],? easy to scan ? centred text in buttons
physical controls ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],gaps to aid grouping
 
user action and control entering information knowing what to do affordances
entering information ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],N.B. see extra slides for widget choice  ? Name: Address: Alan Dix Lancaster Name: Address: Alan Dix Lancaster Name: Address: Alan Dix Lancaster
knowing what to do ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
affordances ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],mug handle ‘ affords’ grasping
appropriate appearance presenting information aesthetics and utility colour and 3D localisation & internationalisation
presenting information ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],size chap1 chap10 chap11 chap12 chap13 chap14 … 17 12 51 262 83 22 … size name chap10 chap5 chap1 chap14 chap20 chap8 … 12 16 17 22 27 32 … name size
aesthetics and utility ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
colour and 3D ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
bad   use   of   c olou r ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
across countries and cultures ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object], 
 
prototyping
iteration and prototyping getting better … … and starting well
prototyping ,[object Object],[object Object],prototype evaluate design re-design done! OK?
pitfalls of prototyping ,[object Object],[object Object],[object Object],[object Object]

Más contenido relacionado

La actualidad más candente

Sources of Bias and Explanation
Sources of Bias and ExplanationSources of Bias and Explanation
Sources of Bias and ExplanationAlan Dix
 
HCI - Chapter 4
HCI - Chapter 4HCI - Chapter 4
HCI - Chapter 4Alan Dix
 
Interaction 09 Introduction to Interaction Design
Interaction 09 Introduction to Interaction DesignInteraction 09 Introduction to Interaction Design
Interaction 09 Introduction to Interaction DesignDave Malouf
 
Formal 5 – Dialogue models – what to do when
Formal 5 – Dialogue models – what to do whenFormal 5 – Dialogue models – what to do when
Formal 5 – Dialogue models – what to do whenAlan Dix
 
HCI 3e - Ch 19: Groupware
HCI 3e - Ch 19:  GroupwareHCI 3e - Ch 19:  Groupware
HCI 3e - Ch 19: GroupwareAlan Dix
 
Information Visualisation – an introduction
Information Visualisation – an introductionInformation Visualisation – an introduction
Information Visualisation – an introductionAlan Dix
 
HCI - Chapter 2
HCI - Chapter 2HCI - Chapter 2
HCI - Chapter 2Alan Dix
 
Designing User Interactions with AI: Servant, Master or Symbiosis.
Designing User Interactions with AI: Servant, Master or Symbiosis. Designing User Interactions with AI: Servant, Master or Symbiosis.
Designing User Interactions with AI: Servant, Master or Symbiosis. Alan Dix
 
Interaction design beyond human computer interaction
Interaction design beyond human computer interactionInteraction design beyond human computer interaction
Interaction design beyond human computer interactionKenny Nguyen
 
Formal 6 – A success story!
Formal 6 – A success story!Formal 6 – A success story!
Formal 6 – A success story!Alan Dix
 
HCI 3e - Ch 5: Interaction design basics
HCI 3e - Ch 5:  Interaction design basicsHCI 3e - Ch 5:  Interaction design basics
HCI 3e - Ch 5: Interaction design basicsAlan Dix
 
What Is Interaction Design
What Is Interaction DesignWhat Is Interaction Design
What Is Interaction DesignGraeme Smith
 
Human Computer Interaction (HCI)
Human Computer Interaction (HCI)Human Computer Interaction (HCI)
Human Computer Interaction (HCI)Lahiru Danushka
 

La actualidad más candente (20)

Sources of Bias and Explanation
Sources of Bias and ExplanationSources of Bias and Explanation
Sources of Bias and Explanation
 
HCI - Chapter 4
HCI - Chapter 4HCI - Chapter 4
HCI - Chapter 4
 
Interaction 09 Introduction to Interaction Design
Interaction 09 Introduction to Interaction DesignInteraction 09 Introduction to Interaction Design
Interaction 09 Introduction to Interaction Design
 
Formal 5 – Dialogue models – what to do when
Formal 5 – Dialogue models – what to do whenFormal 5 – Dialogue models – what to do when
Formal 5 – Dialogue models – what to do when
 
HCI 3e - Ch 19: Groupware
HCI 3e - Ch 19:  GroupwareHCI 3e - Ch 19:  Groupware
HCI 3e - Ch 19: Groupware
 
Information Visualisation – an introduction
Information Visualisation – an introductionInformation Visualisation – an introduction
Information Visualisation – an introduction
 
Chapter 2
Chapter 2Chapter 2
Chapter 2
 
Hci md exam
Hci md examHci md exam
Hci md exam
 
HCI - Chapter 2
HCI - Chapter 2HCI - Chapter 2
HCI - Chapter 2
 
Hci activity#1
Hci activity#1Hci activity#1
Hci activity#1
 
Hci activity#3
Hci activity#3Hci activity#3
Hci activity#3
 
Designing User Interactions with AI: Servant, Master or Symbiosis.
Designing User Interactions with AI: Servant, Master or Symbiosis. Designing User Interactions with AI: Servant, Master or Symbiosis.
Designing User Interactions with AI: Servant, Master or Symbiosis.
 
Interaction design beyond human computer interaction
Interaction design beyond human computer interactionInteraction design beyond human computer interaction
Interaction design beyond human computer interaction
 
Formal 6 – A success story!
Formal 6 – A success story!Formal 6 – A success story!
Formal 6 – A success story!
 
HCI 3e - Ch 5: Interaction design basics
HCI 3e - Ch 5:  Interaction design basicsHCI 3e - Ch 5:  Interaction design basics
HCI 3e - Ch 5: Interaction design basics
 
What Is Interaction Design
What Is Interaction DesignWhat Is Interaction Design
What Is Interaction Design
 
HCI
HCI HCI
HCI
 
Chapter1(hci)
Chapter1(hci)Chapter1(hci)
Chapter1(hci)
 
Human Computer Interaction (HCI)
Human Computer Interaction (HCI)Human Computer Interaction (HCI)
Human Computer Interaction (HCI)
 
Hci activity#2
Hci activity#2Hci activity#2
Hci activity#2
 

Destacado

Microphotography - digital narrative
Microphotography - digital narrativeMicrophotography - digital narrative
Microphotography - digital narrativeMarta Pawlak
 
Fibratec Linha Mediterrânea Plus
Fibratec Linha Mediterrânea PlusFibratec Linha Mediterrânea Plus
Fibratec Linha Mediterrânea PlusPiscinas Jundiai
 
The loss of cuba%2c the philippines and
The loss of cuba%2c the philippines andThe loss of cuba%2c the philippines and
The loss of cuba%2c the philippines andRichard Taylor
 
Presentación ii república
Presentación ii repúblicaPresentación ii república
Presentación ii repúblicaRichard Taylor
 
42714791 religija-soc
42714791 religija-soc42714791 religija-soc
42714791 religija-socapis01
 

Destacado (9)

Category vectorspaceessex
Category vectorspaceessexCategory vectorspaceessex
Category vectorspaceessex
 
Fibratec Linha Indic
Fibratec Linha IndicFibratec Linha Indic
Fibratec Linha Indic
 
Microphotography - digital narrative
Microphotography - digital narrativeMicrophotography - digital narrative
Microphotography - digital narrative
 
Pecha Kucha
Pecha KuchaPecha Kucha
Pecha Kucha
 
An inspiration
An inspirationAn inspiration
An inspiration
 
Fibratec Linha Mediterrânea Plus
Fibratec Linha Mediterrânea PlusFibratec Linha Mediterrânea Plus
Fibratec Linha Mediterrânea Plus
 
The loss of cuba%2c the philippines and
The loss of cuba%2c the philippines andThe loss of cuba%2c the philippines and
The loss of cuba%2c the philippines and
 
Presentación ii república
Presentación ii repúblicaPresentación ii república
Presentación ii república
 
42714791 religija-soc
42714791 religija-soc42714791 religija-soc
42714791 religija-soc
 

Similar a E3 chap-05

Discovery methods for HCI
Discovery methods for HCIDiscovery methods for HCI
Discovery methods for HCIOmar Ghazi
 
Foundations understanding users and interactions
Foundations  understanding users and interactionsFoundations  understanding users and interactions
Foundations understanding users and interactionsPreeti Mishra
 
WORKSHOP: Making the World Easier with Interaction Design
WORKSHOP: Making the World Easier with Interaction DesignWORKSHOP: Making the World Easier with Interaction Design
WORKSHOP: Making the World Easier with Interaction DesignCheryl Platz
 
Voxxed Athens 2018 - UX design and back-ends: When the back-end meets the user
Voxxed Athens 2018 - UX design and back-ends: When the back-end meets the userVoxxed Athens 2018 - UX design and back-ends: When the back-end meets the user
Voxxed Athens 2018 - UX design and back-ends: When the back-end meets the userVoxxed Athens
 
The process of design
The process of designThe process of design
The process of designimran iqbal
 
HCI-software engineering life cycle.pptx
HCI-software engineering life cycle.pptxHCI-software engineering life cycle.pptx
HCI-software engineering life cycle.pptxMousoomiS1
 
User Experience 1: What is User Experience?
User Experience 1: What is User Experience?User Experience 1: What is User Experience?
User Experience 1: What is User Experience?Marc Miquel
 
Understanding and Conceptualizing interaction - Mary Margarat
Understanding and Conceptualizing interaction  - Mary MargaratUnderstanding and Conceptualizing interaction  - Mary Margarat
Understanding and Conceptualizing interaction - Mary MargaratMary Margarat
 
2013 Lecture4: Designing AR Interfaces
2013 Lecture4: Designing AR Interfaces2013 Lecture4: Designing AR Interfaces
2013 Lecture4: Designing AR InterfacesMark Billinghurst
 
Designing for the Right Audience (with notes)
Designing for the Right Audience (with notes)Designing for the Right Audience (with notes)
Designing for the Right Audience (with notes)Danielle Arvanitis
 
Usability Testing
Usability TestingUsability Testing
Usability TestingAndy Budd
 
Usability in Virtual Worlds (Metaverse08)
Usability in Virtual Worlds (Metaverse08)Usability in Virtual Worlds (Metaverse08)
Usability in Virtual Worlds (Metaverse08)Markus Breuer
 
Are You An User Experience Designer
Are You An User Experience DesignerAre You An User Experience Designer
Are You An User Experience DesignerVinay Mohanty
 
Yikes...It Looks Like That?! - UI Worst Practices
Yikes...It Looks Like That?! - UI Worst PracticesYikes...It Looks Like That?! - UI Worst Practices
Yikes...It Looks Like That?! - UI Worst PracticesBruce Elgort
 

Similar a E3 chap-05 (20)

Interactive design basics
Interactive design basicsInteractive design basics
Interactive design basics
 
Interaction-design-basic.pptx
Interaction-design-basic.pptxInteraction-design-basic.pptx
Interaction-design-basic.pptx
 
Unit ii design process
Unit ii design processUnit ii design process
Unit ii design process
 
E3 chap-05
E3 chap-05E3 chap-05
E3 chap-05
 
Discovery methods for HCI
Discovery methods for HCIDiscovery methods for HCI
Discovery methods for HCI
 
Foundations understanding users and interactions
Foundations  understanding users and interactionsFoundations  understanding users and interactions
Foundations understanding users and interactions
 
Psychology
PsychologyPsychology
Psychology
 
Hci [6]interaction design
Hci [6]interaction designHci [6]interaction design
Hci [6]interaction design
 
WORKSHOP: Making the World Easier with Interaction Design
WORKSHOP: Making the World Easier with Interaction DesignWORKSHOP: Making the World Easier with Interaction Design
WORKSHOP: Making the World Easier with Interaction Design
 
Voxxed Athens 2018 - UX design and back-ends: When the back-end meets the user
Voxxed Athens 2018 - UX design and back-ends: When the back-end meets the userVoxxed Athens 2018 - UX design and back-ends: When the back-end meets the user
Voxxed Athens 2018 - UX design and back-ends: When the back-end meets the user
 
The process of design
The process of designThe process of design
The process of design
 
HCI-software engineering life cycle.pptx
HCI-software engineering life cycle.pptxHCI-software engineering life cycle.pptx
HCI-software engineering life cycle.pptx
 
User Experience 1: What is User Experience?
User Experience 1: What is User Experience?User Experience 1: What is User Experience?
User Experience 1: What is User Experience?
 
Understanding and Conceptualizing interaction - Mary Margarat
Understanding and Conceptualizing interaction  - Mary MargaratUnderstanding and Conceptualizing interaction  - Mary Margarat
Understanding and Conceptualizing interaction - Mary Margarat
 
2013 Lecture4: Designing AR Interfaces
2013 Lecture4: Designing AR Interfaces2013 Lecture4: Designing AR Interfaces
2013 Lecture4: Designing AR Interfaces
 
Designing for the Right Audience (with notes)
Designing for the Right Audience (with notes)Designing for the Right Audience (with notes)
Designing for the Right Audience (with notes)
 
Usability Testing
Usability TestingUsability Testing
Usability Testing
 
Usability in Virtual Worlds (Metaverse08)
Usability in Virtual Worlds (Metaverse08)Usability in Virtual Worlds (Metaverse08)
Usability in Virtual Worlds (Metaverse08)
 
Are You An User Experience Designer
Are You An User Experience DesignerAre You An User Experience Designer
Are You An User Experience Designer
 
Yikes...It Looks Like That?! - UI Worst Practices
Yikes...It Looks Like That?! - UI Worst PracticesYikes...It Looks Like That?! - UI Worst Practices
Yikes...It Looks Like That?! - UI Worst Practices
 

E3 chap-05