Slide 1

Slide 1 text

Crea ng Wonderful User Experience Web App

Slide 2

Slide 2 text

Hello! I’m Richard @richardshepherd

Slide 3

Slide 3 text

I’m frontend lead

Slide 4

Slide 4 text

I’m a contributor to

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

Why is great user experience important? ?

Slide 7

Slide 7 text

If you make chairs, you’ll want to understand how people sit. If you make user interfaces, then you should understand how people perceive and think.” Ryan Singer, 37 Signals “

Slide 8

Slide 8 text

Hacking the brain

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

Marty Sklar

Slide 12

Slide 12 text

Mickey’s Ten Commandments Of Disney Imagineering

Slide 13

Slide 13 text

#1 Know Your Audience Mickey’s Ten Commandments Of Disney Imagineering

Slide 14

Slide 14 text

#2 Wear Your Guest’s Shoes Mickey’s Ten Commandments Of Disney Imagineering

Slide 15

Slide 15 text

#1 Know your audience

Slide 16

Slide 16 text

Emo onal Memory #1 Know your audience

Slide 17

Slide 17 text

Humanise your applica on #2 Wear your guests shoes

Slide 18

Slide 18 text

http://getpocket.com/ #2 Wear your guests shoes

Slide 19

Slide 19 text

http://www.rdio.com/ #2 Wear your guests shoes

Slide 20

Slide 20 text

http://simplehoney.com/ #1 Know your audience

Slide 21

Slide 21 text

http://simplehoney.com/ #1 Know your audience

Slide 22

Slide 22 text

http://simplehoney.com/ #1 Know your audience

Slide 23

Slide 23 text

#3 Organise the Flow of People And Ideas Mickey’s Ten Commandments Of Disney Imagineering

Slide 24

Slide 24 text

Everything we do is a form of storytelling” Mark Rollins – Creative Director, Iconologic Creative Mornings “ #3 Organise the Flow of People and Ideas

Slide 25

Slide 25 text

What’s Your Story? ? #3 Organise the Flow of People and Ideas

Slide 26

Slide 26 text

#3 Organise the Flow of People and Ideas

Slide 27

Slide 27 text

#3 Organise the Flow of People and Ideas http://mailchimp.com/ http://wufoo.com/ #3 Organise the Flow of People and Ideas

Slide 28

Slide 28 text

#3 Organise the Flow of People and Ideas http://mailchimp.com/ http://www.surveymonkey.com/ #3 Organise the Flow of People and Ideas

Slide 29

Slide 29 text

http://aarronwalter.com/ #3 Organise the Flow of People and Ideas

Slide 30

Slide 30 text

#4 Create a ‘Wienie’ Mickey’s Ten Commandments Of Disney Imagineering

Slide 31

Slide 31 text

#5 Communicate with visual Literacy Mickey’s Ten Commandments Of Disney Imagineering

Slide 32

Slide 32 text

http://www.alistapart.com/… #5 Communicate with Visual Literacy

Slide 33

Slide 33 text

Don Norman #5 Communicate with Visual Literacy

Slide 34

Slide 34 text

Attractive things make people feel good, which in turn makes them think more creatively. How does that make something easier to use? Simple, by making it easier for people to find solutions to the problems they encounter.” Don Norman “ #5 Communicate with Visual Literacy

Slide 35

Slide 35 text

Depth vs. Breadth Processing #5 Communicate with Visual Literacy

Slide 36

Slide 36 text

Depth First “Where me keys? Where me phone?” #5 Communicate with Visual Literacy

Slide 37

Slide 37 text

#5 Communicate with Visual Literacy http://www.basecamp.com/…

Slide 38

Slide 38 text

#5 Communicate with Visual Literacy http://www.basecamp.com/…

Slide 39

Slide 39 text

Breadth First A hit of dopamine #5 Communicate with Visual Literacy

Slide 40

Slide 40 text

#5 Communicate with Visual Literacy http://plus.google.com/

Slide 41

Slide 41 text

#6 Avoid Overload Create Turn ons Mickey’s Ten Commandments Of Disney Imagineering

Slide 42

Slide 42 text

#7 Tell One Story at a Time Mickey’s Ten Commandments Of Disney Imagineering

Slide 43

Slide 43 text

http://www.lingscars.com/ #7 Tell One Story at the Time #7 Tell One Story at a Time http://www.lingscars.com/

Slide 44

Slide 44 text

The Paradox of Choice #7 Tell One Story at a Time

Slide 45

Slide 45 text

Barry Schwartz #7 Tell One Story at a Time

Slide 46

Slide 46 text

#7 Tell One Story at a Time http://www.flickr.com/

Slide 47

Slide 47 text

http://www.lingscars.com/ #7 Tell One Story at the Time #7 Tell One Story at a Time http://www.ebookers.com/

Slide 48

Slide 48 text

http://www.lingscars.com/ #7 Tell One Story at the Time #7 Tell One Story at a Time http://www.skyscanner.net/

Slide 49

Slide 49 text

Crea ng Turn Ons No. Not that kind. #6 Avoid Overload, Create Turn Ons

Slide 50

Slide 50 text

http://www.vouchercodes.co.uk #6 Avoid Overload, Create Turn Ons

Slide 51

Slide 51 text

http://www.kickstarter.com #6 Avoid Overload, Create Turn Ons

Slide 52

Slide 52 text

http://www.mailchimp.com #6 Avoid Overload, Create Turn Ons

Slide 53

Slide 53 text

#8 Avoid Contradic ons, Maintain Iden ty Mickey’s Ten Commandments Of Disney Imagineering

Slide 54

Slide 54 text

Beyond The Browser Maintaining your identity #8 Avoid Contradic ons, Maintain Iden ty

Slide 55

Slide 55 text

http://www.mrporter.com/ #8 Avoid Contradic ons, Maintain Iden ty

Slide 56

Slide 56 text

#8 Avoid Contradic ons, Maintain Iden ty

Slide 57

Slide 57 text

#8 Avoid Contradic ons, Maintain Iden ty

Slide 58

Slide 58 text

#9 For every ounce of treatment, provide a tonne of treat Mickey’s Ten Commandments Of Disney Imagineering

Slide 59

Slide 59 text

Give a li le #9 For every ounce of treatment, provide a tonne of treat

Slide 60

Slide 60 text

#9 For every ounce of treatment, provide a tonne of treat http://www.codecademy.com/

Slide 61

Slide 61 text

#9 For every ounce of treatment, provide a tonne of treat http://www.codecademy.com/

Slide 62

Slide 62 text

#10 Keep It up! Mickey’s Ten Commandments Of Disney Imagineering

Slide 63

Slide 63 text

Ask for feedback #10 Keep It Up!

Slide 64

Slide 64 text

User Experience and Business Experience #10 Keep It Up!

Slide 65

Slide 65 text

UX is not part of the process. It is the process. #10 Keep It Up!

Slide 66

Slide 66 text

The killer feature is making calls.” Steve Jobs – iPhone launch “ #10 Keep It Up!

Slide 67

Slide 67 text

Ques on Everything #10 Keep It Up!

Slide 68

Slide 68 text

Knowing when any technique is appropriate — and when it isn’t — marks a pragmatic, measured approach to designing for the web, and that’s a perspective I really treasure...” Ethan Marcotte “ #10 Keep It Up!

Slide 69

Slide 69 text

Why is great user experience important?

Slide 70

Slide 70 text

Aim for excellence Final thought...

Slide 71

Slide 71 text

OmooHQ.com/fowd Beta Pass... Exclusive

Slide 72

Slide 72 text

Thank You. Now, go be Awesome :) @richardshepherd Keep in touch!