SlideShare une entreprise Scribd logo
1  sur  51
User Experience : UI Design Principles
Hemant Singh
@singhhemant
Objectives of the presentation
Explain “User Experience”
Explore Common Design Principles
Where to go next?
Q&A
This talk is different
No Code
Very verbose…………
“Use what you know. Do what you’ve always imagined”
Old Software is well old
Old ways of developing applications are passé……..
Limited software tools
Design took a backseat
Limited hardware support.
Business Application development
What Changed?
•Wide array of devices to consume content
•Connectivity everywhere
•Touch Computing
•Cloud Storage (device store minimum data)
Change?
Change?
Payoffs of adapting new ways
Higher Productivity
Lower training
Fewer errors
Adoption of technology by wide spectrum.
Satisfied users
What is User Experience?
“It’s the cumulative experience of your product that
people remember, talk about, love or hate.”
Design Principle : Archetypes
“Universal patterns of theme and form resulting from
innate biases or dispositions”
Design Principle : Archetypes
Design Principle : Archetypes
Design Principle : Fitt’s Law
“The time required to move to a target is a function of the
target size and distance to the target.”
Design Principle : Fitt’s Law
“Consider strategies that constrain movements when
possible to improve performance and reduce error.”
Design Principle : Fitt’s Law
Design Principle : Inattentive Blindness
“The failure to cognitively process a stimuli that is
presented in clear view, leaving the observer without any
awareness or memory of the stimulus.”
Design Principle : Inattentive Blindness
• Increased cognitive Load decreases user awareness.
• Complex data entry should be broken in simple steps.
(Multiple screens, Collapsible areas / Wizards)
• Errors on a screen, should be displayed at or near the
source of error.
• Errors should come quickly enough to be relevant.
• Errors should be differentiated from screen text
Design Principle : Inattentive Blindness
Design Principle : Pareto’s Principle
(80/20)
“A high percentage of effects in any large system are
caused by a low percentage of variables.”
Design Principle : Pareto’s Principle
(80/20)
Non critical functions that are part of the less important
80% should be minimized or removed altogether from the
design.
Design Principle : Pareto’s Principle
(80/20)
Design Principle : Hick’s Law
The time it takes to decision increases with the number of
alternatives.
The law applies to the design of software menus, control
displays, context menus and emergency response.
Design Principle : Hick’s Law
Design Principle : Five Hat Racks
•There are five ways to organize information
Location
Alphabet
Time
Category
Hierarchy
Design Principle : Five Hat Racks
Design Principle : Biophilia
“Environments rich in nature views and imagery reduce
stress and enhance focus and concentration.”
Design Principle : Biophilia
Design Principle : Biophilia
•Environments rich in nature views and imagery reduce
stress and enhance focus and concentration.
•Business applications which deal with learning, healing,
healthcare, education, concentration …. should consider
biophilia design.
Design Principle : Rule of Thirds
An image should be imagined as divided into nine equal
parts by two equally-spaced horizontal lines and two
equally-spaced vertical lines, and that important
compositional elements should be placed along these
lines or their intersection.
Design Principle : Rule of Thirds
Design Principle : Savanna Principle
Tendency to prefer savanna like environments (Open
areas, scattered trees, water, lush grass,..) to other
environments.
Design Principle : Savanna Principle
Design Principle : Gutenberg Diagram
“A diagram that describes the general pattern followed by
the eyes when looking at evenly distributed, homogenous
information.”
Design Principle : Gutenberg Diagram
Design Principle : Gutenberg Diagram
Design Principle : Symmetry
•Elements that are similar are perceived to be more
related than elements that are dissimilar.
Design Principle : Symmetry
Design Principle : Attractiveness Bias
"A tendency to see attractive people as more intelligent
competent, moral and sociable than unattractive people."
Used in images of people in marketing or advertising.
Design Principle : Attractiveness Bias
Design Principle : Horror Vaccui
A tendency to favor filing blank spaces with objects and
elements over leaving spaces blank or empty.
Design Principle : Horror Vaccui
Design Principle : Horror Vaccui
Design Principle : Contour Bias
“A tendency to favor objects with contours over objects
with sharp angles or points.”
Design Principle : Contour Bias
Design Principle : Garbage In Garbage Out
"Quality of system output is dependent on the quality of
the system input "
Design Principle : Garbage In Garbage Out
Design Principle : Garbage In Garbage Out
Design Principle : Classification
Layout Fitt's Law, Pareto's Principle, Gutenberg Diagram
Background ArcheTypes, Biophilia, Rule of Thirds, Savanna, Attractiveness Bias, Horror Vacuui
Menus Hick's Law, Fitt's Law
Controls ArcheTypes, Symmetry, Contour Bias, Five Hat Racks
Error Handling Inattentive Blindness, Garbage In Garbage Out
Forms Garbage In Garbage Out
References
• The design of everyday things (David Norman)
• Universal Principles of Design, Revised and Updated: 125 Ways to Enhance Usability,
Influence Perception, Increase Appeal, Make Better Design Decisions, and Teach
through Design
• Smashing Magazine Ux Design (http://uxdesign.smashingmagazine.com/)
• Billy Hollis (talk on ux design, pluralsight)

Contenu connexe

En vedette

UI Design - Lessons Learned, Principles, and Best Practices
UI Design - Lessons Learned, Principles, and Best PracticesUI Design - Lessons Learned, Principles, and Best Practices
UI Design - Lessons Learned, Principles, and Best PracticesSamuel Chow
 
His hers yours mine
His hers yours mineHis hers yours mine
His hers yours mineElmo Hado
 
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 DesignMoodLabs
 
Ui ux designing principles
Ui ux designing principlesUi ux designing principles
Ui ux designing principlesDzung Nguyen
 
Characteristics of a well designed user interface
Characteristics of a well designed user interfaceCharacteristics of a well designed user interface
Characteristics of a well designed user interfaceThomas Byttebier
 
Gestalt Principles in UI Design
Gestalt Principles in UI DesignGestalt Principles in UI Design
Gestalt Principles in UI DesignT-Design Center
 
human computer interface
human computer interfacehuman computer interface
human computer interfaceSantosh Kumar
 
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 Rulesguest45d695
 
Information System Concepts & Types of Information Systems
Information System Concepts & Types of Information SystemsInformation System Concepts & Types of Information Systems
Information System Concepts & Types of Information SystemsVR Talsaniya
 
Ppt. developing a conceptual framework
Ppt.  developing a conceptual frameworkPpt.  developing a conceptual framework
Ppt. developing a conceptual frameworkNursing Path
 

En vedette (10)

UI Design - Lessons Learned, Principles, and Best Practices
UI Design - Lessons Learned, Principles, and Best PracticesUI Design - Lessons Learned, Principles, and Best Practices
UI Design - Lessons Learned, Principles, and Best Practices
 
His hers yours mine
His hers yours mineHis hers yours mine
His hers yours mine
 
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
 
Ui ux designing principles
Ui ux designing principlesUi ux designing principles
Ui ux designing principles
 
Characteristics of a well designed user interface
Characteristics of a well designed user interfaceCharacteristics of a well designed user interface
Characteristics of a well designed user interface
 
Gestalt Principles in UI Design
Gestalt Principles in UI DesignGestalt Principles in UI Design
Gestalt Principles in UI Design
 
human computer interface
human computer interfacehuman computer interface
human computer interface
 
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
 
Information System Concepts & Types of Information Systems
Information System Concepts & Types of Information SystemsInformation System Concepts & Types of Information Systems
Information System Concepts & Types of Information Systems
 
Ppt. developing a conceptual framework
Ppt.  developing a conceptual frameworkPpt.  developing a conceptual framework
Ppt. developing a conceptual framework
 

Similaire à Usere xperience designprinciples

Product Design & Development Process By- Achia Nila
Product Design & Development Process  By- Achia NilaProduct Design & Development Process  By- Achia Nila
Product Design & Development Process By- Achia NilaAchia Nila
 
AI-Human Dialogue for Architectural Design Concept Generation presentation 26...
AI-Human Dialogue for Architectural Design Concept Generation presentation 26...AI-Human Dialogue for Architectural Design Concept Generation presentation 26...
AI-Human Dialogue for Architectural Design Concept Generation presentation 26...Galala University
 
AI-Human Dialogue for Architectural Design Concept Generation presentation 26...
AI-Human Dialogue for Architectural Design Concept Generation presentation 26...AI-Human Dialogue for Architectural Design Concept Generation presentation 26...
AI-Human Dialogue for Architectural Design Concept Generation presentation 26...Yasser Mahgoub
 
Intro Design System for Visual Designers
Intro Design System for Visual DesignersIntro Design System for Visual Designers
Intro Design System for Visual DesignersInyoung Choi
 
Convergent divergent thinking & wireframeprototyping
Convergent divergent thinking & wireframeprototypingConvergent divergent thinking & wireframeprototyping
Convergent divergent thinking & wireframeprototypingPriyanka Rana
 
IT Executive's guide to Design Thinking
IT Executive's guide to Design ThinkingIT Executive's guide to Design Thinking
IT Executive's guide to Design ThinkingAlgarytm
 
Validating Ideas Through Prototyping
Validating Ideas Through PrototypingValidating Ideas Through Prototyping
Validating Ideas Through PrototypingChris Risdon
 
IT Executive's Guide to Design thinking | Algarytm
IT Executive's Guide to Design thinking | AlgarytmIT Executive's Guide to Design thinking | Algarytm
IT Executive's Guide to Design thinking | AlgarytmPropel Apps
 
Design Thinking: A Common Sense Process
Design Thinking: A Common Sense ProcessDesign Thinking: A Common Sense Process
Design Thinking: A Common Sense ProcessMichael Zarro, Ph.D.
 
Design lean agile_thinking presentation
Design lean agile_thinking presentationDesign lean agile_thinking presentation
Design lean agile_thinking presentationGeekNightHyderabad
 
Introduction to Engineering Design
Introduction to Engineering DesignIntroduction to Engineering Design
Introduction to Engineering DesignMANJUNATH N
 
Concepts in engineering design
Concepts in engineering designConcepts in engineering design
Concepts in engineering designMITS Gwalior
 
Rapid Product Design in the Wild, Agile 2013
Rapid Product Design in the Wild, Agile 2013Rapid Product Design in the Wild, Agile 2013
Rapid Product Design in the Wild, Agile 2013Michele Ide-Smith
 
Delivering Great User Experiences in a Multi-Device World
Delivering Great User Experiences in a Multi-Device WorldDelivering Great User Experiences in a Multi-Device World
Delivering Great User Experiences in a Multi-Device WorldNorthPoint Digital
 
Design Thinking 101 Workshop
Design Thinking 101 WorkshopDesign Thinking 101 Workshop
Design Thinking 101 WorkshopNatalie Hollier
 
Open Source Contribution Policies That Don't Suck
Open Source Contribution Policies That Don't SuckOpen Source Contribution Policies That Don't Suck
Open Source Contribution Policies That Don't SuckTobie Langel
 
LPCx Barcelona: How to use the design thinking methodology to revamp your API?
LPCx Barcelona: How to use the design thinking methodology to revamp your API?LPCx Barcelona: How to use the design thinking methodology to revamp your API?
LPCx Barcelona: How to use the design thinking methodology to revamp your API?Thiga
 

Similaire à Usere xperience designprinciples (20)

Product Design & Development Process By- Achia Nila
Product Design & Development Process  By- Achia NilaProduct Design & Development Process  By- Achia Nila
Product Design & Development Process By- Achia Nila
 
AI-Human Dialogue for Architectural Design Concept Generation presentation 26...
AI-Human Dialogue for Architectural Design Concept Generation presentation 26...AI-Human Dialogue for Architectural Design Concept Generation presentation 26...
AI-Human Dialogue for Architectural Design Concept Generation presentation 26...
 
AI-Human Dialogue for Architectural Design Concept Generation presentation 26...
AI-Human Dialogue for Architectural Design Concept Generation presentation 26...AI-Human Dialogue for Architectural Design Concept Generation presentation 26...
AI-Human Dialogue for Architectural Design Concept Generation presentation 26...
 
Intro Design System for Visual Designers
Intro Design System for Visual DesignersIntro Design System for Visual Designers
Intro Design System for Visual Designers
 
Convergent divergent thinking & wireframeprototyping
Convergent divergent thinking & wireframeprototypingConvergent divergent thinking & wireframeprototyping
Convergent divergent thinking & wireframeprototyping
 
IT Executive's guide to Design Thinking
IT Executive's guide to Design ThinkingIT Executive's guide to Design Thinking
IT Executive's guide to Design Thinking
 
Validating Ideas Through Prototyping
Validating Ideas Through PrototypingValidating Ideas Through Prototyping
Validating Ideas Through Prototyping
 
IT Executive's Guide to Design thinking | Algarytm
IT Executive's Guide to Design thinking | AlgarytmIT Executive's Guide to Design thinking | Algarytm
IT Executive's Guide to Design thinking | Algarytm
 
Design for all. Lecture 4
Design for all. Lecture 4Design for all. Lecture 4
Design for all. Lecture 4
 
Design Thinking: A Common Sense Process
Design Thinking: A Common Sense ProcessDesign Thinking: A Common Sense Process
Design Thinking: A Common Sense Process
 
Design lean agile_thinking presentation
Design lean agile_thinking presentationDesign lean agile_thinking presentation
Design lean agile_thinking presentation
 
Design for all 4
Design for all 4Design for all 4
Design for all 4
 
Introduction to Engineering Design
Introduction to Engineering DesignIntroduction to Engineering Design
Introduction to Engineering Design
 
Concepts in engineering design
Concepts in engineering designConcepts in engineering design
Concepts in engineering design
 
Rapid Product Design in the Wild, Agile 2013
Rapid Product Design in the Wild, Agile 2013Rapid Product Design in the Wild, Agile 2013
Rapid Product Design in the Wild, Agile 2013
 
Delivering Great User Experiences in a Multi-Device World
Delivering Great User Experiences in a Multi-Device WorldDelivering Great User Experiences in a Multi-Device World
Delivering Great User Experiences in a Multi-Device World
 
Design Thinking 101 Workshop
Design Thinking 101 WorkshopDesign Thinking 101 Workshop
Design Thinking 101 Workshop
 
Open Source Contribution Policies That Don't Suck
Open Source Contribution Policies That Don't SuckOpen Source Contribution Policies That Don't Suck
Open Source Contribution Policies That Don't Suck
 
Learning Journey Circular Design
Learning Journey Circular DesignLearning Journey Circular Design
Learning Journey Circular Design
 
LPCx Barcelona: How to use the design thinking methodology to revamp your API?
LPCx Barcelona: How to use the design thinking methodology to revamp your API?LPCx Barcelona: How to use the design thinking methodology to revamp your API?
LPCx Barcelona: How to use the design thinking methodology to revamp your API?
 

Dernier

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 organizationRadu Cotescu
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processorsdebabhi2
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Scriptwesley chun
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024The Digital Insurer
 
[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.pdfhans926745
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking MenDelhi Call girls
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking MenDelhi Call girls
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024The Digital Insurer
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsJoaquim Jorge
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonetsnaman860154
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerThousandEyes
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024Rafal Los
 
Evaluating the top large language models.pdf
Evaluating the top large language models.pdfEvaluating the top large language models.pdf
Evaluating the top large language models.pdfChristopherTHyatt
 
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...Miguel Araújo
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Servicegiselly40
 
Tech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdfTech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdfhans926745
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerThousandEyes
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationMichael W. Hawkins
 
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreterPresentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreternaman860154
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProduct Anonymous
 

Dernier (20)

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
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 
[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
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 
Evaluating the top large language models.pdf
Evaluating the top large language models.pdfEvaluating the top large language models.pdf
Evaluating the top large language models.pdf
 
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...
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
 
Tech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdfTech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdf
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreterPresentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreter
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 

Usere xperience designprinciples

  • 1. User Experience : UI Design Principles Hemant Singh @singhhemant
  • 2. Objectives of the presentation Explain “User Experience” Explore Common Design Principles Where to go next? Q&A
  • 3. This talk is different No Code Very verbose………… “Use what you know. Do what you’ve always imagined”
  • 4. Old Software is well old Old ways of developing applications are passé…….. Limited software tools Design took a backseat Limited hardware support.
  • 6. What Changed? •Wide array of devices to consume content •Connectivity everywhere •Touch Computing •Cloud Storage (device store minimum data)
  • 9. Payoffs of adapting new ways Higher Productivity Lower training Fewer errors Adoption of technology by wide spectrum. Satisfied users
  • 10. What is User Experience? “It’s the cumulative experience of your product that people remember, talk about, love or hate.”
  • 11. Design Principle : Archetypes “Universal patterns of theme and form resulting from innate biases or dispositions”
  • 12. Design Principle : Archetypes
  • 13. Design Principle : Archetypes
  • 14. Design Principle : Fitt’s Law “The time required to move to a target is a function of the target size and distance to the target.”
  • 15. Design Principle : Fitt’s Law “Consider strategies that constrain movements when possible to improve performance and reduce error.”
  • 16. Design Principle : Fitt’s Law
  • 17. Design Principle : Inattentive Blindness “The failure to cognitively process a stimuli that is presented in clear view, leaving the observer without any awareness or memory of the stimulus.”
  • 18. Design Principle : Inattentive Blindness • Increased cognitive Load decreases user awareness. • Complex data entry should be broken in simple steps. (Multiple screens, Collapsible areas / Wizards) • Errors on a screen, should be displayed at or near the source of error. • Errors should come quickly enough to be relevant. • Errors should be differentiated from screen text
  • 19. Design Principle : Inattentive Blindness
  • 20.
  • 21. Design Principle : Pareto’s Principle (80/20) “A high percentage of effects in any large system are caused by a low percentage of variables.”
  • 22. Design Principle : Pareto’s Principle (80/20) Non critical functions that are part of the less important 80% should be minimized or removed altogether from the design.
  • 23. Design Principle : Pareto’s Principle (80/20)
  • 24. Design Principle : Hick’s Law The time it takes to decision increases with the number of alternatives. The law applies to the design of software menus, control displays, context menus and emergency response.
  • 25. Design Principle : Hick’s Law
  • 26. Design Principle : Five Hat Racks •There are five ways to organize information Location Alphabet Time Category Hierarchy
  • 27. Design Principle : Five Hat Racks
  • 28. Design Principle : Biophilia “Environments rich in nature views and imagery reduce stress and enhance focus and concentration.”
  • 29. Design Principle : Biophilia
  • 30. Design Principle : Biophilia •Environments rich in nature views and imagery reduce stress and enhance focus and concentration. •Business applications which deal with learning, healing, healthcare, education, concentration …. should consider biophilia design.
  • 31. Design Principle : Rule of Thirds An image should be imagined as divided into nine equal parts by two equally-spaced horizontal lines and two equally-spaced vertical lines, and that important compositional elements should be placed along these lines or their intersection.
  • 32. Design Principle : Rule of Thirds
  • 33. Design Principle : Savanna Principle Tendency to prefer savanna like environments (Open areas, scattered trees, water, lush grass,..) to other environments.
  • 34. Design Principle : Savanna Principle
  • 35. Design Principle : Gutenberg Diagram “A diagram that describes the general pattern followed by the eyes when looking at evenly distributed, homogenous information.”
  • 36. Design Principle : Gutenberg Diagram
  • 37. Design Principle : Gutenberg Diagram
  • 38. Design Principle : Symmetry •Elements that are similar are perceived to be more related than elements that are dissimilar.
  • 39. Design Principle : Symmetry
  • 40. Design Principle : Attractiveness Bias "A tendency to see attractive people as more intelligent competent, moral and sociable than unattractive people." Used in images of people in marketing or advertising.
  • 41. Design Principle : Attractiveness Bias
  • 42. Design Principle : Horror Vaccui A tendency to favor filing blank spaces with objects and elements over leaving spaces blank or empty.
  • 43. Design Principle : Horror Vaccui
  • 44. Design Principle : Horror Vaccui
  • 45. Design Principle : Contour Bias “A tendency to favor objects with contours over objects with sharp angles or points.”
  • 46. Design Principle : Contour Bias
  • 47. Design Principle : Garbage In Garbage Out "Quality of system output is dependent on the quality of the system input "
  • 48. Design Principle : Garbage In Garbage Out
  • 49. Design Principle : Garbage In Garbage Out
  • 50. Design Principle : Classification Layout Fitt's Law, Pareto's Principle, Gutenberg Diagram Background ArcheTypes, Biophilia, Rule of Thirds, Savanna, Attractiveness Bias, Horror Vacuui Menus Hick's Law, Fitt's Law Controls ArcheTypes, Symmetry, Contour Bias, Five Hat Racks Error Handling Inattentive Blindness, Garbage In Garbage Out Forms Garbage In Garbage Out
  • 51. References • The design of everyday things (David Norman) • Universal Principles of Design, Revised and Updated: 125 Ways to Enhance Usability, Influence Perception, Increase Appeal, Make Better Design Decisions, and Teach through Design • Smashing Magazine Ux Design (http://uxdesign.smashingmagazine.com/) • Billy Hollis (talk on ux design, pluralsight)