Upgrade to Pro — share decks privately, control downloads, hide ads and more …

It's the Little Things

Brad Colbow
September 26, 2011
Design
3
270

It's the Little Things

Small interface changes can have a big impact in your design. A poorly labeled button here or a feature missing there may seem insignificant but can add add up to big problems for your users. Brad shares his experience designing for mobile platforms and how small differences between iOS, Android and other platforms can really change your interface.

Brad Colbow

September 26, 2011
Tweet

More Decks by Brad Colbow

See All by Brad Colbow
Refresh Pittsburgh 11-14-12
bcolbow
0
210
Refresh Detroit - 9/19/12
bcolbow
0
2.8k
Penn State 2012 Web Conference
bcolbow
0
260
Building a Design Culture - Midwest UX
bcolbow
4
620
StirTrek
bcolbow
2
220
cropa-colbow.pdf
bcolbow
0
110
It's the Little Things - Codemash
bcolbow
8
2.4k

Other Decks in Design

See All in Design
Figmaプラグイン開発のススメ
temoki
0
330
DIST.39「Figmaを使ってベクターイラストを描く！」
marumi
1
710
230904_Geo-Lang_kato
hjmkth
0
990
Graphic Recording - Andy Budd
uxevents
PRO
0
120
20230615tdm
miure
0
120
Amebaブログ Brand Guidelines
spindle
3
440
BtoB SaaSプロダクトで「機能する」デザインシステムを目指して
sizucca
5
3.4k
SHM Illustration
thebloggart
0
260
お節介UIになってない？ ゲームに学ぶ『ちょうどいい』フォロー
aicocco
0
160
デザイナーとして動き方の変化
naoenomoto
2
990
Tokyu.rb のロゴの話
machida
0
180
東京女子プロレス「愛される団体」のためのリブランディング
cyberagentdevelopers
PRO
0
360

Featured

See All Featured
Teambox: Starting and Learning
jrom
125
8.1k
Building a Scalable Design System with Sketch
lauravandoore
453
31k
Principles of Awesome APIs and How to Build Them.
keavy
119
16k
The World Runs on Bad Software
bkeepers
PRO
59
6k
Docker and Python
trallard
31
2.3k
How to name files
jennybc
56
84k
The Brand Is Dead. Long Live the Brand.
mthomps
48
5.1k
Code Reviewing Like a Champion
maltzj
510
38k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
33
8.6k
A designer walks into a library…
pauljervisheath
199
17k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
26
5.5k
Building Better People: How to give real-time feedback that sticks.
wjessup
349
18k

