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)
- 7. Change?
- 8. Change?
- 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
- 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)