UX Design Workshop


Published on

User Experience Design: A basic level understanding of UXD for developer community. This is a quick summary and also consists of few tips and tricks to make your application usable.

Published in: Design, Technology

UX Design Workshop

  1. 1. User Experience Design Workshop<br />
  2. 2.
  3. 3. What is UX?<br />Workshop <br />Techniques <br />Fun<br />Dialog <br />UI Design <br />Discussions <br />UI Process<br />
  4. 4. Do you really believe <br />what your eyes see?<br />
  5. 5. Do you really believe <br />what your eyes see?<br />
  6. 6. Charlie Chaplin – Illusion <br />
  7. 7. Now that we know, <br />what next?<br />
  8. 8. Some Background <br />
  9. 9. Usability Definition <br />[Usability refers to] the extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specified context of use.&quot; - ISO 9241-11<br />
  10. 10. Who would be using this application?<br />Where this user would be achieving this goal?<br />What this user would like to achieve?<br />
  11. 11. Persona <br />UserWho would be using this application?<br />Tasks profiling <br />Can’t be “ALL USERS” <br />Create Scenarios <br />
  12. 12. More features less usability<br />Understand primary tasks <br />Focus on important things <br />GoalWhat this user would like to achieve?<br />
  13. 13. Personal Interview<br />Email <br />Surveys <br />ContextWhere this user would be achieving this goal?<br />Contextual Inquiry <br />Focus Group <br />Support Line<br />
  14. 14. Enough theories, How <br />do I design a web app?<br />
  15. 15.
  16. 16. This is where it all begins. <br />What user want?<br />Application Feature?<br />BRS<br />
  17. 17. This step transforms strategy into requirements.<br />SRS<br />Functional & UI requirement<br />
  18. 18. This gives shape to the scope. <br />Navigation<br />Sitemap<br />
  19. 19. It makes the site concrete. <br />Wireframes <br />Storyboards<br />Prototype <br />IA<br />
  20. 20. Surface brings everything together visually.<br />Graphics <br />Icons <br />Colors <br />
  21. 21. Go low level and talk <br />about design elements<br />
  22. 22. Create accessible links<br />Web users scan text <br />User short & simple words<br />Inverted pyramid writing<br />Online vs. print content<br />
  23. 23. Font<br />Times New Roman is a common serif font<br />Font<br />Verdana is a common sans serif font<br />Font<br />Times New Roman is a proportional spaced font<br />Font<br />Courier is a monospace font<br />Some gyan about fonts <br />
  24. 24. Aoccdrnig to rseerach at Cmabrigde<br />Uinervtisy, it deosn&apos;tmttaer in waht<br />oredr the ltteers in a wrod are, the <br />olnyiprmoatnttihng is taht the frist<br />and lsatltteer be at the rghitpclae. <br />The rset can be a total mses and you <br />can sitllraedit wouthitporbelm. <br />Tihs is bcuseae the huamnmnid<br />deos not raederveylteter by istlef, <br />but the wrod as a wlohe. <br />Amzanig huh? <br />Avoid italics <br />Capital = 14-20% less readable<br />Sans serif are build for web <br />10 points or larger is safe<br />font gyan continues <br />
  25. 25. C a yureat is?<br />You a e not radigths.<br />W at arourea in ?<br />
  26. 26. Get user attention <br />
  27. 27. Do not use pure red or blue<br />Do not use more than 6 colors<br />7% of population is color blind <br />Blue is a safe color <br />Use of colors <br />
  28. 28. Try this color illusion <br />
  29. 29.
  30. 30.
  31. 31. Familiarity reduces learning <br />Meaning less icons <br />Inconsistent icons <br />Unlabeled icons <br />Avoid Popular metaphors <br />Use of icons <br />
  32. 32. Button = Action<br />Link = Navigation<br />Consistency <br />Affordance <br />Usage of buttons <br />
  33. 33. Number of items <br />Usage pattern <br />Space constrain <br />Searching capability <br />Auto complete <br />Radio button, dropdown, or shuttle<br />
  34. 34. Suggest solution<br />Prevent error <br />Keep it together<br />Think about the message<br />Never show system errors<br />Error handling <br />
  35. 35. User Experience Design<br />User Experience Design<br />User Interface Design<br />Human Factors Engineering <br />Information Architecture <br />Usability <br />Human Computer Interaction <br />