Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

UX Basics

222 vues

Publié le

This is a short overview of UX and the relationship between UI, Usability and UX with examples. It also briefly covers the UX process. This presentation was meant for internal training and borrows content available on the internet. I do not claim any ownership of the material included in this presentation.

Publié dans : Technologie
  • Identifiez-vous pour voir les commentaires

  • Soyez le premier à aimer ceci

UX Basics

  1. 1. 1© Creative IT, Inc. All rights reserved.© Creative IT, Inc. All rights reserved. UX Basics Kabir Malkani October 2019
  2. 2. 2© Creative IT, Inc. All rights reserved. Interbrand – Best Global Brands 2019 Across all sectors
  3. 3. 3© Creative IT, Inc. All rights reserved. Interbrand – Best Global Brands 2019 Technology and Business Services
  4. 4. 4© Creative IT, Inc. All rights reserved. Spot the difference! Designing the product Designing the experience
  5. 5. 5© Creative IT, Inc. All rights reserved. Relationship between Usability and UX
  6. 6. 6© Creative IT, Inc. All rights reserved. Relationship between Usability and UX Utility – It meets my needs
  7. 7. 7© Creative IT, Inc. All rights reserved. Relationship between Usability and UX Usability – I am able to use the product easily
  8. 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. 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. 10© Creative IT, Inc. All rights reserved. Relationship between UI, Usability and UX
  11. 11. 11© Creative IT, Inc. All rights reserved. Fundamental Design Principles
  12. 12. 12© Creative IT, Inc. All rights reserved. Fundamental Design Principles
  13. 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. 14© Creative IT, Inc. All rights reserved. Fundamental Design Principles
  15. 15. 15© Creative IT, Inc. All rights reserved. Fundamental Design Principles #2 Be human Eliminate confusion. Think human interaction.
  16. 16. 16© Creative IT, Inc. All rights reserved. Fundamental Design Principles
  17. 17. 17© Creative IT, Inc. All rights reserved. Fundamental Design Principles #3 Make it discoverable Score “delight” points by being intuitive
  18. 18. 18© Creative IT, Inc. All rights reserved. Fundamental Design Principles
  19. 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. 20© Creative IT, Inc. All rights reserved. WTF!? Fundamental Design Principles
  21. 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. 22© Creative IT, Inc. All rights reserved. What is UX?
  23. 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. 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. 25© Creative IT, Inc. All rights reserved. The UX Process
  26. 26. 26© Creative IT, Inc. All rights reserved. The UX Process
  27. 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. 28© Creative IT, Inc. All rights reserved. The UX Process Step #1 Product Definition > Stakeholder Interviews
  29. 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. 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. 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. 32© Creative IT, Inc. All rights reserved. The UX Process Step #3 Analysis > Personas
  33. 33. 33© Creative IT, Inc. All rights reserved. UX Process Step #4 Design 1. Sketching 2. Wireframing 3. Prototyping 4. Design Specifications
  34. 34. 34© Creative IT, Inc. All rights reserved. Sketching Wireframing Prototyping The UX Process Step #2 Product Research > Sketching, Wireframing, Prototyping
  35. 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. 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. 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. 38© Creative IT, Inc. All rights reserved. Epic Fails
  39. 39. 39© Creative IT, Inc. All rights reserved. Killing two birds with one stone does not always give desirable results
  40. 40. 40© Creative IT, Inc. All rights reserved. Think about layout and content hierarchy
  41. 41. 41© Creative IT, Inc. All rights reserved. Think about layout and content hierarchy
  42. 42. 42© Creative IT, Inc. All rights reserved. Think about layout and content hierarchy
  43. 43. 43© Creative IT, Inc. All rights reserved. Think about layout and content hierarchy
  44. 44. 44© Creative IT, Inc. All rights reserved. Double-check everything!
  45. 45. 45© Creative IT, Inc. All rights reserved. Double-check everything!
  46. 46. 46© Creative IT, Inc. All rights reserved. Double-check everything!
  47. 47. 47© Creative IT, Inc. All rights reserved. Provide easy access to the most important things!
  48. 48. 48© Creative IT, Inc. All rights reserved. Provide easy access to the most important things!
  49. 49. 49© Creative IT, Inc. All rights reserved. Don’t show more than the user desires to see.
  50. 50. 50© Creative IT, Inc. All rights reserved. Don’t show more than the user desires to see.
  51. 51. 51© Creative IT, Inc. All rights reserved. Think of social, cultural and linguistic symbolism
  52. 52. 52© Creative IT, Inc. All rights reserved. Think about the human factor
  53. 53. 53© Creative IT, Inc. All rights reserved. Think about the human factor
  54. 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!

×