Download - Weavora's guide to web app usability
![Page 1: Weavora's guide to web app usability](https://reader034.vdocuments.us/reader034/viewer/2022051609/547424f7b4af9f980a8b554c/html5/thumbnails/1.jpg)
Weavora’s Guide to Web App
Usabilityby Mike
![Page 2: Weavora's guide to web app usability](https://reader034.vdocuments.us/reader034/viewer/2022051609/547424f7b4af9f980a8b554c/html5/thumbnails/2.jpg)
Form validation
![Page 3: Weavora's guide to web app usability](https://reader034.vdocuments.us/reader034/viewer/2022051609/547424f7b4af9f980a8b554c/html5/thumbnails/3.jpg)
Realtime maskingthink twice!!!
![Page 4: Weavora's guide to web app usability](https://reader034.vdocuments.us/reader034/viewer/2022051609/547424f7b4af9f980a8b554c/html5/thumbnails/4.jpg)
Form grouping
![Page 5: Weavora's guide to web app usability](https://reader034.vdocuments.us/reader034/viewer/2022051609/547424f7b4af9f980a8b554c/html5/thumbnails/5.jpg)
Date format matters
be more human oriented!!!
![Page 6: Weavora's guide to web app usability](https://reader034.vdocuments.us/reader034/viewer/2022051609/547424f7b4af9f980a8b554c/html5/thumbnails/6.jpg)
Bad URLs
![Page 7: Weavora's guide to web app usability](https://reader034.vdocuments.us/reader034/viewer/2022051609/547424f7b4af9f980a8b554c/html5/thumbnails/7.jpg)
Modal pop up
Information on the background should be visibleOverlay 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
![Page 8: Weavora's guide to web app usability](https://reader034.vdocuments.us/reader034/viewer/2022051609/547424f7b4af9f980a8b554c/html5/thumbnails/8.jpg)
Alternatives
![Page 9: Weavora's guide to web app usability](https://reader034.vdocuments.us/reader034/viewer/2022051609/547424f7b4af9f980a8b554c/html5/thumbnails/9.jpg)
Date picker
![Page 10: Weavora's guide to web app usability](https://reader034.vdocuments.us/reader034/viewer/2022051609/547424f7b4af9f980a8b554c/html5/thumbnails/10.jpg)
Countries search
![Page 11: Weavora's guide to web app usability](https://reader034.vdocuments.us/reader034/viewer/2022051609/547424f7b4af9f980a8b554c/html5/thumbnails/11.jpg)
Data grid
![Page 12: Weavora's guide to web app usability](https://reader034.vdocuments.us/reader034/viewer/2022051609/547424f7b4af9f980a8b554c/html5/thumbnails/12.jpg)
Data grid
![Page 13: Weavora's guide to web app usability](https://reader034.vdocuments.us/reader034/viewer/2022051609/547424f7b4af9f980a8b554c/html5/thumbnails/13.jpg)
Inline editing
![Page 14: Weavora's guide to web app usability](https://reader034.vdocuments.us/reader034/viewer/2022051609/547424f7b4af9f980a8b554c/html5/thumbnails/14.jpg)
Inline editing
![Page 15: Weavora's guide to web app usability](https://reader034.vdocuments.us/reader034/viewer/2022051609/547424f7b4af9f980a8b554c/html5/thumbnails/15.jpg)
Inline editing
![Page 16: Weavora's guide to web app usability](https://reader034.vdocuments.us/reader034/viewer/2022051609/547424f7b4af9f980a8b554c/html5/thumbnails/16.jpg)
Inline edit UX
![Page 17: Weavora's guide to web app usability](https://reader034.vdocuments.us/reader034/viewer/2022051609/547424f7b4af9f980a8b554c/html5/thumbnails/17.jpg)
Super wide tablesOrganize most important columns to the leftExperiment 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 rowsSummary row = readabilityContinuous scrolling
![Page 18: Weavora's guide to web app usability](https://reader034.vdocuments.us/reader034/viewer/2022051609/547424f7b4af9f980a8b554c/html5/thumbnails/18.jpg)
Prior data visualization
![Page 19: Weavora's guide to web app usability](https://reader034.vdocuments.us/reader034/viewer/2022051609/547424f7b4af9f980a8b554c/html5/thumbnails/19.jpg)
In-column filtering
![Page 20: Weavora's guide to web app usability](https://reader034.vdocuments.us/reader034/viewer/2022051609/547424f7b4af9f980a8b554c/html5/thumbnails/20.jpg)
Readability
![Page 21: Weavora's guide to web app usability](https://reader034.vdocuments.us/reader034/viewer/2022051609/547424f7b4af9f980a8b554c/html5/thumbnails/21.jpg)
Empty container
Your inbox is empty
![Page 22: Weavora's guide to web app usability](https://reader034.vdocuments.us/reader034/viewer/2022051609/547424f7b4af9f980a8b554c/html5/thumbnails/22.jpg)
Button states
![Page 23: Weavora's guide to web app usability](https://reader034.vdocuments.us/reader034/viewer/2022051609/547424f7b4af9f980a8b554c/html5/thumbnails/23.jpg)
Interactive design
![Page 24: Weavora's guide to web app usability](https://reader034.vdocuments.us/reader034/viewer/2022051609/547424f7b4af9f980a8b554c/html5/thumbnails/24.jpg)
Collapsable content
![Page 25: Weavora's guide to web app usability](https://reader034.vdocuments.us/reader034/viewer/2022051609/547424f7b4af9f980a8b554c/html5/thumbnails/25.jpg)
Flash messages
![Page 26: Weavora's guide to web app usability](https://reader034.vdocuments.us/reader034/viewer/2022051609/547424f7b4af9f980a8b554c/html5/thumbnails/26.jpg)
Generic words
![Page 27: Weavora's guide to web app usability](https://reader034.vdocuments.us/reader034/viewer/2022051609/547424f7b4af9f980a8b554c/html5/thumbnails/27.jpg)
Error pages
![Page 28: Weavora's guide to web app usability](https://reader034.vdocuments.us/reader034/viewer/2022051609/547424f7b4af9f980a8b554c/html5/thumbnails/28.jpg)
Nice colors
![Page 29: Weavora's guide to web app usability](https://reader034.vdocuments.us/reader034/viewer/2022051609/547424f7b4af9f980a8b554c/html5/thumbnails/29.jpg)
Statistics
![Page 30: Weavora's guide to web app usability](https://reader034.vdocuments.us/reader034/viewer/2022051609/547424f7b4af9f980a8b554c/html5/thumbnails/30.jpg)
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%)}
![Page 31: Weavora's guide to web app usability](https://reader034.vdocuments.us/reader034/viewer/2022051609/547424f7b4af9f980a8b554c/html5/thumbnails/31.jpg)
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}
![Page 32: Weavora's guide to web app usability](https://reader034.vdocuments.us/reader034/viewer/2022051609/547424f7b4af9f980a8b554c/html5/thumbnails/32.jpg)
{end...}
![Page 33: Weavora's guide to web app usability](https://reader034.vdocuments.us/reader034/viewer/2022051609/547424f7b4af9f980a8b554c/html5/thumbnails/33.jpg)
“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