Internal presentation that outlines some common practices to web app usability

1. Weavora’s Guide to
Web App Usability
by Mike

2. Form validation

3. Realtime masking
think twice!!!

4. Form grouping

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

18. Prior data visualization

19. In-column filtering

20. Readability

21. Empty container
Your inbox is empty

22. Button states

23. Interactive design

24. Collapsable content

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...}

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