EPFL, spring 2012 – week 6!from requirements to design
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 ﬁve minutes. ➝ context scenariosworkshop➝ data & functional requirements (three tasks)➝ functional groups and hierarchies➝ sketch interaction frame work➝ patterns bottom-up
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?
context of use } people places things MOBILE time CONTEXT culture
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)
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
prototypescan be a ➝ paper-prototype (hand made) ➝ screenshots ➝ computer/terminal-based prototype ➝ ﬂash demo ➝ anything that is complete enough that it is possible for users to follow through the main task ﬂow ➝ movie
from requirements to design➝ this lecture is based on Cooper (2007) and Forum Nokia’s interaction design module
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 views Note: Ideally this is UX already a part of the application s UI concept. contact contact list view ﬁnd mode edit contact popup contact details view view delete conﬁrmation contact history view Task ﬂow 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.
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 Generaldescription Use both illustrations and texts to Purpose communicate the interaction design.Access from Contents MenuFunctionalityExceptions
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
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
design validation and usability testing
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
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