UX Basics
1 like463 views
The document outlines key principles and processes of user experience (UX) design, emphasizing the importance of usability, desirability, and brand experience. It presents a structured UX process involving product definition, research, analysis, design, and validation, along with best practices for creating effective user interfaces. The document highlights the relationship between UI and UX, asserting that good design goes beyond aesthetics, focusing on functionality and user satisfaction.
UX Basics
- 1. 1© Creative IT, Inc. All rights reserved.© Creative IT, Inc. All rights reserved. UX Basics Kabir Malkani October 2019
- 2. 2© Creative IT, Inc. All rights reserved. Interbrand – Best Global Brands 2019 Across all sectors
- 3. 3© Creative IT, Inc. All rights reserved. Interbrand – Best Global Brands 2019 Technology and Business Services
- 4. 4© Creative IT, Inc. All rights reserved. Spot the difference! Designing the product Designing the experience
- 5. 5© Creative IT, Inc. All rights reserved. Relationship between Usability and UX
- 6. 6© Creative IT, Inc. All rights reserved. Relationship between Usability and UX Utility – It meets my needs
- 7. 7© Creative IT, Inc. All rights reserved. Relationship between Usability and UX Usability – I am able to use the product easily
- 8. 8© Creative IT, Inc. All rights reserved. Relationship between Usability and UX Desirability – I like the way the product looks and feels
- 9. 9© Creative IT, Inc. All rights reserved. Relationship between Usability and UX Brand Experience – My overall feeling about the brand/product is good! A positive UX leads to advocacy
- 10. 10© Creative IT, Inc. All rights reserved. Relationship between UI, Usability and UX
- 11. 11© Creative IT, Inc. All rights reserved. Fundamental Design Principles
- 12. 12© Creative IT, Inc. All rights reserved. Fundamental Design Principles
- 13. 13© Creative IT, Inc. All rights reserved. Fundamental Design Principles #1 Provide context Ensure people are contextually aware of where they are within their journey. Think ‘breadcrumbs’.
- 14. 14© Creative IT, Inc. All rights reserved. Fundamental Design Principles
- 15. 15© Creative IT, Inc. All rights reserved. Fundamental Design Principles #2 Be human Eliminate confusion. Think human interaction.
- 16. 16© Creative IT, Inc. All rights reserved. Fundamental Design Principles
- 17. 17© Creative IT, Inc. All rights reserved. Fundamental Design Principles #3 Make it discoverable Score “delight” points by being intuitive
- 18. 18© Creative IT, Inc. All rights reserved. Fundamental Design Principles
- 19. 19© Creative IT, Inc. All rights reserved. Fundamental Design Principles #4 Make it easy Familiarize yourself with common widgets, patterns, metaphors and gestures.
- 20. 20© Creative IT, Inc. All rights reserved. WTF!? Fundamental Design Principles
- 21. 21© Creative IT, Inc. All rights reserved. Fundamental Design Principles #5 Keep it simple! Avoid clutter and confusion. Intuitiveness leads to discovery.
- 22. 22© Creative IT, Inc. All rights reserved. What is UX?
- 23. 23© Creative IT, Inc. All rights reserved. UI UXUI can influence UX… Layout Visual Design Branding Colors Typography Interaction Information Wireframes / Prototypes User Research Scenarios …but good UI does not necessarily mean good UX
- 24. 24© Creative IT, Inc. All rights reserved. Surface Visual Design Skeleton Interface Design Navigation Design Information Design Structure Interaction Design Information Architecture Scope Functional Specs Content Requirements Strategy User Needs Site Objectives Jesse James Garrett’s Layers of User Experience Model The sum of a person’s emotions and behaviors when interacting with a product, system or service
- 25. 25© Creative IT, Inc. All rights reserved. The UX Process
- 26. 26© Creative IT, Inc. All rights reserved. The UX Process
- 27. 27© Creative IT, Inc. All rights reserved. The UX Process Step #1 Product Definition 1. Stakeholder Interviews 2. Create Value Proposition 3. Concept Sketching / Rough Mockup 4. Project Kickoff Meeting / Metrics
- 28. 28© Creative IT, Inc. All rights reserved. The UX Process Step #1 Product Definition > Stakeholder Interviews
- 29. 29© Creative IT, Inc. All rights reserved. The UX Process Step #2 Product Research 1. User Needs / Individual In-depth Interviews (IDI) 2. Competitive Research
- 30. 30© Creative IT, Inc. All rights reserved. The UX Process Step #2 Product Research > User Interviews Topics covered: 1. Background (such as ethnographic data) 2. The use of technology in general 3. The use of the product 4. The user’s main objectives and motivations 5. The user’s pain points Hint: Include a mix of qualitative and quantitative questions
- 31. 31© Creative IT, Inc. All rights reserved. The UX Process Step #3 Analysis 1. Create Hypothetical Personas 2. Create Experience Maps / Customer Journey
- 32. 32© Creative IT, Inc. All rights reserved. The UX Process Step #3 Analysis > Personas
- 33. 33© Creative IT, Inc. All rights reserved. UX Process Step #4 Design 1. Sketching 2. Wireframing 3. Prototyping 4. Design Specifications
- 34. 34© Creative IT, Inc. All rights reserved. Sketching Wireframing Prototyping The UX Process Step #2 Product Research > Sketching, Wireframing, Prototyping
- 35. 35© Creative IT, Inc. All rights reserved. UX Process Step #5 Validation 1. Internal Checks 2. User Testing Sessions 3. Metrics Analysis 4. User Feedback (Post Launch)
- 36. 36© Creative IT, Inc. All rights reserved. User Testing Step #5 Validation Methods Usability Testing a. Moderated b. Unmoderated (URUT) 2. Focus Groups 3. Beta Testing 4. A/B Testing 5. Surveys
- 37. 37© Creative IT, Inc. All rights reserved. Best Practices • Keep physical constraints in mind • Put yourself in the place of a “visitor”. Focus on user goals • Be consistent with colors and typography and actions • Familiarize yourself with gestures and widgets • Pay attention to feedback (from everyone) and strive to constantly improve your product. • Reduce loading time • Provide sensory feedback for completed actions • Use feedback from users to constantly improve your product • Instill a “Wow” factor or an emotional connect with the users
- 38. 38© Creative IT, Inc. All rights reserved. Epic Fails
- 39. 39© Creative IT, Inc. All rights reserved. Killing two birds with one stone does not always give desirable results
- 40. 40© Creative IT, Inc. All rights reserved. Think about layout and content hierarchy
- 41. 41© Creative IT, Inc. All rights reserved. Think about layout and content hierarchy
- 42. 42© Creative IT, Inc. All rights reserved. Think about layout and content hierarchy
- 43. 43© Creative IT, Inc. All rights reserved. Think about layout and content hierarchy
- 44. 44© Creative IT, Inc. All rights reserved. Double-check everything!
- 45. 45© Creative IT, Inc. All rights reserved. Double-check everything!
- 46. 46© Creative IT, Inc. All rights reserved. Double-check everything!
- 47. 47© Creative IT, Inc. All rights reserved. Provide easy access to the most important things!
- 48. 48© Creative IT, Inc. All rights reserved. Provide easy access to the most important things!
- 49. 49© Creative IT, Inc. All rights reserved. Don’t show more than the user desires to see.
- 50. 50© Creative IT, Inc. All rights reserved. Don’t show more than the user desires to see.
- 51. 51© Creative IT, Inc. All rights reserved. Think of social, cultural and linguistic symbolism
- 52. 52© Creative IT, Inc. All rights reserved. Think about the human factor
- 53. 53© Creative IT, Inc. All rights reserved. Think about the human factor
- 54. 54© Creative IT, Inc. All rights reserved. “Design is not just what it looks like and feels like. Design is how it works.” Steve Jobs “A user interface is like a joke. If you have to explain it, it’s not that good”. Martin Leblanc “Any product that needs a manual to work is broken.” Elon Musk Thank you!