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

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)

exercise ➝  for your design idea define requirements"

object, action, context

➝  5min alone ➝  5min in pairs with feedback

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

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 ➝  define 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 efficiently, ➝  best fit design principles, ➝  fit technology and cost parameters, ➝  other requirements?

➝  pretend the product is human ➝  apply principles and patterns

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

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?

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

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.

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 fidelity wireframes ➝  includes images, colors, fonts well thought

value at later stages

Use both illustrations and texts to communicate the interaction design.

General description

ID

Purpose

Access from

Contents

Menu

Functionality

Exceptions

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

Wireframes wireframe examples

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

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 ➝  “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)

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

refine design

design validation and usability testing

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

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/