+ All Categories
Home > Documents > usabilityptgmedia.pearsoncmg.com/.../Usability_Norton.pdf · usability. great product / happy users...

usabilityptgmedia.pearsoncmg.com/.../Usability_Norton.pdf · usability. great product / happy users...

Date post: 20-Aug-2020
Category:
Upload: others
View: 2 times
Download: 0 times
Share this document with a friend
51
ajax usability kelly norton / dec 4 2007 VOICES THAT MATTER CONFERENCE GOOGLE WEB TOOLKIT
Transcript
Page 1: usabilityptgmedia.pearsoncmg.com/.../Usability_Norton.pdf · usability. great product / happy users = maximizing user experience. building usable apps. don’t segregate user experience

ajax usabilitykelly norton / dec 4 2007

VOICESTHATMATTERC O N F E R E N C E

GOOGLE WEB TOOLKIT

Page 2: usabilityptgmedia.pearsoncmg.com/.../Usability_Norton.pdf · usability. great product / happy users = maximizing user experience. building usable apps. don’t segregate user experience

agendausability: an overview.

designing apps with humans in mind.

7 concrete suggestions.

questions.

Page 3: usabilityptgmedia.pearsoncmg.com/.../Usability_Norton.pdf · usability. great product / happy users = maximizing user experience. building usable apps. don’t segregate user experience

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

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

Page 4: usabilityptgmedia.pearsoncmg.com/.../Usability_Norton.pdf · usability. great product / happy users = maximizing user experience. building usable apps. don’t segregate user experience

usabilitygoal is great product / happy users.

which is unachievable without good usability.

great product / happy users= maximizing user experience.

Page 5: usabilityptgmedia.pearsoncmg.com/.../Usability_Norton.pdf · usability. great product / happy users = maximizing user experience. building usable apps. don’t segregate user experience

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

do task analysis up front.

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

Page 6: usabilityptgmedia.pearsoncmg.com/.../Usability_Norton.pdf · usability. great product / happy users = maximizing user experience. building usable apps. don’t segregate user experience

ux vs. engineeringuser experiencegoal: producing good usable applications.

engineeringgoal: producing good usable applications.

Page 7: usabilityptgmedia.pearsoncmg.com/.../Usability_Norton.pdf · usability. great product / happy users = maximizing user experience. building usable apps. don’t segregate user experience

task analysis.what does a user need to do?

what does the user need to carry this out?

what are the steps involved?

Page 8: usabilityptgmedia.pearsoncmg.com/.../Usability_Norton.pdf · usability. great product / happy users = maximizing user experience. building usable apps. don’t segregate user experience

����

�������

�����

���

�������

��������

need dictates design.

Page 9: usabilityptgmedia.pearsoncmg.com/.../Usability_Norton.pdf · usability. great product / happy users = maximizing user experience. building usable apps. don’t segregate user experience

����

�������

�����

���

�������

��������

not system elegance.

Page 10: usabilityptgmedia.pearsoncmg.com/.../Usability_Norton.pdf · usability. great product / happy users = maximizing user experience. building usable apps. don’t segregate user experience

design

implementtest

Page 11: usabilityptgmedia.pearsoncmg.com/.../Usability_Norton.pdf · usability. great product / happy users = maximizing user experience. building usable apps. don’t segregate user experience

#1give users feedback

Page 12: usabilityptgmedia.pearsoncmg.com/.../Usability_Norton.pdf · usability. great product / happy users = maximizing user experience. building usable apps. don’t segregate user experience

an example.

Page 13: usabilityptgmedia.pearsoncmg.com/.../Usability_Norton.pdf · usability. great product / happy users = maximizing user experience. building usable apps. don’t segregate user experience
Page 14: usabilityptgmedia.pearsoncmg.com/.../Usability_Norton.pdf · usability. great product / happy users = maximizing user experience. building usable apps. don’t segregate user experience
Page 15: usabilityptgmedia.pearsoncmg.com/.../Usability_Norton.pdf · usability. great product / happy users = maximizing user experience. building usable apps. don’t segregate user experience
Page 16: usabilityptgmedia.pearsoncmg.com/.../Usability_Norton.pdf · usability. great product / happy users = maximizing user experience. building usable apps. don’t segregate user experience

