SlideShare a Scribd company logo
1 of 62
Download to read offline
Psychological Basis for
UI Design Rules



    Jeff Johnson
    UI Wizards, Inc.



                          1
Many HCI researchers and
practitioners have offered
UI Design Guidelines




                             2
UI Design Guidelines
(Nielsen  Molich, 1993)
    Visibility of system status

    Match between system  real world

    User control  freedom

    Consistency  standards

    Error prevention

    Recognition rather than recall

    Flexibility  efficiency of use

    Aesthetic  minimalist design

    Help users recognize, diagnose,  recover from errors

    Provide online documentation  help


                                                            3
Jeff Johnson: Psych 101: The Psychological Basis for UI Design Rules
Jeff Johnson: Psych 101: The Psychological Basis for UI Design Rules
Jeff Johnson: Psych 101: The Psychological Basis for UI Design Rules
Jeff Johnson: Psych 101: The Psychological Basis for UI Design Rules
Jeff Johnson: Psych 101: The Psychological Basis for UI Design Rules
Jeff Johnson: Psych 101: The Psychological Basis for UI Design Rules
Jeff Johnson: Psych 101: The Psychological Basis for UI Design Rules
Jeff Johnson: Psych 101: The Psychological Basis for UI Design Rules
Jeff Johnson: Psych 101: The Psychological Basis for UI Design Rules
Jeff Johnson: Psych 101: The Psychological Basis for UI Design Rules
Jeff Johnson: Psych 101: The Psychological Basis for UI Design Rules
Jeff Johnson: Psych 101: The Psychological Basis for UI Design Rules
Jeff Johnson: Psych 101: The Psychological Basis for UI Design Rules
Jeff Johnson: Psych 101: The Psychological Basis for UI Design Rules
Jeff Johnson: Psych 101: The Psychological Basis for UI Design Rules
Jeff Johnson: Psych 101: The Psychological Basis for UI Design Rules
Jeff Johnson: Psych 101: The Psychological Basis for UI Design Rules
Jeff Johnson: Psych 101: The Psychological Basis for UI Design Rules
Jeff Johnson: Psych 101: The Psychological Basis for UI Design Rules
Jeff Johnson: Psych 101: The Psychological Basis for UI Design Rules
Jeff Johnson: Psych 101: The Psychological Basis for UI Design Rules
Jeff Johnson: Psych 101: The Psychological Basis for UI Design Rules
Jeff Johnson: Psych 101: The Psychological Basis for UI Design Rules
Jeff Johnson: Psych 101: The Psychological Basis for UI Design Rules
Jeff Johnson: Psych 101: The Psychological Basis for UI Design Rules
Jeff Johnson: Psych 101: The Psychological Basis for UI Design Rules
Jeff Johnson: Psych 101: The Psychological Basis for UI Design Rules
Jeff Johnson: Psych 101: The Psychological Basis for UI Design Rules
Jeff Johnson: Psych 101: The Psychological Basis for UI Design Rules
Jeff Johnson: Psych 101: The Psychological Basis for UI Design Rules
Jeff Johnson: Psych 101: The Psychological Basis for UI Design Rules
Jeff Johnson: Psych 101: The Psychological Basis for UI Design Rules
Jeff Johnson: Psych 101: The Psychological Basis for UI Design Rules
Jeff Johnson: Psych 101: The Psychological Basis for UI Design Rules
Jeff Johnson: Psych 101: The Psychological Basis for UI Design Rules
Jeff Johnson: Psych 101: The Psychological Basis for UI Design Rules
Jeff Johnson: Psych 101: The Psychological Basis for UI Design Rules
Jeff Johnson: Psych 101: The Psychological Basis for UI Design Rules
Jeff Johnson: Psych 101: The Psychological Basis for UI Design Rules
Jeff Johnson: Psych 101: The Psychological Basis for UI Design Rules
Jeff Johnson: Psych 101: The Psychological Basis for UI Design Rules
Jeff Johnson: Psych 101: The Psychological Basis for UI Design Rules
Jeff Johnson: Psych 101: The Psychological Basis for UI Design Rules
Jeff Johnson: Psych 101: The Psychological Basis for UI Design Rules
Jeff Johnson: Psych 101: The Psychological Basis for UI Design Rules
Jeff Johnson: Psych 101: The Psychological Basis for UI Design Rules
Jeff Johnson: Psych 101: The Psychological Basis for UI Design Rules
Jeff Johnson: Psych 101: The Psychological Basis for UI Design Rules
Jeff Johnson: Psych 101: The Psychological Basis for UI Design Rules
Jeff Johnson: Psych 101: The Psychological Basis for UI Design Rules
Jeff Johnson: Psych 101: The Psychological Basis for UI Design Rules
Jeff Johnson: Psych 101: The Psychological Basis for UI Design Rules
Jeff Johnson: Psych 101: The Psychological Basis for UI Design Rules
Jeff Johnson: Psych 101: The Psychological Basis for UI Design Rules
Jeff Johnson: Psych 101: The Psychological Basis for UI Design Rules
Jeff Johnson: Psych 101: The Psychological Basis for UI Design Rules
Jeff Johnson: Psych 101: The Psychological Basis for UI Design Rules
Jeff Johnson: Psych 101: The Psychological Basis for UI Design Rules
Jeff Johnson: Psych 101: The Psychological Basis for UI Design Rules

