EPFL - PxS, week 5/6 - from requirements to design
EPFL, spring 2011 – week 5!from requirements to design
requirements deﬁnition➝ 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)
exercise➝ for your design idea deﬁne requirements" object, action, context➝ 5min alone➝ 5min in pairs with feedback
deﬁning the interaction frameworkhow is the product structured and how does it behave tomeet user goals ➝ deﬁne form factor, posture and input methods ➝ deﬁne data and functional elements ➝ determine functional groups and hierarchy ➝ sketch the interaction framework ➝ construct key path scenario ➝ check designs with validation scenarios
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.
step 1:!exercise➝ deﬁne form factor, posture and input methods for your design idea➝ 5min alone➝ 5min in pairs
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 efﬁciently, ➝ best ﬁt design principles, ➝ ﬁt technology and cost parameters, ➝ other requirements?➝ pretend the product is human➝ apply principles and patterns
step 2:!exercise➝ deﬁne data and functional elements for your design idea - at least three tasks should be supported➝ 5min alone➝ 5min discuss in pairs
step 3: !functional groups and hierarchies➝ what needs a lot of screen estate?➝ which elements contain others?➝ how to arrange containers to optimize ﬂow?➝ 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?
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?
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.
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)
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 ﬁdelity wireframes ➝ includes images, colors, fonts well thought
value at later stages ID General description Use both illustrations and Purpose texts to communicate theAccess from interaction design. Contents MenuFunctionalityExceptions
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
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 ﬂow
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
writing the design documents➝ agree about the tools ➝ agree about the level of design ➝ “Standard” MS Ofﬁce details and used ﬁle formats products: Visio, Word, ➝ concepts (ppt) PowerPoint ➝ light UI (Visio) ➝ other professional tools ➝ complete UI speciﬁcation ➝ shareware tools (Word with Visio images)
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
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
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/