Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

UX Design Workshop

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.

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 />

×