123
UX FOR DEVELOPERS Mike Pearce PHP London January 11’ Sponsored by... We’re hiring!

UX For Developers

Embed Size (px)

DESCRIPTION

UX and usability is an important part of your website and your business. This presentation (although, out of context without a bit of audio!) helps you understand the key points of UX and Usability from a developers point of view.

Citation preview

Page 1: UX For Developers

UX FORDEVELOPERS

Mike PearcePHP London January 11’

Sponsored by...

We’re hiring!

Page 2: UX For Developers

Mike Pearce

Page 3: UX For Developers

http://social-network.com

/MikePearce

Page 4: UX For Developers
Page 5: UX For Developers

SCRUM

Page 6: UX For Developers

SCRUM

Page 7: UX For Developers

UX & USABILITY

Page 8: UX For Developers

Feeling stupid?Stupid MY WAY though, right?

http://www.flickr.com/photos/cennydd/3191424928/

Page 9: UX For Developers

UX USABILITY!==

Page 10: UX For Developers

Usabilityhttp://www.flickr.com/photos/squirmelia/1840201/

Page 11: UX For Developers

User Experiencehttp://www.flickr.com/photos/mr_t_in_dc/4324217998/

Page 12: UX For Developers

User Experiencehttp://www.flickr.com/photos/mr_t_in_dc/4324217998/

Engaging, right?

Page 13: UX For Developers

Wait!

Page 15: UX For Developers

http://www.flickr.com/photos/ideaconstructor/126678021/

This packaging stinks...

Page 16: UX For Developers

#web-site-ux {size: small !important

}

#web-site-ux usability {size: large !important

{

Page 17: UX For Developers

#web-site-ux {size: small !important

}

#web-site-ux usability {size: large !important

}

Page 18: UX For Developers

Great!

Page 19: UX For Developers

Butwhy do we

care?

Page 20: UX For Developers

BecauseIt’s a nice thing to do...

Page 23: UX For Developers

http://www.flickr.com/photos/_tar0_/5031998865/

MILK != SOY

Page 24: UX For Developers

NOT SOY!

http://www.flickr.com/photos/plutor/77256105/

Page 25: UX For Developers

http://www.flickr.com/photos/micahtaylor/4366221069/

don’t ruin someones day!So...

Page 26: UX For Developers

Seriously, wtf?

http://www.flickr.com/photos/squidthing/4476203463/

Page 27: UX For Developers

Becauseit makes your site better!

Page 28: UX For Developers

Becauseit makes you more money!

or your boss

^

Page 29: UX For Developers

Anyway

http://www.flickr.com/photos/fernando/141222763/

Page 30: UX For Developers

http://www.flickr.com/photos/kaibara/2601999508/

Don’t make me think!

Page 31: UX For Developers

Cognitiveload

http://www.flickr.com/photos/29487767@N02/2845044715/

Page 32: UX For Developers

Makingsense of

stimulus

Page 33: UX For Developers

Working out how to

do shit!

Page 34: UX For Developers

DEVELOPERS != USERS

http://www.flickr.com/photos/winterofdiscontent/3320379277/

Page 35: UX For Developers

VICTORY!

Page 36: UX For Developers

THINK

Page 37: UX For Developers

THINK

Page 38: UX For Developers

THINK

Page 39: UX For Developers

THINK

Page 40: UX For Developers

overloaded!

http://www.flickr.com/photos/andreasl/4558473029/

Page 41: UX For Developers
Page 42: UX For Developers
Page 43: UX For Developers
Page 44: UX For Developers

How manyCLICKS?

Page 45: UX For Developers

10?

Page 47: UX For Developers

two camps ... geddit?

http://www.flickr.com/photos/yogma/2498362154/

Page 50: UX For Developers

frictio

n

Page 51: UX For Developers

Don’t make me thinkI’m

stupid!http://www.flickr.com/photos/bionicteaching/2769665232/

Page 52: UX For Developers
Page 53: UX For Developers

Usersblamethemselves

Page 54: UX For Developers

Usersblamethemselves

it’s a bit sad really

Page 55: UX For Developers

*sob*

Page 56: UX For Developers

my conceptual model^

http://www.flickr.com/photos/lapolab/5140120870/

Page 58: UX For Developers
Page 59: UX For Developers
Page 60: UX For Developers
Page 61: UX For Developers

http://www.flickr.com/photos/rickharris/943223139

affordances

Page 62: UX For Developers

perceivedand actual

properties

Page 63: UX For Developers

perceivedand actual

propertiesof a thing

Page 67: UX For Developers

arrows

http://www.flickr.com/photos/yjv/2910922647/

Page 68: UX For Developers

search >

> search

Page 69: UX For Developers

search >

> search

Page 70: UX For Developers

search >

> search

Page 71: UX For Developers
Page 72: UX For Developers

causeand

effect

Page 75: UX For Developers
Page 76: UX For Developers
Page 77: UX For Developers

http://www.flickr.com/photos/theconfluence/2396660387/

feedback

Page 79: UX For Developers
Page 80: UX For Developers
Page 81: UX For Developers
Page 82: UX For Developers

Idiot, scan your card...

Page 83: UX For Developers

UXin

practice

$privacy--;http://www.flickr.com/photos/markhogan/5123954977/

Page 84: UX For Developers

It’s a bittough

Page 85: UX For Developers

But don’tgive up!

Page 86: UX For Developers

They’rewrong!

Page 87: UX For Developers

‘American needs you’ man

INTERNET

Page 88: UX For Developers

EARLYStart

Page 89: UX For Developers

Spy on yourcompetitors

Page 90: UX For Developers
Page 91: UX For Developers

Do you really need

that much content?

Page 92: UX For Developers
Page 93: UX For Developers

Usabilitytesting

http://www.flickr.com/photos/sidelong/246816211/

Page 94: UX For Developers

It’s really notpossiblefor us to do

Page 95: UX For Developers

It’s tooexpen$ive

Page 97: UX For Developers

(5(a) * 3.99) + (5(b) * 30)= 169.95 (a) Sandwiches(b) Testers

Page 98: UX For Developers

Locatingprofiledtesters takes

aaaages!

Page 102: UX For Developers

Buildingprototypes

is toocostly!

Page 103: UX For Developers

thendon’t!

Page 104: UX For Developers
Page 105: UX For Developers
Page 106: UX For Developers

5html

Page 107: UX For Developers

But I don’t know

howto run a test!

Page 108: UX For Developers

about?What is this page

Page 109: UX For Developers

and

Page 110: UX For Developers

do a taskShow me how you would

Page 111: UX For Developers

narrate

... then I click on the ‘search’ button and ... what the hell, a 404? What jackass built this?

http://www.flickr.com/photos/sugarpond/3016905349/

Page 112: UX For Developers

http://silverbackapp.com

Page 113: UX For Developers

Insummary

http://www.flickr.com/photos/llauren/4207737949/

Page 114: UX For Developers

Don’t make me

think!http://www.flickr.com/photos/kaibara/2601999508/

Page 115: UX For Developers

Don’t make me thinkI’m

stupid!http://www.flickr.com/photos/bionicteaching/2769665232/

Page 116: UX For Developers
Page 117: UX For Developers

feedback

http://www.flickr.com/photos/theconfluence/2396660387/

Page 119: UX For Developers

‘American needs you’ man

INTERNET

Page 120: UX For Developers

If you only read one

Page 121: UX For Developers

If you read two

Page 122: UX For Developers

If you don’t do books

Jakob Nielsen useit.com