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

Architecture case study India Habitat Centre, Delhi.pdf
Architecture case study India Habitat Centre, Delhi.pdfArchitecture case study India Habitat Centre, Delhi.pdf
Architecture case study India Habitat Centre, Delhi.pdfSumit Lathwal
 
Call Girls in Okhla Delhi 💯Call Us 🔝8264348440🔝
Call Girls in Okhla Delhi 💯Call Us 🔝8264348440🔝Call Girls in Okhla Delhi 💯Call Us 🔝8264348440🔝
Call Girls in Okhla Delhi 💯Call Us 🔝8264348440🔝soniya singh
 
Mookuthi is an artisanal nose ornament brand based in Madras.
Mookuthi is an artisanal nose ornament brand based in Madras.Mookuthi is an artisanal nose ornament brand based in Madras.
Mookuthi is an artisanal nose ornament brand based in Madras.Mookuthi
 
Call Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts Service
Call Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts ServiceCall Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts Service
Call Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts Servicejennyeacort
 
西北大学毕业证学位证成绩单-怎么样办伪造
西北大学毕业证学位证成绩单-怎么样办伪造西北大学毕业证学位证成绩单-怎么样办伪造
西北大学毕业证学位证成绩单-怎么样办伪造kbdhl05e
 
(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一
(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一
(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一Fi 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
 
CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10
CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10
CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10uasjlagroup
 
原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degreeyuu sss
 
PORTFOLIO DE ARQUITECTURA CRISTOBAL HERAUD 2024
PORTFOLIO DE ARQUITECTURA CRISTOBAL HERAUD 2024PORTFOLIO DE ARQUITECTURA CRISTOBAL HERAUD 2024
PORTFOLIO DE ARQUITECTURA CRISTOBAL HERAUD 2024CristobalHeraud
 
昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档
昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档
昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档208367051
 
group_15_empirya_p1projectIndustrial.pdf
group_15_empirya_p1projectIndustrial.pdfgroup_15_empirya_p1projectIndustrial.pdf
group_15_empirya_p1projectIndustrial.pdfneelspinoy
 
'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
 
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
 
PORTAFOLIO 2024_ ANASTASIYA KUDINOVA
PORTAFOLIO   2024_  ANASTASIYA  KUDINOVAPORTAFOLIO   2024_  ANASTASIYA  KUDINOVA
PORTAFOLIO 2024_ ANASTASIYA KUDINOVAAnastasiya Kudinova
 
Design principles on typography in design
Design principles on typography in designDesign principles on typography in design
Design principles on typography in designnooreen17
 
办理学位证(NUS证书)新加坡国立大学毕业证成绩单原版一比一
办理学位证(NUS证书)新加坡国立大学毕业证成绩单原版一比一办理学位证(NUS证书)新加坡国立大学毕业证成绩单原版一比一
办理学位证(NUS证书)新加坡国立大学毕业证成绩单原版一比一Fi L
 
8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR
8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR
8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCRdollysharma2066
 
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
 

Recently uploaded (20)

Architecture case study India Habitat Centre, Delhi.pdf
Architecture case study India Habitat Centre, Delhi.pdfArchitecture case study India Habitat Centre, Delhi.pdf
Architecture case study India Habitat Centre, Delhi.pdf
 
Call Girls in Okhla Delhi 💯Call Us 🔝8264348440🔝
Call Girls in Okhla Delhi 💯Call Us 🔝8264348440🔝Call Girls in Okhla Delhi 💯Call Us 🔝8264348440🔝
Call Girls in Okhla Delhi 💯Call Us 🔝8264348440🔝
 
Mookuthi is an artisanal nose ornament brand based in Madras.
Mookuthi is an artisanal nose ornament brand based in Madras.Mookuthi is an artisanal nose ornament brand based in Madras.
Mookuthi is an artisanal nose ornament brand based in Madras.
 
Call Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts Service
Call Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts ServiceCall Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts Service
Call Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts Service
 
西北大学毕业证学位证成绩单-怎么样办伪造
西北大学毕业证学位证成绩单-怎么样办伪造西北大学毕业证学位证成绩单-怎么样办伪造
西北大学毕业证学位证成绩单-怎么样办伪造
 
(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一
(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一
(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一
 
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
 
CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10
CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10
CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10
 
原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
 
PORTFOLIO DE ARQUITECTURA CRISTOBAL HERAUD 2024
PORTFOLIO DE ARQUITECTURA CRISTOBAL HERAUD 2024PORTFOLIO DE ARQUITECTURA CRISTOBAL HERAUD 2024
PORTFOLIO DE ARQUITECTURA CRISTOBAL HERAUD 2024
 
昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档
昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档
昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档
 
group_15_empirya_p1projectIndustrial.pdf
group_15_empirya_p1projectIndustrial.pdfgroup_15_empirya_p1projectIndustrial.pdf
group_15_empirya_p1projectIndustrial.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 ,
 
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
 
Call Girls in Pratap Nagar, 9953056974 Escort Service
Call Girls in Pratap Nagar,  9953056974 Escort ServiceCall Girls in Pratap Nagar,  9953056974 Escort Service
Call Girls in Pratap Nagar, 9953056974 Escort Service
 
PORTAFOLIO 2024_ ANASTASIYA KUDINOVA
PORTAFOLIO   2024_  ANASTASIYA  KUDINOVAPORTAFOLIO   2024_  ANASTASIYA  KUDINOVA
PORTAFOLIO 2024_ ANASTASIYA KUDINOVA
 
Design principles on typography in design
Design principles on typography in designDesign principles on typography in design
Design principles on typography in design
 
办理学位证(NUS证书)新加坡国立大学毕业证成绩单原版一比一
办理学位证(NUS证书)新加坡国立大学毕业证成绩单原版一比一办理学位证(NUS证书)新加坡国立大学毕业证成绩单原版一比一
办理学位证(NUS证书)新加坡国立大学毕业证成绩单原版一比一
 
8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR
8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR
8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR
 
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...
 

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.