Getting Real: Pros and Pitfalls of Realistic UI Design

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

Thursday, October 27, 11

Slide 3

Slide 3 text

Flickr photo: mwichary Thursday, October 27, 11

Slide 4

Slide 4 text

Thursday, October 27, 11

Slide 5

Slide 5 text

Thursday, October 27, 11

Slide 6

Slide 6 text

Thursday, October 27, 11

Slide 7

Slide 7 text

Flickr photo: c_emery Thursday, October 27, 11

Slide 8

Slide 8 text

Flickr photo: saxyjorge Thursday, October 27, 11

Slide 9

Slide 9 text

Thursday, October 27, 11

Slide 10

Slide 10 text

Thursday, October 27, 11

Slide 11

Slide 11 text

Thursday, October 27, 11

Slide 12

Slide 12 text

Thursday, October 27, 11

Slide 13

Slide 13 text

Thursday, October 27, 11

Slide 14

Slide 14 text

Thursday, October 27, 11

Slide 15

Slide 15 text

Thursday, October 27, 11

Slide 16

Slide 16 text

Thursday, October 27, 11

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

Thursday, October 27, 11

Slide 21

Slide 21 text

Thursday, October 27, 11

Slide 22

Slide 22 text

Thursday, October 27, 11

Slide 23

Slide 23 text

Thursday, October 27, 11

Slide 24

Slide 24 text

Thursday, October 27, 11

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

How? Thursday, October 27, 11

Slide 33

Slide 33 text

Usability Innovation Thursday, October 27, 11

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

A Tale of Two Typewriters Thursday, October 27, 11

Slide 36

Slide 36 text

Thursday, October 27, 11

Slide 37

Slide 37 text

Thursday, October 27, 11

Slide 38

Slide 38 text

Thursday, October 27, 11

Slide 39

Slide 39 text

Thursday, October 27, 11

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

Realistic UIs contradict reality Thursday, October 27, 11

Slide 42

Slide 42 text

Thursday, October 27, 11

Slide 43

Slide 43 text

Thursday, October 27, 11

Slide 44

Slide 44 text

Thursday, October 27, 11

Slide 45

Slide 45 text

Thursday, October 27, 11

Slide 46

Slide 46 text

Thursday, October 27, 11

Slide 47

Slide 47 text

Thursday, October 27, 11

Slide 48

Slide 48 text

Thursday, October 27, 11

Slide 49

Slide 49 text

Thursday, October 27, 11

Slide 50

Slide 50 text

Thursday, October 27, 11

Slide 51

Slide 51 text

Thursday, October 27, 11

Slide 52

Slide 52 text

Thursday, October 27, 11

Slide 53

Slide 53 text

Flickr photo: mr_t_in_dc Thursday, October 27, 11

Slide 54

Slide 54 text

Pillboxie Thursday, October 27, 11

Slide 55

Slide 55 text

Pillboxie Thursday, October 27, 11

Slide 56

Slide 56 text

Flickr photo: mr_t_in_dc Thursday, October 27, 11

Slide 57

Slide 57 text

Pillboxie Thursday, October 27, 11

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

NewsRack Reeder Thursday, October 27, 11

Slide 60

Slide 60 text

News Kiosk Thursday, October 27, 11

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

Version 1.x Thursday, October 27, 11

Slide 63

Slide 63 text

Version 1.x Thursday, October 27, 11

Slide 64

Slide 64 text

Thursday, October 27, 11

Slide 65

Slide 65 text

Thursday, October 27, 11

Slide 66

Slide 66 text

Thursday, October 27, 11

Slide 67

Slide 67 text

Version 2.x Thursday, October 27, 11

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

MoneyBook ExpenSense Thursday, October 27, 11

Slide 73

Slide 73 text

Budget Track Mint Thursday, October 27, 11

Slide 74

Slide 74 text

Expense Tracker Nexus Money Thursday, October 27, 11

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

Thursday, October 27, 11

Slide 77

Slide 77 text

Features + Personality = Differentiation Thursday, October 27, 11

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

RedLaser Thursday, October 27, 11

Slide 80

Slide 80 text

Flickr photo: salemmapubliclibrary Thursday, October 27, 11

Slide 81

Slide 81 text

Thursday, October 27, 11

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

Usability Innovation Thursday, October 27, 11

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

Flickr photo: landerholm Thursday, October 27, 11

Slide 87

Slide 87 text

Flickr photo: mwichary Thursday, October 27, 11

Slide 88

Slide 88 text

Flickr photo: angryamoeba Thursday, October 27, 11

Slide 89

Slide 89 text

Flickr photo: mariusm Thursday, October 27, 11

Slide 90

Slide 90 text

Flickr photo: dmkrum Thursday, October 27, 11

Slide 91

Slide 91 text

Photo: Wikimedia Commons Thursday, October 27, 11

Slide 92

Slide 92 text

Flickr photo: erling Thursday, October 27, 11

Slide 93

Slide 93 text

Flickr photo: degilbo_on_ﬂickr Thursday, October 27, 11

Slide 94

Slide 94 text

Photo: Wikimedia Commons Thursday, October 27, 11

Slide 95

Slide 95 text

Thursday, October 27, 11

Slide 96

Slide 96 text

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

Slide 97

Slide 97 text

Digits Thursday, October 27, 11

Slide 98

Slide 98 text

Calcbot Thursday, October 27, 11

Slide 99

Slide 99 text

Soulver Thursday, October 27, 11

Slide 100

Slide 100 text

Digits Calcbot Soulver Thursday, October 27, 11

Slide 101

Slide 101 text

Four considerations Thursday, October 27, 11

Slide 102

Slide 102 text

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

Slide 103

Slide 103 text

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

Slide 104

Slide 104 text

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

Slide 105

Slide 105 text

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

Slide 106

Slide 106 text

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

Slide 107

Slide 107 text

1980 1990 2000 2010 Usability Thursday, October 27, 11

Slide 108

Slide 108 text

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