UX 101 for Developers

75a8896911bcccd56b61655be2328cad?s=47 Ross Belmont
September 19, 2012

UX 101 for Developers

The lead developer is the de-facto UX designer on teams with no dedicated UX practitioner. If that's you, here's how you can improve the next thing you ship.

75a8896911bcccd56b61655be2328cad?s=128

Ross Belmont

September 19, 2012
Tweet

Transcript

  1. User Experience 101 for Developers Ross Belmont Chief Experience Designer

    Appiphony, LLC @rossbelmont
  2. © 2012 Appiphony, LLC All rights reserved. What is User

    Experience?
  3. © 2012 Appiphony, LLC All rights reserved. What is User

    Experience? Let’s start with an analogy.
  4. © 2012 Appiphony, LLC All rights reserved. Product

  5. © 2012 Appiphony, LLC All rights reserved. User Interface

  6. © 2012 Appiphony, LLC All rights reserved. User Experience

  7. © 2012 Appiphony, LLC All rights reserved. User Experience Design:

    my definition User Experience Design is: •understanding what users need to accomplish •adjusting the interface so that they can get it done in the best possible way
  8. © 2012 Appiphony, LLC All rights reserved. User Experience Design:

    my definition User Experience Design is: •understanding what users need to accomplish •adjusting the interface so that they can get it done in the best possible way Feasible
  9. © 2012 Appiphony, LLC All rights reserved. User Experience Design:

    my definition User Experience Design is: •understanding what users need to accomplish •adjusting the interface so that they can get it done in the best possible way Feasible Desirable
  10. © 2012 Appiphony, LLC All rights reserved. User Experience Design:

    my definition User Experience Design is: •understanding what users need to accomplish •adjusting the interface so that they can get it done in the best possible way Feasible Desirable Profitable
  11. © 2012 Appiphony, LLC All rights reserved. User Experience Design:

    my definition User Experience Design is: •understanding what users need to accomplish •adjusting the interface so that they can get it done in the best possible way Feasible Desirable Profitable ˒
  12. © 2012 Appiphony, LLC All rights reserved. User Experience Design

    is NOT about… Overly fancy graphics (“jazz hands”) Coffee shop inspiration Sketching at Bean Around The World by freshbrewed on flickr.com Craig Villamor, Principal Design Architect at Salesforce.com
  13. © 2012 Appiphony, LLC All rights reserved. Why care about

    the User Experience?
  14. © 2012 Appiphony, LLC All rights reserved. Why care about

    the User Experience?
  15. © 2012 Appiphony, LLC All rights reserved. Why care about

    the User Experience?
  16. © 2012 Appiphony, LLC All rights reserved. Why care about

    the User Experience?
  17. © 2012 Appiphony, LLC All rights reserved.

  18. © 2012 Appiphony, LLC All rights reserved. Which Should I

    choose? by buttersponge on flickr.com Want to know how?
  19. © 2012 Appiphony, LLC All rights reserved. User Experience Design

    in Three Easy Steps 1 Research Learn what your users are trying to accomplish. 2 3 Ideation Work through different ideas that would meet those goals. Evaluation Test prototypes with users, and iterate when you find issues.
  20. © 2012 Appiphony, LLC All rights reserved. Research On a

    scale of 1-10, how painful was your last requirements gathering session? First, a question...
  21. © 2012 Appiphony, LLC All rights reserved. Research On a

    scale of 1-10, how painful was your last requirements gathering session? First, a question...
  22. © 2012 Appiphony, LLC All rights reserved. Think back to

    the last time you checked the weather. Why did you need to know? What did you do next? Research Activity: Story-based Interview post-interview by Bennett 4 Senate on flickr.com
  23. © 2012 Appiphony, LLC All rights reserved. Users don’t absorb

    everything in their path and can’t recall it. Research The problem with “just asking” Driving home one night by Fellowship of the Rich on flickr.com
  24. © 2012 Appiphony, LLC All rights reserved. Research Learning what

    users do
  25. © 2012 Appiphony, LLC All rights reserved. Research Learning what

    users do Ride shotgun with them. Riding shotgun by mmcnabb3 on flickr.com
  26. © 2012 Appiphony, LLC All rights reserved. Research Learning what

    users do Ride shotgun with them. Riding shotgun by mmcnabb3 on flickr.com Posted by Benjamin Voss on wordpress.com
  27. © 2012 Appiphony, LLC All rights reserved. Research Learning what

    users do Ride shotgun with them. Riding shotgun by mmcnabb3 on flickr.com Posted by Benjamin Voss on wordpress.com Worrying by Jaypeg on flickr.com
  28. © 2012 Appiphony, LLC All rights reserved. Research Learning what

    users do Ride shotgun with them. Riding shotgun by mmcnabb3 on flickr.com Notice the stickies on the monitor. Posted by Benjamin Voss on wordpress.com Worrying by Jaypeg on flickr.com
  29. © 2012 Appiphony, LLC All rights reserved. Research Learning what

    users do Ride shotgun with them. Riding shotgun by mmcnabb3 on flickr.com Notice the stickies on the monitor. Posted by Benjamin Voss on wordpress.com Worrying by Jaypeg on flickr.com
  30. © 2012 Appiphony, LLC All rights reserved. Research Learning what

    users do Ride shotgun with them. Riding shotgun by mmcnabb3 on flickr.com Notice the stickies on the monitor. Posted by Benjamin Voss on wordpress.com Worrying by Jaypeg on flickr.com
  31. © 2012 Appiphony, LLC All rights reserved. Research Learning what

    users do Ride shotgun with them. Riding shotgun by mmcnabb3 on flickr.com Notice the stickies on the monitor. Posted by Benjamin Voss on wordpress.com Worrying by Jaypeg on flickr.com
  32. © 2012 Appiphony, LLC All rights reserved. Research Learning what

    users do Ride shotgun with them. Riding shotgun by mmcnabb3 on flickr.com Notice the stickies on the monitor. Posted by Benjamin Voss on wordpress.com Worrying by Jaypeg on flickr.com
  33. © 2012 Appiphony, LLC All rights reserved. Research Affinity Diagrams

    and Mental Models affinity diagram by Sean Munson on flickr.com Affinity Diagram Related notes grouped together Mental Model Behaviors on top, with their supporting Features below MM005: Figure 1.2 by Rosenfeld Media on flickr.com
  34. © 2012 Appiphony, LLC All rights reserved. Research Real Understanding

  35. © 2012 Appiphony, LLC All rights reserved. User Experience Design

    in Three Easy Steps 1 Research Learn what your users are trying to accomplish. 2 3 Ideation Work through different ideas that would meet those goals. Evaluation Test prototypes with users, and iterate when you find issues.
  36. © 2012 Appiphony, LLC All rights reserved. Ideation Requirements are

    an Input
  37. © 2012 Appiphony, LLC All rights reserved. Ideation Requirements are

    an Input
  38. © 2012 Appiphony, LLC All rights reserved. Ideation Requirements are

    an Input Requirements-Driven Software Development Must Die by Fred Beecher
  39. © 2012 Appiphony, LLC All rights reserved. Ideation Requirements are

    an Input Requirements-Driven Software Development Must Die by Fred Beecher Beta
  40. © 2012 Appiphony, LLC All rights reserved. Ideation Generating design

    concepts Run Tabular Report Export to Excel Manipulate data by hand Send to manager
  41. © 2012 Appiphony, LLC All rights reserved. Ideation Generating design

    concepts Run Tabular Report Export to Excel Manipulate data by hand Send to manager Run Joined Report
  42. © 2012 Appiphony, LLC All rights reserved. Ideation Generating design

    concepts Run Tabular Report Export to Excel Manipulate data by hand Send to manager Run Joined Report
  43. © 2012 Appiphony, LLC All rights reserved. Ideation Generating design

    concepts Run Tabular Report Export to Excel Manipulate data by hand Send to manager Run Joined Report Send to manager
  44. © 2012 Appiphony, LLC All rights reserved. Ideation Generating design

    concepts Run Tabular Report Export to Excel Manipulate data by hand Send to manager Run Joined Report Send to manager
  45. © 2012 Appiphony, LLC All rights reserved. Ideation Generating design

    concepts Run Tabular Report Export to Excel Manipulate data by hand Send to manager Run Joined Report Send to manager Riding shotgun by mmcnabb3 on flickr.com
  46. © 2012 Appiphony, LLC All rights reserved. • Standard layouts

    and Visualforce tags • Twitter Bootstrap • ZURB Foundation • UI elements described in Design Pattern Libraries Ideation Using prefab design solutions
  47. © 2012 Appiphony, LLC All rights reserved. • Standard layouts

    and Visualforce tags • Twitter Bootstrap • ZURB Foundation • UI elements described in Design Pattern Libraries Ideation Using prefab design solutions
  48. © 2012 Appiphony, LLC All rights reserved. Ideation Generating design

    concepts Sketch multiple possibilities on paper before coding.
  49. © 2012 Appiphony, LLC All rights reserved. • Think you

    can’t draw? Start with templates and simple shapes. • This is not art. You’re not expressing your feelings. • Sketches don’t need to be beautiful. • Stick to four colors or less: black, red, blue and (eventually) grey. Ideation A few words on sketching
  50. © 2012 Appiphony, LLC All rights reserved. Ideation Interactive Sketching

    Notation Use Interactive Sketching Notation to work out the user’s flow—all the way to their end goal.
  51. © 2012 Appiphony, LLC All rights reserved. Ideation After sketching,

    build a prototype
  52. © 2012 Appiphony, LLC All rights reserved. Ideation After sketching,

    build a prototype
  53. © 2012 Appiphony, LLC All rights reserved. Ideation After sketching,

    build a prototype
  54. © 2012 Appiphony, LLC All rights reserved. Ideation After sketching,

    build a prototype Print each screen to visualize the flows more easily.
  55. © 2012 Appiphony, LLC All rights reserved. Ideation After sketching,

    build a prototype Print each screen to visualize the flows more easily. Posted by Coleen Baik on Twitter's blog
  56. © 2012 Appiphony, LLC All rights reserved. User Experience Design

    in Three Easy Steps 1 Research Learn what your users are trying to accomplish. 2 3 Ideation Work through different ideas that would meet those goals. Evaluation Test prototypes with users, and iterate when you find issues.
  57. © 2012 Appiphony, LLC All rights reserved. Evaluation On a

    scale of 1-10, how painful was your last User Acceptance Testing session? First, a question...
  58. © 2012 Appiphony, LLC All rights reserved. The concept of

    UAT is broken Evaluation
  59. © 2012 Appiphony, LLC All rights reserved. The concept of

    UAT is broken Requirements-Driven Software Development Must Die by Fred Beecher Evaluation
  60. © 2012 Appiphony, LLC All rights reserved. The concept of

    UAT is broken Requirements-Driven Software Development Must Die by Fred Beecher Beta Evaluation
  61. © 2012 Appiphony, LLC All rights reserved. • Show prototypes

    to stakeholders • Step through the flow you’ve planned and show how the user will meet their goals • Prepare for change requests, though most will be cosmetic • If changes are non-trivial, ask how it ties back to the user’s goal • Once you build up trust and goodwill, try walking through your sketch Getting feedback along the way Evaluation Posted by Coleen Baik on Twitter's blog
  62. © 2012 Appiphony, LLC All rights reserved. • Introduce the

    prototype to the user. • Ask them to click through and try to accomplish their goal. • Don’t be a “talking manual.” • Tell them you’re testing the software, not them. • Ask them to “think out loud.” • Take notes on what happens. • Adjust the UI where necessary. Usability Testing Evaluation Posted by Coleen Baik on Twitter's blog Usability Test by l-i-n-k on flickr.com
  63. © 2012 Appiphony, LLC All rights reserved. User Experience Design

    in Three Easy Steps 1 Research Learn what your users are trying to accomplish. 2 3 Ideation Work through different ideas that would meet those goals. Evaluation Test prototypes with users, and iterate when you find issues.
  64. © 2012 Appiphony, LLC All rights reserved. A quick story

    about checking the weather
  65. © 2012 Appiphony, LLC All rights reserved. A quick story

    about checking the weather
  66. © 2012 Appiphony, LLC All rights reserved. A quick story

    about checking the weather
  67. © 2012 Appiphony, LLC All rights reserved. A quick story

    about checking the weather
  68. © 2012 Appiphony, LLC All rights reserved. A quick story

    about checking the weather
  69. © 2012 Appiphony, LLC All rights reserved. A quick story

    about checking the weather
  70. © 2012 Appiphony, LLC All rights reserved. A quick story

    about checking the weather
  71. © 2012 Appiphony, LLC All rights reserved. A quick story

    about checking the weather
  72. © 2012 Appiphony, LLC All rights reserved. A quick story

    about checking the weather
  73. © 2012 Appiphony, LLC All rights reserved. A quick story

    about checking the weather
  74. © 2012 Appiphony, LLC All rights reserved. User Experience Design

    in Three Easy Steps 1 Research Learn what your users are trying to accomplish. 2 3 Ideation Work through different ideas that would meet those goals. Evaluation Test prototypes with users, and iterate when you find issues.
  75. © 2012 Appiphony, LLC All rights reserved. Thanks! Find me

    @rossbelmont and in the Dreamforce app.