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

Getting Real: Pros and Pitfalls of Realistic UI Design

Aaron Weyenberg
October 27, 2011

Getting Real: Pros and Pitfalls of Realistic UI Design

A new generation of touch devices have proven to be exciting playgrounds for app designers. And with every new product we create, we have the opportunity to offer the most clear and efficient experience for our users. Recent UI trends often lean to realistic, faithful representations of analog controls and features. These designs can offer advantages, but also come with their own set of hazards.

In this session Aaron will lead you on a tour of current trends and practices, examining the strengths and drawbacks that realism brings. We’ll talk about things like mental models, innovation and usability as they relate to lifelike UI. Finally, Aaron will share some pragmatic guidelines to keep in mind as you build the next wave of mobile and tablet apps.

Aaron Weyenberg

October 27, 2011
Tweet

More Decks by Aaron Weyenberg

Other Decks in Design

Transcript

  1. Getting Real
    Aaron Weyenberg
    @aweyenberg
    Thursday, October 27, 11

    View full-size slide

  2. Thursday, October 27, 11

    View full-size slide

  3. Flickr photo: mwichary
    Thursday, October 27, 11

    View full-size slide

  4. Thursday, October 27, 11

    View full-size slide

  5. Thursday, October 27, 11

    View full-size slide

  6. Thursday, October 27, 11

    View full-size slide

  7. Flickr photo: c_emery
    Thursday, October 27, 11

    View full-size slide

  8. Flickr photo: saxyjorge
    Thursday, October 27, 11

    View full-size slide

  9. Thursday, October 27, 11

    View full-size slide

  10. Thursday, October 27, 11

    View full-size slide

  11. Thursday, October 27, 11

    View full-size slide

  12. Thursday, October 27, 11

    View full-size slide

  13. Thursday, October 27, 11

    View full-size slide

  14. Thursday, October 27, 11

    View full-size slide

  15. Thursday, October 27, 11

    View full-size slide

  16. Thursday, October 27, 11

    View full-size slide

  17. Realism
    Decendent
    (Touch Device)
    Ancestor
    (Analog)
    Thursday, October 27, 11

    View full-size slide

  18. Weak form
    Texture
    Light & shadow
    Depth
    Skeuomorphs
    Strong form
    Texture
    Light & shadow
    Depth
    Skeuomorphs
    +
    Behavior
    Structure
    Controls
    Thursday, October 27, 11

    View full-size slide

  19. Strong form realism copies analog form & behavior
    Flickr photo: vanderveenr
    Thursday, October 27, 11

    View full-size slide

  20. Thursday, October 27, 11

    View full-size slide

  21. Thursday, October 27, 11

    View full-size slide

  22. Thursday, October 27, 11

    View full-size slide

  23. Thursday, October 27, 11

    View full-size slide

  24. Thursday, October 27, 11

    View full-size slide

  25. 1980 1990 2000 2010
    Text
    Tables & Images
    Flash
    CSS
    Javascript
    Semantic Web
    Web 2.0
    Mobile/Touch
    Thursday, October 27, 11

    View full-size slide

  26. 1980 1990 2000 2010
    Text
    Tables & Images
    Flash
    CSS
    Javascript
    Semantic Web
    Web 2.0
    Mobile/Touch
    Usability
    Thursday, October 27, 11

    View full-size slide

  27. 1980 1990 2000 2010
    Text
    Tables & Images
    Flash
    CSS
    Javascript
    Semantic Web
    Web 2.0
    Mobile/Touch
    Usability
    Thursday, October 27, 11

    View full-size slide

  28. 1980 1990 2000 2010
    Text
    Tables & Images
    Flash
    CSS
    Javascript
    Semantic Web
    Web 2.0
    Mobile/Touch
    Usability
    Crazy Image
    Maps
    Thursday, October 27, 11

    View full-size slide

  29. 1980 1990 2000 2010
    Text
    Tables & Images
    Flash
    CSS
    Javascript
    Semantic Web
    Web 2.0
    Mobile/Touch
    Usability
    Crazy Image
    Maps
    Insane Flash
    Sites
    Thursday, October 27, 11

    View full-size slide

  30. 1980 1990 2000 2010
    Text
    Tables & Images
    Flash
    CSS
    Javascript
    Semantic Web
    Web 2.0
    Mobile/Touch
    Usability
    Crazy Image
    Maps
    Insane Flash
    Sites
    Overzealous Touch
    Realism
    Thursday, October 27, 11

    View full-size slide

  31. Indiscriminate use of realism
    results in UIs that impair usability
    and stall innovation.
    Thursday, October 27, 11

    View full-size slide

  32. How?
    Thursday, October 27, 11

    View full-size slide

  33. Usability Innovation
    Thursday, October 27, 11

    View full-size slide

  34. Realistic UIs inherit both good and bad genes
    Flickr photo: deltamike
    Thursday, October 27, 11

    View full-size slide

  35. A Tale of Two
    Typewriters
    Thursday, October 27, 11

    View full-size slide

  36. Thursday, October 27, 11

    View full-size slide

  37. Thursday, October 27, 11

    View full-size slide

  38. Thursday, October 27, 11

    View full-size slide

  39. Thursday, October 27, 11

    View full-size slide

  40. I’ll just add modern features to
    my cool, retro design.”
    “No problem...
    Thursday, October 27, 11

    View full-size slide

  41. Realistic UIs contradict reality
    Thursday, October 27, 11

    View full-size slide

  42. Thursday, October 27, 11

    View full-size slide

  43. Thursday, October 27, 11

    View full-size slide

  44. Thursday, October 27, 11

    View full-size slide

  45. Thursday, October 27, 11

    View full-size slide

  46. Thursday, October 27, 11

    View full-size slide

  47. Thursday, October 27, 11

    View full-size slide

  48. Thursday, October 27, 11

    View full-size slide

  49. Thursday, October 27, 11

    View full-size slide

  50. Thursday, October 27, 11

    View full-size slide

  51. Thursday, October 27, 11

    View full-size slide

  52. Thursday, October 27, 11

    View full-size slide

  53. Flickr photo: mr_t_in_dc
    Thursday, October 27, 11

    View full-size slide

  54. Pillboxie
    Thursday, October 27, 11

    View full-size slide

  55. Pillboxie
    Thursday, October 27, 11

    View full-size slide

  56. Flickr photo: mr_t_in_dc
    Thursday, October 27, 11

    View full-size slide

  57. Pillboxie
    Thursday, October 27, 11

    View full-size slide

  58. Realistic UIs consume space
    Flickr photo: eridius
    Thursday, October 27, 11

    View full-size slide

  59. NewsRack Reeder
    Thursday, October 27, 11

    View full-size slide

  60. News Kiosk
    Thursday, October 27, 11

    View full-size slide

  61. Camera+
    No. 1 photography app
    Over 2 million 3 million installs
    Thursday, October 27, 11

    View full-size slide

  62. Version 1.x
    Thursday, October 27, 11

    View full-size slide

  63. Version 1.x
    Thursday, October 27, 11

    View full-size slide

  64. Thursday, October 27, 11

    View full-size slide

  65. Thursday, October 27, 11

    View full-size slide

  66. Thursday, October 27, 11

    View full-size slide

  67. Version 2.x
    Thursday, October 27, 11

    View full-size slide

  68. 2.7x revenue
    v1.x v2.0
    in one month
    http://taptaptap.com/blog/million-million/
    Thursday, October 27, 11

    View full-size slide

  69. So should we abandon realism?
    Thursday, October 27, 11

    View full-size slide

  70. Realism can
    utilize mental models
    add credibility & trust
    differentiate
    aid usability
    +
    +
    =
    Thursday, October 27, 11

    View full-size slide

  71. Well-designed realism can aid trust & credibility
    Flickr photo: usarmyafrica
    Thursday, October 27, 11

    View full-size slide

  72. MoneyBook
    ExpenSense
    Thursday, October 27, 11

    View full-size slide

  73. Budget Track Mint
    Thursday, October 27, 11

    View full-size slide

  74. Expense Tracker Nexus Money
    Thursday, October 27, 11

    View full-size slide

  75. Well-designed realism makes your app unique
    Flickr photo: carolmartinez
    Thursday, October 27, 11

    View full-size slide

  76. Thursday, October 27, 11

    View full-size slide

  77. Features + Personality = Differentiation
    Thursday, October 27, 11

    View full-size slide

  78. Thoughtful realism leverages mental models
    Flickr photo: double-m2
    Thursday, October 27, 11

    View full-size slide

  79. RedLaser
    Thursday, October 27, 11

    View full-size slide

  80. Flickr photo: salemmapubliclibrary
    Thursday, October 27, 11

    View full-size slide

  81. Thursday, October 27, 11

    View full-size slide

  82. Featured in Apple TV ads
    9+ million installs
    Acquired by eBay
    Thursday, October 27, 11

    View full-size slide

  83. Thoughtfully executed realism
    augments usability.
    Thursday, October 27, 11

    View full-size slide

  84. Usability Innovation
    Thursday, October 27, 11

    View full-size slide

  85. Indiscriminate realism stalls innovation
    Photo: Wikimedia Commons
    Thursday, October 27, 11

    View full-size slide

  86. Flickr photo: landerholm
    Thursday, October 27, 11

    View full-size slide

  87. Flickr photo: mwichary
    Thursday, October 27, 11

    View full-size slide

  88. Flickr photo: angryamoeba
    Thursday, October 27, 11

    View full-size slide

  89. Flickr photo: mariusm
    Thursday, October 27, 11

    View full-size slide

  90. Flickr photo: dmkrum
    Thursday, October 27, 11

    View full-size slide

  91. Photo: Wikimedia Commons
    Thursday, October 27, 11

    View full-size slide

  92. Flickr photo: erling
    Thursday, October 27, 11

    View full-size slide

  93. Flickr photo: degilbo_on_flickr
    Thursday, October 27, 11

    View full-size slide

  94. Photo: Wikimedia Commons
    Thursday, October 27, 11

    View full-size slide

  95. Thursday, October 27, 11

    View full-size slide

  96. What if you had to
    start over?
    Multiline numeric display
    Calculate as you type
    Edit, undo, redo
    Add words for meaning
    Save and share calculations
    Thursday, October 27, 11

    View full-size slide

  97. Digits
    Thursday, October 27, 11

    View full-size slide

  98. Calcbot
    Thursday, October 27, 11

    View full-size slide

  99. Soulver
    Thursday, October 27, 11

    View full-size slide

  100. Digits Calcbot Soulver
    Thursday, October 27, 11

    View full-size slide

  101. Four considerations
    Thursday, October 27, 11

    View full-size slide

  102. Be efficient
    Don’t further limit the form factor of
    mobile devices at the expense of
    design realism.
    Thursday, October 27, 11

    View full-size slide

  103. Be honest
    Realistic design features should be
    consistent with and reflect reality.
    Thursday, October 27, 11

    View full-size slide

  104. Be unique
    Your app wants a personality.
    Thursday, October 27, 11

    View full-size slide

  105. Be inventive
    Think forward. Throw away old
    blueprints.
    Thursday, October 27, 11

    View full-size slide

  106. My job as a designer is to look
    into the future. Not use any
    frame of reference that exists.”
    Marc Newson

    Thursday, October 27, 11

    View full-size slide

  107. 1980 1990 2000 2010
    Usability
    Thursday, October 27, 11

    View full-size slide

  108. Thanks!
    Aaron Weyenberg
    @aweyenberg
    Thursday, October 27, 11

    View full-size slide