Transcript

  1. Sunday, July 31, 2011

    View Slide

  2. Sunday, July 31, 2011

    View Slide

  3. Sunday, July 31, 2011

    View Slide

  4. Sunday, July 31, 2011

    View Slide

  5. Sunday, July 31, 2011

    View Slide

  6. Sunday, July 31, 2011

    View Slide

  7. Sunday, July 31, 2011

    View Slide

  8. Sunday, July 31, 2011

    View Slide

  9. Sunday, July 31, 2011

    View Slide

  10. Sunday, July 31, 2011

    View Slide

  11. Sunday, July 31, 2011

    View Slide

  12. Sunday, July 31, 2011

    View Slide

  13. Sunday, July 31, 2011

    View Slide

  14. Sunday, July 31, 2011

    View Slide

  15. Sunday, July 31, 2011

    View Slide

  16. Sunday, July 31, 2011

    View Slide

  17. Sunday, July 31, 2011

    View Slide

  18. Sunday, July 31, 2011

    View Slide

  19. Sunday, July 31, 2011

    View Slide

  20. Sunday, July 31, 2011

    View Slide

  21. S T E P 1
    Find a book you're
    interested in
    Sunday, July 31, 2011

    View Slide

  22. S T E P 1 S T E P 2
    Find a book you're
    interested in
    Add book to your cart
    Sunday, July 31, 2011

    View Slide

  23. S T E P 1 S T E P 2 S T E P 3
    Find a book you're
    interested in
    Add book to your cart
    Login and Check out
    your book
    Sunday, July 31, 2011

    View Slide

  24. S T E P 4
    Get a download link
    Sunday, July 31, 2011

    View Slide

  25. S T E P 4 S T E P 5
    Get a download link Boot up Windows
    Sunday, July 31, 2011

    View Slide

  26. S T E P 4 S T E P 5 S T E P 6
    Get a download link Boot up Windows
    Download proprietary
    software
    Sunday, July 31, 2011

    View Slide

  27. S T E P 7
    Install software
    Sunday, July 31, 2011

    View Slide

  28. S T E P 7 S T E P 8
    Install software Get cryptic error
    Sunday, July 31, 2011

    View Slide

  29. S T E P 7 S T E P 8 S T E P 9
    Install software Get cryptic error Google cryptic error
    Sunday, July 31, 2011

    View Slide

  30. S T E P 1 0
    Learn that you need an
    updated security certificate
    Sunday, July 31, 2011

    View Slide

  31. S T E P 1 0 S T E P 1 1
    Learn that you need an
    updated security certificate
    Open Windows Media
    Player
    Sunday, July 31, 2011

    View Slide

  32. S T E P 1 0 S T E P 1 1 S T E P 1 2
    Download new security
    certificate
    Learn that you need an
    updated security certificate
    Open Windows Media
    Player
    Sunday, July 31, 2011

    View Slide

  33. S T E P 1 3
    Learn that you need to update
    Windows Media Player
    Sunday, July 31, 2011

    View Slide

  34. S T E P 1 3 S T E P 1 4
    Learn that you need to update
    Windows Media Player
    Download and Install
    update
    Sunday, July 31, 2011

    View Slide

  35. S T E P 1 3 S T E P 1 4 S T E P 1 5
    Learn that you need to update
    Windows Media Player
    Download and Install
    update
    Reboot Windows
    Sunday, July 31, 2011

    View Slide

  36. S T E P 1 6
    Start up Overdrive
    Media Player
    Sunday, July 31, 2011

    View Slide

  37. S T E P 1 6 S T E P 1 7
    Get another cryptic
    error message
    Start up Overdrive
    Media Player
    Sunday, July 31, 2011

    View Slide

  38. S T E P 1 6 S T E P 1 7 S T E P 1 8
    Get another cryptic
    error message
    Insert profanity
    Start up Overdrive
    Media Player
    Sunday, July 31, 2011

    View Slide

  39. S T E P 1 9
    Give up on stupid
    library
    Sunday, July 31, 2011

    View Slide

  40. S T E P 1 9 S T E P 2 0
    Give up on stupid
    library
    Open Bit torrent site
    Sunday, July 31, 2011

    View Slide

  41. S T E P 1 9 S T E P 2 0
    Give up on stupid
    library
    Open Bit torrent site
    S T E P 2 1
    Click download
    Sunday, July 31, 2011

    View Slide

  42. S T E P 2 2
    Enjoy your audio book
    Sunday, July 31, 2011

    View Slide

  43. Sunday, July 31, 2011

    View Slide

  44. Sunday, July 31, 2011

    View Slide

  45. Sunday, July 31, 2011

    View Slide

  46. Sunday, July 31, 2011

    View Slide

  47. Sunday, July 31, 2011

    View Slide

  48. Sunday, July 31, 2011

    View Slide

  49. Sunday, July 31, 2011

    View Slide

  50. Sunday, July 31, 2011

    View Slide

  51. Sunday, July 31, 2011

    View Slide

  52. Sunday, July 31, 2011

    View Slide

  53. Sunday, July 31, 2011

    View Slide

  54. se·lect·list
    [si-lekt-list]
    Sunday, July 31, 2011

    View Slide

  55. se·lect·list
    [si-lekt-list]
    ???
    Sunday, July 31, 2011

    View Slide

  56. Nit-picking
    [nit-pi-king]
    Nitpicking is the act of removing nits
    (the eggs of lice, generally head lice)
    from the host's hair.
    Sunday, July 31, 2011

    View Slide

  57. Sunday, July 31, 2011

    View Slide

  58. Sunday, July 31, 2011

    View Slide

  59. Sunday, July 31, 2011

    View Slide

  60. Sunday, July 31, 2011

    View Slide

  61. Sunday, July 31, 2011

    View Slide

  62. Sunday, July 31, 2011

    View Slide

  63. Sunday, July 31, 2011

    View Slide

  64. Sunday, July 31, 2011

    View Slide

  65. Sunday, July 31, 2011

    View Slide

  66. Sunday, July 31, 2011

    View Slide

  67. Sunday, July 31, 2011

    View Slide

  68. Sunday, July 31, 2011

    View Slide

  69. Sunday, July 31, 2011

    View Slide

  70. I CLEVELAND
    Sunday, July 31, 2011

    View Slide

  71. Sunday, July 31, 2011

    View Slide

  72. Sunday, July 31, 2011

    View Slide

  73. Sunday, July 31, 2011

    View Slide

  74. Sunday, July 31, 2011

    View Slide

  75. Sunday, July 31, 2011

    View Slide

  76. They don’t care
    Sunday, July 31, 2011

    View Slide

  77. What is the secret to
    creating a great
    experience?
    Sunday, July 31, 2011

    View Slide

  78. (Dramatic pause)
    Sunday, July 31, 2011

    View Slide

  79. You have to care.
    Sunday, July 31, 2011

    View Slide

  80. Sunday, July 31, 2011

    View Slide

  81. Sunday, July 31, 2011

    View Slide

  82. Sunday, July 31, 2011

    View Slide

  83. Sunday, July 31, 2011

    View Slide

  84. Sunday, July 31, 2011

    View Slide

  85. Sunday, July 31, 2011

    View Slide

  86. Sunday, July 31, 2011

    View Slide

  87. Sunday, July 31, 2011

    View Slide

  88. Sunday, July 31, 2011

    View Slide

  89. Sunday, July 31, 2011

    View Slide

  90. Sunday, July 31, 2011

    View Slide

  91. Sunday, July 31, 2011

    View Slide


  92. Username or Email
    class="text-input" id="login" name="login" tabindex="1"
    type="text" value="" />

    Sunday, July 31, 2011

    View Slide

  93. Sunday, July 31, 2011

    View Slide

  94. Sunday, July 31, 2011

    View Slide

  95. Sunday, July 31, 2011

    View Slide

  96. Sunday, July 31, 2011

    View Slide

  97. Sunday, July 31, 2011

    View Slide

  98. Sunday, July 31, 2011

    View Slide

  99. Sunday, July 31, 2011

    View Slide

  100. Sunday, July 31, 2011

    View Slide

  101. Sunday, July 31, 2011

    View Slide

  102. Sunday, July 31, 2011

    View Slide

  103. Sunday, July 31, 2011

    View Slide

  104. 1024 x 768 1280 x 800 1024 x 600
    HP Motorola Xoom
    Blackberry
    Sunday, July 31, 2011

    View Slide

  105. Sunday, July 31, 2011

    View Slide

  106. Sunday, July 31, 2011

    View Slide

  107. Platform Characteristics
    Interfacing with the Hardware
    Design Processes
    Interface design elements
    Best Practices
    Sunday, July 31, 2011

    View Slide

  108. tap double tap swipe
    pinch tap and hold
    Sunday, July 31, 2011

    View Slide

  109. Interfacing with the
    Hardware
    Sunday, July 31, 2011

    View Slide

  110. Sunday, July 31, 2011

    View Slide

  111. Sunday, July 31, 2011

    View Slide

  112. Sunday, July 31, 2011

    View Slide

  113. Sunday, July 31, 2011

    View Slide

  114. Sunday, July 31, 2011

    View Slide

  115. iPhone Android
    Sunday, July 31, 2011

    View Slide

  116. iPhone Android
    Sunday, July 31, 2011

    View Slide

  117. iPhone WebOS
    Sunday, July 31, 2011

    View Slide

  118. Sunday, July 31, 2011

    View Slide

  119. Design Processes
    Sunday, July 31, 2011

    View Slide

  120. Process
    Sunday, July 31, 2011

    View Slide

  121. Interface design elements
    Sunday, July 31, 2011

    View Slide

  122. Sunday, July 31, 2011

    View Slide

  123. Sunday, July 31, 2011

    View Slide

  124. Sunday, July 31, 2011

    View Slide

  125. Sunday, July 31, 2011

    View Slide

  126. Sunday, July 31, 2011

    View Slide

  127. Best Practices
    Sunday, July 31, 2011

    View Slide

  128. Don’t let the UI hinder the experience
    Sunday, July 31, 2011

    View Slide

  129. Don’t let the UI hinder the experience
    Sunday, July 31, 2011

    View Slide

  130. Elevate the content people care about
    Sunday, July 31, 2011

    View Slide

  131. Elevate the content people care about
    Sunday, July 31, 2011

    View Slide

  132. Elevate the content people care about
    Sunday, July 31, 2011

    View Slide

  133. Minimize user input
    Sunday, July 31, 2011

    View Slide

  134. Minimize user input
    Sunday, July 31, 2011

    View Slide

  135. Plan for Interruptions
    Sunday, July 31, 2011

    View Slide

  136. Don't design for the power user
    Sunday, July 31, 2011

    View Slide

  137. Don't design for the power user
    Sunday, July 31, 2011

    View Slide

  138. Delight with stunning graphics
    Sunday, July 31, 2011

    View Slide

  139. Avoid forcing a user to rotate the device
    Sunday, July 31, 2011

    View Slide

  140. Avoid forcing a user to rotate the device
    Sunday, July 31, 2011

    View Slide

  141. Avoid creating new touch gestures
    Report adult content to Apple
    Sunday, July 31, 2011

    View Slide

  142. Avoid creating new touch gestures
    Sunday, July 31, 2011

    View Slide

  143. Avoid help
    Sunday, July 31, 2011

    View Slide

  144. http://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/Introduction/Introduction.html
    Apple iOS
    http://developer.android.com/guide/practices/ui_guidelines/index.html
    http://www.mutualmobile.com/2011/android-design-guidelines-version-1-1-honeycomb/
    Android
    http://docs.blackberry.com/en/developers/deliverables/17965/index.jsp?name=UI+Guidelines+-+BlackBerry
    +Smartphones6.0&language=English&userType=21&category=Java+Development+Guidelines&subCategory=
    BlackBerry
    http://go.microsoft.com/fwlink/?LinkID=183218
    Windows Phone 7
    https://developer.palm.com/content/api/design/mojo/hi-guidelines.html
    HP- Palm webOS
    Sunday, July 31, 2011

    View Slide

  145. Sunday, July 31, 2011

    View Slide

  146. Sunday, July 31, 2011

    View Slide

  147. Sunday, July 31, 2011

    View Slide

  148. Sunday, July 31, 2011

    View Slide

  149. Sunday, July 31, 2011

    View Slide

  150. Sunday, July 31, 2011

    View Slide

  151. Sunday, July 31, 2011

    View Slide

  152. Sunday, July 31, 2011

    View Slide

  153. Sunday, July 31, 2011

    View Slide

  154. Sunday, July 31, 2011

    View Slide

  155. Sunday, July 31, 2011

    View Slide

  156. Thank You
    Sunday, July 31, 2011

    View Slide

  157. Thank You
    colbowdesign.com
    @bradcolbow
    Sunday, July 31, 2011

    View Slide