Realistic User Interface Design
- 1. Realistic UI Design Aaron Weyenberg @aweyenberg Friday, May 13, 2011
- 2. Friday, May 13,2011
- 3. Flickr photo: mwichary Friday,May 13, 2011
- 4. Friday, May 13,2011
- 5. Friday, May 13,2011
- 6. Flickr photo: c_emery Friday,May 13, 2011
- 7. Flickr photo: saxyjorge Friday,May 13, 2011
- 8. Friday, May 13,2011
- 9. Friday, May 13,2011
- 10. Friday, May 13,2011
- 11. Friday, May 13,2011
- 12. Friday, May 13,2011
- 13. Friday, May 13,2011
- 14. Friday, May 13,2011
- 15. Ancestor Decendent Realism (Analog) (Touch Device) Friday, May 13, 2011
- 16. Weak form Strong form Texture Texture Light & shadow Light & shadow Depth Depth Skeuomorphs Skeuomorphs + Behavior Structure Controls Friday, May 13, 2011
- 17. Flickr photo: vanderveenr Strong form realism copies analog form & behavior Friday, May 13, 2011
- 18. Friday, May 13,2011
- 19. Friday, May 13,2011
- 20. Friday, May 13,2011
- 21. Friday, May 13,2011
- 22. Friday, May 13,2011
- 23. Mobile/Touch Web 2.0 Semantic Web Javascript CSS Flash Tables & Images Text 1980 1990 2000 2010 Friday, May 13, 2011
- 24. Mobile/Touch Web 2.0 Semantic Web Usability Javascript CSS Flash Tables & Images Text 1980 1990 2000 2010 Friday, May 13, 2011
- 25. Mobile/Touch Web 2.0 Semantic Web Usability Javascript CSS Flash Tables & Images Text 1980 1990 2000 2010 Friday, May 13, 2011
- 26. Mobile/Touch Web 2.0 Crazy Image Semantic Web Maps Usability Javascript CSS Flash Tables & Images Text 1980 1990 2000 2010 Friday, May 13, 2011
- 27. Mobile/Touch Insane Flash Web 2.0 Sites Crazy Image Semantic Web Maps Usability Javascript CSS Flash Tables & Images Text 1980 1990 2000 2010 Friday, May 13, 2011
- 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 2010 Friday, May 13, 2011
- 29. Indiscriminate use ofrealism results in UIs that impair usability and stall innovation. Friday, May 13, 2011
- 30.
- 31. Usability Innovation Friday, May 13, 2011
- 32. Realistic UIs inheritboth good and bad genes Flickr photo: deltamike Friday, May 13, 2011
- 33. A Tale ofTwo Typewriters Friday, May 13, 2011
- 34. Friday, May 13,2011
- 35. Friday, May 13,2011
- 36. Friday, May 13,2011
- 37. Friday, May 13,2011
- 38. “No problem... I’ll just add modern features to my cool, retro design.” Friday, May 13, 2011
- 39. Realistic UIs contradictreality Friday, May 13, 2011
- 40. Friday, May 13,2011
- 41. Friday, May 13,2011
- 42. Friday, May 13,2011
- 43. Friday, May 13,2011
- 44. Friday, May 13,2011
- 45. Friday, May 13,2011
- 46. Friday, May 13,2011
- 47. Friday, May 13,2011
- 48. Friday, May 13,2011
- 49. Friday, May 13,2011
- 50. Friday, May 13,2011
- 51. Flickr photo: mr_t_in_dc Friday,May 13, 2011
- 52. Friday, May 13,2011
- 53. Friday, May 13,2011
- 54. Flickr photo: mr_t_in_dc Friday,May 13, 2011
- 55. Friday, May 13,2011
- 56. Realistic UIs consumespace Flickr photo: eridius Friday, May 13, 2011
- 57. Friday, May 13,2011
- 58. Friday, May 13,2011
- 59. Camera+ No. 1 photography app Over 2 million installs Friday, May 13, 2011
- 60. Version 1.x Friday, May13, 2011
- 61. Version 1.x Friday, May13, 2011
- 62. Friday, May 13,2011
- 63. Friday, May 13,2011
- 64. Friday, May 13,2011
- 65. Version 2.x Friday, May13, 2011
- 66. 2.7x revenue in one month v1.x v2.0 http://taptaptap.com/blog/million-million/ Friday, May 13, 2011
- 67. So should weabandon realism? Friday, May 13, 2011
- 68. Realism can addcredibility & trust + differentiate + utilize mental models = aid usability Friday, May 13, 2011
- 69. Flickr photo: usarmyafrica Well-designed realism can aid trust & credibility Friday, May 13, 2011
- 70. Friday, May 13,2011
- 71. Friday, May 13,2011
- 72. Friday, May 13,2011
- 73. Well-designed realism makesyour app unique Flickr photo: carolmartinez Friday, May 13, 2011
- 74. Friday, May 13,2011
- 75. Features + Personality= Differentiation Friday, May 13, 2011
- 76. Flickr photo: double-m2 Thoughtful realism leverages mental models Friday, May 13, 2011
- 77.
- 78. Flickr photo: salemmapubliclibrary Friday,May 13, 2011
- 79. Friday, May 13,2011
- 80. Featured in AppleTV ads 8 million installs Acquired by eBay Friday, May 13, 2011
- 81. Thoughtfully executed realism augments usability. Friday, May 13, 2011
- 82. Usability Innovation Friday, May 13, 2011
- 83. Indiscriminate realism stallsinnovation Photo: Wikimedia Commons Friday, May 13, 2011
- 84. Flickr photo: landerholm Friday,May 13, 2011
- 85. Flickr photo: mwichary Friday,May 13, 2011
- 86. Flickr photo: angryamoeba Friday,May 13, 2011
- 87. Flickr photo: mariusm Friday,May 13, 2011
- 88. Flickr photo: dmkrum Friday,May 13, 2011
- 89. Photo: Wikimedia Commons Friday,May 13, 2011
- 90. Flickr photo: erling Friday,May 13, 2011
- 91. Flickr photo: degilbo_on_flickr Friday,May 13, 2011
- 92. Photo: Wikimedia Commons Friday,May 13, 2011
- 93. Friday, May 13,2011
- 94. What if youhad to start over? Multiline numeric display Calculate as you type Edit, undo, redo Add words for meaning Save and share calculations Friday, May 13, 2011
- 95.
- 96.
- 97.
- 98. Digits Calcbot Soulver Friday, May 13, 2011
- 99. Four considerations Friday, May13, 2011
- 100. Be efficient Don’t further limit the form factor of mobile devices at the expense of design realism. Friday, May 13, 2011
- 101. Be honest Realistic design features should be consistent with and reflect reality. Friday, May 13, 2011
- 102. Be unique Your app wants a personality. Friday, May 13, 2011
- 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 Newson Friday, May 13, 2011
- 104. Usability 1980 1990 2000 2010 Friday, May 13, 2011
- 105. Thanks! Aaron Weyenberg @aweyenberg Friday, May 13, 2011