Designing iPad Interfaces                                New navigation schemas© 2010 AKQA Inc. Confidential & Proprietary ...
Creative DirectorHead of User Experience, AKQATwitter @Lynn_Teo© 2010 AKQA Inc. Confidential & Proprietary   2
Remembering your rst interface© 2010 AKQA Inc. Confidential & Proprietary   3
4
e evolution of interfaces© 2010 AKQA Inc. Confidential & Proprietary   5
6
Range of interface interactions                                  7
Touch        8
Advantages of touch interfaces© 2010 AKQA Inc. Confidential & Proprietary   9
Touch is direct                  10
Touch removes ambiguities                            11
Touch leverages forms                        12
13
size  shape FORMMECHANICS            14
1024 x 768             15
PortraitLandscape                       16
Touch interfaces and ease of use© 2010 AKQA Inc. Confidential & Proprietary   17
Let’s revisit a key design belief© 2010 AKQA Inc. Confidential & Proprietary   20
Form                                                                 follows                                              ...
22
23
24
25
26
27
What these examples demonstrate© 2010 AKQA Inc. Confidential & Proprietary   28
A new relationship exists betweenform and function© 2010 AKQA Inc. Confidential & Proprietary   29
Form informs function                        30
A look at iPad app navigation                                31
Navigation schemas drawn fromfamiliar constructs are relatable.                                     32
1. Common constructs2. Hints at physical experiences3. Familiar web/mobile concepts© 2010 AKQA Inc. Confidential & Propriet...
1. Common constructs2. Hints at physical experiences3. Familiar web/mobile concepts© 2010 AKQA Inc. Confidential & Propriet...
Garamond©2010 AKQA - Con dential and proprietary. All rights reserved.   35
©2010 AKQA - Con dential and proprietary. All rights reserved.   36
©2010 AKQA - Con dential and proprietary. All rights reserved.   37
Garamond©2010 AKQA - Con dential and proprietary. All rights reserved.   38
Garamond©2010 AKQA - Con dential and proprietary. All rights reserved.   39
Garamond©2010 AKQA - Con dential and proprietary. All rights reserved.   40
©2010 AKQA - Con dential and proprietary. All rights reserved.   41
Garamond©2010 AKQA - Con dential and proprietary. All rights reserved.   42
Garamond©2010 AKQA - Con dential and proprietary. All rights reserved.   43
1. Common constructs2. Hints at physical experiences3. Familiar web/mobile concepts© 2010 AKQA Inc. Confidential & Propriet...
©2010 AKQA - Con dential and proprietary. All rights reserved.   45
©2010 AKQA - Con dential and proprietary. All rights reserved.   46
©2010 AKQA - Con dential and proprietary. All rights reserved.   47
©2010 AKQA - Con dential and proprietary. All rights reserved.   48
©2010 AKQA - Con dential and proprietary. All rights reserved.   49
Garamond©2010 AKQA - Con dential and proprietary. All rights reserved.   50
Garamond©2010 AKQA - Con dential and proprietary. All rights reserved.   51
Garamond©2010 AKQA - Con dential and proprietary. All rights reserved.   52
1. Common constructs2. Hints at physical experiences3. Familiar web/mobile concepts© 2010 AKQA Inc. Confidential & Propriet...
Garamond©2010 AKQA - Con dential and proprietary. All rights reserved.   54
©2010 AKQA - Con dential and proprietary. All rights reserved.   55
Garamond©2010 AKQA - Con dential and proprietary. All rights reserved.   56
Garamond©2010 AKQA - Con dential and proprietary. All rights reserved.   57
Garamond©2010 AKQA - Con dential and proprietary. All rights reserved.   58
Simple, intuitive, and responsivenavigation systems arediscoverable.                                    59
1. Intuitive2. Visual affordance3. User feedback4. Fewer options© 2010 AKQA Inc. Confidential & Proprietary   60
1. Intuitive2. Visual affordance3. User feedback4. Fewer options© 2010 AKQA Inc. Confidential & Proprietary   61
Garamond©2010 AKQA - Con dential and proprietary. All rights reserved.   62
Garamond©2010 AKQA - Con dential and proprietary. All rights reserved.   63
Garamond©2010 AKQA - Con dential and proprietary. All rights reserved.   64
©2010 AKQA - Con dential and proprietary. All rights reserved.   65
66
67
1. Intuitive2. Visual affordance3. User feedback4. Fewer options© 2010 AKQA Inc. Confidential & Proprietary   68
©2010 AKQA - Con dential and proprietary. All rights reserved.   69
©2010 AKQA - Con dential and proprietary. All rights reserved.   70
©2010 AKQA - Con dential and proprietary. All rights reserved.   71
©2010 AKQA - Con dential and proprietary. All rights reserved.   72
©2010 AKQA - Con dential and proprietary. All rights reserved.   73
©2010 AKQA - Con dential and proprietary. All rights reserved.   74
75
1. Intuitive2. Visual affordance3. User feedback4. Fewer options© 2010 AKQA Inc. Confidential & Proprietary   76
©2010 AKQA - Con dential and proprietary. All rights reserved.   77
©2010 AKQA - Con dential and proprietary. All rights reserved.   78
©2010 AKQA - Con dential and proprietary. All rights reserved.   79
©2010 AKQA - Con dential and proprietary. All rights reserved.   80
©2010 AKQA - Con dential and proprietary. All rights reserved.   81
©2010 AKQA - Con dential and proprietary. All rights reserved.   82
©2010 AKQA - Con dential and proprietary. All rights reserved.   83
1. Intuitive2. Visual affordance3. User feedback4. Fewer options© 2010 AKQA Inc. Confidential & Proprietary   84
©2010 AKQA - Con dential and proprietary. All rights reserved.   85
©2010 AKQA - Con dential and proprietary. All rights reserved.   86
©2010 AKQA - Con dential and proprietary. All rights reserved.   87
©2010 AKQA - Con dential and proprietary. All rights reserved.   88
User instruction built intonavigation systems ensureinterfaces are learnable.                              89
1. Navigation help guides2. Repetitive application3. Explicit in-context instruction                                     90
1. Navigation help guides2. Repetitive application3. Explicit in-context instruction                                     91
92
93
1. Navigation help guides2. Repetitive application3. Explicit in-context instruction                                     94
©2010 AKQA - Con dential and proprietary. All rights reserved.   95
©2010 AKQA - Con dential and proprietary. All rights reserved.   96
©2010 AKQA - Con dential and proprietary. All rights reserved.   97
©2010 AKQA - Con dential and proprietary. All rights reserved.   98
©2010 AKQA - Con dential and proprietary. All rights reserved.   99
100
©2010 AKQA - Con dential and proprietary. All rights reserved.   101
©2010 AKQA - Con dential and proprietary. All rights reserved.   102
1. Navigation help guides2. Repetitive application3. Explicit in-context instruction                                     103
104
Garamond©2010 AKQA - Con dential and proprietary. All rights reserved.   105
106
Garamond©2010 AKQA - Con dential and proprietary. All rights reserved.   107
When navigation is not explicit –users miss hidden functionality© 2010 AKQA Inc. Confidential & Proprietary   108
©2010 AKQA - Con dential and proprietary. All rights reserved.   109
110
©2010 AKQA - Con dential and proprietary. All rights reserved.   111
112
Conclusion© 2010 AKQA Inc. Confidential & Proprietary   113
New form factorNew interaction behaviors                            114
Best navigations paradigms areRelatable. Discoverable. Learnable                                     115
ank You           116
Designing iPad Interfaces - new navigation schemas
Designing iPad Interfaces - new navigation schemas
Nächste SlideShare
Wird geladen in …5
×

