Your SlideShare is downloading. ×
0
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
User Experience 102
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

User Experience 102

323

Published on

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
323
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. UX 102 UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 UX 102 UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 UX 102 UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 UX 102 UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 UX 102 UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 UX 102 UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102
  • 2. UX 102 • Why does User Experience Design exist? • Information Architecture: it's a big deal • What is a wireframe and how do I get my client to understand it? • Interaction design and how it's different from visual design • Usability is good manners • How does UX work? Agenda
  • 3. UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 Why does User Experience Design exist?
  • 4. We make sure digital stuff works for the people in front of the interface User Experience Design
  • 5. We See It Differently
  • 6. We See It Differently Programming Data Hosting People who make websites
  • 7. Text Images Feeds Videos Stuff Games We See It Differently Programming Data Hosting People who make websites
  • 8. Interface Text Images Feeds Videos Stuff Games We See It Differently Programming Data Hosting People who make websites
  • 9. Interface People who visit websites Interface Text Images Feeds Videos Stuff Games We See It Differently Programming Data Hosting People who make websites
  • 10. Interface People who visit websites Interface Text Images Feeds Videos Stuff Games We See It Differently MAGIC Programming Data Hosting People who make websites
  • 11. Interface How it should go Text Images Feeds Videos Stuff Games Interface Text Images Feeds Videos Stuff Games Building Websites Programming Data Hosting How it usually goes Programming Data Hosting
  • 12. Interface How it should go Text Images Feeds Videos Stuff Games Interface Text Images Feeds Videos Stuff Games Building Websites Programming Data Hosting How it usually goes Programming Data Hosting
  • 13. Interface How it should go Text Images Feeds Videos Stuff Games Interface Text Images Feeds Videos Stuff Games Building Websites Programming Data Hosting How it usually goes Programming Data Hosting
  • 14. THE USER! YOUare not (and neither is UX)
  • 15. What do you call the sweetened carbonated beverage in this can?
  • 16. Well, most people don’t.
  • 17. UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 Information architecture: it’s a big deal
  • 18. The art and science of organizing and labeling information Information Architecture
  • 19. We identify these: People Content Context
  • 20. Then we map them together
  • 21. Then we map them together Linear
  • 22. Then we map them together Linear Hub and Spoke
  • 23. Then we map them together Linear Hub and Spoke Narrow and Deep
  • 24. Then we map them together Linear Hub and Spoke Wide and Shallow Narrow and Deep
  • 25. You can’t have navigation without IA
  • 26. You can’t have navigation without IA People Content Context Navigation Design Sitemap
  • 27. “Information architecture is the stuff that is never rendered in pixels and it’s never rendered in code.” - Dan Klyn, The Understanding Group
  • 28. Information architecture disasters
  • 29. Information architecture disasters
  • 30. Information architecture disasters
  • 31. Information architecture disasters
  • 32. UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 And how do I get my client to understand it? What’s a wireframe
  • 33. The skeleton of a website Wireframe
  • 34. Wireframe
  • 35. content priorities Wireframe
  • 36. content priorities interactions Wireframe
  • 37. content priorities interactions initial layout Wireframe
  • 38. content priorities interactions initial layout limited colors + images Wireframe
  • 39. content priorities interactions initial layout visual design limited colors + images Wireframe
  • 40. content priorities interactions initial layout visual design final layout limited colors + images Wireframe
  • 41. content priorities interactions initial layout visual design final layout limited colors + images filled with content Wireframe
  • 42. functional elements “skeleton” Wireframe ≠ Visual Design
  • 43. functional elements “skeleton” graphical elements “surface” Wireframe ≠ Visual Design
  • 44. Wireframes = Prototypes
  • 45. Can’t we just go straight to visual design? that sounds expensive.
  • 46. What happens when you skip UX:
  • 47. • critical functional decisions aren’t made What happens when you skip UX:
  • 48. • critical functional decisions aren’t made • scope creep What happens when you skip UX:
  • 49. • critical functional decisions aren’t made • scope creep • endless design revisions What happens when you skip UX:
  • 50. • critical functional decisions aren’t made • scope creep • endless design revisions • which take longer in photoshop What happens when you skip UX:
  • 51. • critical functional decisions aren’t made • scope creep • endless design revisions • which take longer in photoshop • endless development revisions What happens when you skip UX:
  • 52. • critical functional decisions aren’t made • scope creep • endless design revisions • which take longer in photoshop • endless development revisions • obliterated budgets What happens when you skip UX:
  • 53. • critical functional decisions aren’t made • scope creep • endless design revisions • which take longer in photoshop • endless development revisions • obliterated budgets • ux ends up fixing things anyway What happens when you skip UX:
  • 54. • critical functional decisions aren’t made • scope creep • endless design revisions • which take longer in photoshop • endless development revisions • obliterated budgets • ux ends up fixing things anyway • clients get mad What happens when you skip UX:
  • 55. it’s our job to educate our clients. Wireframes can be hard to understand
  • 56. UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 and how it’s different from visual design Interaction design
  • 57. planning how a person might move through a system Interaction Design
  • 58. the aesthetic and emotional expression of a brand Visual Design (@ BR)
  • 59. Interaction Design... is goal-driven
  • 60. Interaction Design... 1 is goal-driven 2 3 4 5 6
  • 61. Interaction Design... is goal-driven
  • 62. Interaction Design... is goal-driven
  • 63. Interaction Design... is goal-driven 1
  • 64. Interaction Design... is goal-driven 1 2
  • 65. Interaction Design... is goal-driven 1 2 3
  • 66. Interaction Design... is goal-driven 1 2 3 4
  • 67. Interaction Design... is goal-driven 1 2 3 4 ?
  • 68. Interaction Design... is goal-driven 1 2 3 4 ?
  • 69. Interaction Design... provides affordances
  • 70. Interaction Design... provides affordances
  • 71. Interaction Design... provides affordances
  • 72. Interaction Design... makes things learnable
  • 73. Interaction Design... makes things learnable old: tag clouds
  • 74. Interaction Design... makes things learnable old: tag clouds new: recommended posts
  • 75. Interaction Design... makes things learnable
  • 76. Interaction Design... makes things learnable NO
  • 77. Interaction Design... makes things learnable YESNO
  • 78. UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 it’s good manners Usability
  • 79. A quality attribute used to evaluate how easy interfaces are to use. Usability
  • 80. Usability Evaluation Principles of Usability Usability Recommendations
  • 81. Usability Evaluation Principles of Usability Usability Recommendations
  • 82. Usability Testing
  • 83. Usability Testing • always done post-design
  • 84. Usability Testing • always done post-design • measures task completion
  • 85. Usability Testing • always done post-design • measures task completion • should be observed, repeatable
  • 86. Usability Testing • always done post-design • measures task completion • should be observed, repeatable • other kinds of user research may be done pre-design
  • 87. Usability Testing ≠ Focus Groups
  • 88. Usability Testing ≠ Focus Groups what people do
  • 89. Usability Testing ≠ Focus Groups what people do what people say
  • 90. Users are not designers
  • 91. Good Usability
  • 92. makes things discoverable Good Usability
  • 93. makes things discoverable gives users feedback and context Good Usability
  • 94. makes things discoverable gives users feedback and context lets users recover from errors Good Usability
  • 95. Bad Usability
  • 96. makes people feel dumb Bad Usability
  • 97. makes people feel dumb Bad Usability is disrespectful
  • 98. makes people feel dumb Bad Usability is disrespectful damages our clients’ credibility
  • 99. usability usability
  • 100. usability usability visual design, content + development
  • 101. usability usability user experience visual design, content + development
  • 102. UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 How does User Experience Design work?
  • 103. The Digital Flower
  • 104. The Digital Flower Developer
  • 105. The Digital Flower Developer AS/PR
  • 106. The Digital Flower Developer Creative, content, BAMAS/PR
  • 107. The Digital Flower Developer User Experience Creative, content, BAMAS/PR
  • 108. The Digital Flower Developer User Experience Creative, content, BAMAS/PR Producer
  • 109. The Digital Process
  • 110. The Digital Process strategy session
  • 111. The Digital Process strategy session work work work
  • 112. The Digital Process strategy session checkpoint work work work
  • 113. The Digital Process strategy session checkpoint work work work client review
  • 114. The Digital Process strategy session checkpoint work work work work work work client review
  • 115. The Digital Process strategy session checkpoint work work work work work work checkpoint client review
  • 116. The Digital Process strategy session checkpoint work work work work work work checkpoint client review client review
  • 117. The User Experience Design Process sitemap navigation design 1 2 3 4 5 6 user flows wireframes visual designusability assessment 101101101101010101101101101010 101101101101010101101101101010 101101101101010101101101101010 101101101101010101101101101010 101101101101010101101101101010 coding
  • 118. The User Experience Design Process sitemap navigation design 1 2 3 4 5 6 user flows wireframes visual designusability assessment 101101101101010101101101101010 101101101101010101101101101010 101101101101010101101101101010 101101101101010101101101101010 101101101101010101101101101010 coding
  • 119. Throughout the process, UX Design:
  • 120. Throughout the process, UX Design: • gets involved as early as possible
  • 121. Throughout the process, UX Design: • gets involved as early as possible • represents the user
  • 122. Throughout the process, UX Design: • gets involved as early as possible • represents the user • incorporates user needs with business needs
  • 123. Throughout the process, UX Design: • gets involved as early as possible • represents the user • incorporates user needs with business needs • asks questions you may never think of
  • 124. Throughout the process, UX Design: • gets involved as early as possible • represents the user • incorporates user needs with business needs • asks questions you may never think of • thinks holistically
  • 125. Throughout the process, UX Design: • gets involved as early as possible • represents the user • incorporates user needs with business needs • asks questions you may never think of • thinks holistically • zooms in and out (strategic and tactical)
  • 126. Make nice memories with your UX Designer
  • 127. Make nice memories with your UX Designer • allow early access to the client to clarify needs
  • 128. Make nice memories with your UX Designer • allow early access to the client to clarify needs • avoid playing “telephone”
  • 129. Make nice memories with your UX Designer • allow early access to the client to clarify needs • avoid playing “telephone” • we always present our own work
  • 130. Make nice memories with your UX Designer • allow early access to the client to clarify needs • avoid playing “telephone” • we always present our own work • use us to identify opportunities for new work
  • 131. UX 102 UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 UX 102 UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 UX 102 UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 UX 102 UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 UX 102 UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 UX 102 UX 102 UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102UX 102 Thanks.

×