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 Slide

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

    View Slide

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

    View Slide

  4. ¡Mentirosos!
    (Liars!)

    View Slide

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

    View Slide

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

    View 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 Slide

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

    View 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 Slide

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

    View Slide

  11. Understanding the problem.

    View Slide

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

    View Slide

  13. Wireframes. Or are they...

    View Slide

  14. View Slide

  15. Wireframes. Or are they...

    View Slide

  16. Testable. ASAP.

    View Slide

  17. Sketches are prototypes in waiting.

    View Slide

  18. prototyping on paper

    View Slide

  19. InVision App

    View Slide

  20. The usual suspects:
    Balsamiq Axure
    InDesign Keynote PowerPoint

    View Slide

  21. HTML/CSS/JS

    View Slide

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

    View Slide

  23. Developers need love too.

    View Slide

  24. Make your client fall in love.

    View Slide

  25. A quick note on testing:

    View Slide

  26. “OK, but what about design?”

    View Slide

  27. Mockups = Useless

    View Slide

  28. View Slide

  29. UI Studies: The New Hotness

    View Slide

  30. Style tiles use time efficiently.

    View Slide

  31. Design in the browser.

    View Slide

  32. Use the right tool for the job.

    View Slide

  33. Let’s see some examples:

    View Slide

  34. Google Glass

    View Slide

  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

    View Slide

  36. View Slide

  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

    View Slide

  38. Incantor

    View Slide

  39. Our first prototype.

    View Slide

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

    View Slide

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

    View Slide

  42. We made the nav work without looking.

    View Slide

  43. Let’s wrap up.

    View Slide

  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.

    View Slide

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

    View Slide