SlideShare a Scribd company logo
1 of 37
Interaction Design & Psychology Workshop by Leonard Verhoef, 2002 Ferry den Dopper Notes from
Psychology : a different scope   Usability Psychology Based on… Based on biology Applies to products Applies to processes Overlapping concepts Exclusive concepts Principles Human functions Consistency Movement Feedback Perception Portability Language Robustness Memory Etc. Thinking
Human functions as UI principles   Movement Perception Language Memory Thinking Efficient user input Steering attention and recognizing information Clear use of language Help, learning and memory Thinking Size Large buttons Perceive size Form Perceive form Resistance Luminance Texture Color Changes Blinking and animations Number Less input Quiet pages Less words Mistaking and forgetting Mental load Distance Where to place information? Clear words Help From virtual to conceptual Structure Tables Sentences Consistency and standards Navigation
Movement Efficient user input ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Human functions Typing or clicking? Movement Less input Pointing & Clicking Typing Movement ,[object Object],[object Object],[object Object],[object Object],Perception Eyes needed Blind control is possible Language Few differentiations Many differentiations Learning Few conventions Many conventions Thinking ,[object Object],[object Object],[object Object],[object Object],Technical Easy Hard
Perception Steering attention and recognizing information ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Too many attention points
Perception  > Form Perceiving characters Bad Good Because 29 / 1 / 89 29 - 1 - 89 Extra figures like symbols decrease distinctiveness 29 1 89 Empty space increases distinctiveness 29  01  89 29 Jan 89 Jan  is from another symbol set and more distinct 29  01  89 29 1 89 Leading zero’s decrease distinctiveness between tens, hundreds, thousands 29 1 89 Underlining decreases distinctiveness 1234 AB 1234 56 An other symbol set is more distinct READ MORE read more Uppercase text reads 10% slower than lowercase abcd abcd Sans-serif characters are more distinct and are read easier / faster abc efg abc efg Bigger isn’t always better
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Perception  > Form Test: Find the amount  1,25
Perception  > Form Perceiving text and graphics ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],CompuServe WinCim 2.0 MS Word
Perception  > Form Perceiving text and graphics Text or graphics? Text Graphics Perception Recognizability Conspicuousness Visual Search Difficult Inconspicuous Slow search Easy Conspicuous Fast search Cognition Recognizability Cognitive search User programming Easy Easy Easy Difficult Not possible Difficult Practical Space required Design effort Large number Much space Easy to design Any # Little space Much (but fun) No translation Restricted #
Perception  > Luminance   ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Bold highlighted text Good use of luminance
Perception  > Color   ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Too many colors
Unclear use of colors
Perception  > Color Control of attention Which color for which situation? Situation Action Example Color Normal Information available Menu White Grey Black Expected change of situation Needed Default value, chosen option Yellow Situation is unusual, unexpected, dangerous Needed NOW Running out of memory, virus found, system will shut down Orange Disaster is unavoidable or has already happened Too late Out of memory, system crash, system shuts down Red
Perception  > Blinking and animations   ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Perception  > Quiet pages   ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Perception  > Where to place information? Comparison ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],1 2 3 1 2 4 1  1 2  2 3  4 1 2 3  1 2 4 difficult difficult easy easy Place differences within one eye fixation  (as close as possible)
Perception  > Where to place information?   ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Eye fixation
Eye fixation Too far Close
Perception  > Tables   ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Language Test: Verb or noun? What will the user do at this message? MS Word File A file To file Edit An edit To edit Format A format To format Print A print To print
Language Clear use of language ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Language More error messages
Language Clear use of language ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Memory Help, learning and memory Human memory Short term memory (working memory) Long term memory Short term recall Long term recall Electric basis Chemical basis Instable Stable Limited capacity (5-9 elements) Rather large
Memory Help, learning and memory ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Memory   > Mistaking and forgetting  Help, learning and memory ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Memory   > Mistaking and forgetting  Help, learning and memory ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Memory   > Mistaking and forgetting  Help, learning and memory ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Memory   > Help    ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Memory   > Help  Tool tips ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Thinking    Suggests dates: today, tomorrow, other…
Thinking    ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Thinking    ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

More Related Content

What's hot

Intro to Information Architecture for Web Sites
Intro to Information Architecture for Web SitesIntro to Information Architecture for Web Sites
Intro to Information Architecture for Web SitesChris Farnum
 
The Tenets of Material Design
The Tenets of Material DesignThe Tenets of Material Design
The Tenets of Material DesignDesignMantic
 
Mimi Yin: Getting Things Done: Technology and Practice
Mimi Yin: Getting Things Done: Technology and PracticeMimi Yin: Getting Things Done: Technology and Practice
Mimi Yin: Getting Things Done: Technology and PracticeSteve Williams
 
UX and Accessibility
UX and Accessibility UX and Accessibility
UX and Accessibility Frank Cervone
 
Visual Communication—OWL
Visual Communication—OWLVisual Communication—OWL
Visual Communication—OWLCharles Coursey
 
