We're Doing It Wrong: Future Insights Live, June 2014

We're Doing It Wrong: Future Insights Live, June 2014

54d5fa57f499bd09aa3b713bc7fdbe37?s=128

Steve Hickey

June 19, 2014
Tweet

Transcript

  1. We’re Doing It Wrong Prototyping the Future of the Web

    Steve Hickey: UX Designer at Fresh Tilled Soil @stevehickeydsgn | @freshtilledsoil | @thedirtshow
  2. Requirements Research Ideate Design Code Launch A brief “reminder” of

    waterfall.
  3. Plan Design Develop Test Build Measure Learn What about agile

    or lean?
  4. ¡Mentirosos! (Liars!)

  5. The traditional point of first contact... Requirements Research Ideate Design

    Code Launch
  6. “D t!” **** ... and its result.

  7. But it’s ok. We can fix that. Research/Understand Ideate Design

    Code Test and repeat... & Design & Code & Ideate & Code & Ideate & Design
  8. Step 1 → Step 2 → Step 3 → Step

    4 = Very Pretty BULLSHIT
  9. “Design is not just what it looks like and feels

    like. Design is how it works.” ! Today’s obligatory Steve Jobs quote.
  10. “Form ever follows function.” ! A grating reminder of something

    we all claim to know, from architect Louis Sullivan.
  11. Understanding the problem.

  12. “Great is the enemy of good.” ! Paraphrased from Voltaire,

    an enlightened dude.
  13. Wireframes. Or are they...

  14. None
  15. Wireframes. Or are they...

  16. Testable. ASAP.

  17. Sketches are prototypes in waiting.

  18. prototyping on paper

  19. InVision App

  20. The usual suspects: Balsamiq Axure InDesign Keynote PowerPoint

  21. HTML/CSS/JS

  22. Fake it. localStorage.setItem(‘username’, ‘Gary’); var username = localStorage.getItem(‘username’); $(‘div.userinfo’).prepend(‘<h2>’ +

    username + ‘</h2>’); ======================================================= <h2>Gary</h2>
  23. Developers need love too.

  24. Make your client fall in love.

  25. A quick note on testing:

  26. “OK, but what about design?”

  27. Mockups = Useless

  28. None
  29. UI Studies: The New Hotness

  30. Style tiles use time efficiently.

  31. Design in the browser.

  32. Use the right tool for the job.

  33. Let’s see some examples:

  34. Google Glass

  35. “We were working with the HUD literally on my first

    day 
 at work. And learning a tremendous number of things that 
 you couldn’t possibly just guess or estimate, or print out on 
 a spreadsheet, or a project map, and that sort of thing.” ! Tom Chi, Google
  36. None
  37. “Your ears can take a lot more weight than your

    nose… So if you can create a system where the ear becomes a fulcrum, then the perceptual weight disappears. This took me about two hours to figure out.” ! Tom Chi, Google
  38. Incantor

  39. Our first prototype.

  40. Look, I’m no Olivander. Ok?

  41. Here’s how we overcame my lack of magic.

  42. We made the nav work without looking.

  43. Let’s wrap up.

  44. 1) Sketch a lot, it’s quick and efficient. 2) Stop

    wireframing, start prototyping. 3) Test early and often. 4) Avoid comps for every screen and state. 5) Eliminate redundant parts of your workflow. 6) Process is not a straight line.
  45. Thanks! Steve Hickey: UX Designer at Fresh Tilled Soil @stevehickeydsgn

    | @freshtilledsoil | @thedirtshow