33
Weavora’s Guide to Web App Usability by Mike

Weavora's guide to web app usability

  • Upload
    weavora

  • View
    758

  • Download
    0

Embed Size (px)

DESCRIPTION

Internal presentation that outlines some common practices to web app usability

Citation preview

Page 1: Weavora's guide to web app usability

Weavora’s Guide to Web App

Usabilityby Mike

Page 2: Weavora's guide to web app usability

Form validation

Page 3: Weavora's guide to web app usability

Realtime maskingthink twice!!!

Page 4: Weavora's guide to web app usability

Form grouping

Page 5: Weavora's guide to web app usability

Date format matters

be more human oriented!!!

Page 6: Weavora's guide to web app usability

Bad URLs

Page 7: Weavora's guide to web app usability

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

Alternatives

Page 9: Weavora's guide to web app usability

Date picker

Page 10: Weavora's guide to web app usability

Countries search

Page 11: Weavora's guide to web app usability

Data grid

Page 12: Weavora's guide to web app usability

Data grid

Page 13: Weavora's guide to web app usability

Inline editing

Page 14: Weavora's guide to web app usability

Inline editing

Page 15: Weavora's guide to web app usability

Inline editing

Page 16: Weavora's guide to web app usability

Inline edit UX

Page 17: Weavora's guide to web app usability

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

Prior data visualization

Page 19: Weavora's guide to web app usability

In-column filtering

Page 20: Weavora's guide to web app usability

Readability

Page 21: Weavora's guide to web app usability

Empty container

Your inbox is empty

Page 22: Weavora's guide to web app usability

Button states

Page 23: Weavora's guide to web app usability

Interactive design

Page 24: Weavora's guide to web app usability

Collapsable content

Page 25: Weavora's guide to web app usability

Flash messages

Page 26: Weavora's guide to web app usability

Generic words

Page 27: Weavora's guide to web app usability

Error pages

Page 28: Weavora's guide to web app usability

Nice colors

Page 29: Weavora's guide to web app usability

Statistics

Page 30: Weavora's guide to web app usability

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

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

{end...}

Page 33: Weavora's guide to web app usability

“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