More Related Content

What's hot

Eggplant Functional - Lesson 7 (Japanese slides)
Eggplant Functional - Lesson 7 (Japanese slides)Eggplant Functional - Lesson 7 (Japanese slides)
Eggplant Functional - Lesson 7 (Japanese slides)
Eggplant
 

What's hot (20)

hand gestures
hand gestureshand gestures
hand gestures
 
UX is not UI!
UX is not UI!UX is not UI!
UX is not UI!
 
UI-UX Practical Talking - Mohamed Shehata
UI-UX Practical Talking - Mohamed ShehataUI-UX Practical Talking - Mohamed Shehata
UI-UX Practical Talking - Mohamed Shehata
 
Introduction to UI/UX with Figma
Introduction to UI/UX with FigmaIntroduction to UI/UX with Figma
Introduction to UI/UX with Figma
 
Eye Mouse
Eye MouseEye Mouse
Eye Mouse
 
UI/UX Fundamentals
UI/UX FundamentalsUI/UX Fundamentals
UI/UX Fundamentals
 
Learning the corel draw
Learning the corel drawLearning the corel draw
Learning the corel draw
 
Introduction to figma
Introduction to figmaIntroduction to figma
Introduction to figma
 
Brand Identity in UI/UX Design
Brand Identity in UI/UX DesignBrand Identity in UI/UX Design
Brand Identity in UI/UX Design
 
UI Design Patterns for the Web, Part 1
UI Design Patterns for the Web, Part 1UI Design Patterns for the Web, Part 1
UI Design Patterns for the Web, Part 1
 
SwiftUI For Production | try! Swift 2019
SwiftUI For Production | try! Swift 2019SwiftUI For Production | try! Swift 2019
SwiftUI For Production | try! Swift 2019
 
Eye mouse
Eye mouseEye mouse
Eye mouse
 
UX Workshop
UX WorkshopUX Workshop
UX Workshop
 
UI UX introduction
UI UX introductionUI UX introduction
UI UX introduction
 
Introduction to Corel Draw
Introduction to Corel DrawIntroduction to Corel Draw
Introduction to Corel Draw
 
شرح Domain Driven Design بالعربي
شرح Domain Driven Design بالعربيشرح Domain Driven Design بالعربي
شرح Domain Driven Design بالعربي
 
Introduction to Figma
Introduction to FigmaIntroduction to Figma
Introduction to Figma
 
Working with shapes and objects
Working with shapes and objectsWorking with shapes and objects
Working with shapes and objects
 
Chapter 2
Chapter 2Chapter 2
Chapter 2
 
Eggplant Functional - Lesson 7 (Japanese slides)
Eggplant Functional - Lesson 7 (Japanese slides)Eggplant Functional - Lesson 7 (Japanese slides)
Eggplant Functional - Lesson 7 (Japanese slides)
 

Viewers also liked

1.introduction to interaction design
1.introduction to interaction design1.introduction to interaction design
1.introduction to interaction design
Keyur Sorathia
 
4.problem statement &_persona
4.problem statement &_persona4.problem statement &_persona
4.problem statement &_persona
Keyur Sorathia
 
5.interaction design framework
5.interaction design framework5.interaction design framework
5.interaction design framework
Keyur Sorathia
 
3 dimensional gestures
3 dimensional gestures3 dimensional gestures
3 dimensional gestures
Keyur Sorathia
 
Advanced JavaScript Techniques
Advanced JavaScript TechniquesAdvanced JavaScript Techniques
Advanced JavaScript Techniques
Dmitry Baranovskiy
 

Viewers also liked (20)

Designing for the Mind - SXSW 2015
Designing for the Mind - SXSW 2015Designing for the Mind - SXSW 2015
Designing for the Mind - SXSW 2015
 
UX & UI Design - Differentiate through design
UX & UI Design - Differentiate through designUX & UI Design - Differentiate through design
UX & UI Design - Differentiate through design
 