SIMS Quantitative Course Lecture 1
SIMS Quantitative Course Lecture 1SIMS Quantitative Course Lecture 1
SIMS Quantitative Course Lecture 1Rashmi Sinha
 
Mobile UX London (MUXL) Best Practice Forms by Chaymae Lougmani
Mobile UX London (MUXL) Best Practice Forms by Chaymae LougmaniMobile UX London (MUXL) Best Practice Forms by Chaymae Lougmani
Mobile UX London (MUXL) Best Practice Forms by Chaymae LougmaniMobileUXLondon
 
Job search at a dead end? Building Accessible Online Recruiting & Hiring Syst...
Job search at a dead end? Building Accessible Online Recruiting & Hiring Syst...Job search at a dead end? Building Accessible Online Recruiting & Hiring Syst...
Job search at a dead end? Building Accessible Online Recruiting & Hiring Syst...Denis Boudreau
 
Jensen Harris: Beyond Menus and Toolbars in Microsoft Office
Jensen Harris: Beyond Menus and Toolbars in Microsoft OfficeJensen Harris: Beyond Menus and Toolbars in Microsoft Office
Jensen Harris: Beyond Menus and Toolbars in Microsoft OfficeSteve Williams
 
AMIA Panel: Usability Enhancements
AMIA Panel: Usability EnhancementsAMIA Panel: Usability Enhancements
AMIA Panel: Usability EnhancementsBrian Turner
 
Quick tips to get started - Everbody has a role to play in digital accessibil...
Quick tips to get started - Everbody has a role to play in digital accessibil...Quick tips to get started - Everbody has a role to play in digital accessibil...
Quick tips to get started - Everbody has a role to play in digital accessibil...Denis Boudreau
 
Itp 251 Self Presentation 3
Itp 251 Self Presentation 3Itp 251 Self Presentation 3
Itp 251 Self Presentation 3David Morales
 
Dodzi dzakuma - freeCodeCamp - Intro to Web Design
Dodzi dzakuma - freeCodeCamp - Intro to Web DesignDodzi dzakuma - freeCodeCamp - Intro to Web Design
Dodzi dzakuma - freeCodeCamp - Intro to Web DesignDodzidenu Dzakuma
 
Itp 251 Self Presentation
Itp 251 Self PresentationItp 251 Self Presentation
Itp 251 Self PresentationDavid Morales
 
UX Toolkit: Phase Three - Skeleton
UX Toolkit: Phase Three - SkeletonUX Toolkit: Phase Three - Skeleton
UX Toolkit: Phase Three - SkeletonMaite Dalila
 

What's hot (20)

Intro to Information Architecture for Web Sites
Intro to Information Architecture for Web SitesIntro to Information Architecture for Web Sites
Intro to Information Architecture for Web Sites
 
The Tenets of Material Design
The Tenets of Material DesignThe Tenets of Material Design
The Tenets of Material Design
 
Mimi Yin: Getting Things Done: Technology and Practice
Mimi Yin: Getting Things Done: Technology and PracticeMimi Yin: Getting Things Done: Technology and Practice
Mimi Yin: Getting Things Done: Technology and Practice
 
UX and Accessibility
UX and Accessibility UX and Accessibility
UX and Accessibility
 
Visual Communication—OWL
Visual Communication—OWLVisual Communication—OWL
Visual Communication—OWL
 
SIMS Quantitative Course Lecture 1
SIMS Quantitative Course Lecture 1SIMS Quantitative Course Lecture 1
SIMS Quantitative Course Lecture 1
 
Visual Rhetoric
Visual RhetoricVisual Rhetoric
Visual Rhetoric
 
PowerPoint
PowerPointPowerPoint
PowerPoint
 
Mobile UX London (MUXL) Best Practice Forms by Chaymae Lougmani
Mobile UX London (MUXL) Best Practice Forms by Chaymae LougmaniMobile UX London (MUXL) Best Practice Forms by Chaymae Lougmani
Mobile UX London (MUXL) Best Practice Forms by Chaymae Lougmani
 
Job search at a dead end? Building Accessible Online Recruiting & Hiring Syst...
Job search at a dead end? Building Accessible Online Recruiting & Hiring Syst...Job search at a dead end? Building Accessible Online Recruiting & Hiring Syst...
Job search at a dead end? Building Accessible Online Recruiting & Hiring Syst...
 
Jensen Harris: Beyond Menus and Toolbars in Microsoft Office
Jensen Harris: Beyond Menus and Toolbars in Microsoft OfficeJensen Harris: Beyond Menus and Toolbars in Microsoft Office
Jensen Harris: Beyond Menus and Toolbars in Microsoft Office
 
WRA 210 February 24, 2011
WRA 210 February 24, 2011WRA 210 February 24, 2011
WRA 210 February 24, 2011
 
AMIA Panel: Usability Enhancements
AMIA Panel: Usability EnhancementsAMIA Panel: Usability Enhancements
AMIA Panel: Usability Enhancements
 
Quick tips to get started - Everbody has a role to play in digital accessibil...
Quick tips to get started - Everbody has a role to play in digital accessibil...Quick tips to get started - Everbody has a role to play in digital accessibil...
Quick tips to get started - Everbody has a role to play in digital accessibil...
 
