PxS’12 - week 4 - UX design techniques


Published on

Published in: Technology, Business
  • 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

No notes for slide

PxS’12 - week 4 - UX design techniques

  1. 1. uistencils.comEPFL, spring 2012 - week 4!UX design techniques
  2. 2. overview➝  assumptions about interviews➝  first feedback (best questions, topics, surprises)➝  UX design ➝  situating ➝  motivation ➝  concepts➝  UX techniques ➝  personas ✱This lecture is partly based on Forum ➝  scenarios Nokias course on UX concepting and a ➝  storyboards Hogeschool van Amsterdam class
  3. 3. assumptions about interviews
  4. 4. first feedback from interviews➝  best questions➝  best topics for elicitating➝  big surprises
  5. 5. uistencils.comEPFL, spring 2011 - week 4!UX design techniques
  7. 7. overviewtopics Concept TECHNOLOGY APPEARANCE concept BUSINESS product description INTERACTION FUNCTIONALITY
  8. 8. concept description types textual sketch graphical prototype Fiat FCC concept Ego, VWs 2028 concepts Suzuki Kiashi Concept Car
  9. 9. concepts for Mobile Devices Concepts for mobile devices Nokia By Robert Davis Berg, Taylor, Harper 2003 Nokia By Aaron Besson Motorola Nokia Spinner by Zimmerman 2003
  10. 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. 11. Concepting as riskconcepts for risk management management 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. 12. concept objectives Concept objectives OBJECTIVES TO… summarize Describe the essence of your product (idea). visualize Make your ideas more visible and concrete. prove a point Convince some stakeholder (investor, product management, product development,…) to invest more on your idea. share to evaluate Study different design and implementation alternatives to provoke discussion.
  13. 13. UX concept descriptions and artifacts
  14. 14. UX concepting activitiesUX concepting activities TECHNOLOGY concept APPEARANCE description BUSINESS UX graphic design concepting INTERACTION FUNCTIONALITY MOBILE UX interaction study user needs design
  15. 15. UX concept descriptionsMy cool travel-mate conceptThe level of detail of the UX concept description canvary 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. 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. 17. design drivers and inhibitors UX Design Drivers practical UX hedonic utility usability social enjoy value ment useful relia ease- effici acces connec identifi pleasure stimulation ness bility of-use ency sibility ting cation people ➝  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. 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. 19. 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. 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. 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. 22. exercise describe the persona for your design 3 min (alone) http://www.scribd.com 4 min (in pairs) 9 min sharing (all)
  23. 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. 24. use of scenarios in product developmentcontext based user key path outline interaction validation refined outline scenario requirements scenario design scenario designeach 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. 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 requirements➝  they can also suggest what is wrong with the situaon as is it is currently
  26. 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. 27. exercisecreate a storyboard for your design idea3 min (alone)4 min (in pairs)9 min sharing (all)
  28. 28. UX benchmarking your ➝  What is the core concept? competitor product ➝  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. 29. context ofthe context of use Describe use people places things mobile time context culture
  30. 30. wireframesWireframes
  31. 31. wireframesWireframes
  32. 32. 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
  33. 33. 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)
  34. 34. free tools➝  paper ➝  mockingbird (web based)➝  cacoo (web based)➝  lumzy (web based)➝  website wireframe➝  pencil project➝  balsamiq➝  denim ➝  for storyboarding: www.toondoo.com
  35. 35. 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
  36. 36. studio hints Tips and
  37. 37. studio Tips i➝  qualitative analysis➝  affinity mapping➝  advice on first review presentations
  38. 38. well motivated idea ➝  idea 1 ➝  use data on phone to ease data entry ➝  “…so if my friend wanted to meet, she would probably send an SMS and I would put it in my calendar…”
  39. 39. well motivated idea ➝  idea 1 ➝  use data on phone to ease data entry ➝  “…I don’t put the details. It’s implicit in the name of the person I was meeting…”
  40. 40. mock up – nice and effective
  41. 41. task flow Invitation! Idea => people not answering!
  42. 42. thought outside the box Smaalkoppel 24a 22113 Oststeinbek