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

10 must-have Chrome extensions for designers
10 must-have Chrome extensions for designers10 must-have Chrome extensions for designers
10 must-have Chrome extensions for designersPixeldarts
 
Color Theory Explained for Noobs- Think360 Studio
Color Theory Explained for Noobs- Think360 StudioColor Theory Explained for Noobs- Think360 Studio
Color Theory Explained for Noobs- Think360 StudioThink360 Studio
 
Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Rndexperts
 
10 Best WordPress Plugins to make the website effective in 2024
10 Best WordPress Plugins to make the website effective in 202410 Best WordPress Plugins to make the website effective in 2024
10 Best WordPress Plugins to make the website effective in 2024digital learning point
 
怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道
怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道
怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道yrolcks
 
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...Rishabh Aryan
 
Karim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 pppppppppppppppKarim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 pppppppppppppppNadaMohammed714321
 
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书zdzoqco
 
Pharmaceutical Packaging for the elderly.pdf
Pharmaceutical Packaging for the elderly.pdfPharmaceutical Packaging for the elderly.pdf
Pharmaceutical Packaging for the elderly.pdfAayushChavan5
 
guest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssssguest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssssNadaMohammed714321
 
world health day 2024.pptxgbbvggvbhjjjbbbb
world health day 2024.pptxgbbvggvbhjjjbbbbworld health day 2024.pptxgbbvggvbhjjjbbbb
world health day 2024.pptxgbbvggvbhjjjbbbbpreetirao780
 
cda.pptx critical discourse analysis ppt
cda.pptx critical discourse analysis pptcda.pptx critical discourse analysis ppt
cda.pptx critical discourse analysis pptMaryamAfzal41
 
Karim apartment ideas 02 ppppppppppppppp
Karim apartment ideas 02 pppppppppppppppKarim apartment ideas 02 ppppppppppppppp
Karim apartment ideas 02 pppppppppppppppNadaMohammed714321
 
guest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssssguest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssssNadaMohammed714321
 
Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...
Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...
Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...Associazione Digital Days
 
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.pptMaking and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.pptJIT KUMAR GUPTA
 
simpson-lee_house_dt20ajshsjsjsjsjj15.pdf
simpson-lee_house_dt20ajshsjsjsjsjj15.pdfsimpson-lee_house_dt20ajshsjsjsjsjj15.pdf
simpson-lee_house_dt20ajshsjsjsjsjj15.pdfLucyBonelli
 
General Knowledge Quiz Game C++ CODE.pptx
General Knowledge Quiz Game C++ CODE.pptxGeneral Knowledge Quiz Game C++ CODE.pptx
General Knowledge Quiz Game C++ CODE.pptxmarckustrevion
 
Map of St. Louis Parks
Map of St. Louis Parks                              Map of St. Louis Parks
Map of St. Louis Parks CharlottePulte
 
Pearl Disrtrict urban analyusis study pptx
Pearl Disrtrict urban analyusis study pptxPearl Disrtrict urban analyusis study pptx
Pearl Disrtrict urban analyusis study pptxDanielTamiru4
 

Recently uploaded (20)

10 must-have Chrome extensions for designers
10 must-have Chrome extensions for designers10 must-have Chrome extensions for designers
10 must-have Chrome extensions for designers
 
Color Theory Explained for Noobs- Think360 Studio
Color Theory Explained for Noobs- Think360 StudioColor Theory Explained for Noobs- Think360 Studio
Color Theory Explained for Noobs- Think360 Studio
 
Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025
 
10 Best WordPress Plugins to make the website effective in 2024
10 Best WordPress Plugins to make the website effective in 202410 Best WordPress Plugins to make the website effective in 2024
10 Best WordPress Plugins to make the website effective in 2024
 
怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道
怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道
怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道
 
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
 
Karim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 pppppppppppppppKarim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 ppppppppppppppp
 
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
 
Pharmaceutical Packaging for the elderly.pdf
Pharmaceutical Packaging for the elderly.pdfPharmaceutical Packaging for the elderly.pdf
Pharmaceutical Packaging for the elderly.pdf
 
guest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssssguest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssss
 
world health day 2024.pptxgbbvggvbhjjjbbbb
world health day 2024.pptxgbbvggvbhjjjbbbbworld health day 2024.pptxgbbvggvbhjjjbbbb
world health day 2024.pptxgbbvggvbhjjjbbbb
 
cda.pptx critical discourse analysis ppt
cda.pptx critical discourse analysis pptcda.pptx critical discourse analysis ppt
cda.pptx critical discourse analysis ppt
 
Karim apartment ideas 02 ppppppppppppppp
Karim apartment ideas 02 pppppppppppppppKarim apartment ideas 02 ppppppppppppppp
Karim apartment ideas 02 ppppppppppppppp
 
guest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssssguest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssss
 
Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...
Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...
Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...
 
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.pptMaking and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
 
simpson-lee_house_dt20ajshsjsjsjsjj15.pdf
simpson-lee_house_dt20ajshsjsjsjsjj15.pdfsimpson-lee_house_dt20ajshsjsjsjsjj15.pdf
simpson-lee_house_dt20ajshsjsjsjsjj15.pdf
 
General Knowledge Quiz Game C++ CODE.pptx
General Knowledge Quiz Game C++ CODE.pptxGeneral Knowledge Quiz Game C++ CODE.pptx
General Knowledge Quiz Game C++ CODE.pptx
 
Map of St. Louis Parks
Map of St. Louis Parks                              Map of St. Louis Parks
Map of St. Louis Parks
 
Pearl Disrtrict urban analyusis study pptx
Pearl Disrtrict urban analyusis study pptxPearl Disrtrict urban analyusis study pptx
Pearl Disrtrict urban analyusis study pptx
 

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.