$30 off During Our Annual Pro Sale. View Details »

UI Design Decisions

Dan Denney
August 02, 2011

UI Design Decisions

This are the slides from Ryan Singer's presentation from the Front-End Design Conference on July 22, 2011.

Dan Denney

August 02, 2011
Tweet

More Decks by Dan Denney

Other Decks in Design

Transcript

  1. The mindset
    for UI
    decisions
    Ryan Singer
    37signals
    Tuesday, August 2, 2011

    View Slide

  2. Tuesday, August 2, 2011

    View Slide

  3. Tuesday, August 2, 2011

    View Slide

  4. Tuesday, August 2, 2011

    View Slide

  5. Tuesday, August 2, 2011

    View Slide

  6. Tuesday, August 2, 2011

    View Slide

  7. Tuesday, August 2, 2011

    View Slide

  8. Tuesday, August 2, 2011

    View Slide

  9. Demo walking through the
    implementation vs. looking at
    the screen with a fresh
    perspective
    Tuesday, August 2, 2011

    View Slide

  10. 31 + 5 +
    11
    47
    Tuesday, August 2, 2011

    View Slide

  11. This week upgrades were up by 6%, downgrades
    were down by 1%, signups were up 3%. Last week,
    upgrades were up by 8%, downgrades were up by
    1%, and signups were up 2%.
    Tuesday, August 2, 2011

    View Slide

  12. This week upgrades were up by 6%, downgrades
    were down by 1%, signups were up 3%. Last week,
    upgrades were up by 8%, downgrades were up by
    1%, and signups were up 2%.
    This week
    6% more Upgrades
    1% fewer
    Downgrades
    3% more Signups
    Last week
    8% more Upgrades
    1% more
    Downgrades
    2% more Signups
    Tuesday, August 2, 2011

    View Slide

  13. Add a new person
    Add a new company
    Import (vCard, Basecamp, Outlook)
    Export (vCard, Excel)
    Tuesday, August 2, 2011

    View Slide

  14. Add a new person
    Add a new company
    Import (vCard, Basecamp, Outlook)
    Export (vCard, Excel)
    Tuesday, August 2, 2011

    View Slide

  15. What’s on the
    screen?
    What is the
    screen telling
    me?


    Tuesday, August 2, 2011

    View Slide

  16. Information is
    available somewhere
    on screen
    vs.
    The screen pushes
    the information
    straight to my brain
    Tuesday, August 2, 2011

    View Slide

  17. Live Photoshop Demo
    Tuesday, August 2, 2011

    View Slide

  18. Arrive at
    the site
    Put an item in
    shopping cart
    Start
    checkout
    Finish
    checkout
    Click on a
    product page
    Prospects Sales
    Tuesday, August 2, 2011

    View Slide

  19. Prospects Sales
    Tuesday, August 2, 2011

    View Slide

  20. Wishes Accomplishme
    nt
    Tuesday, August 2, 2011

    View Slide

  21. Wishes Accomplishme
    nt
    possible, but painful
    Tuesday, August 2, 2011

    View Slide

  22. Wishes Accomplishme
    nt
    possible, but painful
    impossible: we didn’t know you wanted that
    Tuesday, August 2, 2011

    View Slide

  23. Tuesday, August 2, 2011

    View Slide

  24. Tuesday, August 2, 2011

    View Slide

  25. Wish Accomplishme
    nt
    Tuesday, August 2, 2011

    View Slide

  26. impossible
    Wish Accomplishme
    nt
    Tuesday, August 2, 2011

    View Slide

  27. possible but painful
    impossible
    Wish Accomplishme
    nt
    Tuesday, August 2, 2011

    View Slide

  28. possible but painful
    impossible
    possible, clear and easy ($$$$)
    Wish Accomplishme
    nt
    Tuesday, August 2, 2011

    View Slide

  29. Points to take home
    Tuesday, August 2, 2011

    View Slide

  30. Points to take home
    • Don’t “walk through” to test.
    Consciously evaluate the UI as if you
    didn’t build it.
    Tuesday, August 2, 2011

    View Slide

  31. Points to take home
    • Don’t “walk through” to test.
    Consciously evaluate the UI as if you
    didn’t build it.
    • Focus on the fresh perception of the
    moment. Watch where your eyes
    scan and what the screen tells you.
    Tuesday, August 2, 2011

    View Slide

  32. Points to take home
    • Don’t “walk through” to test.
    Consciously evaluate the UI as if you
    didn’t build it.
    • Focus on the fresh perception of the
    moment. Watch where your eyes
    scan and what the screen tells you.
    • Eliminate obstacles between the
    user’s wishes and what they can
    accomplish in your app.
    Tuesday, August 2, 2011

    View Slide

  33. Q&A
    @rjs on Twitter
    feltpresence.com
    37signals.com
    Tuesday, August 2, 2011

    View Slide