1. EPFL, spring 2012 – week 6!
from requirements to design

2. 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

3. 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?

4. context of use
}
people
places
things
MOBILE
time CONTEXT
culture

5. 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)

6. 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

7. 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

8. from requirements to design
➝ this lecture is based on Cooper (2007) and Forum Nokia’s
interaction design module

9. EPFL, spring 2011 – week 5!
from requirements to design

10. 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)

11. exercise
➝ for your design idea define requirements"
object, action, context
➝ 5min alone
➝ 5min in pairs with feedback

12. 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

13. 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.

14. step 1:!
exercise
➝ define form factor, posture and input methods for your design idea
➝ 5min alone
➝ 5min in pairs

15. 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

16. 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

17. 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?

18. 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?

19. 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
find mode
edit contact popup
contact details
view
view
delete confirmation
contact
history view
Task flow 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.

20. 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)

21. 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

22. value at later stages
ID
General
description
Use both illustrations
and texts to
Purpose
communicate the
interaction design.
Access from
Contents
Menu
Functionality
Exceptions

23. wireframe examples
Sketches of 12:45 3G
Take
m e
home 12:45 3G
Traveling
schedule 12:45 3G
Take
m e
home
the 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

24. wireframe examples
Wireframes

25. 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

26. 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

27. 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)

28. 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

29. refine design

30. design validation and usability testing

31. some mobile UI guidelines
GUIDELINES
LINKS
Forum Nokia
http://www.forum.nokia.com/
(Nokia Series 40, Nokia Series 60)
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 http://mobiforge.com/designing/blog/
Guide)
web-developers-guide-released

32. 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