Itp 251 Self Presentation 3
Itp 251 Self Presentation 3Itp 251 Self Presentation 3
Itp 251 Self Presentation 3
 
Dodzi dzakuma - freeCodeCamp - Intro to Web Design
Dodzi dzakuma - freeCodeCamp - Intro to Web DesignDodzi dzakuma - freeCodeCamp - Intro to Web Design
Dodzi dzakuma - freeCodeCamp - Intro to Web Design
 
Design Workshop HWI
Design Workshop HWIDesign Workshop HWI
Design Workshop HWI
 
Itp 251 Self Presentation
Itp 251 Self PresentationItp 251 Self Presentation
Itp 251 Self Presentation
 
UX Toolkit: Phase Three - Skeleton
UX Toolkit: Phase Three - SkeletonUX Toolkit: Phase Three - Skeleton
UX Toolkit: Phase Three - Skeleton
 
WRA 210 March 17th, 2011
WRA 210 March 17th, 2011WRA 210 March 17th, 2011
WRA 210 March 17th, 2011
 

Similar to Interaction Design & Psychology (2002)

how to make Presentation Part 2
how to make Presentation Part 2how to make Presentation Part 2
how to make Presentation Part 2santoshingalkar
 
Powerpoint presentation-simplified
Powerpoint presentation-simplifiedPowerpoint presentation-simplified
Powerpoint presentation-simplifiedmohamedaslamh
 
Techniques for Reviewing a User Interface
Techniques for Reviewing a User InterfaceTechniques for Reviewing a User Interface
Techniques for Reviewing a User InterfaceRhonda Bracey
 
UI & UX : Using Human Psychology in Game Design
UI & UX : Using Human Psychology in Game DesignUI & UX : Using Human Psychology in Game Design
UI & UX : Using Human Psychology in Game DesignSaurabh Mathur
 
Effective Power Point Presentations
Effective Power Point PresentationsEffective Power Point Presentations
Effective Power Point Presentationsaurelia garcia
 
Designing Effective Power Point Presentations
Designing Effective Power Point PresentationsDesigning Effective Power Point Presentations
Designing Effective Power Point PresentationsVinh Ha Nguyen Thi
 
Effective Communication
Effective CommunicationEffective Communication
Effective CommunicationKaren McGrane
 
Power point 2003 design principles v2009
Power point 2003 design principles v2009Power point 2003 design principles v2009
Power point 2003 design principles v2009914646279
 
On delivering-tech-presentation
On delivering-tech-presentationOn delivering-tech-presentation
On delivering-tech-presentationXi Wu
 
On Delivering Tech Presentation
On Delivering Tech PresentationOn Delivering Tech Presentation
On Delivering Tech PresentationXi Wu
 
Presentation Assignment 3 2009
Presentation Assignment 3 2009Presentation Assignment 3 2009
Presentation Assignment 3 2009drbulb09
 
Effective Presentation
Effective PresentationEffective Presentation
Effective PresentationSQU
 
How to improve your power point presentations
How to improve your power point presentationsHow to improve your power point presentations
How to improve your power point presentationsDr. Saad Saleh Al Ani
 
DIY: Research on a shoestring budget
DIY: Research on a shoestring budgetDIY: Research on a shoestring budget
DIY: Research on a shoestring budgetJ. Todd Bennett
 
Powerpoint do's & don'ts
Powerpoint do's & don'tsPowerpoint do's & don'ts
Powerpoint do's & don'tssudarsansahu
 
Effective Powerpoint Presentations
Effective Powerpoint PresentationsEffective Powerpoint Presentations
Effective Powerpoint PresentationsGaurav Sawant
 

Similar to Interaction Design & Psychology (2002) (20)

how to make Presentation Part 2
how to make Presentation Part 2how to make Presentation Part 2
how to make Presentation Part 2
 
UX Design Workshop
UX Design WorkshopUX Design Workshop
UX Design Workshop
 
Chap12
Chap12Chap12
Chap12
 
Powerpoint presentation-simplified
Powerpoint presentation-simplifiedPowerpoint presentation-simplified
Powerpoint presentation-simplified
 
Techniques for Reviewing a User Interface
Techniques for Reviewing a User InterfaceTechniques for Reviewing a User Interface
Techniques for Reviewing a User Interface
 
UI & UX : Using Human Psychology in Game Design
UI & UX : Using Human Psychology in Game DesignUI & UX : Using Human Psychology in Game Design
UI & UX : Using Human Psychology in Game Design
 
Effective Power Point Presentations
Effective Power Point PresentationsEffective Power Point Presentations
Effective Power Point Presentations
 
Effective presentation
Effective presentationEffective presentation
Effective presentation
 
Designing Effective Power Point Presentations
Designing Effective Power Point PresentationsDesigning Effective Power Point Presentations
Designing Effective Power Point Presentations
 
Effective Communication
Effective CommunicationEffective Communication
Effective Communication
 
