$30 off During Our Annual Pro Sale. View Details »

Penn State 2012 Web Conference

Brad Colbow
June 11, 2012

Penn State 2012 Web Conference

Brad Colbow

June 11, 2012
Tweet

More Decks by Brad Colbow

Other Decks in Design

Transcript

  1. Monday, June 11, 12

    View Slide

  2. Monday, June 11, 12

    View Slide

  3. Monday, June 11, 12

    View Slide

  4. Monday, June 11, 12

    View Slide

  5. Monday, June 11, 12

    View Slide

  6. Monday, June 11, 12

    View Slide

  7. Monday, June 11, 12

    View Slide

  8. Monday, June 11, 12

    View Slide

  9. Monday, June 11, 12

    View Slide

  10. Monday, June 11, 12

    View Slide

  11. Monday, June 11, 12

    View Slide

  12. Monday, June 11, 12

    View Slide

  13. Monday, June 11, 12

    View Slide

  14. Monday, June 11, 12

    View Slide

  15. Monday, June 11, 12

    View Slide

  16. Monday, June 11, 12

    View Slide

  17. Monday, June 11, 12

    View Slide

  18. Monday, June 11, 12

    View Slide

  19. Monday, June 11, 12

    View Slide

  20. Monday, June 11, 12

    View Slide

  21. TIMEOUT
    Monday, June 11, 12

    View Slide

  22. Monday, June 11, 12

    View Slide

  23. Monday, June 11, 12

    View Slide

  24. Monday, June 11, 12

    View Slide

  25. >
    Monday, June 11, 12

    View Slide

  26. Monday, June 11, 12

    View Slide

  27. Monday, June 11, 12

    View Slide

  28. What is the secret to
    creating a great
    experience?
    Monday, June 11, 12

    View Slide

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

    View Slide

  32. S T E P 4
    Get a download link
    Monday, June 11, 12

    View Slide

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

    View Slide

  35. S T E P 7
    Install software
    Monday, June 11, 12

    View Slide

  36. S T E P 7 S T E P 8
    Install software Get cryptic error
    Monday, June 11, 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
    Monday, June 11, 12

    View Slide

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

    View Slide

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

    View Slide

  44. S T E P 1 6
    Start up Overdrive
    Media Player
    Monday, June 11, 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
    Monday, June 11, 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
    Monday, June 11, 12

    View Slide

  47. S T E P 1 9
    Give up on stupid
    library
    Monday, June 11, 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
    Monday, June 11, 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
    Monday, June 11, 12

    View Slide

  50. S T E P 2 2
    Enjoy your audio book
    Monday, June 11, 12

    View Slide

  51. Monday, June 11, 12

    View Slide

  52. Monday, June 11, 12

    View Slide

  53. Monday, June 11, 12

    View Slide

  54. Monday, June 11, 12

    View Slide

  55. Monday, June 11, 12

    View Slide

  56. Monday, June 11, 12

    View Slide

  57. Monday, June 11, 12

    View Slide

  58. Monday, June 11, 12

    View Slide

  59. Monday, June 11, 12

    View Slide

  60. Monday, June 11, 12

    View Slide

  61. Monday, June 11, 12

    View Slide

  62. se·lect·list
    [si-lekt-list]
    Monday, June 11, 12

    View Slide

  63. se·lect·list
    [si-lekt-list]
    ???
    Monday, June 11, 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.
    Monday, June 11, 12

    View Slide

  65. Monday, June 11, 12

    View Slide

  66. Monday, June 11, 12

    View Slide

  67. Monday, June 11, 12

    View Slide

  68. Monday, June 11, 12

    View Slide

  69. Monday, June 11, 12

    View Slide

  70. Monday, June 11, 12

    View Slide

  71. Monday, June 11, 12

    View Slide

  72. Monday, June 11, 12

    View Slide

  73. Monday, June 11, 12

    View Slide

  74. Monday, June 11, 12

    View Slide

  75. Monday, June 11, 12

    View Slide

  76. I CLEVELAND
    Monday, June 11, 12

    View Slide

  77. Monday, June 11, 12

    View Slide

  78. Monday, June 11, 12

    View Slide

  79. Monday, June 11, 12

    View Slide

  80. Monday, June 11, 12

    View Slide

  81. Monday, June 11, 12

    View Slide

  82. They don’t care
    Monday, June 11, 12

    View Slide

  83. What is the secret to
    creating a great
    experience?
    Monday, June 11, 12

    View Slide

  84. You have to care.
    Monday, June 11, 12

    View Slide

  85. Monday, June 11, 12

    View Slide

  86. Monday, June 11, 12

    View Slide

  87. Monday, June 11, 12

    View Slide

  88. Monday, June 11, 12

    View Slide

  89. Monday, June 11, 12

    View Slide


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

    Monday, June 11, 12

    View Slide

  91. Instapaper
    Monday, June 11, 12

    View Slide

  92. Monday, June 11, 12

    View Slide

  93. Monday, June 11, 12

    View Slide

  94. 2048 x 1536 1280 x 800 1024 x 600
    iPad Galaxy Tab 10.1
    Kindle Fire
    (1024 x 768)
    Monday, June 11, 12

    View Slide

  95. Monday, June 11, 12

    View Slide

  96. Monday, June 11, 12

    View Slide

  97. Monday, June 11, 12

    View Slide

  98. Monday, June 11, 12

    View Slide

  99. Monday, June 11, 12

    View Slide

  100. Monday, June 11, 12

    View Slide

  101. Platform Characteristics
    Interfacing with the Hardware
    Interface Design Elements
    Understand Design Patterns
    Best Practices
    Monday, June 11, 12

    View Slide

  102. tap double tap swipe
    pinch tap and hold
    Monday, June 11, 12

    View Slide

  103. Interfacing with the
    Hardware
    Monday, June 11, 12

    View Slide

  104. Monday, June 11, 12

    View Slide

  105. Monday, June 11, 12

    View Slide

  106. Monday, June 11, 12

    View Slide

  107. Monday, June 11, 12

    View Slide

  108. Monday, June 11, 12

    View Slide

  109. Monday, June 11, 12

    View Slide

  110. iPhone Android
    Monday, June 11, 12

    View Slide

  111. iPhone Android
    Monday, June 11, 12

    View Slide

  112. iPhone Android
    Monday, June 11, 12

    View Slide

  113. iPhone Android
    Monday, June 11, 12

    View Slide

  114. Interface design elements
    Monday, June 11, 12

    View Slide

  115. Monday, June 11, 12

    View Slide

  116. Monday, June 11, 12

    View Slide

  117. Monday, June 11, 12

    View Slide

  118. Monday, June 11, 12

    View Slide

  119. Design Patterns
    Monday, June 11, 12

    View Slide

  120. Monday, June 11, 12

    View Slide

  121. Monday, June 11, 12

    View Slide

  122. Monday, June 11, 12

    View Slide

  123. Monday, June 11, 12

    View Slide

  124. Monday, June 11, 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/
    Monday, June 11, 12

    View Slide

  126. Best Practices
    Monday, June 11, 12

    View Slide

  127. Don’t let the UI hinder the experience
    Monday, June 11, 12

    View Slide

  128. Don’t let the UI hinder the experience
    Monday, June 11, 12

    View Slide

  129. Elevate the content people care about
    Monday, June 11, 12

    View Slide

  130. Elevate the content people care about
    Monday, June 11, 12

    View Slide

  131. Elevate the content people care about
    Monday, June 11, 12

    View Slide

  132. Know where you are
    Monday, June 11, 12

    View Slide

  133. Seek ’n Spell
    Monday, June 11, 12

    View Slide

  134. Monday, June 11, 12

    View Slide

  135. Monday, June 11, 12

    View Slide

  136. Monday, June 11, 12

    View Slide

  137. Monday, June 11, 12

    View Slide

  138. Monday, June 11, 12

    View Slide

  139. Avoid forcing a user to rotate the device
    Monday, June 11, 12

    View Slide

  140. Avoid forcing a user to rotate the device
    Monday, June 11, 12

    View Slide

  141. Avoid creating new touch gestures
    Report adult content to Apple
    Monday, June 11, 12

    View Slide

  142. Avoid creating new touch gestures
    Monday, June 11, 12

    View Slide

  143. Avoid help
    Monday, June 11, 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
    Monday, June 11, 12

    View Slide

  145. Monday, June 11, 12

    View Slide

  146. Monday, June 11, 12

    View Slide

  147. Monday, June 11, 12

    View Slide

  148. Monday, June 11, 12

    View Slide

  149. Monday, June 11, 12

    View Slide

  150. Monday, June 11, 12

    View Slide

  151. Monday, June 11, 12

    View Slide

  152. Monday, June 11, 12

    View Slide

  153. Monday, June 11, 12

    View Slide

  154. Monday, June 11, 12

    View Slide

  155. Monday, June 11, 12

    View Slide

  156. Thank You
    colbowdesign.com
    @bradcolbow
    Monday, June 11, 12

    View Slide

  157. speakerdeck.com/u/bcolbow
    colbowdesign.com
    @bradcolbow
    Monday, June 11, 12

    View Slide