epfl - pxs, week 5/6 - from requirements to design
DESCRIPTION
TRANSCRIPT
![Page 1: EPFL - PxS, week 5/6 - from requirements to design](https://reader034.vdocuments.site/reader034/viewer/2022042623/547ca735b479598e508b4708/html5/thumbnails/1.jpg)
EPFL, spring 2011 – week 5!from requirements to design
![Page 2: EPFL - PxS, week 5/6 - from requirements to design](https://reader034.vdocuments.site/reader034/viewer/2022042623/547ca735b479598e508b4708/html5/thumbnails/2.jpg)
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)
![Page 3: EPFL - PxS, week 5/6 - from requirements to design](https://reader034.vdocuments.site/reader034/viewer/2022042623/547ca735b479598e508b4708/html5/thumbnails/3.jpg)
exercise ➝ for your design idea define requirements"
object, action, context
➝ 5min alone ➝ 5min in pairs with feedback
![Page 4: EPFL - PxS, week 5/6 - from requirements to design](https://reader034.vdocuments.site/reader034/viewer/2022042623/547ca735b479598e508b4708/html5/thumbnails/4.jpg)
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
![Page 5: EPFL - PxS, week 5/6 - from requirements to design](https://reader034.vdocuments.site/reader034/viewer/2022042623/547ca735b479598e508b4708/html5/thumbnails/5.jpg)
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.
![Page 6: EPFL - PxS, week 5/6 - from requirements to design](https://reader034.vdocuments.site/reader034/viewer/2022042623/547ca735b479598e508b4708/html5/thumbnails/6.jpg)
step 1:!exercise ➝ define form factor, posture and input methods for your design idea
➝ 5min alone ➝ 5min in pairs
![Page 7: EPFL - PxS, week 5/6 - from requirements to design](https://reader034.vdocuments.site/reader034/viewer/2022042623/547ca735b479598e508b4708/html5/thumbnails/7.jpg)
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
![Page 8: EPFL - PxS, week 5/6 - from requirements to design](https://reader034.vdocuments.site/reader034/viewer/2022042623/547ca735b479598e508b4708/html5/thumbnails/8.jpg)
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
![Page 9: EPFL - PxS, week 5/6 - from requirements to design](https://reader034.vdocuments.site/reader034/viewer/2022042623/547ca735b479598e508b4708/html5/thumbnails/9.jpg)
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?
![Page 10: EPFL - PxS, week 5/6 - from requirements to design](https://reader034.vdocuments.site/reader034/viewer/2022042623/547ca735b479598e508b4708/html5/thumbnails/10.jpg)
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?
![Page 11: EPFL - PxS, week 5/6 - from requirements to design](https://reader034.vdocuments.site/reader034/viewer/2022042623/547ca735b479598e508b4708/html5/thumbnails/11.jpg)
steps for interaction design
➝ design the UI structure of the application ➝ document it as a navigation map of the application’s views
Navigation map of an imaginary Contacts application.
Task flow should utilize the views/services of other applications, when available. Design it accordingly.
Note: Ideally this is already a part of the application’s UI concept.
![Page 12: EPFL - PxS, week 5/6 - from requirements to design](https://reader034.vdocuments.site/reader034/viewer/2022042623/547ca735b479598e508b4708/html5/thumbnails/12.jpg)
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)
![Page 13: EPFL - PxS, week 5/6 - from requirements to design](https://reader034.vdocuments.site/reader034/viewer/2022042623/547ca735b479598e508b4708/html5/thumbnails/13.jpg)
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
![Page 14: EPFL - PxS, week 5/6 - from requirements to design](https://reader034.vdocuments.site/reader034/viewer/2022042623/547ca735b479598e508b4708/html5/thumbnails/14.jpg)
value at later stages
Use both illustrations and texts to communicate the interaction design.
General description
ID
Purpose
Access from
Contents
Menu
Functionality
Exceptions
![Page 15: EPFL - PxS, week 5/6 - from requirements to design](https://reader034.vdocuments.site/reader034/viewer/2022042623/547ca735b479598e508b4708/html5/thumbnails/15.jpg)
Take me home12:45 3G
Take me home
HomeÅkerlundinkatu 11, TampereHereHäämentie 19, Oulu
Traveling schedule12:45 3G
Take bus 12, direction LentoasemaIn 3 minutesGet off at “Rautatieasema, Oulu”In 12 minutesWalk to “Rautatieasema, Oulu”In 15 minutesTake train IC226, direction HelsinkiIn 34 minutesGet off at “Rautatieasema, Tampere”In 5 hours, 33 minutes
Take me home12:45 3G
Take me home
HomeÅkerlundinkatu, Tampere
Home
Done
Take me home12:45 3G
Take me home
HomeÅkerlundinkatu, Tampere
Here
Refresh via GPS
Åkerlundinkatu 1133100 Tampere
Hämeentie 1998100 Oulu
Done
Take me home12:45 3G
Take me home
HomeÅkerlundinkatu 11, TampereHereHäämentie 19, Oulu
Cancel
Safe
Safe
Cancel
Take me home12:45 3G
Take me home
HomeÅkerlundinkatu 11, TampereHereHäämentie 19, Oulu
Automatic
wireframe examples
➝ a wireframe “map” showing an overview of all the screens and the interactions between them
Descriptions of interaction between the screens
Sketches of the screens
![Page 16: EPFL - PxS, week 5/6 - from requirements to design](https://reader034.vdocuments.site/reader034/viewer/2022042623/547ca735b479598e508b4708/html5/thumbnails/16.jpg)
Wireframes wireframe examples
![Page 17: EPFL - PxS, week 5/6 - from requirements to design](https://reader034.vdocuments.site/reader034/viewer/2022042623/547ca735b479598e508b4708/html5/thumbnails/17.jpg)
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
![Page 18: EPFL - PxS, week 5/6 - from requirements to design](https://reader034.vdocuments.site/reader034/viewer/2022042623/547ca735b479598e508b4708/html5/thumbnails/18.jpg)
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
![Page 19: EPFL - PxS, week 5/6 - from requirements to design](https://reader034.vdocuments.site/reader034/viewer/2022042623/547ca735b479598e508b4708/html5/thumbnails/19.jpg)
writing the design documents
➝ agree about the tools ➝ “Standard” MS Office
products: Visio, Word, PowerPoint
➝ other professional tools ➝ shareware tools
➝ agree about the level of design details and used file formats
➝ concepts (ppt) ➝ light UI (Visio) ➝ complete UI specification
(Word with Visio images)
![Page 20: EPFL - PxS, week 5/6 - from requirements to design](https://reader034.vdocuments.site/reader034/viewer/2022042623/547ca735b479598e508b4708/html5/thumbnails/20.jpg)
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
![Page 21: EPFL - PxS, week 5/6 - from requirements to design](https://reader034.vdocuments.site/reader034/viewer/2022042623/547ca735b479598e508b4708/html5/thumbnails/21.jpg)
refine design
![Page 22: EPFL - PxS, week 5/6 - from requirements to design](https://reader034.vdocuments.site/reader034/viewer/2022042623/547ca735b479598e508b4708/html5/thumbnails/22.jpg)
design validation and usability testing
![Page 23: EPFL - PxS, week 5/6 - from requirements to design](https://reader034.vdocuments.site/reader034/viewer/2022042623/547ca735b479598e508b4708/html5/thumbnails/23.jpg)
some mobile UI guidelines Guidelines! Links !
Forum Nokia (Nokia Series 40, Nokia Series 60 )
http://www.forum.nokia.com/Tools_Docs_and_Code/Documentation/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 Developers Guide
http://mobiforge.com/designing/blog/web-developers-guide-released
![Page 24: EPFL - PxS, week 5/6 - from requirements to design](https://reader034.vdocuments.site/reader034/viewer/2022042623/547ca735b479598e508b4708/html5/thumbnails/24.jpg)
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/