pxs’12 - week 6 - from requirements to design x.ppt
DESCRIPTION
TRANSCRIPT
![Page 1: PxS’12 - week 6 - from requirements to design x.ppt](https://reader035.vdocuments.site/reader035/viewer/2022062615/547ca745b47959b1508b46e3/html5/thumbnails/1.jpg)
EPFL, spring 2012 – week 6!from requirements to design
![Page 2: PxS’12 - week 6 - from requirements to design x.ppt](https://reader035.vdocuments.site/reader035/viewer/2022062615/547ca745b47959b1508b46e3/html5/thumbnails/2.jpg)
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 scenarios workshop ➝ data & functional requirements (three tasks) ➝ functional groups and hierarchies ➝ sketch interaction frame work ➝ patterns bottom-up
![Page 3: PxS’12 - week 6 - from requirements to design x.ppt](https://reader035.vdocuments.site/reader035/viewer/2022062615/547ca745b47959b1508b46e3/html5/thumbnails/3.jpg)
➝ What is the core concept? ➝ What kinds of UX targets might they
have? ➝ What kinds of tasks can users
perform with the application? ➝ 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?
UX benchmarking
your product competitor
![Page 4: PxS’12 - week 6 - from requirements to design x.ppt](https://reader035.vdocuments.site/reader035/viewer/2022062615/547ca745b47959b1508b46e3/html5/thumbnails/4.jpg)
context of use
MOBILE CONTEXT
people places things time culture }
![Page 5: PxS’12 - week 6 - from requirements to design x.ppt](https://reader035.vdocuments.site/reader035/viewer/2022062615/547ca745b47959b1508b46e3/html5/thumbnails/5.jpg)
prototypes What 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)
![Page 6: PxS’12 - week 6 - from requirements to design x.ppt](https://reader035.vdocuments.site/reader035/viewer/2022062615/547ca745b47959b1508b46e3/html5/thumbnails/6.jpg)
➝ 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
prototyping
![Page 7: PxS’12 - week 6 - from requirements to design x.ppt](https://reader035.vdocuments.site/reader035/viewer/2022062615/547ca745b47959b1508b46e3/html5/thumbnails/7.jpg)
prototypes can 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
![Page 8: PxS’12 - week 6 - from requirements to design x.ppt](https://reader035.vdocuments.site/reader035/viewer/2022062615/547ca745b47959b1508b46e3/html5/thumbnails/8.jpg)
from requirements to design
➝ this lecture is based on Cooper (2007) and Forum Nokia’s interaction design module
![Page 9: PxS’12 - week 6 - from requirements to design x.ppt](https://reader035.vdocuments.site/reader035/viewer/2022062615/547ca745b47959b1508b46e3/html5/thumbnails/9.jpg)
EPFL, spring 2011 – week 5!from requirements to design
![Page 10: PxS’12 - week 6 - from requirements to design x.ppt](https://reader035.vdocuments.site/reader035/viewer/2022062615/547ca745b47959b1508b46e3/html5/thumbnails/10.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 11: PxS’12 - week 6 - from requirements to design x.ppt](https://reader035.vdocuments.site/reader035/viewer/2022062615/547ca745b47959b1508b46e3/html5/thumbnails/11.jpg)
exercise ➝ for your design idea define requirements"
object, action, context
➝ 5min alone ➝ 5min in pairs with feedback
![Page 12: PxS’12 - week 6 - from requirements to design x.ppt](https://reader035.vdocuments.site/reader035/viewer/2022062615/547ca745b47959b1508b46e3/html5/thumbnails/12.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 13: PxS’12 - week 6 - from requirements to design x.ppt](https://reader035.vdocuments.site/reader035/viewer/2022062615/547ca745b47959b1508b46e3/html5/thumbnails/13.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 14: PxS’12 - week 6 - from requirements to design x.ppt](https://reader035.vdocuments.site/reader035/viewer/2022062615/547ca745b47959b1508b46e3/html5/thumbnails/14.jpg)
step 1:!exercise ➝ define form factor, posture and input methods for your design idea
➝ 5min alone ➝ 5min in pairs
![Page 15: PxS’12 - week 6 - from requirements to design x.ppt](https://reader035.vdocuments.site/reader035/viewer/2022062615/547ca745b47959b1508b46e3/html5/thumbnails/15.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 16: PxS’12 - week 6 - from requirements to design x.ppt](https://reader035.vdocuments.site/reader035/viewer/2022062615/547ca745b47959b1508b46e3/html5/thumbnails/16.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 17: PxS’12 - week 6 - from requirements to design x.ppt](https://reader035.vdocuments.site/reader035/viewer/2022062615/547ca745b47959b1508b46e3/html5/thumbnails/17.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 18: PxS’12 - week 6 - from requirements to design x.ppt](https://reader035.vdocuments.site/reader035/viewer/2022062615/547ca745b47959b1508b46e3/html5/thumbnails/18.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 19: PxS’12 - week 6 - from requirements to design x.ppt](https://reader035.vdocuments.site/reader035/viewer/2022062615/547ca745b47959b1508b46e3/html5/thumbnails/19.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.
edit contact
view
contact list view
contact details view
popup delete confirmation
contact find mode
UX
alerting call view
message editor view
Email editor view
skype chat view
contact history view
![Page 20: PxS’12 - week 6 - from requirements to design x.ppt](https://reader035.vdocuments.site/reader035/viewer/2022062615/547ca745b47959b1508b46e3/html5/thumbnails/20.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 21: PxS’12 - week 6 - from requirements to design x.ppt](https://reader035.vdocuments.site/reader035/viewer/2022062615/547ca745b47959b1508b46e3/html5/thumbnails/21.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 22: PxS’12 - week 6 - from requirements to design x.ppt](https://reader035.vdocuments.site/reader035/viewer/2022062615/547ca745b47959b1508b46e3/html5/thumbnails/22.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 23: PxS’12 - week 6 - from requirements to design x.ppt](https://reader035.vdocuments.site/reader035/viewer/2022062615/547ca745b47959b1508b46e3/html5/thumbnails/23.jpg)
Take me home12:45 3G
Take me home
HomeÅkerlundinkatu 11, Tampere
HereHäämentie 19, Oulu
Traveling schedule12:45 3G
Take bus 12, direction LentoasemaIn 3 minutes
Get off at “Rautatieasema, Oulu”In 12 minutes
Walk to “Rautatieasema, Oulu”In 15 minutes
Take train IC226, direction HelsinkiIn 34 minutes
Get 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, Tampere
HereHäämentie 19, Oulu
Cancel
Safe
Safe
Cancel
Take me home12:45 3G
Take me home
HomeÅkerlundinkatu 11, Tampere
HereHää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 24: PxS’12 - week 6 - from requirements to design x.ppt](https://reader035.vdocuments.site/reader035/viewer/2022062615/547ca745b47959b1508b46e3/html5/thumbnails/24.jpg)
Wireframes wireframe examples
![Page 25: PxS’12 - week 6 - from requirements to design x.ppt](https://reader035.vdocuments.site/reader035/viewer/2022062615/547ca745b47959b1508b46e3/html5/thumbnails/25.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 26: PxS’12 - week 6 - from requirements to design x.ppt](https://reader035.vdocuments.site/reader035/viewer/2022062615/547ca745b47959b1508b46e3/html5/thumbnails/26.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 27: PxS’12 - week 6 - from requirements to design x.ppt](https://reader035.vdocuments.site/reader035/viewer/2022062615/547ca745b47959b1508b46e3/html5/thumbnails/27.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 28: PxS’12 - week 6 - from requirements to design x.ppt](https://reader035.vdocuments.site/reader035/viewer/2022062615/547ca745b47959b1508b46e3/html5/thumbnails/28.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 29: PxS’12 - week 6 - from requirements to design x.ppt](https://reader035.vdocuments.site/reader035/viewer/2022062615/547ca745b47959b1508b46e3/html5/thumbnails/29.jpg)
refine design
![Page 30: PxS’12 - week 6 - from requirements to design x.ppt](https://reader035.vdocuments.site/reader035/viewer/2022062615/547ca745b47959b1508b46e3/html5/thumbnails/30.jpg)
design validation and usability testing
![Page 31: PxS’12 - week 6 - from requirements to design x.ppt](https://reader035.vdocuments.site/reader035/viewer/2022062615/547ca745b47959b1508b46e3/html5/thumbnails/31.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 32: PxS’12 - week 6 - from requirements to design x.ppt](https://reader035.vdocuments.site/reader035/viewer/2022062615/547ca745b47959b1508b46e3/html5/thumbnails/32.jpg)
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