Your SlideShare is downloading. ×
EPFL - PxS, week 4 - UX design techniques
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

EPFL - PxS, week 4 - UX design techniques


Published on

  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. EPFL, spring 2010 - week 4!UX design techniques
  • 2. overview ➝  assumptions about analphabetes ➝  first feedback (best questions, topics, surprises) UX design ➝  situating ➝  motivation ➝  concepts ➝  UX techniques ➝  personas ➝  scenarios ➝  storyboardsthis lecture is partly based on Forum Nokias course on UX conceptingand a Hogeschool van Amsterdam class
  • 3. assumptions about analphabetes
  • 4. first feedback from interviews➝  best questions➝  best topics for elicitating➝  big surprises
  • 5. EPFL, spring 2010 - week 4!UX design techniques
  • 6. UX design - Garrets planes
  • 7. overviewtopics Concept concept product description
  • 8. concept descriptionConcept descriptions types prototype Suzuki Kiashi Concept Car graphical Ego, VWs 2028 concepts sketch Fiat FCC concept textual
  • 9. concepts for Mobile Devices Concepts for mobile devices By Robert Davis Nokia Berg, Taylor, Harper 2003 Nokia By Aaron Besson Motorola Nokia Spinner by Zimmerman 2003
  • 10. concept definitions Concept definition➝  something understood, and retained in the mind, from experience, reasoning and/or imagination *) ➝  a concept can describe something that does not yet exist ➝  some parts of the product are explained, the rest is left to imagination and reasoning➝  generalizationor abstraction, of a particular set of instances or occurrences *) features and functionality ➝  concept description is a subset of a full product or service description (e.g. detailed specification document)‫‏‬ ➝  a concept can describe also a product that already exists ➝  a high-level summary, not going into product details ➝  focusing on what is the meat of the product Wikipedia
  • 11. concepts for risk management Concepting as riskmanagement The earlier we discover that an idea does not fly , the better. OK XX X OK➝  supporting product management decision making, minimizing risks➝  early and systematic validation of ideas ➝  if the product idea is a failure it would be good to realize it when it is still a concept, not after launching it to a global market➝  for small sw applications trial-and-error might be a sufficient way to validate a concept idea
  • 12. concept objectives Concept objectives objectives to... summarize describe the essence of your product (idea) visualize make your ideas more visible and concrete convince some stakeholder (investor, product prove a point management, product development,…) to invest more on your idea study different design and implementationshare to evaluate alternatives to provoke discussion.
  • 13. UX concept descriptions and artifacts
  • 14. UX concepting activitiesUX concepting activities Concept Description
  • 15. UX concept descriptionsUX Concept descriptionsMy cool travel-mate concept the level of detail of the UX concept description can vary based on: ➝  maturity of your concept idea " verbal à working prototype ➝  the target audience you are trying to impress: " investors, product management, product development ➝  the next Go / No-go decisions to make; " related to management or development
  • 16. exercise let s say you are handed a very detailed concept description that you need to start to further design and develop. What are the potential… draw-backs benefits•  • 
  • 17. design drivers and inhibitors UX Design Drivers practical hedonic➝  define the UX design drivers and inhibitors ➝  what would further the user experiences you are targeting? ➝  what would stand in the way of it➝  share them with the product development team Adapted from: Roto & Rautava: User Experience Elements and Brand promise (2008)
  • 18. user segments User Segments ➝  noteveryone will want to use your product ➝  different user groups have different needs and reasons for their purchase and usage decisions ➝  there is no point to try to make a design that will satisfy everyone ➝  segmentation is a tool identify potential end users and end user groups ➝  the aim is to recognize user groups where the product /service can serve best and be most profitable
  • 19. user segments example User Segments Example➝  technology enthusiasts ➝  keen on new technology things ➝  buy new technology items often and they own a lot of devices and equipments ➝  have larger than average income ➝  important to be the first ones using the new technologies, no matter the cost ➝  study functions curiously ➝  gather technology related information ➝  compare features, functions and prices before buying ➝  have high living standards ➝  like games, TV and movies
  • 20. personas User persona(s)‫‏‬ ➝  Who is s/he? ➝  Where does s/he lives? ➝  What s his/her family situation? ➝  What is her/his lifestyle? ➝  What motivates her/him? ➝  What are her/his goals and needs? ➝  What is her/his profession? ➝  What is her/his relation to mobile devices, computers, etc.? ➝  How much of her disposable income does she/he usually spend on ICT? ➝  What does s/he look like? " illustration or picture ➝  Other important issues related to your persona, describe
  • 21. persona examples Melvin, 35 Jason, 25 Louise, 27•  Engineer from Germany •  Customer Service •  Web designer, graduate•  Lives with his wife, 2 kids Assistant. student on university.and a dog. •  Keeps a blog for his friends •  SMS addict - 50•  Both parents need to and family messages every day.sometimes travel due their Uses his device for capturing •  Likes arts, especially indiejobs, and kids have lots of images to blog. movies and old films.hobbies. Most of the images •  Is currently organizing•  Would like better manage surprise parties for her related to snowboarding.his everyday schedules friend. •  Plays guitar in a wildlywith family. not-yet-so-popular band.
  • 22. exercisedescribe the persona for your design•  3 min (alone)•  4 min (in pairs)•  9 min sharing (all) from:
  • 23. scenarios➝  persona-based scenario = concise narrative description of how persona interacts with system to achieve goals➝  context-based scenario = how product can serve needs of persona➝  scenarios focus on illustrate requirements (the WHAT), top-down decomposition leads to functionality (the HOW)
  • 24. use of scenarios in product developmenteach of these has a role➝  context based scenarios are used to define user requirements➝  key path scenarios are used to define the interaction framework➝  validation scenarios are used to refine the design and make sure it deals with exceptions and special cases
  • 25. what are context based user scenarios?context based scenarios are stories that use personas to describe what a user wants to achieve through use of a product in order to suggest a list of user requirementsthey can also suggest what is wrong with the situaon as is it is currently
  • 26. why persona based?➝  they are archetypes of the various users of a product (or people with a particular problem)➝  they have goals and behaviours – " they want to achieve certain things and will behave in particular ways to achieve them ➝  they allow us to construct a story of an ideal usage scenario to help us to ➝  see how the UX can be improved ➝  develop (or change) products that allow users to achieve their goals ➝  personas keep us at the level of goals rather than tasks in initial development
  • 27. exercisecreate a storyboard for your design idea •  3 min (alone) •  4 min (in pairs) •  9 min sharing (all)
  • 28. UX benchmarkingUX Benchmarking ➝  What is the core concept? ➝  What kinds of UX targets might they have? ➝  What kinds of tasks can users perform with the application? ➝  What kind of UI solutions are there for certain tasks? ➝  What are task times and task steps? ➝  What kind of visual design styles and solutions are being used?
  • 29. context ofthe context of use Describe use people places mobile things time context culture
  • 30. wireframesWireframes
  • 31. prototypes and simulations Prototypes and simulations ➝  visualize and simulate the product concept ➝  representation of all or part of the UI ➝  for simulating the functionality of the UI ➝  a prototype can be a ➝  paper-prototype (even hand made)‫‏‬ ➝  screenshots ➝  computer/terminal-based prototype ➝  flash demo ➝  anything that is complete enough that it is possible for users to follow through the main task flow ➝  usedifferent level of simulations or prototypes for different purposes
  • 32. why wireframing?➝  fast➝  lightweight➝  early sense of UX➝  spot potential problems early➝  helps clients focus " (no graphical design distraction)➝  teaches you about the client (preferences/dislikes)
  • 33. free tools➝  paper ➝  Mockingbird (web based)➝  Cacoo (web based)➝  Lumzy (web based)➝  Website Wireframe➝  Pencil Project➝  Balsamiq➝  denim
  • 34. tips and hints Tips and hints ➝  the bigger the risks related to your product the more effort you need to put to UX concepting ➝  use UX artefacts that are useful in the later stages of product development ➝  usefulas input ➝  reusable ➝  consider carefully the appropriate level of detail of your concept description ➝  do it only to the level necessary for the next management decision ➝  the more effort you put into the concept ➝  the more impressive it will be ➝  the more disappointing it will be if rejected
  • 35. studio hints Tips and
  • 36. studio hints Tips and➝  brainstorming on problems➝  storyboarding➝  elevator pitching➝  advice on presentations
  • 37. well motivated idea
  • 38. well motivated idea
  • 39. mock up – nice and very effective !but not a requirement at this stage
  • 40. task flow Time Limit! Create! mail! Invitation! sms! other! Reminder! Finished => notify every participant! Idea => people not answering!
  • 41. thought outside the box Smaalkoppel 24a 22113 Oststeinbek