ajax usabilitykelly norton / dec 4 2007

VOICESTHATMATTERC O N F E R E N C E

GOOGLE WEB TOOLKIT

agendausability: an overview.

designing apps with humans in mind.

7 concrete suggestions.

questions.

usability… a measure of how well an interface supports use.

… and the stuff you do to make those interfaces more effective.

usabilitygoal is great product / happy users.

which is unachievable without good usability.

great product / happy users= maximizing user experience.

building usable apps.don’t segregate user experience and engineering.

do task analysis up front.

design, implement, test, design, implement, test, design …

ux vs. engineeringuser experiencegoal: producing good usable applications.

engineeringgoal: producing good usable applications.

task analysis.what does a user need to do?

what does the user need to carry this out?

what are the steps involved?

����

�������

�����

���

�������

��������

need dictates design.

����

�������

�����

���

�������

��������

not system elegance.

design

implementtest

#1give users feedback

an example.

#2reduce the chanceof errors.

The world has ended.

oh noes! quick, which one?

where might problems occur?

double send?

iphone: my finger is this big.

ok. but what if i mess up?

ok. but what if i mess up?

we just undo it.

ok. but what if i mess up?

try again.

ok. but what if i mess up?

humiliation?unemployment?(no undo)

useful places for many things.

#3let the user be in control.

start fast.“Every web usability study I have conducted since 1994 has shown the same thing: Users beg us to speed up page downloads.” – Jakob Nielsen

human attention.0.1 seconds - perceived as instantaneous.

1 second - maintains the feeling that a single task is being carried out.

10 seconds - limit for keeping user’s attention.

what’s in a page load?1 2 3

1 download resources.

2 run javascript startup code.

3 let the renderer run.

* embarrasingly simplified.

what’s in a page load?1 2 3

goal: <= 1 second

start fast.

1 reduce # http requests.

2 cache aggressively.

3 construct ui incrementally.

4 see talk: deployment best practices.

start fast.

250ms

70 ms 500 ms

the bad.

the good.

let the browser breath.

you have 0.1 sec to update.

otherwise, the browser can’t respond instantly.

element.onclick = function() { // must be done in 0.1 sec.};

do it the web way.users do …

hit the back and forward buttons.

copy url’s and paste them into emails.

right click on pages to get a context menu.

#4use visualseffectively.

can i click?

Categories Categories

can i click?

#cats { cursor: pointer;}

Categories Categories

drop down?

Categories Categories

drop down?

simple common affordances can go a long way.

Categories Categories

animationsome good uses:

changes not made by the user.

reinforcing direct manipulation (drag & drop).

showing progress.

code red level attention grabbing.

animationa bad use:

impressing friends or family.

making your dog dizzy.

animation does give the impression of quality, but look for opportunities to use it effectively.

#5consider folks using assitive technology.

general tipsuse native widgets.

familiarize yourself with WAI-ARIA.http://www.w3.org/WAI/intro/aria

focus & keyboard support is essential.

accessibility through validation alone is not a good idea.

try using a screen reader.

#6update state appropriately.

have a good model.

have a good model.use observer and delegate patterns to propagate changes.

use controllers for you app specific logic.

see Rajeev’s Using UI talk.

#7test now and later.

user tests.professionals often pay for themselves when you do the math.

user tests.but with or without professional testing, use is very, very telling.

design

implementtest

questions?or later, knorton@google.com

VOICESTHATMATTERC O N F E R E N C E

GOOGLE WEB TOOLKIT