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

Refresh Detroit - 9/19/12

Brad Colbow
September 19, 2012
Design
0
2.8k

Refresh Detroit - 9/19/12

Brad Colbow

September 19, 2012
Tweet

More Decks by Brad Colbow

See All by Brad Colbow
Refresh Pittsburgh 11-14-12
bcolbow
0
210
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
It's the Little Things
bcolbow
3
270

Other Decks in Design

See All in Design
UXA2023 Andy Budd - Design’s Mid-Life Crisis
uxevents
PRO
0
230
UXA2023 Amelia Purvis - Your new cheat sheet for note taking and synthesis
uxaustralia
PRO
0
110
いかに開発効率と品質を高めるか: ドメイン駆動設計と組織パターンの視点から考える
j5ik2o
PRO
1
600
UIデザインワークショップ - JaSST'23 Hokkaido
garyuten
0
110
UXA2023 George Aye - That Quiet Little Voice: When Design and Ethics Collide
uxaustralia
PRO
0
120
230726_MIERUNE BBQ #03_kato
hjmkth
1
190
AI時代のUXデザインと プロンプトデザインの本質【前編】
shoty_k2
8
2.5k
FigmaとBezelではじめるXRUIプロトタイピング
akinen
1
560
Spindle UIのつくりかた / Spindle UI: From Concept to Creation
spindle
3
1.2k
UXA2023 George Aye - That Quiet Little Voice: When Design and Ethics Collide
uxevents
PRO
0
120
<form>があればゴルフもできる / If a <form> is there, you can play golf.
akwkm
0
650
企業のための言葉えらび 〜Ameba リブランディングプロジェクト〜
cyberagentdevelopers
PRO
1
420

Featured

See All Featured
Reflections from 52 weeks, 52 projects
jeffersonlam
342
18k
Robots, Beer and Maslow
schacon
154
7.6k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
271
12k
Fireside Chat
paigeccino
18
2.2k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
10
1.2k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
112
17k
Three Pipe Problems
jasonvnalue
89
9.2k
Writing Fast Ruby
sferik
615
59k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
225
50k
Testing 201, or: Great Expectations
jmmastey
26
6k
Why Our Code Smells
bkeepers
PRO
329
56k
Agile that works and the tools we love
rasmusluckow
323
20k

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