Power point 2003 design principles v2009
Power point 2003 design principles v2009Power point 2003 design principles v2009
Power point 2003 design principles v2009
 
On delivering-tech-presentation
On delivering-tech-presentationOn delivering-tech-presentation
On delivering-tech-presentation
 
On Delivering Tech Presentation
On Delivering Tech PresentationOn Delivering Tech Presentation
On Delivering Tech Presentation
 
Presentation Assignment 3 2009
Presentation Assignment 3 2009Presentation Assignment 3 2009
Presentation Assignment 3 2009
 
Effective Presentation
Effective PresentationEffective Presentation
Effective Presentation
 
How to improve your power point presentations
How to improve your power point presentationsHow to improve your power point presentations
How to improve your power point presentations
 
DIY: Research on a shoestring budget
DIY: Research on a shoestring budgetDIY: Research on a shoestring budget
DIY: Research on a shoestring budget
 
Powerpoint do's & don'ts
Powerpoint do's & don'tsPowerpoint do's & don'ts
Powerpoint do's & don'ts
 
Building better front ends
Building better front endsBuilding better front ends
Building better front ends
 
Effective Powerpoint Presentations
Effective Powerpoint PresentationsEffective Powerpoint Presentations
Effective Powerpoint Presentations
 

More from Ferry den Dopper

Interaction Design 3.5: Inline Validation & Smart Defaults
Interaction Design 3.5: Inline Validation & Smart DefaultsInteraction Design 3.5: Inline Validation & Smart Defaults
Interaction Design 3.5: Inline Validation & Smart DefaultsFerry den Dopper
 
IAD 5 - les 4 - Design for Touch
IAD 5 - les 4 - Design for TouchIAD 5 - les 4 - Design for Touch
IAD 5 - les 4 - Design for TouchFerry den Dopper
 
IAD 5 - les 3 - Responsive Design
IAD 5 - les 3 - Responsive DesignIAD 5 - les 3 - Responsive Design
IAD 5 - les 3 - Responsive DesignFerry den Dopper
 
IAD 5 - les 1 - Context and challenges in mobile design
IAD 5 - les 1 - Context and challenges in mobile designIAD 5 - les 1 - Context and challenges in mobile design
IAD 5 - les 1 - Context and challenges in mobile designFerry den Dopper
 
Interaction Design 3.6: Form elements revisited
Interaction Design 3.6: Form elements revisitedInteraction Design 3.6: Form elements revisited
Interaction Design 3.6: Form elements revisitedFerry den Dopper
 
Interaction Design 3.4: Hints, Help & Errors
Interaction Design 3.4: Hints, Help & ErrorsInteraction Design 3.4: Hints, Help & Errors
Interaction Design 3.4: Hints, Help & ErrorsFerry den Dopper
 
Interaction Design 3.3: Form Organization
Interaction Design 3.3: Form OrganizationInteraction Design 3.3: Form Organization
Interaction Design 3.3: Form OrganizationFerry den Dopper
 
Interaction Design 3.2: Form Elements
Interaction Design 3.2: Form ElementsInteraction Design 3.2: Form Elements
Interaction Design 3.2: Form ElementsFerry den Dopper
 
Interaction Design 3.1: Why Form Design
Interaction Design 3.1: Why Form DesignInteraction Design 3.1: Why Form Design
Interaction Design 3.1: Why Form DesignFerry den Dopper
 
CMD/INF multidisc project 2013 - Kick-off
CMD/INF multidisc project 2013 - Kick-offCMD/INF multidisc project 2013 - Kick-off
CMD/INF multidisc project 2013 - Kick-offFerry den Dopper
 
IAD 2 - les 4 - Navigation
IAD 2 - les 4 - NavigationIAD 2 - les 4 - Navigation
IAD 2 - les 4 - NavigationFerry den Dopper
 
Webtoegankelijkheid in 5 minuten
Webtoegankelijkheid in 5 minutenWebtoegankelijkheid in 5 minuten
Webtoegankelijkheid in 5 minutenFerry den Dopper
 
IAD 2 - les 3 - Geur van informatie
IAD 2 - les 3 - Geur van informatieIAD 2 - les 3 - Geur van informatie
IAD 2 - les 3 - Geur van informatieFerry den Dopper
 
IAD 2 - les 2 - Cardsorting
IAD 2 - les 2 - CardsortingIAD 2 - les 2 - Cardsorting
IAD 2 - les 2 - CardsortingFerry den Dopper
 
IAD 2 - les 1 - Information Architecture
IAD 2 - les 1 - Information ArchitectureIAD 2 - les 1 - Information Architecture
IAD 2 - les 1 - Information ArchitectureFerry den Dopper
 

More from Ferry den Dopper (20)

Interaction Design 3.5: Inline Validation & Smart Defaults
Interaction Design 3.5: Inline Validation & Smart DefaultsInteraction Design 3.5: Inline Validation & Smart Defaults
Interaction Design 3.5: Inline Validation & Smart Defaults
 
