0
Top ways developers
mess up on User Experience
(and how to avoid them)
@ HEAVYBIT • AUGUST 1, 2013
SF Rails +
6
LUXR.CO AUGUST 2013
@katerutter
@luxrco
Kate Rutter
Co-Founder
www.luxr.co
TWEET!
LUXR.CO AUGUST 2013
Luxr makes tools to help startups
deliver products that people want,
need & love to buy.
LUXR.CO AUGUST 2013
LUXR.CO AUGUST 2013
“But the code validated!”
“The design was brilliant.
It just never launched.”
“We made an amazing thin...
LUXR.CO AUGUST 2013
“But the code validated!”
“The design was brilliant.
It just never launched.”
“We made an amazing thin...
LUXR.CO AUGUST 2013
“But the code validated!”
“The design was brilliant.
It just never launched.”
“We made an amazing thin...
LUXR.CO AUGUST 2013
what goes on
the sub nav?
those pesky questions
single long page or
many short pages?
(scroll vs. clic...
LUXR.CO AUGUST 2013
what goes on
the sub nav?
those pesky questions
single long page or
many short pages?
(scroll vs. clic...
LUXR.CO AUGUST 2013
what goes on
the sub nav?
those pesky questions
single long page or
many short pages?
(scroll vs. clic...
LUXR.CO AUGUST 2013
what goes on
the sub nav?
those pesky questions
single long page or
many short pages?
(scroll vs. clic...
LUXR.CO AUGUST 2013
which shoes?
LUXR.CO AUGUST 2013
which shoes?
LUXR.CO AUGUST 2013
6 things
3 things
LUXR.CO AUGUST 2013
2 things
UX > UI
#1
Envision
+
Execute
#2
LUXR.CO AUGUST 2013
UX != UI
LUXR.CO AUGUST 2013
Product
LUXR.CO AUGUST 2013
UI
LUXR.CO AUGUST 2013
UX = mmmmmm
LUXR.CO AUGUST 2013
UX = mmmmmm
LUXR.CO AUGUST 2013
UX =a mindset
focused on delivering value to people
inspires the right kinds of ideas
defines “good”
gu...
LUXR.CO AUGUST 2013
UX Stack
Uses
Mary can...
Features
Users
Sketches,
prototypes,
wireframes,
pixels
Biz vision & purpose...
LUXR.CO AUGUST 2013
UX = a clear story
With _________, _______ can
_________ and ___________,
product name
use #1 use #2{
...
LUXR.CO AUGUST 2013
UX = a clear story
Meet Erika, a socially engaged college student.
Erika needs to feel closely connect...
LUXR.CO AUGUST 2013
UX = a clear story
Meet Joe, a new startup entrepreneur.
Joe needs to feel confident that his product
d...
LUXR.CO AUGUST 2013
The Luxr story
LUXR.CO AUGUST 2013
Hello, Bento!
LUXR.CO AUGUST 2013
Hello, Bento!
LUXR.CO AUGUST 2013
Hello, Bento!
LUXR.CO AUGUST 2013
Hello, Bento!
LUXR.CO AUGUST 2013
Hello, Bento!
LUXR.CO AUGUST 2013
Hello, Bento!
LUXR.CO AUGUST 2013
what went wrong?
LUXR.CO AUGUST 2013
what went wrong?
no clear cue
to get online
too much text
nobody read
hard to open
the box, grrrr
coul...
LUXR.CO AUGUST 2013
the Luxr story
+ 3 people
x 20 days
= PRODUCT
LUXR.CO AUGUST 2013
no clear cue
to get online
too much text
nobody read
hard to open
the box, grrrr
couldn’t see
the draw...
LUXR.CO AUGUST 2013
}
LUXR.CO AUGUST 2013
}
LUXR.CO AUGUST 2013
}
LUXR.CO AUGUST 2013
}
LUXR.CO AUGUST 2013
Create the full story,
and use the entire
stack as reference.
#1
make the shift...
by doing this....
V...
LUXR.CO AUGUST 2013
Envision +
Execution
#2
LUXR.CO AUGUST 2013
Development is
an execution
function
#2
we think this...
so we do this...
Delegate the learning
LUXR.CO AUGUST 2013
Product
Owner
Dev
Dev
Dev
Dev
Dev
Dev
Dev}
Rest
of
the
World
LUXR.CO AUGUST 2013
UX&Design
Dev & Eng
•
blah blah
blah blah
blah blah
blah blah
PRODUCT
IDEAS
BALANCED TEAM
Biz/PM
LUXR.CO AUGUST 2013
Design
+ Development
+ Product Management
= 1 product team
LUXR.CO AUGUST 2013
Design
+ Development
+ Product Management
= 1 product team
mind
LUXR.CO AUGUST 2013
DESIGN
Empathizer-in-Chief
Design Mind
Understand the customer at an expert level.
Translate high-valu...
LUXR.CO AUGUST 2013
DEVELOPMENT
“Raise high the roof”
Development Mind
Envision the best possible solutions based on
avail...
LUXR.CO AUGUST 2013
PM & BUSINESS
Scales of Justice
Business Mind
Make fast, concrete decisions despite inadequate
evidenc...
LUXR.CO AUGUST 2013
UX&Design
Dev & EngBiz/PM
executing
& evaluating
70%
understanding
& envisioning20%
deciding
10%
SHARE...
LUXR.CO AUGUST 2013
Story
Lumatic
See the whole story as told at FailChat:
http://www.slideshare.net/ellendunne/failchat-u...
LUXR.CO AUGUST 2013
Dedicate 20% to
understanding needs &
exploring new &
emerging solutions.
#2
make the shift...
by doin...
LUXR.CO AUGUST 2013
This way of
working is hard.
LUXR.CO AUGUST 2013
1 true design process
1. Define the problem you need to solve.
2. Define the as evidence of success.
3. ...
LUXR.CO AUGUST 2013
“The (validated) code validated!”
“The design is getting brilliant.
We know because people use it
more...
LUXR.CO AUGUST 2013
Geek out & learn more }
LUXR.CO AUGUST 2013
go be awesome.
LUXR.CO AUGUST 2013
Luxr makes tools to help startups deliver products that people want, need & love to buy.
Luxr.co • 343...
Upcoming SlideShare
Loading in...5
×

