An introduction in UCD and UX for designers.

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…

36. LEARN FROM
NUMBERS

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.

55. LEARN FROM 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.

121. CREATE THE
EXPERIENCE.

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

153. HTTP://WWW.SLIDESHARE.NET/HARRYBR
EYE TRACKING

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

166. TWITTER ME:
@WOUTERWALGRAEVE
LINKEDIN:
…/WOUTERWALGRAEVE

167. WHUFFIES
TO
HTTP://WWW.FLICKR.COM/PHOTOS/DOMPELLETIER/
HTTP://WWW.FLICKR.COM/PHOTOS/BETSYJEAN79/
HTTP://WWW.FLICKR.COM/PHOTOS/FATOOOMA/
HTTP://WWW.FLICKR.COM/PHOTOS/BOOPSIEDAISY/
HTTP://WWW.FLICKR.COM/PHOTOS/SEZZRS/
HTTP://WWW.FLICKR.COM/PHOTOS/VISBEEK/
HTTP://WWW.FLICKR.COM/PHOTOS/ANDREA_RUM/
HTTP://WWW.FLICKR.COM/PHOTOS/PENSIVE-REFLECTIONS/
HTTP://WWW.FLICKR.COM/PHOTOS/PATRIES71/
HTTP://WWW.FLICKR.COM/PHOTOS/FILMVANALLEDAG/
HTTP://WWW.FLICKR.COM/PHOTOS/JENNAISHAVINGTROUBLEBREATHING/

168. NASCOM
INFO@NASCOM.BE
@NASCOM ON TWITTER