IAD 5 - les 2 - Apps
IAD 5 - les 2 - AppsIAD 5 - les 2 - Apps
IAD 5 - les 2 - Apps
 
IAD 5 - les 4 - Design for Touch
IAD 5 - les 4 - Design for TouchIAD 5 - les 4 - Design for Touch
IAD 5 - les 4 - Design for Touch
 
IAD 5 - les 3 - Responsive Design
IAD 5 - les 3 - Responsive DesignIAD 5 - les 3 - Responsive Design
IAD 5 - les 3 - Responsive Design
 
IAD 5 - les 1 - Context and challenges in mobile design
IAD 5 - les 1 - Context and challenges in mobile designIAD 5 - les 1 - Context and challenges in mobile design
IAD 5 - les 1 - Context and challenges in mobile design
 
IAD 1 - les 2 - personas
IAD 1 - les 2 - personasIAD 1 - les 2 - personas
IAD 1 - les 2 - personas
 
Interaction Design 3.6: Form elements revisited
Interaction Design 3.6: Form elements revisitedInteraction Design 3.6: Form elements revisited
Interaction Design 3.6: Form elements revisited
 
Interaction Design 3.4: Hints, Help & Errors
Interaction Design 3.4: Hints, Help & ErrorsInteraction Design 3.4: Hints, Help & Errors
Interaction Design 3.4: Hints, Help & Errors
 
Interaction Design 3.3: Form Organization
Interaction Design 3.3: Form OrganizationInteraction Design 3.3: Form Organization
Interaction Design 3.3: Form Organization
 
Interaction Design 3.2: Form Elements
Interaction Design 3.2: Form ElementsInteraction Design 3.2: Form Elements
Interaction Design 3.2: Form Elements
 
Interaction Design 3.1: Why Form Design
Interaction Design 3.1: Why Form DesignInteraction Design 3.1: Why Form Design
Interaction Design 3.1: Why Form Design
 
CMD/INF multidisc project 2013 - Kick-off
CMD/INF multidisc project 2013 - Kick-offCMD/INF multidisc project 2013 - Kick-off
CMD/INF multidisc project 2013 - Kick-off
 
IAD 2 - les 7 - Zoeken
IAD 2 - les 7 - ZoekenIAD 2 - les 7 - Zoeken
IAD 2 - les 7 - Zoeken
 
IAD 2 - les 6 - Labeling
IAD 2 - les 6 - LabelingIAD 2 - les 6 - Labeling
IAD 2 - les 6 - Labeling
 
IAD 2 - les 5 - Metadata
IAD 2 - les 5 - MetadataIAD 2 - les 5 - Metadata
IAD 2 - les 5 - Metadata
 
IAD 2 - les 4 - Navigation
IAD 2 - les 4 - NavigationIAD 2 - les 4 - Navigation
IAD 2 - les 4 - Navigation
 
Webtoegankelijkheid in 5 minuten
Webtoegankelijkheid in 5 minutenWebtoegankelijkheid in 5 minuten
Webtoegankelijkheid in 5 minuten
 
IAD 2 - les 3 - Geur van informatie
IAD 2 - les 3 - Geur van informatieIAD 2 - les 3 - Geur van informatie
IAD 2 - les 3 - Geur van informatie
 
IAD 2 - les 2 - Cardsorting
IAD 2 - les 2 - CardsortingIAD 2 - les 2 - Cardsorting
IAD 2 - les 2 - Cardsorting
 
IAD 2 - les 1 - Information Architecture
IAD 2 - les 1 - Information ArchitectureIAD 2 - les 1 - Information Architecture
IAD 2 - les 1 - Information Architecture
 

Recently uploaded

AMBER GRAIN EMBROIDERY | Growing folklore elements | Root-based materials, w...
AMBER GRAIN EMBROIDERY | Growing folklore elements |  Root-based materials, w...AMBER GRAIN EMBROIDERY | Growing folklore elements |  Root-based materials, w...
AMBER GRAIN EMBROIDERY | Growing folklore elements | Root-based materials, w...BarusRa
 
SCRIP Lua HTTP PROGRACMACION PLC WECON CA
SCRIP Lua HTTP PROGRACMACION PLC  WECON CASCRIP Lua HTTP PROGRACMACION PLC  WECON CA
SCRIP Lua HTTP PROGRACMACION PLC WECON CANestorGamez6
 
Top Rated Pune Call Girls Koregaon Park ⟟ 6297143586 ⟟ Call Me For Genuine S...
Top Rated  Pune Call Girls Koregaon Park ⟟ 6297143586 ⟟ Call Me For Genuine S...Top Rated  Pune Call Girls Koregaon Park ⟟ 6297143586 ⟟ Call Me For Genuine S...
Top Rated Pune Call Girls Koregaon Park ⟟ 6297143586 ⟟ Call Me For Genuine S...Call Girls in Nagpur High Profile
 
Kala jadu for love marriage | Real amil baba | Famous amil baba | kala jadu n...
Kala jadu for love marriage | Real amil baba | Famous amil baba | kala jadu n...Kala jadu for love marriage | Real amil baba | Famous amil baba | kala jadu n...
Kala jadu for love marriage | Real amil baba | Famous amil baba | kala jadu n...babafaisel
 