Pre-Conference Course: Designing with the Mind in Mind: The Psychological Bas...
Pre-Conference Course: Designing with the Mind in Mind: The Psychological Bas...Pre-Conference Course: Designing with the Mind in Mind: The Psychological Bas...
Pre-Conference Course: Designing with the Mind in Mind: The Psychological Bas...
 
Jeff Johnson at BayCHI: Designing with the Mind in Mind
Jeff Johnson at BayCHI: Designing with the Mind in MindJeff Johnson at BayCHI: Designing with the Mind in Mind
Jeff Johnson at BayCHI: Designing with the Mind in Mind
 
UI Design Principles : 20 Essential Rules for User Interface Design
UI Design Principles : 20 Essential Rules for User Interface DesignUI Design Principles : 20 Essential Rules for User Interface Design
UI Design Principles : 20 Essential Rules for User Interface Design
 
What is UX?
What is UX?What is UX?
What is UX?
 
UX Design + UI Design: Injecting a brand persona!
UX Design + UI Design: Injecting a brand persona!UX Design + UI Design: Injecting a brand persona!
UX Design + UI Design: Injecting a brand persona!
 
Process and Purpose: Build a Media Start-Up That Matters. By Corey Ford. #Roc...
Process and Purpose: Build a Media Start-Up That Matters. By Corey Ford. #Roc...Process and Purpose: Build a Media Start-Up That Matters. By Corey Ford. #Roc...
Process and Purpose: Build a Media Start-Up That Matters. By Corey Ford. #Roc...
 
Lean UX von Yavuz Yilmaz | webulos.com
Lean UX von Yavuz Yilmaz | webulos.comLean UX von Yavuz Yilmaz | webulos.com
Lean UX von Yavuz Yilmaz | webulos.com
 
ASCC IPv6 建置經驗分享
ASCC IPv6 建置經驗分享ASCC IPv6 建置經驗分享
ASCC IPv6 建置經驗分享
 
Introduction to Interaction Design
Introduction to Interaction DesignIntroduction to Interaction Design
Introduction to Interaction Design
 
1.introduction to interaction design
1.introduction to interaction design1.introduction to interaction design
1.introduction to interaction design
 
4.problem statement &_persona
4.problem statement &_persona4.problem statement &_persona
4.problem statement &_persona
 
5.interaction design framework
5.interaction design framework5.interaction design framework
5.interaction design framework
 
3 dimensional gestures
3 dimensional gestures3 dimensional gestures
3 dimensional gestures
 
Mint
MintMint
Mint
 
Advanced JavaScript Techniques
Advanced JavaScript TechniquesAdvanced JavaScript Techniques
Advanced JavaScript Techniques
 
User Interface Design: Definitions, Processes and Principles
User Interface Design: Definitions, Processes and PrinciplesUser Interface Design: Definitions, Processes and Principles
User Interface Design: Definitions, Processes and Principles
 
UI/UX Foundations - Research
UI/UX Foundations - ResearchUI/UX Foundations - Research
UI/UX Foundations - Research
 
UX LIFE CYCLE
UX LIFE CYCLEUX LIFE CYCLE
UX LIFE CYCLE
 

Similar to Jeff Johnson: Psych 101: The Psychological Basis for UI Design Rules

Ten Usability Heuristics with Example -Sivaprasath Selvaraj
Ten Usability Heuristics with Example -Sivaprasath SelvarajTen Usability Heuristics with Example -Sivaprasath Selvaraj
Ten Usability Heuristics with Example -Sivaprasath Selvaraj
Sivaprasath Selvaraj
 
Simple usability testing
Simple usability testingSimple usability testing
Simple usability testing
Hans Põldoja
 
User interface design: definitions, processes and principles
User interface design: definitions, processes and principlesUser interface design: definitions, processes and principles
User interface design: definitions, processes and principles
David Little
 
How design decisions affect user performance
How design decisions affect user performanceHow design decisions affect user performance
How design decisions affect user performance
Rachna Mittal
 
Website Usability | Day 1
Website Usability | Day 1Website Usability | Day 1
Website Usability | Day 1
studiokandm
 
Usability Engineering Process Flow Model - Sivaprasath Selvaraj
Usability Engineering Process Flow Model - Sivaprasath SelvarajUsability Engineering Process Flow Model - Sivaprasath Selvaraj
Usability Engineering Process Flow Model - Sivaprasath Selvaraj
Sivaprasath Selvaraj
 
10+1 interaction principles on moible ui
10+1 interaction principles on moible ui10+1 interaction principles on moible ui
10+1 interaction principles on moible ui
bullfrogdesign
 
10+1 interaction principles on moible ui
10+1 interaction principles on moible ui10+1 interaction principles on moible ui
10+1 interaction principles on moible ui
bullfrogdesign
 