Top 6 ways developers mess up on User Experience (and how to avoid them) [SF Rails Meetup, Aug 01 2013, San Francisco]

4,747

Published on

Oh those pesky UI problems! Sadly, only a few are easily answerable. This talk does that and then frames two important underlying beliefs that impact how developers and designers can get the most of of UX by teasing apart UX and UI (they are *so* not the same thing!) and by broadening the perspective on what makes great products (not just great code.)

Published in: Design, Technology

Transcript of "Top 6 ways developers mess up on User Experience (and how to avoid them) [SF Rails Meetup, Aug 01 2013, San Francisco]"

  1. 1. Top ways developers mess up on User Experience (and how to avoid them) @ HEAVYBIT • AUGUST 1, 2013 SF Rails + 6
  2. 2. LUXR.CO AUGUST 2013 @katerutter @luxrco Kate Rutter Co-Founder www.luxr.co TWEET!
  3. 3. LUXR.CO AUGUST 2013 Luxr makes tools to help startups deliver products that people want, need & love to buy.
  4. 4. LUXR.CO AUGUST 2013
  5. 5. LUXR.CO AUGUST 2013 “But the code validated!” “The design was brilliant. It just never launched.” “We made an amazing thing. But nobody wanted it.” Recognizing UX Failure
  6. 6. LUXR.CO AUGUST 2013 “But the code validated!” “The design was brilliant. It just never launched.” “We made an amazing thing. But nobody wanted it.” Recognizing UX Failure FAIL
  7. 7. LUXR.CO AUGUST 2013 “But the code validated!” “The design was brilliant. It just never launched.” “We made an amazing thing. But nobody wanted it.” Recognizing UX Failure waste
  8. 8. LUXR.CO AUGUST 2013 what goes on the sub nav? those pesky questions single long page or many short pages? (scroll vs. click) how do we use data to make decisions? what button color is best? how many calls to action? what’s the best color palette? how do we keep users engaged? how do we maintain consistent design? what’s the best navigation flow? how do we get people to sign up quickly?
  9. 9. LUXR.CO AUGUST 2013 what goes on the sub nav? those pesky questions single long page or many short pages? (scroll vs. click) how do we use data to make decisions? what button color is best? how many calls to action? what’s the best color palette? how do we keep users engaged? how do we maintain consistent design? what’s the best navigation flow? how do we get people to sign up quickly? how many calls to action? Answer: 1 primary per view
  10. 10. LUXR.CO AUGUST 2013 what goes on the sub nav? those pesky questions single long page or many short pages? (scroll vs. click) how do we use data to make decisions? what button color is best? how many calls to action? what’s the best color palette? how do we keep users engaged? how do we maintain consistent design? what’s the best navigation flow? how do we get people to sign up quickly? Answer: Define & commit to design patterns http://ui-patterns.com/ http://developer.yahoo.com/ypatterns/ how do we maintain consistent design?
  11. 11. LUXR.CO AUGUST 2013 what goes on the sub nav? those pesky questions single long page or many short pages? (scroll vs. click) how do we use data to make decisions? what button color is best? how many calls to action? what’s the best color palette? how do we keep users engaged? what’s the best navigation flow? how do we get people to sign up quickly? how do we maintain consistent design?
  12. 12. LUXR.CO AUGUST 2013 which shoes?
  13. 13. LUXR.CO AUGUST 2013 which shoes?
  14. 14. LUXR.CO AUGUST 2013 6 things 3 things
  15. 15. LUXR.CO AUGUST 2013 2 things UX > UI #1 Envision + Execute #2
  16. 16. LUXR.CO AUGUST 2013 UX != UI
  17. 17. LUXR.CO AUGUST 2013 Product
  18. 18. LUXR.CO AUGUST 2013 UI
  19. 19. LUXR.CO AUGUST 2013 UX = mmmmmm
  20. 20. LUXR.CO AUGUST 2013 UX = mmmmmm
  21. 21. LUXR.CO AUGUST 2013 UX =a mindset focused on delivering value to people inspires the right kinds of ideas defines “good” guides decisions
  22. 22. LUXR.CO AUGUST 2013 UX Stack Uses Mary can... Features Users Sketches, prototypes, wireframes, pixels Biz vision & purpose go here why what how Interactions Brand Voice User stories This Week Needs I need... I want... My goal is... UI goes here BUILD MEASURE LEARN
  23. 23. LUXR.CO AUGUST 2013 UX = a clear story With _________, _______ can _________ and ___________, product name use #1 use #2{ using these features: ________ and __________feature #2 feature #1 { in a way thatʼs __________, __________, and __________. attribute #1 attribute #2 attribute #3{ Meet ________, a ___________.name user type { uses features product, brand & voice users needs & goals { ______ needs to ________ _______________. Name need (or goal)
  24. 24. LUXR.CO AUGUST 2013 UX = a clear story Meet Erika, a socially engaged college student. Erika needs to feel closely connected with friends near and far, every day. using status updates on her “wall”, messages, comments and “likes” in a way thatʼs universal, clean, consistent, and fast. With Facebook, Erika can share her latest thoughts and see what her many friends are up to,
  25. 25. LUXR.CO AUGUST 2013 UX = a clear story Meet Joe, a new startup entrepreneur. Joe needs to feel confident that his product design decisions really serve his customers. using hands-on materials and online video coaching in a way thatʼs simple to complete, warm & engaging, and fun. With Luxr Learning, Joe can practice interviewing customers and validate his assumptions,
  26. 26. LUXR.CO AUGUST 2013 The Luxr story
  27. 27. LUXR.CO AUGUST 2013 Hello, Bento!
  28. 28. LUXR.CO AUGUST 2013 Hello, Bento!
  29. 29. LUXR.CO AUGUST 2013 Hello, Bento!
  30. 30. LUXR.CO AUGUST 2013 Hello, Bento!
  31. 31. LUXR.CO AUGUST 2013 Hello, Bento!
  32. 32. LUXR.CO AUGUST 2013 Hello, Bento!
  33. 33. LUXR.CO AUGUST 2013 what went wrong?
  34. 34. LUXR.CO AUGUST 2013 what went wrong? no clear cue to get online too much text nobody read hard to open the box, grrrr couldn’t see the drawing in the video video set looked boring too many pieces in the box couldn’t keep track of different guides no blank paper in box folded blank paper looked weird hard to set up video account tape kept falling out fixed band on journal was annoying belly band fell off impossible to open Yay box without a knife didn’t know how much time it would take to do stickynotes shouldn’t be wrapped supplies box not interesting quote was off-target casual design didn’t feel “real” velcro closure on band kept ripping off sticker on poster ripped paper where’s the candy? no easy way to post a photo to site too much text on login page confused by different brand on video site mobile app complete fail video instructions didn’t exactly match outcome mono audio on video was distracting wanted more related boxes clearer instructions on video step 5
  35. 35. LUXR.CO AUGUST 2013 the Luxr story + 3 people x 20 days = PRODUCT
  36. 36. LUXR.CO AUGUST 2013 no clear cue to get online too much text nobody read hard to open the box, grrrr couldn’t see the drawing in the video video set looked boring too many pieces in the box couldn’t keep track of different guides no blank paper in box folded blank paper looked weird hard to set up video account tape kept falling out fixed band on journal was annoying belly band fell off impossible to open Yay box without a knife didn’t know how much time it would take to do stickynotes shouldn’t be wrapped supplies box not interesting quote was off-target casual design didn’t feel “real” velcro closure on band kept ripping off sticker on poster ripped paper where’s the candy? no easy way to post a photo to site too much text on login page confused by different brand on video site mobile app complete fail video instructions didn’t exactly match oucome mono audio on video was distracting wanted more related boxes clearer instructions on video step 5 risk time MAKE release MEASURE BUILD LEARN MEASURE BUILD
  37. 37. LUXR.CO AUGUST 2013 }
  38. 38. LUXR.CO AUGUST 2013 }
  39. 39. LUXR.CO AUGUST 2013 }
  40. 40. LUXR.CO AUGUST 2013 }
  41. 41. LUXR.CO AUGUST 2013 Create the full story, and use the entire stack as reference. #1 make the shift... by doing this.... Validate the story with 2 interviews with real people, each month.
  42. 42. LUXR.CO AUGUST 2013 Envision + Execution #2
  43. 43. LUXR.CO AUGUST 2013 Development is an execution function #2 we think this... so we do this... Delegate the learning
  44. 44. LUXR.CO AUGUST 2013 Product Owner Dev Dev Dev Dev Dev Dev Dev} Rest of the World
  45. 45. LUXR.CO AUGUST 2013 UX&Design Dev & Eng • blah blah blah blah blah blah blah blah PRODUCT IDEAS BALANCED TEAM Biz/PM
  46. 46. LUXR.CO AUGUST 2013 Design + Development + Product Management = 1 product team
  47. 47. LUXR.CO AUGUST 2013 Design + Development + Product Management = 1 product team mind
  48. 48. LUXR.CO AUGUST 2013 DESIGN Empathizer-in-Chief Design Mind Understand the customer at an expert level. Translate high-value needs into product. Hone the craft. Key Responsibility Prioritize customer problems.
  49. 49. LUXR.CO AUGUST 2013 DEVELOPMENT “Raise high the roof” Development Mind Envision the best possible solutions based on available technology. Commit to the outcome. Key Responsibility Recommend technologies Measure outcomes over time. •
  50. 50. LUXR.CO AUGUST 2013 PM & BUSINESS Scales of Justice Business Mind Make fast, concrete decisions despite inadequate evidence and conflicting priorities. Identify the business value in customer needs. Key Responsibility Make the tough calls. Delegate decisions to the appropriate person.
  51. 51. LUXR.CO AUGUST 2013 UX&Design Dev & EngBiz/PM executing & evaluating 70% understanding & envisioning20% deciding 10% SHARED RESPONSIBILITY
  52. 52. LUXR.CO AUGUST 2013 Story Lumatic See the whole story as told at FailChat: http://www.slideshare.net/ellendunne/failchat-ux- comes-first-because-ux-is-everything-12883354 { }
  53. 53. LUXR.CO AUGUST 2013 Dedicate 20% to understanding needs & exploring new & emerging solutions. #2 make the shift... by doing this.... Connect tech to specific user needs; measure outcomes with data.
  54. 54. LUXR.CO AUGUST 2013 This way of working is hard.
  55. 55. LUXR.CO AUGUST 2013 1 true design process 1. Define the problem you need to solve. 2. Define the as evidence of success. 3. Sketch many ideas. 4. Collaboratively pick the best bet. 5. Prototype it in the simplest, fastest, cheapest way you can. 6. Test it with real people. 7. Iterate it and test it again. 8. Release as often as possible. repeat
  56. 56. LUXR.CO AUGUST 2013 “The (validated) code validated!” “The design is getting brilliant. We know because people use it more with each iteration.” “We made an amazing thing. Because our customers canʼt live without it.” Evidence you’ve made a shift
  57. 57. LUXR.CO AUGUST 2013 Geek out & learn more }
  58. 58. LUXR.CO AUGUST 2013 go be awesome.
  59. 59. LUXR.CO AUGUST 2013 Luxr makes tools to help startups deliver products that people want, need & love to buy. Luxr.co • 3435 Cesar Chavez, San Francisco, CA • 94110 The Juhl, 353 E. Bonneville Ave., Las Vegas, NV • 89101 info@luxr.co • http://luxr.co • twitter: @luxrco • www.facebook.com/LUXrInc Images + credits • Ed Lea: http://design.org/blog/difference-between-ux-and-ui-subtleties-explained-cereal • Balanced Team model via Janice Fraser & Tim McCoy: http://www.slideshare.net/luxrco/a-new-model-of-product- ownership-12867461 • Photos used: http://2.bp.blogspot.com/-OBby1esVyyI/UWORa6t0M-I/AAAAAAAATDA/fELr7Je801I/s640/enjoying+a+big+bowl+of +Honey+Bunches+of+Oats.jpg http://blogs.messiah.edu/expressed/files/2009/12/Adele_cereal.jpg http://clearliferesults.com/wp-content/uploads/2011/09/man-eating-bowl-of-cereal.jpg http://blog.bobsredmill.com//wp-content/uploads/2013/04/black-border1.jpg http://cdn.madamenoire.com/wp-content/uploads/2012/01/Romaneio.png http://i.stpost.com/asolo-fsn-95-gore-tex-hiking-boots-waterproof-for-men-in-cendre-dark-brown~p~72552_72~1500.3.jpg http://www.ipanemaflipflops.co.uk/media/catalog/product/cache/1/image/2000x1200/9df78eab33525d08d6e5fb8d27136e95/s/u/ surf_temas_navy_mens_ipanema_flipflop_1.jpg http://thefashionabledentist.com/wp-content/uploads/2012/03/Men%E2%80%99s-shoes-for-work-and-play.jpg http://boxofficebuz.com/content/movies/249/stills/2010_our_family_wedding_002.jpg http://us.123rf.com/400wm/400/400/paulschlemmer/paulschlemmer1205/paulschlemmer120500042/13845542-young-man-in- orange-jacket-walking-hiking-outdoors-with-backpack-in-green-european-forest.jpg http://www.freakingnews.com/pictures/62500/Tsunami-Coming-Towards-People-on-Beach--62678.jpg • Lean book series via OʼReilly: http://oreilly.com/ * Slides available on slideshare: slideshare.net/intelleto
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×