ux for developers

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

Upload: mike-pearce

Post on 28-Jan-2015

119 views

Category:

Technology


3 download

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.

TRANSCRIPT

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