#2reduce the chanceof errors.

Page 17: usabilityptgmedia.pearsoncmg.com/.../Usability_Norton.pdf · usability. great product / happy users = maximizing user experience. building usable apps. don’t segregate user experience

The world has ended.

oh noes! quick, which one?

Page 18: usabilityptgmedia.pearsoncmg.com/.../Usability_Norton.pdf · usability. great product / happy users = maximizing user experience. building usable apps. don’t segregate user experience

where might problems occur?

Page 19: usabilityptgmedia.pearsoncmg.com/.../Usability_Norton.pdf · usability. great product / happy users = maximizing user experience. building usable apps. don’t segregate user experience

double send?

Page 20: usabilityptgmedia.pearsoncmg.com/.../Usability_Norton.pdf · usability. great product / happy users = maximizing user experience. building usable apps. don’t segregate user experience

iphone: my finger is this big.

Page 21: usabilityptgmedia.pearsoncmg.com/.../Usability_Norton.pdf · usability. great product / happy users = maximizing user experience. building usable apps. don’t segregate user experience

ok. but what if i mess up?

Page 22: usabilityptgmedia.pearsoncmg.com/.../Usability_Norton.pdf · usability. great product / happy users = maximizing user experience. building usable apps. don’t segregate user experience

ok. but what if i mess up?

we just undo it.

Page 23: usabilityptgmedia.pearsoncmg.com/.../Usability_Norton.pdf · usability. great product / happy users = maximizing user experience. building usable apps. don’t segregate user experience

ok. but what if i mess up?

try again.

Page 24: usabilityptgmedia.pearsoncmg.com/.../Usability_Norton.pdf · usability. great product / happy users = maximizing user experience. building usable apps. don’t segregate user experience

ok. but what if i mess up?

humiliation?unemployment?(no undo)

Page 25: usabilityptgmedia.pearsoncmg.com/.../Usability_Norton.pdf · usability. great product / happy users = maximizing user experience. building usable apps. don’t segregate user experience

useful places for many things.

Page 26: usabilityptgmedia.pearsoncmg.com/.../Usability_Norton.pdf · usability. great product / happy users = maximizing user experience. building usable apps. don’t segregate user experience

#3let the user be in control.

Page 27: usabilityptgmedia.pearsoncmg.com/.../Usability_Norton.pdf · usability. great product / happy users = maximizing user experience. building usable apps. don’t segregate user experience

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

Page 28: usabilityptgmedia.pearsoncmg.com/.../Usability_Norton.pdf · usability. great product / happy users = maximizing user experience. building usable apps. don’t segregate user experience

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.

Page 29: usabilityptgmedia.pearsoncmg.com/.../Usability_Norton.pdf · usability. great product / happy users = maximizing user experience. building usable apps. don’t segregate user experience

what’s in a page load?1 2 3

1 download resources.

2 run javascript startup code.

3 let the renderer run.

* embarrasingly simplified.

Page 30: usabilityptgmedia.pearsoncmg.com/.../Usability_Norton.pdf · usability. great product / happy users = maximizing user experience. building usable apps. don’t segregate user experience

what’s in a page load?1 2 3

goal: <= 1 second

Page 31: usabilityptgmedia.pearsoncmg.com/.../Usability_Norton.pdf · usability. great product / happy users = maximizing user experience. building usable apps. don’t segregate user experience

start fast.

1 reduce # http requests.

2 cache aggressively.

3 construct ui incrementally.

4 see talk: deployment best practices.

Page 32: usabilityptgmedia.pearsoncmg.com/.../Usability_Norton.pdf · usability. great product / happy users = maximizing user experience. building usable apps. don’t segregate user experience

start fast.

250ms

70 ms 500 ms

the bad.

the good.

Page 33: usabilityptgmedia.pearsoncmg.com/.../Usability_Norton.pdf · usability. great product / happy users = maximizing user experience. building usable apps. don’t segregate user experience

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