Designing iPad Interfaces - new navigation schemas

7.195 Aufrufe

Veröffentlicht am

Presented during SXSW interactive 2011.

Veröffentlicht in: Design
3 Kommentare
29 Gefällt mir
Statistik
Notizen
Keine Downloads
Aufrufe
Aufrufe insgesamt
7.195
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
450
Aktionen
Geteilt
0
Downloads
0
Kommentare
3
Gefällt mir
29
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Designing iPad Interfaces - new navigation schemas

  1. 1. Designing iPad Interfaces New navigation schemas© 2010 AKQA Inc. Confidential & Proprietary 1
  2. 2. Creative DirectorHead of User Experience, AKQATwitter @Lynn_Teo© 2010 AKQA Inc. Confidential & Proprietary 2
  3. 3. Remembering your rst interface© 2010 AKQA Inc. Confidential & Proprietary 3
  4. 4. 4
  5. 5. e evolution of interfaces© 2010 AKQA Inc. Confidential & Proprietary 5
  6. 6. 6
  7. 7. Range of interface interactions 7
  8. 8. Touch 8
  9. 9. Advantages of touch interfaces© 2010 AKQA Inc. Confidential & Proprietary 9
  10. 10. Touch is direct 10
  11. 11. Touch removes ambiguities 11
  12. 12. Touch leverages forms 12
  13. 13. 13
  14. 14. size shape FORMMECHANICS 14
  15. 15. 1024 x 768 15
  16. 16. PortraitLandscape 16
  17. 17. Touch interfaces and ease of use© 2010 AKQA Inc. Confidential & Proprietary 17
  18. 18. Let’s revisit a key design belief© 2010 AKQA Inc. Confidential & Proprietary 20
  19. 19. Form follows function – Louis Sullivan, American Architect (1896)©2010 AKQA - Con dential and proprietary. All rights reserved. 21
  20. 20. 22
  21. 21. 23
  22. 22. 24
  23. 23. 25
  24. 24. 26
  25. 25. 27
  26. 26. What these examples demonstrate© 2010 AKQA Inc. Confidential & Proprietary 28
  27. 27. A new relationship exists betweenform and function© 2010 AKQA Inc. Confidential & Proprietary 29
  28. 28. Form informs function 30
  29. 29. A look at iPad app navigation 31
  30. 30. Navigation schemas drawn fromfamiliar constructs are relatable. 32
  31. 31. 1. Common constructs2. Hints at physical experiences3. Familiar web/mobile concepts© 2010 AKQA Inc. Confidential & Proprietary 33
  32. 32. 1. Common constructs2. Hints at physical experiences3. Familiar web/mobile concepts© 2010 AKQA Inc. Confidential & Proprietary 34
  33. 33. Garamond©2010 AKQA - Con dential and proprietary. All rights reserved. 35
  34. 34. ©2010 AKQA - Con dential and proprietary. All rights reserved. 36
  35. 35. ©2010 AKQA - Con dential and proprietary. All rights reserved. 37
  36. 36. Garamond©2010 AKQA - Con dential and proprietary. All rights reserved. 38
  37. 37. Garamond©2010 AKQA - Con dential and proprietary. All rights reserved. 39
  38. 38. Garamond©2010 AKQA - Con dential and proprietary. All rights reserved. 40
  39. 39. ©2010 AKQA - Con dential and proprietary. All rights reserved. 41
  40. 40. Garamond©2010 AKQA - Con dential and proprietary. All rights reserved. 42
  41. 41. Garamond©2010 AKQA - Con dential and proprietary. All rights reserved. 43
  42. 42. 1. Common constructs2. Hints at physical experiences3. Familiar web/mobile concepts© 2010 AKQA Inc. Confidential & Proprietary 44
  43. 43. ©2010 AKQA - Con dential and proprietary. All rights reserved. 45
  44. 44. ©2010 AKQA - Con dential and proprietary. All rights reserved. 46
  45. 45. ©2010 AKQA - Con dential and proprietary. All rights reserved. 47
  46. 46. ©2010 AKQA - Con dential and proprietary. All rights reserved. 48
  47. 47. ©2010 AKQA - Con dential and proprietary. All rights reserved. 49
  48. 48. Garamond©2010 AKQA - Con dential and proprietary. All rights reserved. 50
  49. 49. Garamond©2010 AKQA - Con dential and proprietary. All rights reserved. 51
  50. 50. Garamond©2010 AKQA - Con dential and proprietary. All rights reserved. 52
  51. 51. 1. Common constructs2. Hints at physical experiences3. Familiar web/mobile concepts© 2010 AKQA Inc. Confidential & Proprietary 53
  52. 52. Garamond©2010 AKQA - Con dential and proprietary. All rights reserved. 54
  53. 53. ©2010 AKQA - Con dential and proprietary. All rights reserved. 55
  54. 54. Garamond©2010 AKQA - Con dential and proprietary. All rights reserved. 56
  55. 55. Garamond©2010 AKQA - Con dential and proprietary. All rights reserved. 57
  56. 56. Garamond©2010 AKQA - Con dential and proprietary. All rights reserved. 58
  57. 57. Simple, intuitive, and responsivenavigation systems arediscoverable. 59
  58. 58. 1. Intuitive2. Visual affordance3. User feedback4. Fewer options© 2010 AKQA Inc. Confidential & Proprietary 60
  59. 59. 1. Intuitive2. Visual affordance3. User feedback4. Fewer options© 2010 AKQA Inc. Confidential & Proprietary 61
  60. 60. Garamond©2010 AKQA - Con dential and proprietary. All rights reserved. 62
  61. 61. Garamond©2010 AKQA - Con dential and proprietary. All rights reserved. 63
  62. 62. Garamond©2010 AKQA - Con dential and proprietary. All rights reserved. 64
  63. 63. ©2010 AKQA - Con dential and proprietary. All rights reserved. 65
  64. 64. 66
  65. 65. 67
  66. 66. 1. Intuitive2. Visual affordance3. User feedback4. Fewer options© 2010 AKQA Inc. Confidential & Proprietary 68
  67. 67. ©2010 AKQA - Con dential and proprietary. All rights reserved. 69
  68. 68. ©2010 AKQA - Con dential and proprietary. All rights reserved. 70
  69. 69. ©2010 AKQA - Con dential and proprietary. All rights reserved. 71
  70. 70. ©2010 AKQA - Con dential and proprietary. All rights reserved. 72
  71. 71. ©2010 AKQA - Con dential and proprietary. All rights reserved. 73
  72. 72. ©2010 AKQA - Con dential and proprietary. All rights reserved. 74
  73. 73. 75
  74. 74. 1. Intuitive2. Visual affordance3. User feedback4. Fewer options© 2010 AKQA Inc. Confidential & Proprietary 76
  75. 75. ©2010 AKQA - Con dential and proprietary. All rights reserved. 77
  76. 76. ©2010 AKQA - Con dential and proprietary. All rights reserved. 78
  77. 77. ©2010 AKQA - Con dential and proprietary. All rights reserved. 79
  78. 78. ©2010 AKQA - Con dential and proprietary. All rights reserved. 80
  79. 79. ©2010 AKQA - Con dential and proprietary. All rights reserved. 81
  80. 80. ©2010 AKQA - Con dential and proprietary. All rights reserved. 82
  81. 81. ©2010 AKQA - Con dential and proprietary. All rights reserved. 83
  82. 82. 1. Intuitive2. Visual affordance3. User feedback4. Fewer options© 2010 AKQA Inc. Confidential & Proprietary 84
  83. 83. ©2010 AKQA - Con dential and proprietary. All rights reserved. 85
  84. 84. ©2010 AKQA - Con dential and proprietary. All rights reserved. 86
  85. 85. ©2010 AKQA - Con dential and proprietary. All rights reserved. 87
  86. 86. ©2010 AKQA - Con dential and proprietary. All rights reserved. 88
  87. 87. User instruction built intonavigation systems ensureinterfaces are learnable. 89
  88. 88. 1. Navigation help guides2. Repetitive application3. Explicit in-context instruction 90
  89. 89. 1. Navigation help guides2. Repetitive application3. Explicit in-context instruction 91
  90. 90. 92
  91. 91. 93
  92. 92. 1. Navigation help guides2. Repetitive application3. Explicit in-context instruction 94
  93. 93. ©2010 AKQA - Con dential and proprietary. All rights reserved. 95
  94. 94. ©2010 AKQA - Con dential and proprietary. All rights reserved. 96
  95. 95. ©2010 AKQA - Con dential and proprietary. All rights reserved. 97
  96. 96. ©2010 AKQA - Con dential and proprietary. All rights reserved. 98
  97. 97. ©2010 AKQA - Con dential and proprietary. All rights reserved. 99
  98. 98. 100
  99. 99. ©2010 AKQA - Con dential and proprietary. All rights reserved. 101
  100. 100. ©2010 AKQA - Con dential and proprietary. All rights reserved. 102
  101. 101. 1. Navigation help guides2. Repetitive application3. Explicit in-context instruction 103
  102. 102. 104
  103. 103. Garamond©2010 AKQA - Con dential and proprietary. All rights reserved. 105
  104. 104. 106
  105. 105. Garamond©2010 AKQA - Con dential and proprietary. All rights reserved. 107
  106. 106. When navigation is not explicit –users miss hidden functionality© 2010 AKQA Inc. Confidential & Proprietary 108
  107. 107. ©2010 AKQA - Con dential and proprietary. All rights reserved. 109
  108. 108. 110
  109. 109. ©2010 AKQA - Con dential and proprietary. All rights reserved. 111
  110. 110. 112
  111. 111. Conclusion© 2010 AKQA Inc. Confidential & Proprietary 113
  112. 112. New form factorNew interaction behaviors 114
  113. 113. Best navigations paradigms areRelatable. Discoverable. Learnable 115
  114. 114. ank You 116

×