WAEC Carpentry and Joinery Past Questions
WAEC Carpentry and Joinery Past QuestionsWAEC Carpentry and Joinery Past Questions
WAEC Carpentry and Joinery Past QuestionsCharles Obaleagbon
 
Design Inspiration for College by Slidesgo.pptx
Design Inspiration for College by Slidesgo.pptxDesign Inspiration for College by Slidesgo.pptx
Design Inspiration for College by Slidesgo.pptxTusharBahuguna2
 
Petrosains Drama Competition (PSDC).pptx
Petrosains Drama Competition (PSDC).pptxPetrosains Drama Competition (PSDC).pptx
Petrosains Drama Competition (PSDC).pptxIgnatiusAbrahamBalin
 
Punjabi Housewife Call Girls Service Gomti Nagar \ 9548273370 Indian Call Gir...
Punjabi Housewife Call Girls Service Gomti Nagar \ 9548273370 Indian Call Gir...Punjabi Housewife Call Girls Service Gomti Nagar \ 9548273370 Indian Call Gir...
Punjabi Housewife Call Girls Service Gomti Nagar \ 9548273370 Indian Call Gir...nagunakhan
 
Captivating Charm: Exploring Marseille's Hillside Villas with Our 3D Architec...
Captivating Charm: Exploring Marseille's Hillside Villas with Our 3D Architec...Captivating Charm: Exploring Marseille's Hillside Villas with Our 3D Architec...
Captivating Charm: Exploring Marseille's Hillside Villas with Our 3D Architec...Yantram Animation Studio Corporation
 
VIP Russian Call Girls in Saharanpur Deepika 8250192130 Independent Escort Se...
VIP Russian Call Girls in Saharanpur Deepika 8250192130 Independent Escort Se...VIP Russian Call Girls in Saharanpur Deepika 8250192130 Independent Escort Se...
VIP Russian Call Girls in Saharanpur Deepika 8250192130 Independent Escort Se...Suhani Kapoor
 
VIP Call Girls Service Bhagyanagar Hyderabad Call +91-8250192130
VIP Call Girls Service Bhagyanagar Hyderabad Call +91-8250192130VIP Call Girls Service Bhagyanagar Hyderabad Call +91-8250192130
VIP Call Girls Service Bhagyanagar Hyderabad Call +91-8250192130Suhani Kapoor
 
Best VIP Call Girls Noida Sector 47 Call Me: 8448380779
Best VIP Call Girls Noida Sector 47 Call Me: 8448380779Best VIP Call Girls Noida Sector 47 Call Me: 8448380779
Best VIP Call Girls Noida Sector 47 Call Me: 8448380779Delhi Call girls
 
Call Girls in Kalkaji Delhi 8264348440 call girls ❤️
Call Girls in Kalkaji Delhi 8264348440 call girls ❤️Call Girls in Kalkaji Delhi 8264348440 call girls ❤️
Call Girls in Kalkaji Delhi 8264348440 call girls ❤️soniya singh
 
Best VIP Call Girls Noida Sector 44 Call Me: 8448380779
Best VIP Call Girls Noida Sector 44 Call Me: 8448380779Best VIP Call Girls Noida Sector 44 Call Me: 8448380779
Best VIP Call Girls Noida Sector 44 Call Me: 8448380779Delhi Call girls
 
VIP College Call Girls Gorakhpur Bhavna 8250192130 Independent Escort Service...
VIP College Call Girls Gorakhpur Bhavna 8250192130 Independent Escort Service...VIP College Call Girls Gorakhpur Bhavna 8250192130 Independent Escort Service...
VIP College Call Girls Gorakhpur Bhavna 8250192130 Independent Escort Service...Suhani Kapoor
 
SD_The MATATAG Curriculum Training Design.pptx
SD_The MATATAG Curriculum Training Design.pptxSD_The MATATAG Curriculum Training Design.pptx
SD_The MATATAG Curriculum Training Design.pptxjanettecruzeiro1
 
The history of music videos a level presentation
The history of music videos a level presentationThe history of music videos a level presentation
The history of music videos a level presentationamedia6
 
Kurla Call Girls Pooja Nehwal📞 9892124323 ✅ Vashi Call Service Available Nea...
Kurla Call Girls Pooja Nehwal📞 9892124323 ✅  Vashi Call Service Available Nea...Kurla Call Girls Pooja Nehwal📞 9892124323 ✅  Vashi Call Service Available Nea...
Kurla Call Girls Pooja Nehwal📞 9892124323 ✅ Vashi Call Service Available Nea...Pooja Nehwal
 
(AISHA) Ambegaon Khurd Call Girls Just Call 7001035870 [ Cash on Delivery ] P...
(AISHA) Ambegaon Khurd Call Girls Just Call 7001035870 [ Cash on Delivery ] P...(AISHA) Ambegaon Khurd Call Girls Just Call 7001035870 [ Cash on Delivery ] P...
(AISHA) Ambegaon Khurd Call Girls Just Call 7001035870 [ Cash on Delivery ] P...ranjana rawat
 