Page 34: usabilityptgmedia.pearsoncmg.com/.../Usability_Norton.pdf · usability. great product / happy users = maximizing user experience. building usable apps. don’t segregate user experience

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.

Page 35: usabilityptgmedia.pearsoncmg.com/.../Usability_Norton.pdf · usability. great product / happy users = maximizing user experience. building usable apps. don’t segregate user experience

#4use visualseffectively.

Page 36: usabilityptgmedia.pearsoncmg.com/.../Usability_Norton.pdf · usability. great product / happy users = maximizing user experience. building usable apps. don’t segregate user experience

can i click?

Categories Categories

Page 37: usabilityptgmedia.pearsoncmg.com/.../Usability_Norton.pdf · usability. great product / happy users = maximizing user experience. building usable apps. don’t segregate user experience

can i click?

#cats { cursor: pointer;}

Categories Categories

Page 38: usabilityptgmedia.pearsoncmg.com/.../Usability_Norton.pdf · usability. great product / happy users = maximizing user experience. building usable apps. don’t segregate user experience

drop down?

Categories Categories

Page 39: usabilityptgmedia.pearsoncmg.com/.../Usability_Norton.pdf · usability. great product / happy users = maximizing user experience. building usable apps. don’t segregate user experience

drop down?

simple common affordances can go a long way.

Categories Categories

Page 40: usabilityptgmedia.pearsoncmg.com/.../Usability_Norton.pdf · usability. great product / happy users = maximizing user experience. building usable apps. don’t segregate user experience

animationsome good uses:

changes not made by the user.

reinforcing direct manipulation (drag & drop).

showing progress.

code red level attention grabbing.

Page 41: usabilityptgmedia.pearsoncmg.com/.../Usability_Norton.pdf · usability. great product / happy users = maximizing user experience. building usable apps. don’t segregate user experience

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.

Page 42: usabilityptgmedia.pearsoncmg.com/.../Usability_Norton.pdf · usability. great product / happy users = maximizing user experience. building usable apps. don’t segregate user experience

#5consider folks using assitive technology.

Page 43: usabilityptgmedia.pearsoncmg.com/.../Usability_Norton.pdf · usability. great product / happy users = maximizing user experience. building usable apps. don’t segregate user experience

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.

Page 44: usabilityptgmedia.pearsoncmg.com/.../Usability_Norton.pdf · usability. great product / happy users = maximizing user experience. building usable apps. don’t segregate user experience

#6update state appropriately.

Page 45: usabilityptgmedia.pearsoncmg.com/.../Usability_Norton.pdf · usability. great product / happy users = maximizing user experience. building usable apps. don’t segregate user experience

have a good model.

Page 46: usabilityptgmedia.pearsoncmg.com/.../Usability_Norton.pdf · usability. great product / happy users = maximizing user experience. building usable apps. don’t segregate user experience

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.

Page 47: usabilityptgmedia.pearsoncmg.com/.../Usability_Norton.pdf · usability. great product / happy users = maximizing user experience. building usable apps. don’t segregate user experience

#7test now and later.

Page 48: usabilityptgmedia.pearsoncmg.com/.../Usability_Norton.pdf · usability. great product / happy users = maximizing user experience. building usable apps. don’t segregate user experience

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

Page 49: usabilityptgmedia.pearsoncmg.com/.../Usability_Norton.pdf · usability. great product / happy users = maximizing user experience. building usable apps. don’t segregate user experience

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

Page 50: usabilityptgmedia.pearsoncmg.com/.../Usability_Norton.pdf · usability. great product / happy users = maximizing user experience. building usable apps. don’t segregate user experience

design

implementtest

Page 51: usabilityptgmedia.pearsoncmg.com/.../Usability_Norton.pdf · usability. great product / happy users = maximizing user experience. building usable apps. don’t segregate user experience

questions?or later, [email protected]

VOICESTHATMATTERC O N F E R E N C E

GOOGLE WEB TOOLKIT


Recommended