EPFL - PxS, week 5/6 - from requirements to design


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

No notes for slide

EPFL - PxS, week 5/6 - from requirements to design

  1. 1. EPFL, spring 2011 – week 5!from requirements to design
  2. 2. requirements definition➝  creating problem and vision statements➝  brainstorming➝  identifying persona expectations ➝  attitudes,aspirations, social, cultural, environmental factors ➝  general expectations and desires ➝  behaviour desired from the product ➝  how does the persona think about basic elements of data" (e.g. email: message and people)➝  constructing context scenarios ➝  identifying requirements" object, action, context" data and functional requirements" business, brand, experience, technical, customer and partner (3rd party)
  3. 3. exercise➝  for your design idea define requirements" object, action, context➝  5min alone➝  5min in pairs with feedback
  4. 4. defining the interaction frameworkhow is the product structured and how does it behave tomeet user goals ➝  define form factor, posture and input methods ➝  define data and functional elements ➝  determine functional groups and hierarchy ➝  sketch the interaction framework ➝  construct key path scenario ➝  check designs with validation scenarios
  5. 5. step 1: !factor, posture and input methods➝  form factor" smart phone, PC, kiosk system➝  posture" how much attention will user devote to interacting with product – how does the product behave in response (should be based on usage contexts and environments)➝  input" more on that in mobile i/o lecture, touch screen, numerical keypad, voice etc.
  6. 6. step 1:!exercise➝  define form factor, posture and input methods for your design idea➝  5min alone➝  5min in pairs
  7. 7. step 2:!functional and data elements➝  data elements ➝  e.g. pictures e-mails, SMS etc. and their important attributes clear from scenario ➝  their relationships (grouped, sub-structure)➝  functional elements (operations on them)" e.g. for Vivien scenario (see moodle) needs to reach contacts by" voice activation, assignable quick-dial buttons, select contact from list, select contact from header of email, memo, appointment, auto- assignment of a call button in proper context (upcoming appointment)➝  check with context scenario what solution would: ➝  accomplish user goals most efficiently, ➝  best fit design principles, ➝  fit technology and cost parameters, ➝  other requirements?➝  pretend the product is human➝  apply principles and patterns
  8. 8. step 2:!exercise➝  define data and functional elements for your design idea - at least three tasks should be supported➝  5min alone➝  5min discuss in pairs
  9. 9. step 3: !functional groups and hierarchies➝  what needs a lot of screen estate?➝  which elements contain others?➝  how to arrange containers to optimize flow?➝  which elements are used together, which aren t?➝  in what sequence will they be used?➝  what interaction principles and patterns apply?➝  how does the personas mental model affect organization?
  10. 10. step 4:!sketch the interaction framework➝  time for rectangles – on whiteboards (plus camera)➝  one or two people together – one thinks in terms of the narrative of the design➝  boxes represent functional group and/or container➝  what is the central screen – how can you get there from within and without?
  11. 11. steps for interaction design ➝  design the UI structure of the application ➝  document it as a navigation map of the application s viewsNote: Ideally thisis already a partof theapplication s UIconcept. Task flow should utilize the views/services of other applications, when available. Design it accordingly. Navigation map of an imaginary Contacts application.
  12. 12. exercise➝  sketch with a pen and paper the following interaction as a navigation tree: carry out the task that resembles most your design idea on your mobile phone (enter an event into the calendar, receive SMS)➝  what kind of alternative interactions (e.g. short-cuts) are provided?➝  compare the interaction of your device to your colleague s devices •  5-10min (alone) •  5-10min (all/ discussion)
  13. 13. wireframe examples ➝  hand drawn sketches ➝  Quick and fast reviews ➝  Encourage experimentation and honest critique ➝  annotated wireframes ➝  describe the functional elements ➝  elements are explained ➝  annotations enables the wireframe to be understood ➝  high fidelity wireframes ➝  includes images, colors, fonts well thought
  14. 14. value at later stages ID General description Use both illustrations and Purpose texts to communicate theAccess from interaction design. Contents MenuFunctionalityExceptions
  15. 15. wireframe examples 12:45 3G Take  m e  home 12:45 3G Traveling  schedule 12:45 3G Take  m e  home Take  bus  12,  direction  Lentoasema In  3  m inutes Take  m e  home Get  off  a t  “Rautatieasema,  Oulu” Take  m e  home In  12  m inutes Walk  to  “Rautatieasema,  Oulu” In  15  m inutes Home Take  train  I C226,  direction  Helsinki Home In  34  m inutesSketches of Åkerlundinkatu  11,  Tampere Here Get  off  a t  “Rautatieasema,  Tampere” In  5  hours,  33  m inutes Åkerlundinkatu  11,  Tampere Herethe screens Häämentie  19,  Oulu Häämentie  19,  Oulu l C a n ce 12:45 3G Take  m e  home fe Descriptions of Sa matic Home interaction between the el nc Ca Åkerlundinkatu  11 e  home screens Auto Take  m 33100  Tampere Safe Home Åkerlundinkatu,  Tampere Done 12:45 3G Take  m e  home 12:45 3G Take  m e  home Here Hämeentie  19Take  m e  home Take  m e  home 98100  Oulu Home Refresh  via  GPS Home Åkerlundinkatu,  Tampere Åkerlundinkatu  11,  Tampere Done Here Häämentie  19,  Oulu ➝  a wireframe map showing an overview of all the screens and the interactions between them
  16. 16. wireframe examplesWireframes
  17. 17. step 5:!key path scenarios➝  depict primary pathways (that persona takes with greatest frequency, often)➝  focus on task level➝  must describe in detail each major interaction with the system➝  storyboarding + key path scenario narrative – e.g. in powerpoint, pdf to feel the flow
  18. 18. step 6:!check designs with validation scenarios➝  key path variants" less travelled, common exceptions, secondary persona needs➝  necessary use scenarios" necessary but infrequent➝  edge cases" atypical cases that must be handled
  19. 19. writing the design documents➝  agree about the tools ➝  agree about the level of design ➝  “Standard” MS Office details and used file formats products: Visio, Word, ➝  concepts (ppt) PowerPoint ➝  light UI (Visio) ➝  other professional tools ➝  complete UI specification ➝  shareware tools (Word with Visio images)
  20. 20. visual design framework➝  in our case: stick to the visual style and language on the target device➝  colour coding➝  legibility➝  branding➝  look and feel➝  apply to screen archetype
  21. 21. refine design
  22. 22. design validation and usabilitytesting
  23. 23. some mobile UI guidelinesGuidelines! Links!Forum Nokia http://www.forum.nokia.com/(Nokia Series 40, Nokia Series Tools_Docs_and_Code/Documentation/60 ) Usability/ UI_Style_and_Visual_Guidelines.xhtml UIQ (Sony Ericsson, Motorola) http://developer.uiq.com/Windows Mobile http://developer.windowsmobile.com/ Android http://developer.android.com/index.html iPhone http://developer.apple.com/iphone/ dotMobi Mobile Web http://mobiforge.com/designing/blog/web-Developers Guide developers-guide-released
  24. 24. UI design patterns➝  example sources of general UI design patterns ➝  http://www.usability.gov/pdfs/guidelines.html Research Based Guidelines ➝  http://www.welie.com Patterns in Interaction Design ➝  http://designinginterfaces.com/ Patterns by Jenifer Tidwell ➝  http://ui-patterns.com Patterns by Anders Toxboe ➝  http://patterntap.com Pattern Tap ➝  http://quince.infragistics.com/ UX Patterns Explorer ➝  http://www.androidpatterns.com/