User Centered Design & User Experience

USERCENTEREDDESIGN&USER EXPERIENCE * * MAY CONTAIN GUMBALLS

HI!I AM WOUTER WALGRAEVE AND I WORK AT NASCOM

I’M AN INFORMATION ARCHITECT.

WHAT IS UCD?

SO…WHAT IS UX THEN?

WAIT…WHAT HAPPENED TO USABILITY?

IT’S ALL ABOUT THE USERS

USER-CENTERED DESIGN (UCD) IS ANAPPROACH TO DESIGN THAT GROUNDSTHE PROCESS IN INFORMATION ABOUTTHE PEOPLE WHO WILL USE THEPRODUCT.UCD PROCESSES FOCUS ON USERSTHROUGH THE PLANNING, DESIGN ANDDEVELOPMENT OF A PRODUCT.* * Boring deﬁnition from http://www.upassoc.org/usability_resources/about_usability/what_is_ucd.html

USER-CENTERED DESIGN (UCD) IS ANAPPROACH TO DESIGN THAT GROUNDSTHE PROCESS IN INFORMATION ABOUTTHE PEOPLE WHO WILL USE THEPRODUCT.UCD PROCESSES FOCUS ON USERSTHROUGH THE PLANNING, DESIGN ANDDEVELOPMENT OF A PRODUCT.

BOSS != USER SPONSOR CLIENT ...

“IF YOU WANT TO WIN THE RACE,YOU HAVE TORUN THE ENTIRE COURSE.”

THERE IS NO UX SUPERMAN.

“WE ARE NOT THE USABILITY POLICE”

WHY UCD?

DESIGN WITHOUT ANALYSIS WON’TSOLVE THE RIGHT PROBLEM.?YOU NEED TO KNOWWHY THEY WANT TOFIRE A GUN.

“IF THE USER CAN’T USE IT, IT DOESN’T WORK.” SUSAN DRAY

CLIMB THEUSER MEANINGFULEXPERIENCEHIERARCHY OF PLEASURABLENEEDS. CONVENIENT ACCEPTANCE USABLE RELIABLE FUNCTIONAL

LET’S TALK ABOUT METHODOLOGY.

* LET’S TAKE THE FAST LANE.

1. ANALYZEUNDERSTAND THE PEOPLE WHO WILL USETHE DESIGN.

LISTEN TO THE USERSDO AN INQUIRY, AS QUESTIONS. AND ASK THEM AGAIN…

LEARN FROMNUMBERS

CLEAN UP THE MESS… CREATE PERSONAS.

PERSONAS EMBODY GROUPS OF USERS WHO ARE SIMILAR

PERSONALITY BEHAVIOR HABITS MOTIVATIONS FEARSPERSONAS EMBODY GROUPS OF USERS WHO ARE SIMILAR GOALS EXPECTATIONS TASKS

PERSONAS ARE A TOOL, NOT A GOAL.

2. DESIGNSOLVE THEIR PROBLEMS

LOOK AT THE BIG PICTURE FIRSTPEOPLE SEE THE FOREST BEFORE THE TREES

SKETCH A LOT OF DIFFERENT IDEAS, FAST.

SKETCH A LOT OF DIFFERENT IDEAS, FAST.THEN THROW MOST OF THEM AWAY.

100% comic sans 0% humourA crap font was used in the production of this poster There is no margin for negotiation

100% lorem ipsum 0% contentCrap content was used in the production of this website There is some margin for negotiation

GOT MILK?CLEAN UP ANDTEST.

3. EVALUATEMAKE SURE THE DESIGN WORKS.TEST EARLY. AND OFTEN.

EVALUATION IS NOT ABOUT SUCCESS.

EVALUATION IS NOT ABOUT SUCCESS. IT’S ABOUT FAILURE.

LEARN FROM FAILURE.

TESTING WHAT’S OBVIOUSLY WRONG IS A WASTE OF TIME AND MONEY.

DON’T TAKE ANYTHING FOR GRANTED.*

DON’T TAKE ANYTHING FOR GRANTED.* * TURN YOUR HEAD 90° CCW

DESIGN PATTERNS

DESIGN PATTERNS FOR SCREEN LAYOUTS

CLASSIC

BROWSE

COLUMN/BROWSE

PARALLEL PANELS

TABBED

MASTER/DETAIL

WIZARD

DASHBOARD

PORTAL

PALLET/CANVAS

DESIGN PATTERNS FOR NAVIGATION