Engelman.2011.exploring interaction modes for image retrieval
Engelman.2011.exploring interaction modes for image retrievalEngelman.2011.exploring interaction modes for image retrieval
Engelman.2011.exploring interaction modes for image retrieval
mrgazer
 
Final_USER_EXPERIENCE_Yale_V1
Final_USER_EXPERIENCE_Yale_V1Final_USER_EXPERIENCE_Yale_V1
Final_USER_EXPERIENCE_Yale_V1
Michael Rawlins
 

Similar to Jeff Johnson: Psych 101: The Psychological Basis for UI Design Rules (20)

Jeff Johnson: Psych 101: The Psychological Basis for UI Design Rules
Jeff Johnson: Psych 101: The Psychological Basis for UI Design RulesJeff Johnson: Psych 101: The Psychological Basis for UI Design Rules
Jeff Johnson: Psych 101: The Psychological Basis for UI Design Rules
 
Ten Usability Heuristics with Example -Sivaprasath Selvaraj
Ten Usability Heuristics with Example -Sivaprasath SelvarajTen Usability Heuristics with Example -Sivaprasath Selvaraj
Ten Usability Heuristics with Example -Sivaprasath Selvaraj
 
Simple usability testing
Simple usability testingSimple usability testing
Simple usability testing
 
User interface design: definitions, processes and principles
User interface design: definitions, processes and principlesUser interface design: definitions, processes and principles
User interface design: definitions, processes and principles
 
Heuristic ux-evaluation
Heuristic ux-evaluationHeuristic ux-evaluation
Heuristic ux-evaluation
 
Ebay News 2006 7 19 Earnings
Ebay News 2006 7 19 EarningsEbay News 2006 7 19 Earnings
Ebay News 2006 7 19 Earnings
 
How design decisions affect user performance
How design decisions affect user performanceHow design decisions affect user performance
How design decisions affect user performance
 
Introduction into User Experience
Introduction into User ExperienceIntroduction into User Experience
Introduction into User Experience
 
Interaction design introduction
Interaction design introductionInteraction design introduction
Interaction design introduction
 
Website Usability | Day 1
Website Usability | Day 1Website Usability | Day 1
Website Usability | Day 1
 
Usability Engineering Process Flow Model - Sivaprasath Selvaraj
Usability Engineering Process Flow Model - Sivaprasath SelvarajUsability Engineering Process Flow Model - Sivaprasath Selvaraj
Usability Engineering Process Flow Model - Sivaprasath Selvaraj
 
hci Evaluation Techniques.pptx
 hci Evaluation Techniques.pptx hci Evaluation Techniques.pptx
hci Evaluation Techniques.pptx
 
Assessing the quality of usability
Assessing the quality of usabilityAssessing the quality of usability
Assessing the quality of usability
 
User Interface Design- Module 2 Uid Process
User Interface Design- Module 2 Uid ProcessUser Interface Design- Module 2 Uid Process
User Interface Design- Module 2 Uid Process
 
HCI
HCI HCI
HCI
 
10+1 interaction principles on moible ui
10+1 interaction principles on moible ui10+1 interaction principles on moible ui
10+1 interaction principles on moible ui
 
10+1 interaction principles on moible ui
10+1 interaction principles on moible ui10+1 interaction principles on moible ui
10+1 interaction principles on moible ui
 
User Experience 3: User Experience, Usability and Accessibility
User Experience 3: User Experience, Usability and AccessibilityUser Experience 3: User Experience, Usability and Accessibility
User Experience 3: User Experience, Usability and Accessibility
 
Engelman.2011.exploring interaction modes for image retrieval
Engelman.2011.exploring interaction modes for image retrievalEngelman.2011.exploring interaction modes for image retrieval
Engelman.2011.exploring interaction modes for image retrieval
 
Final_USER_EXPERIENCE_Yale_V1
Final_USER_EXPERIENCE_Yale_V1Final_USER_EXPERIENCE_Yale_V1
Final_USER_EXPERIENCE_Yale_V1
 

Recently uploaded

Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
Joaquim Jorge
 

Recently uploaded (20)

Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
HTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation StrategiesHTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation Strategies
 
Developing An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of BrazilDeveloping An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of Brazil
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
 

Jeff Johnson: Psych 101: The Psychological Basis for UI Design Rules

  • 1. Psychological Basis for UI Design Rules Jeff Johnson UI Wizards, Inc. 1
  • 2. Many HCI researchers and practitioners have offered UI Design Guidelines 2
  • 3. UI Design Guidelines (Nielsen Molich, 1993) Visibility of system status  Match between system real world  User control freedom  Consistency standards  Error prevention  Recognition rather than recall  Flexibility efficiency of use  Aesthetic minimalist design  Help users recognize, diagnose, recover from errors  Provide online documentation help  3