The_Canvas_of_Creative_Mastery_Newsletter_April_2024_Version.pdf
The_Canvas_of_Creative_Mastery_Newsletter_April_2024_Version.pdfThe_Canvas_of_Creative_Mastery_Newsletter_April_2024_Version.pdf
The_Canvas_of_Creative_Mastery_Newsletter_April_2024_Version.pdfAmirYakdi
 

Recently uploaded (20)

AMBER GRAIN EMBROIDERY | Growing folklore elements | Root-based materials, w...
AMBER GRAIN EMBROIDERY | Growing folklore elements |  Root-based materials, w...AMBER GRAIN EMBROIDERY | Growing folklore elements |  Root-based materials, w...
AMBER GRAIN EMBROIDERY | Growing folklore elements | Root-based materials, w...
 
SCRIP Lua HTTP PROGRACMACION PLC WECON CA
SCRIP Lua HTTP PROGRACMACION PLC  WECON CASCRIP Lua HTTP PROGRACMACION PLC  WECON CA
SCRIP Lua HTTP PROGRACMACION PLC WECON CA
 
Top Rated Pune Call Girls Koregaon Park ⟟ 6297143586 ⟟ Call Me For Genuine S...
Top Rated  Pune Call Girls Koregaon Park ⟟ 6297143586 ⟟ Call Me For Genuine S...Top Rated  Pune Call Girls Koregaon Park ⟟ 6297143586 ⟟ Call Me For Genuine S...
Top Rated Pune Call Girls Koregaon Park ⟟ 6297143586 ⟟ Call Me For Genuine S...
 
Kala jadu for love marriage | Real amil baba | Famous amil baba | kala jadu n...
Kala jadu for love marriage | Real amil baba | Famous amil baba | kala jadu n...Kala jadu for love marriage | Real amil baba | Famous amil baba | kala jadu n...
Kala jadu for love marriage | Real amil baba | Famous amil baba | kala jadu n...
 
WAEC Carpentry and Joinery Past Questions
WAEC Carpentry and Joinery Past QuestionsWAEC Carpentry and Joinery Past Questions
WAEC Carpentry and Joinery Past Questions
 
Design Inspiration for College by Slidesgo.pptx
Design Inspiration for College by Slidesgo.pptxDesign Inspiration for College by Slidesgo.pptx
Design Inspiration for College by Slidesgo.pptx
 
Petrosains Drama Competition (PSDC).pptx
Petrosains Drama Competition (PSDC).pptxPetrosains Drama Competition (PSDC).pptx
Petrosains Drama Competition (PSDC).pptx
 
Punjabi Housewife Call Girls Service Gomti Nagar \ 9548273370 Indian Call Gir...
Punjabi Housewife Call Girls Service Gomti Nagar \ 9548273370 Indian Call Gir...Punjabi Housewife Call Girls Service Gomti Nagar \ 9548273370 Indian Call Gir...
Punjabi Housewife Call Girls Service Gomti Nagar \ 9548273370 Indian Call Gir...
 
Captivating Charm: Exploring Marseille's Hillside Villas with Our 3D Architec...
Captivating Charm: Exploring Marseille's Hillside Villas with Our 3D Architec...Captivating Charm: Exploring Marseille's Hillside Villas with Our 3D Architec...
Captivating Charm: Exploring Marseille's Hillside Villas with Our 3D Architec...
 
VIP Russian Call Girls in Saharanpur Deepika 8250192130 Independent Escort Se...
VIP Russian Call Girls in Saharanpur Deepika 8250192130 Independent Escort Se...VIP Russian Call Girls in Saharanpur Deepika 8250192130 Independent Escort Se...
VIP Russian Call Girls in Saharanpur Deepika 8250192130 Independent Escort Se...
 
VIP Call Girls Service Bhagyanagar Hyderabad Call +91-8250192130
VIP Call Girls Service Bhagyanagar Hyderabad Call +91-8250192130VIP Call Girls Service Bhagyanagar Hyderabad Call +91-8250192130
VIP Call Girls Service Bhagyanagar Hyderabad Call +91-8250192130
 
Best VIP Call Girls Noida Sector 47 Call Me: 8448380779
Best VIP Call Girls Noida Sector 47 Call Me: 8448380779Best VIP Call Girls Noida Sector 47 Call Me: 8448380779
Best VIP Call Girls Noida Sector 47 Call Me: 8448380779
 
Call Girls in Kalkaji Delhi 8264348440 call girls ❤️
Call Girls in Kalkaji Delhi 8264348440 call girls ❤️Call Girls in Kalkaji Delhi 8264348440 call girls ❤️
Call Girls in Kalkaji Delhi 8264348440 call girls ❤️
 
Best VIP Call Girls Noida Sector 44 Call Me: 8448380779
Best VIP Call Girls Noida Sector 44 Call Me: 8448380779Best VIP Call Girls Noida Sector 44 Call Me: 8448380779
Best VIP Call Girls Noida Sector 44 Call Me: 8448380779
 
