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

Refresh Detroit - 9/19/12

Brad Colbow
September 19, 2012

Refresh Detroit - 9/19/12

Brad Colbow

September 19, 2012
Tweet

More Decks by Brad Colbow

Other Decks in Design

Transcript

  1. Wednesday, September 19, 12

    View Slide

  2. Wednesday, September 19, 12

    View Slide

  3. Wednesday, September 19, 12

    View Slide

  4. Wednesday, September 19, 12

    View Slide

  5. Wednesday, September 19, 12

    View Slide

  6. Wednesday, September 19, 12

    View Slide

  7. Wednesday, September 19, 12

    View Slide

  8. Wednesday, September 19, 12

    View Slide

  9. Wednesday, September 19, 12

    View Slide

  10. Wednesday, September 19, 12

    View Slide

  11. Wednesday, September 19, 12

    View Slide

  12. Wednesday, September 19, 12

    View Slide

  13. Wednesday, September 19, 12

    View Slide

  14. Wednesday, September 19, 12

    View Slide

  15. Wednesday, September 19, 12

    View Slide

  16. Wednesday, September 19, 12

    View Slide

  17. Wednesday, September 19, 12

    View Slide

  18. Wednesday, September 19, 12

    View Slide

  19. Wednesday, September 19, 12

    View Slide

  20. Wednesday, September 19, 12

    View Slide

  21. TIMEOUT
    Wednesday, September 19, 12

    View Slide

  22. Wednesday, September 19, 12

    View Slide

  23. Wednesday, September 19, 12

    View Slide

  24. Wednesday, September 19, 12

    View Slide

  25. >
    Wednesday, September 19, 12

    View Slide

  26. Wednesday, September 19, 12

    View Slide

  27. Wednesday, September 19, 12

    View Slide

  28. What is the secret to
    creating a great
    experience?
    Wednesday, September 19, 12

    View Slide

  29. S T E P 1
    Find a book you're
    interested in
    Wednesday, September 19, 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
    Wednesday, September 19, 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
    Wednesday, September 19, 12

    View Slide

  32. S T E P 4
    Get a download link
    Wednesday, September 19, 12

    View Slide

  33. S T E P 4 S T E P 5
    Get a download link Boot up Windows
    Wednesday, September 19, 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
    Wednesday, September 19, 12

    View Slide

  35. S T E P 7
    Install software
    Wednesday, September 19, 12

    View Slide

  36. S T E P 7 S T E P 8
    Install software Get cryptic error
    Wednesday, September 19, 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
    Wednesday, September 19, 12

    View Slide

  38. S T E P 1 0
    Learn that you need an
    updated security certificate
    Wednesday, September 19, 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
    Wednesday, September 19, 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
    Wednesday, September 19, 12

    View Slide

  41. S T E P 1 3
    Learn that you need to update
    Windows Media Player
    Wednesday, September 19, 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
    Wednesday, September 19, 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
    Wednesday, September 19, 12

    View Slide

  44. S T E P 1 6
    Start up Overdrive
    Media Player
    Wednesday, September 19, 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
    Wednesday, September 19, 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
    Wednesday, September 19, 12

    View Slide

  47. S T E P 1 9
    Give up on stupid
    library
    Wednesday, September 19, 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
    Wednesday, September 19, 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
    Wednesday, September 19, 12

    View Slide

  50. S T E P 2 2
    Enjoy your audio book
    Wednesday, September 19, 12

    View Slide

  51. Wednesday, September 19, 12

    View Slide

  52. Wednesday, September 19, 12

    View Slide

  53. Wednesday, September 19, 12

    View Slide

  54. Wednesday, September 19, 12

    View Slide

  55. Wednesday, September 19, 12

    View Slide

  56. Wednesday, September 19, 12

    View Slide

  57. Wednesday, September 19, 12

    View Slide

  58. Wednesday, September 19, 12

    View Slide

  59. Wednesday, September 19, 12

    View Slide

  60. Wednesday, September 19, 12

    View Slide

  61. Wednesday, September 19, 12

    View Slide

  62. se·lect·list
    [si-lekt-list]
    Wednesday, September 19, 12

    View Slide

  63. se·lect·list
    [si-lekt-list]
    ???
    Wednesday, September 19, 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.
    Wednesday, September 19, 12

    View Slide

  65. Wednesday, September 19, 12

    View Slide

  66. Wednesday, September 19, 12

    View Slide

  67. Wednesday, September 19, 12

    View Slide

  68. Wednesday, September 19, 12

    View Slide

  69. Wednesday, September 19, 12

    View Slide

  70. Wednesday, September 19, 12

    View Slide

  71. Wednesday, September 19, 12

    View Slide

  72. Wednesday, September 19, 12

    View Slide

  73. Wednesday, September 19, 12

    View Slide

  74. Wednesday, September 19, 12

    View Slide

  75. Wednesday, September 19, 12

    View Slide

  76. I CLEVELAND
    Wednesday, September 19, 12

    View Slide

  77. Wednesday, September 19, 12

    View Slide

  78. Wednesday, September 19, 12

    View Slide

  79. Wednesday, September 19, 12

    View Slide

  80. Wednesday, September 19, 12

    View Slide

  81. Wednesday, September 19, 12

    View Slide

  82. They don’t care
    Wednesday, September 19, 12

    View Slide

  83. What is the secret to
    creating a great
    experience?
    Wednesday, September 19, 12

    View Slide

  84. You have to care.
    Wednesday, September 19, 12

    View Slide

  85. Wednesday, September 19, 12

    View Slide

  86. Wednesday, September 19, 12

    View Slide

  87. Wednesday, September 19, 12

    View Slide

  88. Wednesday, September 19, 12

    View Slide

  89. Wednesday, September 19, 12

    View Slide


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

    Wednesday, September 19, 12

    View Slide

  91. Instapaper
    Wednesday, September 19, 12

    View Slide

  92. Wednesday, September 19, 12

    View Slide

  93. Wednesday, September 19, 12

    View Slide

  94. 2048 x 1536 1280 x 800 1024 x 600
    iPad Galaxy Tab 10.1
    Kindle Fire
    (1024 x 768)
    Wednesday, September 19, 12

    View Slide

  95. Wednesday, September 19, 12

    View Slide

  96. Wednesday, September 19, 12

    View Slide

  97. Wednesday, September 19, 12

    View Slide

  98. Wednesday, September 19, 12

    View Slide

  99. Wednesday, September 19, 12

    View Slide

  100. Wednesday, September 19, 12

    View Slide

  101. Platform Characteristics
    Interfacing with the Hardware
    Interface Design Elements
    Understand Design Patterns
    Best Practices
    Wednesday, September 19, 12

    View Slide

  102. tap double tap swipe
    pinch tap and hold
    Wednesday, September 19, 12

    View Slide

  103. Interfacing with the
    Hardware
    Wednesday, September 19, 12

    View Slide

  104. Wednesday, September 19, 12

    View Slide

  105. Wednesday, September 19, 12

    View Slide

  106. Wednesday, September 19, 12

    View Slide

  107. Wednesday, September 19, 12

    View Slide

  108. Wednesday, September 19, 12

    View Slide

  109. Wednesday, September 19, 12

    View Slide

  110. iPhone Android
    Wednesday, September 19, 12

    View Slide

  111. iPhone Android
    Wednesday, September 19, 12

    View Slide

  112. iPhone Android
    Wednesday, September 19, 12

    View Slide

  113. iPhone Android
    Wednesday, September 19, 12

    View Slide

  114. Interface design elements
    Wednesday, September 19, 12

    View Slide

  115. Wednesday, September 19, 12

    View Slide

  116. Wednesday, September 19, 12

    View Slide

  117. Wednesday, September 19, 12

    View Slide

  118. Wednesday, September 19, 12

    View Slide

  119. Design Patterns
    Wednesday, September 19, 12

    View Slide

  120. Wednesday, September 19, 12

    View Slide

  121. Wednesday, September 19, 12

    View Slide

  122. Wednesday, September 19, 12

    View Slide

  123. Wednesday, September 19, 12

    View Slide

  124. Wednesday, September 19, 12

    View Slide

  125. an accent like a simple one-pixel stroke may
    look terrific on Android devices with a high
    resolution, “then we pull out a handful of older
    devices and it just looks bad.”
    Hipmunk generates its Android assets at
    three resolutions: 1x for older devices, 2x for
    high-resolution devices, and an awkward 1.5x
    resolution for other devices — a necessity to
    avoid “weird artifacting,” as Campos puts it.
    But some developers may skip this high level
    of support for outlier devices, leading to blurry,
    jaggy visuals for an unlucky few.
    http://www.wired.com/gadgetlab/2012/04/easier-design-apps-ios/
    Wednesday, September 19, 12

    View Slide

  126. Best Practices
    Wednesday, September 19, 12

    View Slide

  127. Don’t let the UI hinder the experience
    Wednesday, September 19, 12

    View Slide

  128. Don’t let the UI hinder the experience
    Wednesday, September 19, 12

    View Slide

  129. Elevate the content people care about
    Wednesday, September 19, 12

    View Slide

  130. Elevate the content people care about
    Wednesday, September 19, 12

    View Slide

  131. Elevate the content people care about
    Wednesday, September 19, 12

    View Slide

  132. Know where you are
    Wednesday, September 19, 12

    View Slide

  133. Seek ’n Spell
    Wednesday, September 19, 12

    View Slide

  134. Wednesday, September 19, 12

    View Slide

  135. Wednesday, September 19, 12

    View Slide

  136. Wednesday, September 19, 12

    View Slide

  137. Wednesday, September 19, 12

    View Slide

  138. Wednesday, September 19, 12

    View Slide

  139. Avoid forcing a user to rotate the device
    Wednesday, September 19, 12

    View Slide

  140. Avoid forcing a user to rotate the device
    Wednesday, September 19, 12

    View Slide

  141. Avoid creating new touch gestures
    Report adult content to Apple
    Wednesday, September 19, 12

    View Slide

  142. Avoid creating new touch gestures
    Wednesday, September 19, 12

    View Slide

  143. Avoid help
    Wednesday, September 19, 12

    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://developer.android.com/design/index.html
    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://msdn.microsoft.com/en-us/library/hh202915(v=VS.92).aspx
    Windows Phone 7
    Wednesday, September 19, 12

    View Slide

  145. Wednesday, September 19, 12

    View Slide

  146. Wednesday, September 19, 12

    View Slide

  147. Wednesday, September 19, 12

    View Slide

  148. Wednesday, September 19, 12

    View Slide

  149. Wednesday, September 19, 12

    View Slide

  150. Wednesday, September 19, 12

    View Slide

  151. Wednesday, September 19, 12

    View Slide

  152. Wednesday, September 19, 12

    View Slide

  153. Wednesday, September 19, 12

    View Slide

  154. Wednesday, September 19, 12

    View Slide

  155. Wednesday, September 19, 12

    View Slide

  156. Thank You
    colbowdesign.com
    @bradcolbow
    Wednesday, September 19, 12

    View Slide

  157. speakerdeck.com/u/bcolbow
    colbowdesign.com
    @bradcolbow
    Wednesday, September 19, 12

    View Slide