User Centered Design & User Experience
82 likes8,716 views
The document discusses user-centered design (UCD) and user experience (UX). It defines UCD as an approach that grounds the design process in information about the intended users. UCD focuses on users throughout planning, design, and development. The document also discusses how UX relates to usability and emphasizes the importance of testing designs with users.
User Centered Design & User Experience
- 1. USER CENTERED DESIGN & USER EXPERIENCE * * MAY CONTAIN GUMBALLS
- 2. HI! I AM WOUTER WALGRAEVE AND I WORK AT NASCOM
- 3. I’M AN INFORMATION ARCHITECT.
- 4. WHAT IS UCD?
- 5. SO… WHAT IS UX THEN?
- 6. WAIT… WHAT HAPPENED TO USABILITY?
- 9. IT’S ALL ABOUT THE USERS
- 10. USER-CENTERED DESIGN (UCD) IS AN APPROACH TO DESIGN THAT GROUNDS THE PROCESS IN INFORMATION ABOUT THE PEOPLE WHO WILL USE THE PRODUCT. UCD PROCESSES FOCUS ON USERS THROUGH THE PLANNING, DESIGN AND DEVELOPMENT OF A PRODUCT.* * Boring definition from http://www.upassoc.org/usability_resources/about_usability/what_is_ucd.html
- 11. USER-CENTERED DESIGN (UCD) IS AN APPROACH TO DESIGN THAT GROUNDS THE PROCESS IN INFORMATION ABOUT THE PEOPLE WHO WILL USE THE PRODUCT. UCD PROCESSES FOCUS ON USERS THROUGH THE PLANNING, DESIGN AND DEVELOPMENT OF A PRODUCT.
- 12. USER-CENTERED DESIGN (UCD) IS AN APPROACH TO DESIGN THAT GROUNDS THE PROCESS IN INFORMATION ABOUT THE PEOPLE WHO WILL USE THE PRODUCT. UCD PROCESSES FOCUS ON USERS THROUGH THE PLANNING, DESIGN AND DEVELOPMENT OF A PRODUCT.
- 13. BOSS != USER SPONSOR CLIENT ...
- 14. USER-CENTERED DESIGN (UCD) IS AN APPROACH TO DESIGN THAT GROUNDS THE PROCESS IN INFORMATION ABOUT THE PEOPLE WHO WILL USE THE PRODUCT. UCD PROCESSES FOCUS ON USERS THROUGH THE PLANNING, DESIGN AND DEVELOPMENT OF A PRODUCT.
- 15. USER-CENTERED DESIGN (UCD) IS AN APPROACH TO DESIGN THAT GROUNDS THE PROCESS IN INFORMATION ABOUT THE PEOPLE WHO WILL USE THE PRODUCT. UCD PROCESSES FOCUS ON USERS THROUGH THE PLANNING, DESIGN AND DEVELOPMENT OF A PRODUCT.
- 16. “IF YOU WANT TO WIN THE RACE,YOU HAVE TO RUN THE ENTIRE COURSE.”
- 17. THERE IS NO UX SUPERMAN.
- 18. USER-CENTERED DESIGN (UCD) IS AN APPROACH TO DESIGN THAT GROUNDS THE PROCESS IN INFORMATION ABOUT THE PEOPLE WHO WILL USE THE PRODUCT. UCD PROCESSES FOCUS ON USERS THROUGH THE PLANNING, DESIGN AND DEVELOPMENT OF A PRODUCT.
- 19. USER-CENTERED DESIGN (UCD) IS AN APPROACH TO DESIGN THAT GROUNDS THE PROCESS IN INFORMATION ABOUT THE PEOPLE WHO WILL USE THE PRODUCT. UCD PROCESSES FOCUS ON USERS THROUGH THE PLANNING, DESIGN AND DEVELOPMENT OF A PRODUCT.
- 20. “WE ARE NOT THE USABILITY POLICE”
- 22. WHY UCD?
- 23. DESIGN WITHOUT ANALYSIS WON’T SOLVE THE RIGHT PROBLEM.? YOU NEED TO KNOW WHY THEY WANT TO FIRE A GUN.
- 24. “IF THE USER CAN’T USE IT, IT DOESN’T WORK.” SUSAN DRAY
- 25. CLIMB THE USER MEANINGFUL EXPERIENCE HIERARCHY OF PLEASURABLE NEEDS. CONVENIENT ACCEPTANCE USABLE RELIABLE FUNCTIONAL
- 28. LET’S TALK ABOUT METHODOLOGY.
- 32. * LET’S TAKE THE FAST LANE.
- 33. 1. ANALYZE UNDERSTAND THE PEOPLE WHO WILL USE THE DESIGN.
- 34. LISTEN TO THE USERS DO AN INQUIRY, AS QUESTIONS. AND ASK THEM AGAIN…
- 38. CLEAN UP THE MESS… CREATE PERSONAS.
- 40. PERSONAS EMBODY GROUPS OF USERS WHO ARE SIMILAR
- 41. PERSONALITY BEHAVIOR HABITS MOTIVATIONS FEARS PERSONAS EMBODY GROUPS OF USERS WHO ARE SIMILAR GOALS EXPECTATIONS TASKS
- 42. PERSONAS ARE A TOOL, NOT A GOAL.
- 44. 2. DESIGN SOLVE THEIR PROBLEMS
- 45. LOOK AT THE BIG PICTURE FIRST PEOPLE SEE THE FOREST BEFORE THE TREES
- 46. SKETCH A LOT OF DIFFERENT IDEAS, FAST.
- 47. SKETCH A LOT OF DIFFERENT IDEAS, FAST. THEN THROW MOST OF THEM AWAY.
- 48. 100% comic sans 0% humour A crap font was used in the production of this poster There is no margin for negotiation
- 49. 100% lorem ipsum 0% content Crap content was used in the production of this website There is some margin for negotiation
- 50. GOT MILK? CLEAN UP AND TEST.
- 51. 3. EVALUATE MAKE SURE THE DESIGN WORKS. TEST EARLY. AND OFTEN.
- 52. EVALUATION IS NOT ABOUT SUCCESS.
- 53. EVALUATION IS NOT ABOUT SUCCESS. IT’S ABOUT FAILURE.
- 56. TESTING WHAT’S OBVIOUSLY WRONG IS A WASTE OF TIME AND MONEY.
- 57. DON’T TAKE ANYTHING FOR GRANTED.*
- 58. DON’T TAKE ANYTHING FOR GRANTED.* * TURN YOUR HEAD 90° CCW
- 59. DESIGN PATTERNS
- 60. DESIGN PATTERNS FOR SCREEN LAYOUTS
- 63. CLASSIC
- 65. BROWSE
- 69. COLUMN/BROWSE
- 73. PARALLEL PANELS
- 78. TABBED
- 82. MASTER/DETAIL
- 86. WIZARD
- 88. Q&A
- 90. DASHBOARD
- 93. PORTAL
- 98. PALLET/CANVAS
- 100. DESIGN PATTERNS FOR NAVIGATION
- 102. WHY A DUCK? “I HAVE NO IDEA. O'REILLY'S PEOPLE PICKED IT, NOT ME, BUT I THINK IT HAS SOMETHING TO DO WITH THE FACT THAT MANDARIN DUCKS ARE COLORFUL, AND THE BOOK WAS PRINTED IN FULL COLOR. ALSO, SOME OF THEIR OTHER WEB BOOKS HAVE BIRDS ON THEIR COVERS. (BUT HE'S CUTE, ISN'T HE?)” JENIFER TIDWELL
- 103. SAFE EXPLORATION “LET ME EXPLORE WITHOUT GETTING LOST OR GETTING INTO TROUBLE.”
- 104. INSTANT GRATIFICATION “I WANT TO ACCOMPLISH SOMETHING NOW, NOT LATER.”
- 105. SATISFICING “THIS IS GOOD ENOUGH. I DON’T WANT TO SPEND MORE TIME LEARNING TO DO IT BETTER.”
- 106. HABITUATION “THAT GESTURE WORKS EVERYWHERE ELSE, WHY DOESN’T IT WORK HERE TOO?”
- 107. SPATIAL MEMORY “I SWEAR THAT BUTTON WAS HERE A MINUTE AGO. WHERE DID IT GO?”
- 108. GESTALT PRINCIPLES
- 110. CONGRATULATIONS, YOU UNLOCKED THE CLOSURE BATCH!
- 118. MENTAL MODELS
- 119. THINK IN MENTAL MODELS.
- 120. USE PATTERNS.
- 129. THE KEYWORD IS… RECOGNITION.
- 130. THE KEYWORD IS… RECOGNITION. THE MAGIC TRICK IS…DEAL WITH EXPECTATIONS.
- 131. THE KEYWORD IS… RECOGNITION. THE MAGIC TRICK IS… DEAL WITH EXPECTATIONS. AND BE CONSISTENT.
- 133. LOGO
- 134. IS POSITIONED TOP LEFT LOGO IS CLICKABLE TAKES YOU HOME
- 135. BREADCRUMB
- 136. ON TOP OF CONTENT BREADCRUMB SHOWS HIERARCHY (NOT THE HISTORY) CLICKABLE, EXCEPT LAST ITEM
- 137. SEARCHBOX
- 138. POSITIONED ON THE TOP RIGHT SEARCHBOX AV. SEARCH QUERY IS 35 CHARS MIGHT EXPECT AUTOCOMPLEET (OR OTHER GOOGLISH FEATURES)
- 139. NAVIGATION
- 140. PREFERRED HORIZONTAL NAVIGATION LIMITED ITEMS (MAGIC 7) REQUIRES A ‘SELECTED’ STATE SUBNAVIGATION VERTICAL ON THE LEFT
- 141. THÉ ESCAPE HATCH “HOME” FIRST ITEM IN MAIN NAVIGATION * ‘STARTPAGINA-VOOR-IDIOTEN’ * (NAH)
- 142. LINE LENGTH
- 143. 55 CHARACTERS PER LINE LINE LENGTH NO LIQUID DESIGN HEY… HOW ABOUT GOOGLE?
- 144. THIS PAGE
- 145. THIS PAGE “WHY ISN’T IT WHITE?”
- 146. BECAUSE SOMETIMES, WE NEED This page TO BREAK OUT OF THE BOX… FOR CREATIVITY’S SAKE.
- 147. SOME OTHER PATTERNS…
- 148. SOME OTHER PATTERNS… LINKS SHOULD LOOK AND ACT LIKE LINKS. THINK DESIGN-SEMANTICS. WHITESPACE IS SEXY.
- 149. SOME OTHER PATTERNS… LINKS SHOULD LOOK AND ACT LIKE LINKS. THINK DESIGN-SEMANTICS. WHITESPACE IS SEXY. IN FORMS, DEFAULT OS DESIGN IS EXPECTED.
- 150. SOME OTHER PATTERNS… LINKS SHOULD LOOK AND ACT LIKE LINKS. THINK DESIGN-SEMANTICS. WHITESPACE IS SEXY. IN FORMS, DEFAULT OS DESIGN IS EXPECTED. A BUTTON SHOULD LOOK LIKE A BUTTON.
- 151. SOME OTHER PATTERNS… LINKS SHOULD LOOK AND ACT LIKE LINKS. THINK DESIGN-SEMANTICS. WHITESPACE IS SEXY. IN FORMS, DEFAULT OS DESIGN IS EXPECTED. A BUTTON SHOULD LOOK LIKE A BUTTON. AND THAT … BELOW THE FOLD ISSUE. PEOPLE SCROLL, YES THEY DO. BUT ONLY IF YOU MAKE IT’S WORTH ABOVE THE FOLD. FOR MORE ON THIS TOPIC, CHECK: HTTP://WWW.SLIDESHARE.NET/NETLASH
- 152. UX TESTING
- 154. EYE TRACKING IS NOT ABOUT “I LIKE”
- 155. EYE TRACKING IS NOT EYE TRACKING IS ALL ABOUT “I LIKE” ABOUT “I SEE”
- 161. READING TIPS