Realistic UI Design                       Aaron Weyenberg                        @aweyenbergFriday, May 13, 2011
Friday, May 13, 2011
Flickr photo: mwicharyFriday, May 13, 2011
Friday, May 13, 2011
Friday, May 13, 2011
Flickr photo: c_emeryFriday, May 13, 2011
Flickr photo: saxyjorgeFriday, May 13, 2011
Friday, May 13, 2011
Friday, May 13, 2011
Friday, May 13, 2011
Friday, May 13, 2011
Friday, May 13, 2011
Friday, May 13, 2011
Friday, May 13, 2011
Ancestor               Decendent                                  Realism                       (Analog)             (Touc...
Weak form        Strong form                          Texture          Texture                       Light & shadow   Ligh...
Flickr photo: vanderveenr                       Strong form realism copies analog form & behaviorFriday, May 13, 2011
Friday, May 13, 2011
Friday, May 13, 2011
Friday, May 13, 2011
Friday, May 13, 2011
Friday, May 13, 2011
Mobile/Touch                                                                      Web 2.0                                 ...
Mobile/Touch                                                                      Web 2.0                                 ...
Mobile/Touch                                                                      Web 2.0                                 ...
Mobile/Touch                                                                          Web 2.0                             ...
Mobile/Touch                                               Insane Flash               Web 2.0                             ...
Overzealous Touch                                                                            Realism                      ...
Indiscriminate use of realism                results in UIs that impair usability                       and stall innovati...
How?Friday, May 13, 2011
Usability   InnovationFriday, May 13, 2011
Realistic UIs inherit both good and bad genes     Flickr photo: deltamikeFriday, May 13, 2011
A Tale of Two                       TypewritersFriday, May 13, 2011
Friday, May 13, 2011
Friday, May 13, 2011
Friday, May 13, 2011
Friday, May 13, 2011
“No problem...                       I’ll just add modern features to                       my cool, retro design.”Friday,...
Realistic UIs contradict realityFriday, May 13, 2011
Friday, May 13, 2011
Friday, May 13, 2011
Friday, May 13, 2011
Friday, May 13, 2011
Friday, May 13, 2011
Friday, May 13, 2011
Friday, May 13, 2011
Friday, May 13, 2011
Friday, May 13, 2011
Friday, May 13, 2011
Friday, May 13, 2011
Flickr photo: mr_t_in_dcFriday, May 13, 2011
Friday, May 13, 2011
Friday, May 13, 2011
Flickr photo: mr_t_in_dcFriday, May 13, 2011
Friday, May 13, 2011
Realistic UIs consume space       Flickr photo: eridiusFriday, May 13, 2011
Friday, May 13, 2011
Friday, May 13, 2011
Camera+                       No. 1 photography app                       Over 2 million installsFriday, May 13, 2011
Version 1.xFriday, May 13, 2011
Version 1.xFriday, May 13, 2011
Friday, May 13, 2011
Friday, May 13, 2011
Friday, May 13, 2011
Version 2.xFriday, May 13, 2011
2.7x revenue                            in one month                        v1.x                              v2.0        ...
So should we abandon realism?Friday, May 13, 2011
Realism can add credibility & trust                       + differentiate                       + utilize mental models   ...
Flickr photo: usarmyafrica                              Well-designed realism can aid trust & credibilityFriday, May 13, 2...
Friday, May 13, 2011
Friday, May 13, 2011
Friday, May 13, 2011
Well-designed realism makes your app unique Flickr photo: carolmartinezFriday, May 13, 2011
Friday, May 13, 2011
Features + Personality = DifferentiationFriday, May 13, 2011
Flickr photo: double-m2                              Thoughtful realism leverages mental modelsFriday, May 13, 2011
RedLaserFriday, May 13, 2011
Flickr photo: salemmapubliclibraryFriday, May 13, 2011
Friday, May 13, 2011
Featured in Apple TV ads                           8 million installs                          Acquired by eBayFriday, May...
Thoughtfully executed realism               augments usability.Friday, May 13, 2011
Usability   InnovationFriday, May 13, 2011
Indiscriminate realism stalls innovation        Photo: Wikimedia CommonsFriday, May 13, 2011
Flickr photo: landerholmFriday, May 13, 2011
Flickr photo: mwicharyFriday, May 13, 2011
Flickr photo: angryamoebaFriday, May 13, 2011
Flickr photo: mariusmFriday, May 13, 2011
Flickr photo: dmkrumFriday, May 13, 2011
Photo: Wikimedia CommonsFriday, May 13, 2011
Flickr photo: erlingFriday, May 13, 2011
Flickr photo: degilbo_on_flickrFriday, May 13, 2011
Photo: Wikimedia CommonsFriday, May 13, 2011
Friday, May 13, 2011
What if you had to                         start over?                        Multiline numeric display                   ...
DigitsFriday, May 13, 2011
CalcbotFriday, May 13, 2011
SoulverFriday, May 13, 2011
Digits   Calcbot   SoulverFriday, May 13, 2011
Four considerationsFriday, May 13, 2011
Be efficient                   Don’t further limit the form factor of                   mobile devices at the expense of  ...
Be honest                   Realistic design features should be                   consistent with and reflect reality.Frid...
Be unique                   Your app wants a personality.Friday, May 13, 2011
Be inventive                   Think forward. Throw away old                   blueprints.               “My job as a desi...
Usability                   1980   1990   2000   2010Friday, May 13, 2011
Thanks!                       Aaron Weyenberg                        @aweyenbergFriday, May 13, 2011
Upcoming SlideShare
Loading in...5
×

Realistic User Interface Design

4,962

Published on

Web Directions Unplugged 2011 - Seattle.

Published in: Design, Technology
2 Comments
22 Likes
Statistics
Notes
  • If you like this presentation check out the Web Directions South 2011 site. I believe there will be some audio added to the site to back up this excellent presentation (I was lucky enough to see it)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Snif.. why no download allowed? Really liked this and would like to share (offlne) with some colleagues, always with due credit.

    I guess I'll point them here... :-(
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
4,962
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
0
Comments
2
Likes
22
Embeds 0
No embeds

No notes for slide

Realistic User Interface Design

  1. 1. Realistic UI Design Aaron Weyenberg @aweyenbergFriday, May 13, 2011
  2. 2. Friday, May 13, 2011
  3. 3. Flickr photo: mwicharyFriday, May 13, 2011
  4. 4. Friday, May 13, 2011
  5. 5. Friday, May 13, 2011
  6. 6. Flickr photo: c_emeryFriday, May 13, 2011
  7. 7. Flickr photo: saxyjorgeFriday, May 13, 2011
  8. 8. Friday, May 13, 2011
  9. 9. Friday, May 13, 2011
  10. 10. Friday, May 13, 2011
  11. 11. Friday, May 13, 2011
  12. 12. Friday, May 13, 2011
  13. 13. Friday, May 13, 2011
  14. 14. Friday, May 13, 2011
  15. 15. Ancestor Decendent Realism (Analog) (Touch Device)Friday, May 13, 2011
  16. 16. Weak form Strong form Texture Texture Light & shadow Light & shadow Depth Depth Skeuomorphs Skeuomorphs + Behavior Structure ControlsFriday, May 13, 2011
  17. 17. Flickr photo: vanderveenr Strong form realism copies analog form & behaviorFriday, May 13, 2011
  18. 18. Friday, May 13, 2011
  19. 19. Friday, May 13, 2011
  20. 20. Friday, May 13, 2011
  21. 21. Friday, May 13, 2011
  22. 22. Friday, May 13, 2011
  23. 23. Mobile/Touch Web 2.0 Semantic Web Javascript CSS Flash Tables & Images Text 1980 1990 2000 2010Friday, May 13, 2011
  24. 24. Mobile/Touch Web 2.0 Semantic Web Usability Javascript CSS Flash Tables & Images Text 1980 1990 2000 2010Friday, May 13, 2011
  25. 25. Mobile/Touch Web 2.0 Semantic Web Usability Javascript CSS Flash Tables & Images Text 1980 1990 2000 2010Friday, May 13, 2011
  26. 26. Mobile/Touch Web 2.0 Crazy Image Semantic Web Maps Usability Javascript CSS Flash Tables & Images Text 1980 1990 2000 2010Friday, May 13, 2011
  27. 27. Mobile/Touch Insane Flash Web 2.0 Sites Crazy Image Semantic Web Maps Usability Javascript CSS Flash Tables & Images Text 1980 1990 2000 2010Friday, May 13, 2011
  28. 28. Overzealous Touch Realism Mobile/Touch Insane Flash Web 2.0 Sites Crazy Image Semantic Web Maps Usability Javascript CSS Flash Tables & Images Text 1980 1990 2000 2010Friday, May 13, 2011
  29. 29. Indiscriminate use of realism results in UIs that impair usability and stall innovation.Friday, May 13, 2011
  30. 30. How?Friday, May 13, 2011
  31. 31. Usability InnovationFriday, May 13, 2011
  32. 32. Realistic UIs inherit both good and bad genes Flickr photo: deltamikeFriday, May 13, 2011
  33. 33. A Tale of Two TypewritersFriday, May 13, 2011
  34. 34. Friday, May 13, 2011
  35. 35. Friday, May 13, 2011
  36. 36. Friday, May 13, 2011
  37. 37. Friday, May 13, 2011
  38. 38. “No problem... I’ll just add modern features to my cool, retro design.”Friday, May 13, 2011
  39. 39. Realistic UIs contradict realityFriday, May 13, 2011
  40. 40. Friday, May 13, 2011
  41. 41. Friday, May 13, 2011
  42. 42. Friday, May 13, 2011
  43. 43. Friday, May 13, 2011
  44. 44. Friday, May 13, 2011
  45. 45. Friday, May 13, 2011
  46. 46. Friday, May 13, 2011
  47. 47. Friday, May 13, 2011
  48. 48. Friday, May 13, 2011
  49. 49. Friday, May 13, 2011
  50. 50. Friday, May 13, 2011
  51. 51. Flickr photo: mr_t_in_dcFriday, May 13, 2011
  52. 52. Friday, May 13, 2011
  53. 53. Friday, May 13, 2011
  54. 54. Flickr photo: mr_t_in_dcFriday, May 13, 2011
  55. 55. Friday, May 13, 2011
  56. 56. Realistic UIs consume space Flickr photo: eridiusFriday, May 13, 2011
  57. 57. Friday, May 13, 2011
  58. 58. Friday, May 13, 2011
  59. 59. Camera+ No. 1 photography app Over 2 million installsFriday, May 13, 2011
  60. 60. Version 1.xFriday, May 13, 2011
  61. 61. Version 1.xFriday, May 13, 2011
  62. 62. Friday, May 13, 2011
  63. 63. Friday, May 13, 2011
  64. 64. Friday, May 13, 2011
  65. 65. Version 2.xFriday, May 13, 2011
  66. 66. 2.7x revenue in one month v1.x v2.0 http://taptaptap.com/blog/million-million/Friday, May 13, 2011
  67. 67. So should we abandon realism?Friday, May 13, 2011
  68. 68. Realism can add credibility & trust + differentiate + utilize mental models = aid usabilityFriday, May 13, 2011
  69. 69. Flickr photo: usarmyafrica Well-designed realism can aid trust & credibilityFriday, May 13, 2011
  70. 70. Friday, May 13, 2011
  71. 71. Friday, May 13, 2011
  72. 72. Friday, May 13, 2011
  73. 73. Well-designed realism makes your app unique Flickr photo: carolmartinezFriday, May 13, 2011
  74. 74. Friday, May 13, 2011
  75. 75. Features + Personality = DifferentiationFriday, May 13, 2011
  76. 76. Flickr photo: double-m2 Thoughtful realism leverages mental modelsFriday, May 13, 2011
  77. 77. RedLaserFriday, May 13, 2011
  78. 78. Flickr photo: salemmapubliclibraryFriday, May 13, 2011
  79. 79. Friday, May 13, 2011
  80. 80. Featured in Apple TV ads 8 million installs Acquired by eBayFriday, May 13, 2011
  81. 81. Thoughtfully executed realism augments usability.Friday, May 13, 2011
  82. 82. Usability InnovationFriday, May 13, 2011
  83. 83. Indiscriminate realism stalls innovation Photo: Wikimedia CommonsFriday, May 13, 2011
  84. 84. Flickr photo: landerholmFriday, May 13, 2011
  85. 85. Flickr photo: mwicharyFriday, May 13, 2011
  86. 86. Flickr photo: angryamoebaFriday, May 13, 2011
  87. 87. Flickr photo: mariusmFriday, May 13, 2011
  88. 88. Flickr photo: dmkrumFriday, May 13, 2011
  89. 89. Photo: Wikimedia CommonsFriday, May 13, 2011
  90. 90. Flickr photo: erlingFriday, May 13, 2011
  91. 91. Flickr photo: degilbo_on_flickrFriday, May 13, 2011
  92. 92. Photo: Wikimedia CommonsFriday, May 13, 2011
  93. 93. Friday, May 13, 2011
  94. 94. What if you had to start over? Multiline numeric display Calculate as you type Edit, undo, redo Add words for meaning Save and share calculationsFriday, May 13, 2011
  95. 95. DigitsFriday, May 13, 2011
  96. 96. CalcbotFriday, May 13, 2011
  97. 97. SoulverFriday, May 13, 2011
  98. 98. Digits Calcbot SoulverFriday, May 13, 2011
  99. 99. Four considerationsFriday, May 13, 2011
  100. 100. Be efficient Don’t further limit the form factor of mobile devices at the expense of design realism.Friday, May 13, 2011
  101. 101. Be honest Realistic design features should be consistent with and reflect reality.Friday, May 13, 2011
  102. 102. Be unique Your app wants a personality.Friday, May 13, 2011
  103. 103. Be inventive Think forward. Throw away old blueprints. “My job as a designer is to look into the future. Not use any frame of reference that exists.” Marc NewsonFriday, May 13, 2011
  104. 104. Usability 1980 1990 2000 2010Friday, May 13, 2011
  105. 105. Thanks! Aaron Weyenberg @aweyenbergFriday, May 13, 2011

×