Weavora's guide to web app usability
?Download as PPT, PDF?
4 likes?942 views
The document provides guidance on various aspects of web app usability such as form validation, date formatting, modal popups, alternative controls like date pickers and country searches, and data grid and table design. It discusses best practices for layout, interaction patterns, and user experience. Specific recommendations include using conversational language in forms, limiting number of fields, providing registration benefits, and testing button and field states.
Weavora's guide to web app usability
- 1. Weavora’s Guide to Web App Usability by Mike
- 3. Realtime masking think twice!!!
- 5. Date format matters be more human oriented!!!
- 6. Bad URLs
- 7. Modal pop up Information on the background should be visible Overlay should be movable Have a titlebar Have a close button & handle Esc Pop up size is between 1/4 and 1/3 of existing window size
- 8. Alternatives
- 9. Date picker
- 10. Countries search
- 11. Data grid
- 12. Data grid
- 13. Inline editing
- 14. Inline editing
- 15. Inline editing
- 16. Inline edit UX
- 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
- 20. Readability
- 21. Empty container Your inbox is empty
- 22. Button states
- 25. Flash messages
- 26. Generic words
- 27. Error pages
- 28. Nice colors
- 29. Statistics
- 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 validation 30% display only an error message on top (no input fields highlighted) 29% highlight input fields with corresponding message inline (no message on top) 22% use realtime AJAX validation 14% use Javascript error warning 1% other Confirm email {Yes (18%), No (82%)} Confirm password {Yes (72%), No (28%)} Alignment of Submit button {left (58%), right (16%), center (26%)}
- 31. 41% of the forms provide benefits of the registration 11% inform the visitors how much time is required 54% requires at most 5 input fields, 34% requires 6-8 fields 62% had no optional fields at all Communication 24% use conversational talk like "What's your name?" or "Your e-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-effects Captcha {do not use (52%), 39% cannot refresh captcha without complete page refresh}
- 32. {end...}