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

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

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

Steve Hickey

June 19, 2014
Tweet

More Decks by Steve Hickey

Other Decks in Design

Transcript

  1. We’re Doing It Wrong
    Prototyping the Future of the Web
    Steve Hickey: UX Designer at Fresh Tilled Soil
    @stevehickeydsgn | @freshtilledsoil | @thedirtshow

    View full-size slide

  2. Requirements
    Research
    Ideate
    Design
    Code
    Launch
    A brief “reminder” of waterfall.

    View full-size slide

  3. Plan
    Design
    Develop
    Test
    Build
    Measure
    Learn
    What about agile or lean?

    View full-size slide

  4. ¡Mentirosos!
    (Liars!)

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  7. But it’s ok. We can fix that.
    Research/Understand Ideate Design
    Code
    Test
    and repeat...
    & Design & Code & Ideate & Code
    & Ideate & Design

    View full-size slide

  8. Step 1 → Step 2 → Step 3 → Step 4
    = Very Pretty BULLSHIT

    View full-size slide

  9. “Design is not just what it looks like and feels like.
    Design is how it works.”
    !
    Today’s obligatory Steve Jobs quote.

    View full-size slide

  10. “Form ever follows function.”
    !
    A grating reminder of something we all claim to know,
    from architect Louis Sullivan.

    View full-size slide

  11. Understanding the problem.

    View full-size slide

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

    View full-size slide

  13. Wireframes. Or are they...

    View full-size slide

  14. Wireframes. Or are they...

    View full-size slide

  15. Testable. ASAP.

    View full-size slide

  16. Sketches are prototypes in waiting.

    View full-size slide

  17. prototyping on paper

    View full-size slide

  18. InVision App

    View full-size slide

  19. The usual suspects:
    Balsamiq Axure
    InDesign Keynote PowerPoint

    View full-size slide

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

    View full-size slide

  21. Developers need love too.

    View full-size slide

  22. Make your client fall in love.

    View full-size slide

  23. A quick note on testing:

    View full-size slide

  24. “OK, but what about design?”

    View full-size slide

  25. Mockups = Useless

    View full-size slide

  26. UI Studies: The New Hotness

    View full-size slide

  27. Style tiles use time efficiently.

    View full-size slide

  28. Design in the browser.

    View full-size slide

  29. Use the right tool for the job.

    View full-size slide

  30. Let’s see some examples:

    View full-size slide

  31. Google Glass

    View full-size slide

  32. “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

    View full-size slide

  33. “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

    View full-size slide

  34. Our first prototype.

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  37. We made the nav work without looking.

    View full-size slide

  38. Let’s wrap up.

    View full-size slide

  39. 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.

    View full-size slide

  40. Thanks!
    Steve Hickey: UX Designer at Fresh Tilled Soil
    @stevehickeydsgn | @freshtilledsoil | @thedirtshow

    View full-size slide