Weavora's guide to web app usability


Published on

Internal presentation that outlines some common practices to web app usability

Published in: Design
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Weavora's guide to web app usability

  1. 1. Weavora’s Guide toWeb App Usability by Mike
  2. 2. Form validation
  3. 3. Realtime masking think twice!!!
  4. 4. Form grouping
  5. 5. Date format matters be more human oriented!!!
  6. 6. Bad URLs
  7. 7. Modal pop upInformation on the background should be visibleOverlay should be movableHave a titlebarHave a close button & handle EscPop up size is between 1/4 and 1/3 of existing window size
  8. 8. Alternatives
  9. 9. Date picker
  10. 10. Countries search
  11. 11. Data grid
  12. 12. Data grid
  13. 13. Inline editing
  14. 14. Inline editing
  15. 15. Inline editing
  16. 16. Inline edit UX
  17. 17. Super wide tables Organize most important columns to the left Experiment with frozen columns Limited # of columns in default view Offer column resize Offer columns rearrange Group editable cells with editable & vice versa Don’t abbreviate Try out fat rows Summary row = readability Continuous scrolling
  18. 18. Prior data visualization
  19. 19. In-column filtering
  20. 20. Readability
  21. 21. Empty containerYour inbox is empty
  22. 22. Button states
  23. 23. Interactive design
  24. 24. Collapsable content
  25. 25. Flash messages
  26. 26. Generic words
  27. 27. Error pages
  28. 28. Nice colors
  29. 29. Statistics
  30. 30. Sign up titles: {Create account (17%), Register (18%), Join (18%), Sign up(40%), Start here (2%), Other (5%)}Hints: {Static (57%), Dynamic (10%), No (33%)}; underneath (57%), top(13%), left (4%), right (26%)Dynamic validation30% display only an error message on top (no input fields highlighted)29% highlight input fields with corresponding message inline (no message ontop)22% use realtime AJAX validation14% use Javascript error warning1% otherConfirm email {Yes (18%), No (82%)} Confirm password {Yes (72%), No(28%)}Alignment of Submit button {left (58%), right (16%), center (26%)}
  31. 31. 41% of the forms provide benefits of the registration11% inform the visitors how much time is required54% requires at most 5 input fields, 34% requires 6-8 fields62% had no optional fields at allCommunication24% use conversational talk like "Whats your name?" or "Youre-mail, please …"38% both Formal ("Your name" or "Confirm password)" &System talk ("Login", "User name")84% forms do not have any hover, active or focus-effectsCaptcha {do not use (52%), 39% cannot refresh captchawithout complete page refresh}
  32. 32. {end...}
  33. 33. “To design something really well you have to get it. You have to really grok what it’s all about. It takes a passionate commitment to thoroughly understand something — chew it up, not just quickly swallow it. Most people don’t take the time to do that. Creativity is just connecting things. When you ask a creative person how they did something, they may feel a little guilty because they didn’t really do it, they just saw something. It seemed obvious to them after awhile. That’s because they were able to connect experiences they’ve had and synthesize new things. And the reason they were able to do that was that they’ve had more experiences or have thought more about their experiences than other people have. Unfortunately, that’s too rare a commodity. A lot of people in our industry haven’t had very diverse experiences. They don’t have enough dots to connect, and they end up with very linear solutions, without a broad perspective on the problem. The broader one’s understanding of the human experience, the better designs we will have” by Steve Jobs
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.