VIP College Call Girls Gorakhpur Bhavna 8250192130 Independent Escort Service...
VIP College Call Girls Gorakhpur Bhavna 8250192130 Independent Escort Service...VIP College Call Girls Gorakhpur Bhavna 8250192130 Independent Escort Service...
VIP College Call Girls Gorakhpur Bhavna 8250192130 Independent Escort Service...
 
SD_The MATATAG Curriculum Training Design.pptx
SD_The MATATAG Curriculum Training Design.pptxSD_The MATATAG Curriculum Training Design.pptx
SD_The MATATAG Curriculum Training Design.pptx
 
The history of music videos a level presentation
The history of music videos a level presentationThe history of music videos a level presentation
The history of music videos a level presentation
 
Kurla Call Girls Pooja Nehwal📞 9892124323 ✅ Vashi Call Service Available Nea...
Kurla Call Girls Pooja Nehwal📞 9892124323 ✅  Vashi Call Service Available Nea...Kurla Call Girls Pooja Nehwal📞 9892124323 ✅  Vashi Call Service Available Nea...
Kurla Call Girls Pooja Nehwal📞 9892124323 ✅ Vashi Call Service Available Nea...
 
(AISHA) Ambegaon Khurd Call Girls Just Call 7001035870 [ Cash on Delivery ] P...
(AISHA) Ambegaon Khurd Call Girls Just Call 7001035870 [ Cash on Delivery ] P...(AISHA) Ambegaon Khurd Call Girls Just Call 7001035870 [ Cash on Delivery ] P...
(AISHA) Ambegaon Khurd Call Girls Just Call 7001035870 [ Cash on Delivery ] P...
 
The_Canvas_of_Creative_Mastery_Newsletter_April_2024_Version.pdf
The_Canvas_of_Creative_Mastery_Newsletter_April_2024_Version.pdfThe_Canvas_of_Creative_Mastery_Newsletter_April_2024_Version.pdf
The_Canvas_of_Creative_Mastery_Newsletter_April_2024_Version.pdf
 

Interaction Design & Psychology (2002)

  • 1. Interaction Design & Psychology Workshop by Leonard Verhoef, 2002 Ferry den Dopper Notes from
  • 2. Psychology : a different scope Usability Psychology Based on… Based on biology Applies to products Applies to processes Overlapping concepts Exclusive concepts Principles Human functions Consistency Movement Feedback Perception Portability Language Robustness Memory Etc. Thinking
  • 3. Human functions as UI principles Movement Perception Language Memory Thinking Efficient user input Steering attention and recognizing information Clear use of language Help, learning and memory Thinking Size Large buttons Perceive size Form Perceive form Resistance Luminance Texture Color Changes Blinking and animations Number Less input Quiet pages Less words Mistaking and forgetting Mental load Distance Where to place information? Clear words Help From virtual to conceptual Structure Tables Sentences Consistency and standards Navigation
  • 4.
  • 5.
  • 6.
  • 8. Perception > Form Perceiving characters Bad Good Because 29 / 1 / 89 29 - 1 - 89 Extra figures like symbols decrease distinctiveness 29 1 89 Empty space increases distinctiveness 29 01 89 29 Jan 89 Jan is from another symbol set and more distinct 29 01 89 29 1 89 Leading zero’s decrease distinctiveness between tens, hundreds, thousands 29 1 89 Underlining decreases distinctiveness 1234 AB 1234 56 An other symbol set is more distinct READ MORE read more Uppercase text reads 10% slower than lowercase abcd abcd Sans-serif characters are more distinct and are read easier / faster abc efg abc efg Bigger isn’t always better
  • 9.
  • 10.
  • 11. Perception > Form Perceiving text and graphics Text or graphics? Text Graphics Perception Recognizability Conspicuousness Visual Search Difficult Inconspicuous Slow search Easy Conspicuous Fast search Cognition Recognizability Cognitive search User programming Easy Easy Easy Difficult Not possible Difficult Practical Space required Design effort Large number Much space Easy to design Any # Little space Much (but fun) No translation Restricted #
  • 12.
  • 13.
  • 15. Unclear use of colors
  • 16. Perception > Color Control of attention Which color for which situation? Situation Action Example Color Normal Information available Menu White Grey Black Expected change of situation Needed Default value, chosen option Yellow Situation is unusual, unexpected, dangerous Needed NOW Running out of memory, virus found, system will shut down Orange Disaster is unavoidable or has already happened Too late Out of memory, system crash, system shuts down Red
  • 17.
  • 18.
  • 19.
  • 20.
  • 22. Eye fixation Too far Close
  • 23.
  • 24. Language Test: Verb or noun? What will the user do at this message? MS Word File A file To file Edit An edit To edit Format A format To format Print A print To print
  • 25.
  • 27.
  • 28. Memory Help, learning and memory Human memory Short term memory (working memory) Long term memory Short term recall Long term recall Electric basis Chemical basis Instable Stable Limited capacity (5-9 elements) Rather large
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.