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

It's the Little Things - Codemash

Brad Colbow
January 12, 2012

It's the Little Things - Codemash

Slides from Codemash 2012

Brad Colbow

January 12, 2012
Tweet

More Decks by Brad Colbow

Other Decks in Design

Transcript

  1. Thursday, January 12, 12

    View Slide

  2. Thursday, January 12, 12

    View Slide

  3. Thursday, January 12, 12

    View Slide

  4. Thursday, January 12, 12

    View Slide

  5. Thursday, January 12, 12

    View Slide

  6. Thursday, January 12, 12

    View Slide

  7. Thursday, January 12, 12

    View Slide

  8. Thursday, January 12, 12

    View Slide

  9. Thursday, January 12, 12

    View Slide

  10. Thursday, January 12, 12

    View Slide

  11. Thursday, January 12, 12

    View Slide

  12. Thursday, January 12, 12

    View Slide

  13. Thursday, January 12, 12

    View Slide

  14. Thursday, January 12, 12

    View Slide

  15. Thursday, January 12, 12

    View Slide

  16. Thursday, January 12, 12

    View Slide

  17. Thursday, January 12, 12

    View Slide

  18. Thursday, January 12, 12

    View Slide

  19. Thursday, January 12, 12

    View Slide

  20. Thursday, January 12, 12

    View Slide

  21. TIMEOUT
    Thursday, January 12, 12

    View Slide

  22. My website
    Industry magazines
    Long informative comics
    Thursday, January 12, 12

    View Slide

  23. What brings me here
    today is my day job.
    As I was having this
    terrible experience with
    the library I was just
    starting in on my first
    Thursday, January 12, 12

    View Slide

  24. HTML
    Thursday, January 12, 12

    View Slide

  25. >
    In order to have a successful digital
    magazine it had to be better in some
    way to its print counterpart.
    Thursday, January 12, 12

    View Slide

  26. If you look at digital music or books you
    can make the argument that digital is
    better because you can carry around
    thousands of them with ease.
    Thursday, January 12, 12

    View Slide

  27. There were 2 things that we needed to
    understand.
    The first is we had to know the
    differences between these platforms
    (iPad, Android, Windows Phone,
    Blackberry)
    The second is that we had to understand
    how to make a great user experience
    across platforms.
    Thursday, January 12, 12

    View Slide

  28. What is the secret to
    creating a great
    experience?
    Thursday, January 12, 12

    View Slide

  29. S T E P 1
    Find a book you're
    interested in
    Thursday, January 12, 12

    View Slide

  30. S T E P 1 S T E P 2
    Find a book you're
    interested in
    Add book to your cart
    Thursday, January 12, 12

    View Slide

  31. 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
    Thursday, January 12, 12

    View Slide

  32. S T E P 4
    Get a download link
    Thursday, January 12, 12

    View Slide

  33. S T E P 4 S T E P 5
    Get a download link Boot up Windows
    Thursday, January 12, 12

    View Slide

  34. 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
    Thursday, January 12, 12

    View Slide

  35. S T E P 7
    Install software
    Thursday, January 12, 12

    View Slide

  36. S T E P 7 S T E P 8
    Install software Get cryptic error
    Thursday, January 12, 12

    View Slide

  37. S T E P 7 S T E P 8 S T E P 9
    Install software Get cryptic error Google cryptic error
    Thursday, January 12, 12

    View Slide

  38. S T E P 1 0
    Learn that you need an
    updated security certificate
    Thursday, January 12, 12

    View Slide

  39. S T E P 1 0 S T E P 1 1
    Learn that you need an
    updated security certificate
    Open Windows Media
    Player
    Thursday, January 12, 12

    View Slide

  40. 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
    Thursday, January 12, 12

    View Slide

  41. S T E P 1 3
    Learn that you need to update
    Windows Media Player
    Thursday, January 12, 12

    View Slide

  42. 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
    Thursday, January 12, 12

    View Slide

  43. 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
    Thursday, January 12, 12

    View Slide

  44. S T E P 1 6
    Start up Overdrive
    Media Player
    Thursday, January 12, 12

    View Slide

  45. S T E P 1 6 S T E P 1 7
    Get another cryptic
    error message
    Start up Overdrive
    Media Player
    Thursday, January 12, 12

    View Slide

  46. 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
    Thursday, January 12, 12

    View Slide

  47. S T E P 1 9
    Give up on stupid
    library
    Thursday, January 12, 12

    View Slide

  48. S T E P 1 9 S T E P 2 0
    Give up on stupid
    library
    Open Bit torrent site
    Thursday, January 12, 12

    View Slide

  49. 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
    Thursday, January 12, 12

    View Slide

  50. S T E P 2 2
    Enjoy your audio book
    Thursday, January 12, 12

    View Slide

  51. Thursday, January 12, 12

    View Slide

  52. Thursday, January 12, 12

    View Slide

  53. Thursday, January 12, 12

    View Slide

  54. Thursday, January 12, 12

    View Slide

  55. Thursday, January 12, 12

    View Slide

  56. Thursday, January 12, 12

    View Slide

  57. Thursday, January 12, 12

    View Slide

  58. Thursday, January 12, 12

    View Slide

  59. Thursday, January 12, 12

    View Slide

  60. Thursday, January 12, 12

    View Slide

  61. Thursday, January 12, 12

    View Slide

  62. se·lect·list
    [si-lekt-list]
    Thursday, January 12, 12

    View Slide

  63. se·lect·list
    [si-lekt-list]
    ???
    Thursday, January 12, 12

    View Slide

  64. Nit-picking
    [nit-pi-king]
    Nitpicking is the act of removing nits
    (the eggs of lice, generally head lice)
    from the host's hair.
    Thursday, January 12, 12

    View Slide

  65. Thursday, January 12, 12

    View Slide

  66. Thursday, January 12, 12

    View Slide

  67. Thursday, January 12, 12

    View Slide

  68. Thursday, January 12, 12

    View Slide

  69. Thursday, January 12, 12

    View Slide

  70. Thursday, January 12, 12

    View Slide

  71. Thursday, January 12, 12

    View Slide

  72. Thursday, January 12, 12

    View Slide

  73. Thursday, January 12, 12

    View Slide

  74. Thursday, January 12, 12

    View Slide

  75. Thursday, January 12, 12

    View Slide

  76. I CLEVELAND
    Thursday, January 12, 12

    View Slide

  77. Thursday, January 12, 12

    View Slide

  78. Thursday, January 12, 12

    View Slide

  79. Thursday, January 12, 12

    View Slide

  80. Thursday, January 12, 12

    View Slide

  81. Thursday, January 12, 12

    View Slide

  82. They don’t care
    Thursday, January 12, 12

    View Slide

  83. What is the secret to
    creating a great
    experience?
    Thursday, January 12, 12

    View Slide

  84. You have to care.
    Thursday, January 12, 12

    View Slide

  85. Thursday, January 12, 12

    View Slide

  86. Thursday, January 12, 12

    View Slide

  87. Thursday, January 12, 12

    View Slide

  88. Thursday, January 12, 12

    View Slide

  89. Thursday, January 12, 12

    View Slide


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

    Thursday, January 12, 12

    View Slide

  91. Thursday, January 12, 12

    View Slide

  92. Instapaper
    Thursday, January 12, 12

    View Slide

  93. Thursday, January 12, 12

    View Slide

  94. Thursday, January 12, 12

    View Slide

  95. Thursday, January 12, 12

    View Slide

  96. 1024 x 768 1280 x 800 1024 x 600
    iPad Motorola Xoom
    Kindle Fire
    Thursday, January 12, 12

    View Slide

  97. Thursday, January 12, 12

    View Slide

  98. Thursday, January 12, 12

    View Slide

  99. Thursday, January 12, 12

    View Slide

  100. Thursday, January 12, 12

    View Slide

  101. Thursday, January 12, 12

    View Slide

  102. Thursday, January 12, 12

    View Slide

  103. Platform Characteristics
    Interfacing with the Hardware
    Interface Design Elements
    Understand Design Patterns
    Best Practices
    Thursday, January 12, 12

    View Slide

  104. tap double tap swipe
    pinch tap and hold
    Thursday, January 12, 12

    View Slide

  105. Interfacing with the
    Hardware
    Thursday, January 12, 12

    View Slide

  106. Thursday, January 12, 12

    View Slide

  107. Thursday, January 12, 12

    View Slide

  108. Thursday, January 12, 12

    View Slide

  109. Thursday, January 12, 12

    View Slide

  110. Thursday, January 12, 12

    View Slide

  111. iPhone Android
    Thursday, January 12, 12

    View Slide

  112. iPhone Android
    Thursday, January 12, 12

    View Slide

  113. Thursday, January 12, 12

    View Slide

  114. Interface design elements
    Thursday, January 12, 12

    View Slide

  115. Thursday, January 12, 12

    View Slide

  116. Thursday, January 12, 12

    View Slide

  117. Thursday, January 12, 12

    View Slide

  118. Thursday, January 12, 12

    View Slide

  119. Thursday, January 12, 12

    View Slide

  120. Design Patterns
    Thursday, January 12, 12

    View Slide

  121. Thursday, January 12, 12

    View Slide

  122. Thursday, January 12, 12

    View Slide

  123. Thursday, January 12, 12

    View Slide

  124. Thursday, January 12, 12

    View Slide

  125. Best Practices
    Thursday, January 12, 12

    View Slide

  126. Don’t let the UI hinder the experience
    Thursday, January 12, 12

    View Slide

  127. Don’t let the UI hinder the experience
    Thursday, January 12, 12

    View Slide

  128. Elevate the content people care about
    Thursday, January 12, 12

    View Slide

  129. Elevate the content people care about
    Thursday, January 12, 12

    View Slide

  130. Elevate the content people care about
    Thursday, January 12, 12

    View Slide

  131. Know where you are
    Thursday, January 12, 12

    View Slide

  132. Seek ’n Spell
    Thursday, January 12, 12

    View Slide

  133. Thursday, January 12, 12

    View Slide

  134. Thursday, January 12, 12

    View Slide

  135. Thursday, January 12, 12

    View Slide

  136. Thursday, January 12, 12

    View Slide

  137. Thursday, January 12, 12

    View Slide

  138. Avoid forcing a user to rotate the device
    Thursday, January 12, 12

    View Slide

  139. Avoid forcing a user to rotate the device
    Thursday, January 12, 12

    View Slide

  140. Avoid creating new touch gestures
    Report adult content to Apple
    Thursday, January 12, 12

    View Slide

  141. Avoid creating new touch gestures
    Thursday, January 12, 12

    View Slide

  142. Avoid help
    Thursday, January 12, 12

    View Slide

  143. 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
    Thursday, January 12, 12

    View Slide

  144. Thursday, January 12, 12

    View Slide

  145. Thursday, January 12, 12

    View Slide

  146. Thursday, January 12, 12

    View Slide

  147. Thursday, January 12, 12

    View Slide

  148. Thursday, January 12, 12

    View Slide

  149. Thursday, January 12, 12

    View Slide

  150. Thursday, January 12, 12

    View Slide

  151. Thursday, January 12, 12

    View Slide

  152. Thursday, January 12, 12

    View Slide

  153. Thursday, January 12, 12

    View Slide

  154. Thursday, January 12, 12

    View Slide

  155. Thank You
    colbowdesign.com
    @bradcolbow
    Thursday, January 12, 12

    View Slide

  156. Thank You
    colbowdesign.com
    @bradcolbow
    Thursday, January 12, 12

    View Slide