Web Directions Unplugged 2011 - Seattle.

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 of realism
results in UIs that impair usability
and stall innovation.
Friday, May 13, 2011

30. How?
Friday, May 13, 2011

31. Usability Innovation
Friday, May 13, 2011

32. Realistic UIs inherit both good and bad genes
Flickr photo: deltamike
Friday, May 13, 2011

33. A Tale of Two
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 contradict reality
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 consume space
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, May 13, 2011

61. Version 1.x
Friday, May 13, 2011

62. Friday, May 13, 2011

63. Friday, May 13, 2011

64. Friday, May 13, 2011

65. Version 2.x
Friday, May 13, 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 we abandon realism?
Friday, May 13, 2011

68. Realism can add credibility & 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 makes your 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. RedLaser
Friday, May 13, 2011

78. Flickr photo: salemmapubliclibrary
Friday, May 13, 2011

79. Friday, May 13, 2011

80. Featured in Apple TV 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 stalls innovation
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 you had 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. Digits
Friday, May 13, 2011

96. Calcbot
Friday, May 13, 2011

97. Soulver
Friday, May 13, 2011

98. Digits Calcbot Soulver
Friday, May 13, 2011

99. Four considerations
Friday, May 13, 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