Upgrade to Pro — share decks privately, control downloads, hide ads and more …

UX 101 for Developers

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.

Ross Belmont

September 19, 2012
Tweet

More Decks by Ross Belmont

Other Decks in Design

Transcript

  1. © 2012 Appiphony, LLC All rights reserved. What is User

    Experience? Let’s start with an analogy.
  2. © 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
  3. © 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
  4. © 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
  5. © 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
  6. © 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 ˒
  7. © 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
  8. © 2012 Appiphony, LLC All rights reserved. Which Should I

    choose? by buttersponge on flickr.com Want to know how?
  9. © 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.
  10. © 2012 Appiphony, LLC All rights reserved. Research On a

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

    scale of 1-10, how painful was your last requirements gathering session? First, a question...
  12. © 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
  13. © 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
  14. © 2012 Appiphony, LLC All rights reserved. Research Learning what

    users do Ride shotgun with them. Riding shotgun by mmcnabb3 on flickr.com
  15. © 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
  16. © 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
  17. © 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
  18. © 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
  19. © 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
  20. © 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
  21. © 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
  22. © 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
  23. © 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.
  24. © 2012 Appiphony, LLC All rights reserved. Ideation Requirements are

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

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

    concepts Run Tabular Report Export to Excel Manipulate data by hand Send to manager
  27. © 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
  28. © 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
  29. © 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
  30. © 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
  31. © 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
  32. © 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
  33. © 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
  34. © 2012 Appiphony, LLC All rights reserved. Ideation Generating design

    concepts Sketch multiple possibilities on paper before coding.
  35. © 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
  36. © 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.
  37. © 2012 Appiphony, LLC All rights reserved. Ideation After sketching,

    build a prototype Print each screen to visualize the flows more easily.
  38. © 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
  39. © 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.
  40. © 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...
  41. © 2012 Appiphony, LLC All rights reserved. The concept of

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

    UAT is broken Requirements-Driven Software Development Must Die by Fred Beecher Beta Evaluation
  43. © 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
  44. © 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
  45. © 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.
  46. © 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.
  47. © 2012 Appiphony, LLC All rights reserved. Thanks! Find me

    @rossbelmont and in the Dreamforce app.