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

原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档208367051
 
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...katerynaivanenko1
 
澳洲UQ学位证,昆士兰大学毕业证书1:1制作
澳洲UQ学位证,昆士兰大学毕业证书1:1制作澳洲UQ学位证,昆士兰大学毕业证书1:1制作
澳洲UQ学位证,昆士兰大学毕业证书1:1制作aecnsnzk
 
西北大学毕业证学位证成绩单-怎么样办伪造
西北大学毕业证学位证成绩单-怎么样办伪造西北大学毕业证学位证成绩单-怎么样办伪造
西北大学毕业证学位证成绩单-怎么样办伪造kbdhl05e
 
How to Empower the future of UX Design with Gen AI
How to Empower the future of UX Design with Gen AIHow to Empower the future of UX Design with Gen AI
How to Empower the future of UX Design with Gen AIyuj
 
Apresentação Clamo Cristo -letra música Matheus Rizzo
Apresentação Clamo Cristo -letra música Matheus RizzoApresentação Clamo Cristo -letra música Matheus Rizzo
Apresentação Clamo Cristo -letra música Matheus RizzoCarolTelles6
 
办理学位证(SFU证书)西蒙弗雷泽大学毕业证成绩单原版一比一
办理学位证(SFU证书)西蒙弗雷泽大学毕业证成绩单原版一比一办理学位证(SFU证书)西蒙弗雷泽大学毕业证成绩单原版一比一
办理学位证(SFU证书)西蒙弗雷泽大学毕业证成绩单原版一比一F dds
 
专业一比一美国亚利桑那大学毕业证成绩单pdf电子版制作修改#真实工艺展示#真实防伪#diploma#degree
专业一比一美国亚利桑那大学毕业证成绩单pdf电子版制作修改#真实工艺展示#真实防伪#diploma#degree专业一比一美国亚利桑那大学毕业证成绩单pdf电子版制作修改#真实工艺展示#真实防伪#diploma#degree
专业一比一美国亚利桑那大学毕业证成绩单pdf电子版制作修改#真实工艺展示#真实防伪#diploma#degreeyuu sss
 
毕业文凭制作#回国入职#diploma#degree美国威斯康星大学欧克莱尔分校毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#...
毕业文凭制作#回国入职#diploma#degree美国威斯康星大学欧克莱尔分校毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#...毕业文凭制作#回国入职#diploma#degree美国威斯康星大学欧克莱尔分校毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#...
毕业文凭制作#回国入职#diploma#degree美国威斯康星大学欧克莱尔分校毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#...ttt fff
 
Business research proposal mcdo.pptxBusiness research proposal mcdo.pptxBusin...
Business research proposal mcdo.pptxBusiness research proposal mcdo.pptxBusin...Business research proposal mcdo.pptxBusiness research proposal mcdo.pptxBusin...
Business research proposal mcdo.pptxBusiness research proposal mcdo.pptxBusin...mrchrns005
 
FiveHypotheses_UIDMasterclass_18April2024.pdf
FiveHypotheses_UIDMasterclass_18April2024.pdfFiveHypotheses_UIDMasterclass_18April2024.pdf
FiveHypotheses_UIDMasterclass_18April2024.pdfShivakumar Viswanathan
 
昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档
昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档
昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档208367051
 
在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证
在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证
在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证nhjeo1gg
 
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书zdzoqco
 
Design principles on typography in design
Design principles on typography in designDesign principles on typography in design
Design principles on typography in designnooreen17
 
group_15_empirya_p1projectIndustrial.pdf
group_15_empirya_p1projectIndustrial.pdfgroup_15_empirya_p1projectIndustrial.pdf
group_15_empirya_p1projectIndustrial.pdfneelspinoy
 
1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改
1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改
1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改yuu sss
 
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
 
