Components Usability

631 views

Published on

Published in: Design
  • Be the first to comment

  • Be the first to like this

Components Usability

  1. 1. Usability of ComponentsMonday, December 3, 12
  2. 2. Landing PageMonday, December 3, 12
  3. 3. The visitor has extreme impatienceMonday, December 3, 12
  4. 4. Text is scanned, not read.Monday, December 3, 12
  5. 5. Visitors typical desired next action is to click on something.Monday, December 3, 12
  6. 6. What we do, and how to get itMonday, December 3, 12
  7. 7. Monday, December 3, 12
  8. 8. Monday, December 3, 12
  9. 9. Monday, December 3, 12
  10. 10. Monday, December 3, 12
  11. 11. Monday, December 3, 12
  12. 12. Monday, December 3, 12
  13. 13. Monday, December 3, 12
  14. 14. Monday, December 3, 12
  15. 15. Monday, December 3, 12
  16. 16. Login and RegistrationMonday, December 3, 12
  17. 17. Only ask for the information you needMonday, December 3, 12
  18. 18. Keep it to one pageMonday, December 3, 12
  19. 19. Deal with errors helpfullyMonday, December 3, 12
  20. 20. Sign In on Login, Login on Sign inMonday, December 3, 12
  21. 21. Tab Tab EnterMonday, December 3, 12
  22. 22. Monday, December 3, 12
  23. 23. Monday, December 3, 12
  24. 24. Monday, December 3, 12
  25. 25. Monday, December 3, 12
  26. 26. NavigationMonday, December 3, 12
  27. 27. Horizontal Bar NavigationMonday, December 3, 12
  28. 28. Monday, December 3, 12
  29. 29. It limits the number of links you can include without resorting to sub-navigationMonday, December 3, 12
  30. 30. Is perfect for sites that only need to display 5-12 itemsMonday, December 3, 12
  31. 31. When combined with dropdown sub-navigation, can hold more links.Monday, December 3, 12
  32. 32. Vertical Bar NavigationMonday, December 3, 12
  33. 33. Monday, December 3, 12
  34. 34. Confusing when to many dataMonday, December 3, 12
  35. 35. Use for sites that have more than a handful of main navigation linksMonday, December 3, 12
  36. 36. Consider dividing the links into intuitive categories to help users find links of interest quicker.Monday, December 3, 12
  37. 37. Tabs NavigationMonday, December 3, 12
  38. 38. Monday, December 3, 12
  39. 39. It limits the number of links you can include without resorting to sub-navigationMonday, December 3, 12
  40. 40. Can be combined easily with other navigation patternsMonday, December 3, 12
  41. 41. Resemble and function like real-world tabs (as seen in filing systems with folders, notebooks, binders, etc.)Monday, December 3, 12
  42. 42. Breadcrumb NavigationMonday, December 3, 12
  43. 43. Monday, December 3, 12
  44. 44. Never used for primary navigationMonday, December 3, 12
  45. 45. Don’t work well on sites with shallow navigationMonday, December 3, 12
  46. 46. Best suited to sites that have clearly defined sectionsMonday, December 3, 12
  47. 47. Tags NavigationMonday, December 3, 12
  48. 48. Monday, December 3, 12
  49. 49. For content-centered sites (blogs and news sites)Monday, December 3, 12
  50. 50. Tagging content with keywords is good if you cover plenty of topicsMonday, December 3, 12
  51. 51. Search NavigationMonday, December 3, 12
  52. 52. Monday, December 3, 12
  53. 53. Search bars are usually located in the header or near the top of a sidebarMonday, December 3, 12
  54. 54. For a majority of the sites, should be a secondary form of navigationMonday, December 3, 12
  55. 55. Fly-Out Menu and Drop-Down Menu NavigationMonday, December 3, 12
  56. 56. Monday, December 3, 12
  57. 57. Keep the overall look of your site uncluttered, but also make deeper sections easily accessibleMonday, December 3, 12
  58. 58. Can make navigation on mobile devices very difficultMonday, December 3, 12
  59. 59. FormsMonday, December 3, 12
  60. 60. Labels These tell users what the corresponding input fields mean.Monday, December 3, 12
  61. 61. Input Fields Enable users to provide feedbackMonday, December 3, 12
  62. 62. Actions These are links or buttons that, when pressed by the user, perform an action, such as submitting the formMonday, December 3, 12
  63. 63. Help This provides assistance on how to fill out the form.Monday, December 3, 12
  64. 64. Messages Give feedback to the user based on their input.Monday, December 3, 12
  65. 65. Validation These measures ensure that the data submitted by the user conforms to acceptable parameters.Monday, December 3, 12
  66. 66. Monday, December 3, 12
  67. 67. Monday, December 3, 12
  68. 68. Use top aligned labelsMonday, December 3, 12
  69. 69. Monday, December 3, 12
  70. 70. Never place labels inside the fieldsMonday, December 3, 12
  71. 71. Monday, December 3, 12
  72. 72. Clearly indicate mandatory fieldsMonday, December 3, 12
  73. 73. Monday, December 3, 12
  74. 74. Reduce the number of mandatory fieldsMonday, December 3, 12
  75. 75. Group related fields with fieldsetsMonday, December 3, 12
  76. 76. Monday, December 3, 12
  77. 77. Don’t force formattingMonday, December 3, 12
  78. 78. Monday, December 3, 12
  79. 79. Limit messing with the default browser UI elementsMonday, December 3, 12
  80. 80. Use the right field for right purposeMonday, December 3, 12
  81. 81. Monday, December 3, 12
  82. 82. Give the fields room to breathMonday, December 3, 12
  83. 83. Monday, December 3, 12
  84. 84. Allow adequate field width and heightMonday, December 3, 12
  85. 85. Monday, December 3, 12
  86. 86. Provide hintsMonday, December 3, 12
  87. 87. Monday, December 3, 12
  88. 88. Provide visible and informative error messagesMonday, December 3, 12
  89. 89. Monday, December 3, 12
  90. 90. Don’t reset the user choices aſter submissionMonday, December 3, 12
  91. 91. Set a tabindex on each form fieldMonday, December 3, 12
  92. 92. Provide post-submission feedbackMonday, December 3, 12
  93. 93. Thank YouMonday, December 3, 12

×