Your SlideShare is downloading. ×
0
PxS’12 - week 6 - from requirements to design x.ppt
PxS’12 - week 6 - from requirements to design x.ppt
PxS’12 - week 6 - from requirements to design x.ppt
PxS’12 - week 6 - from requirements to design x.ppt
PxS’12 - week 6 - from requirements to design x.ppt
PxS’12 - week 6 - from requirements to design x.ppt
PxS’12 - week 6 - from requirements to design x.ppt
PxS’12 - week 6 - from requirements to design x.ppt
PxS’12 - week 6 - from requirements to design x.ppt
PxS’12 - week 6 - from requirements to design x.ppt
PxS’12 - week 6 - from requirements to design x.ppt
PxS’12 - week 6 - from requirements to design x.ppt
PxS’12 - week 6 - from requirements to design x.ppt
PxS’12 - week 6 - from requirements to design x.ppt
PxS’12 - week 6 - from requirements to design x.ppt
PxS’12 - week 6 - from requirements to design x.ppt
PxS’12 - week 6 - from requirements to design x.ppt
PxS’12 - week 6 - from requirements to design x.ppt
PxS’12 - week 6 - from requirements to design x.ppt
PxS’12 - week 6 - from requirements to design x.ppt
PxS’12 - week 6 - from requirements to design x.ppt
PxS’12 - week 6 - from requirements to design x.ppt
PxS’12 - week 6 - from requirements to design x.ppt
PxS’12 - week 6 - from requirements to design x.ppt
PxS’12 - week 6 - from requirements to design x.ppt
PxS’12 - week 6 - from requirements to design x.ppt
PxS’12 - week 6 - from requirements to design x.ppt
PxS’12 - week 6 - from requirements to design x.ppt
PxS’12 - week 6 - from requirements to design x.ppt
PxS’12 - week 6 - from requirements to design x.ppt
PxS’12 - week 6 - from requirements to design x.ppt
PxS’12 - week 6 - from requirements to design x.ppt
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

PxS’12 - week 6 - from requirements to design x.ppt

1,709

Published on

Published in: Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,709
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
10
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  1. EPFL, spring 2012 – week 6!from requirements to design
  2. overview ➝  1st review ➝  where are we now – what would we ideally do?➝  introduction of personas➝  match personas to ideas➝  personas expectations (should revisit interviews)➝  brainstorm - each idea receives five minutes. ➝  context scenariosworkshop➝  data & functional requirements (three tasks)➝  functional groups and hierarchies➝  sketch interaction frame work➝  patterns bottom-up
  3. UX benchmarking ➝  What is the core concept? ➝  What kinds of UX targets might they have? ➝  What kinds of tasks can users your perform with the application? competitor product ➝  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?
  4. context of use } people places things MOBILE time CONTEXT culture
  5. prototypesWhat I hear, I forget.What I see, I remember.What I do, I understand. (Laotse 604 BC)Language is convincing.Seeing is believing.Touching is reality. (Alan Kay)
  6. prototyping ➝  visualize and simulate the concept ➝  representation of " all or part of the UI ➝  for simulating the functionality of the UI ➝  use appropriate level of simulations or prototypes for the purpose
  7. prototypescan be a ➝  paper-prototype (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 ➝  movie
  8. from requirements to design➝  this lecture is based on Cooper (2007) and Forum Nokia’s interaction design module
  9. EPFL, spring 2011 – week 5!from requirements to design
  10. 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)
  11. exercise➝  for your design idea define requirements" object, action, context➝  5min alone➝  5min in pairs with feedback
  12. 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
  13. 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.
  14. step 1:!exercise➝  define form factor, posture and input methods for your design idea➝  5min alone➝  5min in pairs
  15. 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
  16. 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
  17. 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?
  18. 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?
  19. steps for interaction design➝  design the UI structure of the application ➝  document it as a navigation map of the application s views Note: Ideally this is UX already a part of the application s UI concept. contact contact list view find mode edit contact popup contact details view view delete confirmation contact history view Task flow should utilize the views/services of other applications, when available. alerting call message Email skype Design it accordingly. view editor view editor view chat view ✱Navigation map of an imaginary Contacts application.
  20. 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)
  21. 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
  22. value at later stages ID Generaldescription Use both illustrations and texts to Purpose communicate the interaction design.Access from Contents MenuFunctionalityExceptions
  23. wireframe examplesSketches of 12:45 3G Take  m e  home 12:45 3G Traveling  schedule 12:45 3G Take  m e  homethe screens 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 Åkerlundinkatu  11,  Tampere In  34  m inutes Åkerlundinkatu  11,  Tampere Here Get  off  a t  “Rautatieasema,  Tampere” Here In  5  hours,  33  m inutes Häämentie  19,  Oulu Häämentie  19,  Oulu l C a n ce 12:45 Take  m e  home fe 3G Sa matic Home el nc Descriptions of Ca Åkerlundinkatu  11 e  home Auto Take  m 33100  Tampere interaction between the screens 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
  24. wireframe examplesWireframes
  25. 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
  26. 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
  27. 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)
  28. 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
  29. refine design
  30. design validation and usability testing
  31. some mobile UI guidelinesGUIDELINES LINKSForum Nokia http://www.forum.nokia.com/(Nokia Series 40, Nokia Series 60) Tools_Docs_and_Code/Documentation/ Usability/ UI_Style_and_Visual_Guidelines.xhtmlUIQ (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 Developers http://mobiforge.com/designing/blog/Guide) web-developers-guide-released
  32. UI design patterns➝  example sources of general UI design patterns ➝  usability.gov/pdfs/guidelines.html Research Based Guidelines ➝  welie.com Patterns in Interaction Design ➝  designinginterfaces.com Patterns by Jenifer Tidwell ➝  ui-patterns.com Patterns by Anders Toxboe ➝  patterntap.com Pattern Tap ➝  quince.infragistics.com UX Patterns Explorer ➝  androidpatterns.com

×