WHY A DUCK?“I HAVE NO IDEA. OREILLYS PEOPLEPICKED IT, NOT ME, BUT I THINK IT HASSOMETHING TO DO WITH THE FACT THATMANDARIN DUCKS ARE COLORFUL, ANDTHE BOOK WAS PRINTED IN FULLCOLOR. ALSO, SOME OF THEIR OTHERWEB BOOKS HAVE BIRDS ON THEIRCOVERS. (BUT HES CUTE, ISNT HE?)” JENIFER TIDWELL

SAFE EXPLORATION“LET ME EXPLORE WITHOUT GETTINGLOST OR GETTING INTO TROUBLE.”

INSTANT GRATIFICATION“I WANT TO ACCOMPLISHSOMETHING NOW, NOT LATER.”

SATISFICING“THIS IS GOOD ENOUGH. I DON’TWANT TO SPEND MORE TIMELEARNING TO DO IT BETTER.”

HABITUATION“THAT GESTURE WORKSEVERYWHERE ELSE, WHY DOESN’T ITWORK HERE TOO?”

SPATIAL MEMORY“I SWEAR THAT BUTTON WAS HERE AMINUTE AGO. WHERE DID IT GO?”

GESTALT PRINCIPLES

CONGRATULATIONS,YOU UNLOCKED THE CLOSURE BATCH!

MENTAL MODELS

THINK IN MENTAL MODELS.

USE PATTERNS.

CREATE THEEXPERIENCE.

THE KEYWORD IS… RECOGNITION.

THE KEYWORD IS… RECOGNITION.THE MAGIC TRICK IS…DEAL WITH EXPECTATIONS.

THE KEYWORD IS… RECOGNITION.THE MAGIC TRICK IS… DEAL WITH EXPECTATIONS. AND BE CONSISTENT.

IS POSITIONED TOP LEFTLOGO IS CLICKABLE TAKES YOU HOME

BREADCRUMB

ON TOP OF CONTENTBREADCRUMB SHOWS HIERARCHY (NOT THE HISTORY) CLICKABLE, EXCEPT LAST ITEM

SEARCHBOX

POSITIONED ON THE TOP RIGHTSEARCHBOX AV. SEARCH QUERY IS 35 CHARS MIGHT EXPECT AUTOCOMPLEET (OR OTHER GOOGLISH FEATURES)

NAVIGATION

PREFERRED HORIZONTALNAVIGATION LIMITED ITEMS (MAGIC 7) REQUIRES A ‘SELECTED’ STATE SUBNAVIGATION VERTICAL ON THE LEFT

THÉ ESCAPE HATCH“HOME” FIRST ITEM IN MAIN NAVIGATION * ‘STARTPAGINA-VOOR-IDIOTEN’ * (NAH)

LINE LENGTH

55 CHARACTERS PER LINELINE LENGTH NO LIQUID DESIGN HEY… HOW ABOUT GOOGLE?

THIS PAGE

THIS PAGE “WHY ISN’T IT WHITE?”

BECAUSE SOMETIMES, WE NEEDThis page TO BREAK OUT OF THE BOX… FOR CREATIVITY’S SAKE.

SOME OTHER PATTERNS…

SOME OTHER PATTERNS…LINKS SHOULD LOOK AND ACT LIKE LINKS.THINK DESIGN-SEMANTICS.WHITESPACE IS SEXY.

SOME OTHER PATTERNS…LINKS SHOULD LOOK AND ACT LIKE LINKS.THINK DESIGN-SEMANTICS.WHITESPACE IS SEXY.IN FORMS, DEFAULT OS DESIGN IS EXPECTED.

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.

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

UX TESTING

HTTP://WWW.SLIDESHARE.NET/HARRYBREYE TRACKING

EYE TRACKING IS NOT ABOUT “I LIKE”

EYE TRACKING IS NOT EYE TRACKING IS ALL ABOUT “I LIKE” ABOUT “I SEE”

READING TIPS

TWITTER ME:@WOUTERWALGRAEVELINKEDIN:…/WOUTERWALGRAEVE

WHUFFIESTOHTTP://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/

NASCOMINFO@NASCOM.BE@NASCOM ON TWITTER

User Centered Design & User Experience

by Wouter Walgraeve

Accessibility

Categories

Upload Details

Usage Rights

3 Embeds 6

Statistics

User Centered Design & User Experience Presentation Transcript

http://www.linkedin.com	3
http://us-w1.rockmelt.com	2
http://paper.li	1