• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
User Centered Design & User Experience
 

User Centered Design & User Experience

on

  • 3,624 views

An introduction in UCD and UX for designers.

An introduction in UCD and UX for designers.

Statistics

Views

Total Views
3,624
Views on SlideShare
3,575
Embed Views
49

Actions

Likes
35
Downloads
0
Comments
9

7 Embeds 49

http://static.wix.com 30
https://twitter.com 8
http://www.linkedin.com 5
http://us-w1.rockmelt.com 2
http://htmlcomponentservice.appspot.com 2
http://paper.li 1
https://www.linkedin.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

19 of 9 previous next Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    User Centered Design & User Experience User Centered Design & User Experience Presentation Transcript

    • 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 definition 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.
    • 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 ...
    • 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.
    • 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.
    • “IF YOU WANT TO WIN THE RACE,YOU HAVE TORUN THE ENTIRE COURSE.”
    • THERE IS NO UX SUPERMAN.
    • 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.
    • 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.
    • “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
    • Q&A
    • 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.
    • LOGO
    • 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