Create Web Pages by programming of your chice.pdf
Create Web Pages by programming of your chice.pdfCreate Web Pages by programming of your chice.pdf
Create Web Pages by programming of your chice.pdfworkingdev2003
 
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,Aginakm1
 

Recently uploaded (20)

原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档
 
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...
MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...
 
澳洲UQ学位证,昆士兰大学毕业证书1:1制作
澳洲UQ学位证,昆士兰大学毕业证书1:1制作澳洲UQ学位证,昆士兰大学毕业证书1:1制作
澳洲UQ学位证,昆士兰大学毕业证书1:1制作
 
西北大学毕业证学位证成绩单-怎么样办伪造
西北大学毕业证学位证成绩单-怎么样办伪造西北大学毕业证学位证成绩单-怎么样办伪造
西北大学毕业证学位证成绩单-怎么样办伪造
 
How to Empower the future of UX Design with Gen AI
How to Empower the future of UX Design with Gen AIHow to Empower the future of UX Design with Gen AI
How to Empower the future of UX Design with Gen AI
 
Apresentação Clamo Cristo -letra música Matheus Rizzo
Apresentação Clamo Cristo -letra música Matheus RizzoApresentação Clamo Cristo -letra música Matheus Rizzo
Apresentação Clamo Cristo -letra música Matheus Rizzo
 
办理学位证(SFU证书)西蒙弗雷泽大学毕业证成绩单原版一比一
办理学位证(SFU证书)西蒙弗雷泽大学毕业证成绩单原版一比一办理学位证(SFU证书)西蒙弗雷泽大学毕业证成绩单原版一比一
办理学位证(SFU证书)西蒙弗雷泽大学毕业证成绩单原版一比一
 
专业一比一美国亚利桑那大学毕业证成绩单pdf电子版制作修改#真实工艺展示#真实防伪#diploma#degree
专业一比一美国亚利桑那大学毕业证成绩单pdf电子版制作修改#真实工艺展示#真实防伪#diploma#degree专业一比一美国亚利桑那大学毕业证成绩单pdf电子版制作修改#真实工艺展示#真实防伪#diploma#degree
专业一比一美国亚利桑那大学毕业证成绩单pdf电子版制作修改#真实工艺展示#真实防伪#diploma#degree
 
毕业文凭制作#回国入职#diploma#degree美国威斯康星大学欧克莱尔分校毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#...
毕业文凭制作#回国入职#diploma#degree美国威斯康星大学欧克莱尔分校毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#...毕业文凭制作#回国入职#diploma#degree美国威斯康星大学欧克莱尔分校毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#...
毕业文凭制作#回国入职#diploma#degree美国威斯康星大学欧克莱尔分校毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#...
 
Business research proposal mcdo.pptxBusiness research proposal mcdo.pptxBusin...
Business research proposal mcdo.pptxBusiness research proposal mcdo.pptxBusin...Business research proposal mcdo.pptxBusiness research proposal mcdo.pptxBusin...
Business research proposal mcdo.pptxBusiness research proposal mcdo.pptxBusin...
 
FiveHypotheses_UIDMasterclass_18April2024.pdf
FiveHypotheses_UIDMasterclass_18April2024.pdfFiveHypotheses_UIDMasterclass_18April2024.pdf
FiveHypotheses_UIDMasterclass_18April2024.pdf
 
昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档
昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档
昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档
 
在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证
在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证
在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证
 
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
 
Design principles on typography in design
Design principles on typography in designDesign principles on typography in design
Design principles on typography in design
 
group_15_empirya_p1projectIndustrial.pdf
group_15_empirya_p1projectIndustrial.pdfgroup_15_empirya_p1projectIndustrial.pdf
group_15_empirya_p1projectIndustrial.pdf
 
1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改
1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改
1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改
 
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
 
Create Web Pages by programming of your chice.pdf
Create Web Pages by programming of your chice.pdfCreate Web Pages by programming of your chice.pdf
Create Web Pages by programming of your chice.pdf
 
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,
 

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.