EPFL - PxS, week 5/6 - from requirements to design
- 1. EPFL, spring 2011 – week 5! from requirements to design
- 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. exercise ➝ for your design idea define requirements" object, action, context ➝ 5min alone ➝ 5min in pairs with feedback
- 4. defining the interaction framework how is the product structured and how does it behave to meet 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. 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. step 1:! exercise ➝ define form factor, posture and input methods for your design idea ➝ 5min alone ➝ 5min in pairs
- 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. 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. 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. 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. 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 already a part of the application s UI concept. Task flow should utilize the views/services of other applications, when available. Design it accordingly. Navigation map of an imaginary Contacts application.
- 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. 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. value at later stages ID General description Use both illustrations and Purpose texts to communicate the Access from interaction design. Contents Menu Functionality Exceptions
- 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 inutes Sketches of Åkerlundinkatu 11, Tampere Here Get off a t “Rautatieasema, Tampere” In 5 hours, 33 m inutes Åkerlundinkatu 11, Tampere Here the 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
- 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. 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. 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. 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. refine design
- 22. design validation and usability testing
- 23. some mobile UI guidelines Guidelines! 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. 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/