Mobile Prototyping

Special Thanks to our Sponsors

Introduction to Mobile Design

Ideating

Need Analysis

3 ACTIVITES - DESIGNING FOR MOBILITY

IDENTIFYING NEED FOR A MOBILE APPLICATION

BRAINSTORMING AND IDEATING

PRESENTING CONCEPTS

Mobile Design Guidelines and patterns The Design Process

 3 ACTIVITES - DESIGNING FOR MOBILITY

Card Sort

Story Boards

MOBILE IS GROWING LIKE CRAZY

“MOBILE PHONES

WILL OVERTAKE PC’S

AS THE MOST COMMON

WEB ACCESS DEVICES

BY 2013”

Gartner  Research,  2010  

Google:  Our  Mobile  Planet,  May  2012  

Google:  Our  Mobile  Planet,  May  2012  

Google:  Our  Mobile  Planet,  May  2012  

Google:  Our  Mobile  Planet,  May  2012  

Google:  Our  Mobile  Planet,  May  2012  

MOBILE PRESENTS AN

OPPORTUNITY TO INVENT

NEW WAYS FOR USERS TO

INTERACT WITH

INFORMATION.

NEXT  BIG  QUESTION    WHAT  TYPE  OF  MOBILE  APP  TO  START  WITH    

RESPONSIVE  WEBSITE?    WEB  APP  ?    NATIVE  APP?    HYBRID  APPS?  

Thin Client Browser Apps

PROS

CONS

Rich Client Native Apps

PROS

CONS  

MOBILE DESIGN

CHALLENGES

AND

GUIDELINES

Who are the users? What do you know about them? What type of behavior can you assume or predict about the users? What is happening? What are the circumstances in which the users will best absorb the content you intend to present?

FACTORS THAT INFLUENCE PERFORMANCE.

OPTIMIZE

YOUR

APP FOR

HIGH

PERFORMANCE

ONLY DESIGN WHAT

MAKES SENSE FOR A

MOBILE CONTEXT

COMMON FEATURES THAT IMPACT THE

USER EXPERIENCE

FEATURE WHAT IT DOES EXAMPLE APP OR FEATURE

Camera Takes photos & often video.

Too many to list!

GPS Provides the phone’s location.

Maps

Accelerometer Detects the phone’s orientation.

Determines when to switch from portrait to landscape view

Magnetometer Detects the phone’s direction.

Compass

Gyroscope Detects 3-axis angular acceleration around the X, Y and Z axes.

Gaming

Proximity sensor Detects proximity of user to phone.

Cue to dim screen when user speaking on phone.

Light sensor Determines how much light is available in the area surrounding the phone

Adjusts screen brightness to conserve battery.

How can food joints use mobile

devices to improve their customer

experience?

Identifying Needs – 30 mins

1.  Divide into groups 2.  Head to the nearest food joint 3.  Observe mobile users in a mobile context 4.  Develop a list of customer needs based on your

observations

Ideating the Context – 30 mins

1.  Brainstorm with the team 2.  Create 2-3 unique concepts based on the needs

your team identified 3.  Give your concept a name 4.  Create user profiles

Presenting Concepts

1.  Each team would present a 10 minute introduction to their app which would include 1.  Elevator Pitch: What your app does 2.  User Profiles: Who your app is targeting and why 3.  User Research Summary: What you learned in the user

research/observation study conducted

MOBILE MINDSET

Because of the differences between mobile and desktop, it’s imperative to get yourself into a mobile mindset before getting started.

Be  focused:  More  is  not  bePer.  Edit  your  features  ruthlessly.  You  are  going  to  have  to  leave  stuff  out  1

Be  unique:  Know  what  makes  your  app  different  and  amplify  it.      There  are  lots  of  fish  in  the  sea  of  mobile  apps.  If  there’s  nothing  special  about  your  app,  why  would  anyone  pick  it?  

2

3 Be  charming:  Mobile  devices  are  intensely  personal.  They  are  our  constant  companions.      Apps  that  are  friendly,  reliable  and  fun  are  a  delight  to  use,  and  people  will  become  quite  aPached  to  the  experience.    

Be  considerate:  App  developers  too  o]en  focus  on  what  would  be  fun  to  develop,  their  own  mental  model  of  the  app  or  their  personal  business  goals.    These  are  good  places  to  start,  but  you  have  to  put  yourself  in  your  user’s  shoes  if  you  ever  hope  to  create  an  engaging  experience.  

4

MOBILE CONTEXTS

IS THIS THE

CONTEXTS?

It  is  certainly  one  context,  but  it’s  not  the  only  one.  

To  begin  to  put  ourselves  in  the  shoes  of  our  users,  we  need  to  consider  three  major  mobile  contexts  

There  are  a  lot  of  people  using  their  smartphones  on  the  couch  at  home.  In  this  context,  immersive  and  deligh_ul  experiences  geared  toward  a  longer  usage  session  are  a  great  fit.      S`ll,  interrup`ons  are  highly  likely,  so  be  sure  your  app  can  pick  up  where  your  user  le]  off.  Examples:  Facebook,  TwiPer,  Angry  Birds,  web  browser.    

This  is  the  'running  though  the  airport'  scenario.  The  ability  to  accomplish  micro-­‐tasks  quickly  and  reliably  with  one  hand  in  a  hec`c  environment  is  cri`cal.      Remember  that  the  user  will  have  tunnel  vision  in  this  context,  so  huge  targets  and  bold  design  are  important.  Examples:  TripIt,  email,  calendar,  banking.  

Users  who  are  in  transit,  in  unfamiliar  surroundings,  or  in  familiar  surroundings  but  interested  in  something  unknown  around  fall  into  the  lost  category.      In  this  context,  sketchy  connec`vity  and  baPery  life  are  big  concerns,  so  you  should  offer  some  level  of  offline  support  and  be  sparing  with  your  use  of  geoloca`on  and  other  baPery  hogs.  Typical  examples:  Maps,  Yelp,  Foursquare.  

COMMUNICATIONS

Provide  instant  feedback  for  every  interac`on.      If  you  don’t,  the  user  will  wonder  if  the  app  has  frozen  up,  or  if  they  missed  the  target  they  were  trying  to  hit.      The  feedback  could  be  tac`le  (like  the  Android  ‘thump’  vibra`on),  or  visual  (highligh`ng  a  tapped  buPon,  for  instance).    

Modal  alerts  are  extremely  pushy  and  intrusive  to  the  user’s  flow,  so  you  should  only  use  them  when  something  is  seriously  wrong.      Even  then,  try  to  mi`gate  the  intensity  by  keeping  language  reassuring  and  friendly.  Remember  not  to  use  modal  alerts  for  'FYI'  type  informa`on.  

When  you  have  to  ask  a  user  to  confirm  an  ac`on,  it’s  acceptable  to  display  a  modal  confirma`on  dialog  (such  as  'Are  you  sure  you  want  to  delete  this  dra]?').      Confirma`ons  are  less  intrusive  than  alerts  because  they  are  in  response  to  a  user  ac`on  and  therefore  in  context  and  perhaps  even  expected.    

GLOBAL GUIDELINES

Different  apps  call  for  different  approaches,  designs  and  techniques.      The  inherent  nature  of  a  pocket-­‐sized  touchscreen  device  suggests  several  global  guidelines;  ie,  the  stuff  that  always  maPers.  

Responsiveness  is  absolutely  cri`cal.    If  your  user  does  something,  your  app  needs  to  acknowledge  the  interac`on  instantly.    It’s  OK  if  certain  opera`ons  take  `me.  Just  make  sure  you  let  the  user  know  you’re  working  on  it.  

Polish  is  extremely  valuable.      Because  of  the  'constant  companion'  nature  of  our  rela`onship  to  smartphones,  paying  a  lot  of  aPen`on  to  gekng  the  liPle  details  perfect  will  be  no`ced  and  appreciated.        

With  the  advent  of  touchscreen  interfaces,  everyone  is  always  talking  about  'finger  this'  and  'finger  that'.  In  reality,  the  thumb  is  what  we  need  to  design  for.            

The  revolu`on  of  touch  interfaces  is  that  they  enable  us  to  interact  directly  with  our  content.      This  removes  abstrac`ons  (such  as  mouse  and  trackpad)  and  is  more  in  line  with  how  our  brains  are  wired.      Leverage  the  intui`ve  power  of  touch  UI  by  minimising  interface  chrome  (buPons,  tab  bars,  checkboxes,  sliders  and  so  on)  wherever  possible  and  pukng  your  content  front  and  centre.  

Avoid  scrolling.    Having  a  non-­‐scrolling  screen  has  a  more  solid  and  dependable  'feel'  than  a  scrolling  view  because  it’s  more  predictable.      Of  course,  certain  screens  have  to  scroll,  but  it’s  good  to  avoid  it  where  you  can.        

NAVIGATION MODEL

There  are  plenty  of  novel  naviga`on  models  for  mobile  apps  but  if  you're  going  to  use  one  of  common  naviga`on  models,  be  sure  to  pick  the  one  that  makes  the  most  sense  for  your  app.  

None:  Single  screen  u`lity  apps  (eg  Weather  app  on  iPhone)  

Tab  bar:  Three  to  six  dis`nct  content  areas  (eg  TwiPer  for  iPhone)  

Drill  down:  List  and  detail  content  hierarchy  (eg  Sekngs  app  on  iPhone)  

USER INPUT

Typing  s`nks  even  on  the  best  devices,  so  you  should  do  what  you  can  to  make  it  easier  for  your  users.  

If  your  app  invites  a  lot  of  typing,  you  should  ensure  you  support  landscape  orienta`on.  

There  are  many  keyboard  varia`ons  on  popular  smartphones  (text,  number,  email,  URL  and  so  on).      Consider  each  of  your  input  fields  and  be  sure  to  display  the  keyboard  that  will  be  most  useful  for  the  data  entry  being  done.  

GESTURES

One  of  the  most  iconic  aspects  of  modern  touch  interfaces  is  that  they  support  gesture-­‐based  user  interac`on.    

Gestures  are  invisible,  so  discovery  is  an  issue.  You  have  to  decide  how  to  reveal  their  existence  to  the  user.  

Mul`-­‐touch  gestures  require  two-­‐handed  opera`on.    EXAMPLE  in  the  na`ve  Maps  app  on  iOS  which  uses  a  pinch  open  gesture  to  zoom  out.  When  I’m  traveling  in  a  foreign  city  with  a  coffee  in  one  hand  and  my  phone  in  the  other,  this  is  an  annoying  limita`on.    Android  addresses  this  issue  by  including  zoom  in/out  buPons  overlaid  on  the  map        

Understand  and  iden`fy  the  core    

problems  first    

Discover  

HOW  DO  WE    

DEFINE    

PROBLEMS?  

CULTURAL  AND  SOCIAL  

CHALLENGES    

AND    

NEEDS  

DEMOGRAPHICS  AND  ABILITIES    

ENVIRONMENTAL  AND  CONTEXTUAL  

HOW  DO  WE    

IDENTIFY    

PROBLEMS?  

STAKEHOLDER  INTERVIEWS  

KICKOFF  MEETINGS  

CONTENT  AUDIT/INVENTORY  

FOCUS  GROUP  

CONTEXTUAL  INQUIRIES  

PERSONAS  

Iden`fy  possible  solu`ons  and  plan    execu`on    

PLAN  

Create  designs  that  resolve  the  core    problems    

Design  

HOW  DO  WE    

RESOLVE  

THE  

PROBLEMS?  

SCENARIOS  

CARD  SORTING  

APP  MAP  OR  FLOWCHART  

WIREFRAME  

PROTOTYPE  

USABILITY  TESTING  

Develop  func`onal  code  based  on  the    designs    

BUILD  

Review,  test,  and  analyze  effec`veness    of  the  design    

EVALUATE  

RECAP

How can food joints use mobile

devices to improve their customer

experience?

Information Gathering– 45 mins

1.  Note down a list of possible features for your app concept

2.  Prepare the cards 3.  Execute card sorting 4.  Analyze the results

INFORMATION  GATHERING  

15 MINUTES BREAK

Storyboarding – 60 mins

STORYBOARDING  

1.  Based on your previous activities, Identify the central

idea(s) you are trying to communicate.

2.  Storyboard one scenario using the templates provided.

3.  Remember to identify the key issues the character faces

and rough out the complete story before filling in details.

4.  Present a small demo of your storyboard concept

MOBILE PROTOTYPING ESSENTIALS

Ideating

Need Analysis

2 ACTIVITES - DESIGNING FOR MOBILITY

QUIZ

DESIGNING AND TESTING PAPER PROTOTYPES

MOBILE PROTOTYPING ESSENTIALS

Ideating

Need Analysis

3 ACTIVITES - DESIGNING FOR MOBILITY

MOBILE PROTOTYPE USING PRESENTATION SOFTWARE

IN DEVICE INTERACTIVE PROTOTYPES

MOBILE BROWSER PROTOTYPE

Mobile Prototyping Tools and Methods

What is

Prototyping?

THE  WORD  PROTOTYPE  comes  from  the  Greek    pratos,    which  means  "first,"    and  typos.  which  means  "impression.”    

FIRST  

IMPRESSION  

Why  

Prototyping?  

Prototypes  can  help  you  

solve  design  problems,  

evaluate  designs  and  

communicate  design  

ideas  

Prototypes  can  be  an  efficient  way  to  

work  through  design  problems  before  

gekng  deep  into  coding.    

SOLVE  DESIGN  PROBLEMS  

They  can  help  address  everything  from  

higher-­‐level  conceptual  issues  to  lower-­‐

level  interac`ons.  

SOLVE DESIGN PROBLEMS

Prototypes are often used to evaluate

design ideas, concepts, flows, and

Interactions before investing

development time.

EVALUATE  DESIGN  IDEAS  

Prototypes  make  your  designs  bePer  

IN  A  NUTSHELL  

Prototypes  facilitate  communica`on  

Prototypes  enable  user  input  and  usability  assessment  

Prototypes  help  assess  technical  feasibility  

1

2

3

4

THE PROTOTYPING

SPECTRUM

LOW  FIDELITY  

MEDIUM  FIDELITY  

HIGH  FIDELITY  

THE PROTOTYPING

GENRES

TACTICAL  PROTOTYPING  

Sketching  

Paper  Prototyping  

Interac`ve  On-­‐Device  Prototyping  

1

2

3

Interac`ve  On-­‐Device  Prototyping  includes:  

In-­‐screen  mobile  prototype    

Mobile  browser  prototype  

Mobile  prototype  using  presenta`on  so]ware  

Pla_orm  specific  prototype  

1

2

3

44

Best suited for design explorations where:

You are working on a “focused” mobile project.

1

2

3

Target mobile hardware and software scope is known.

The design space is relatively known.

Storyboarding  

Bodystorming  

Speed  da`ng  prototypes  

Concept  videos  

EXPERIENTIAL  PROTOTYPING  

1

2

3

4

Best suited for design explorations where:

You are working on a “broader” mobile project.

1

2

3

Target mobile hardware and software scope is unknown (perhaps being created).

The design space is relatively unchartered.

TACTICAL  PROTOTYPING  

TACTICAL  PROTOTYPING  

Sketching  

Paper  Prototyping  

Interac`ve  On-­‐Device  Prototyping  

1

2

3

Sketching  is  rapid,  freehand  drawing  that  we  do  with  no  inten`on  of  its  becoming  a  finished  product.    

Sketching  is  a  founda`on  upon  which  we  can  overlay  our  actual  design  work.  

SKETCHING  BENEFITS  

Quick:  A  sketch  is  quick  to  make,  or  at  least  gives  that  impression.  

Timely:  A  sketch  can  be  provided  when  needed.  

Inexpensive:  A  sketch  is  cheap.  Cost  must  not  inhibit  the  ability  to  explore  a  concept,  especially  early  in  the  design  process.  

WHEN  DO  WE  USE  THESE  SKETCH    PROTOTYPES?  

DESIGNING  INTERFACES    •  Visualizing  concepts    •  Exploring  alterna`ves    •  Resolving  feature  details      •  Developing  interac`on  scenarios  

TESTING  INTERFACES    •  Intelligibility  -­‐  can  you  read  or  interpret  this?    •  Trackability  -­‐  can  you  follow  this?    •  Fumble  factor  -­‐  can  you  make  this  work?    

PRESENTING  INTERFACE  IDEAS    •  To  UI  designers  -­‐  looking  at  all  parts  of  the  interface    •  To  programmers  -­‐  implemen`ng  the  interface    •  To  marke`ng  and  management  -­‐  determining  applica`on  features    •  To  users  -­‐  gekng  early  feedback  

TACTICAL  PROTOTYPING  

Sketching  

Paper  Prototyping  

Interac`ve  On-­‐Device  Prototyping  

1

2

3

PAPER  PROTOTYPE?  

Paper  prototyping  is  a  key  component  of  the  DESIGN  process  and  is  a  popular  method  among  designers.  

Paper  prototypes  are  essen`ally  paper  models  of  your  smartphone  apps    

PAPER  PROTOTYPE  BENEFITS  

Quick  itera+ons    Paper  prototypes  enable  you  to  rapidly  iterate  and  experiment  with  many  ideas.  The  modest  `me  investment  makes  it  easier  to  throw  away  less  promising  direc`ons.  

Inexpensive    Ordinary  office  supplies  can  be  used  for  paper  prototypes:  Sharpies,  Pos`ts,  printer  paper.  Most  important,  these  up-­‐front  paper  itera`ons  can  reduce  costly  changes  on  the  development  end.    

Collabora+ve    Paper  prototypes  do  not  require  any  technical  skills;  thus  everyone  (users,  too!)  can  par`cipate.  

Easy  to  edit    You  or  your  users  can  edit  paper  prototypes  on  the  &  y  (e.g.,  change  labels,  add  screens,  add  buPons)  

PAPER  PROTOTYPE  CHALLENGES  

Paper  prototypes  are  less  suitable  for  

refining  low-­‐level  interac`ons  such  as  

transi`ons,  scrolling,  and  swiping.  

PAPER  PROTOTYPE  CHALLENGES  

Less  useful  for  certain  classes  of  apps,  

such  as  musical  instruments,  videos,  and  

games.  

User  experience  issues  o]en  explored  with  paper  prototypes  include  

App  concept  -­‐  Do  users  understand  your  app’s  central  concept?  1

2 Workflows  -­‐  Is  the  overall  naviga`on  clear?  Are  there  too  many  steps  to  complete  tasks?    

3 Informa`on  organiza`on  -­‐  Does  the  current  organiza`on  match  user's  expecta`ons?  

4 Terminology  -­‐  Are  the  labels  on  tabs,  screens,  and  buPons  clear?  

PAPER  PROTOTYPING    HOW  TO?  

PAPER,  PEN,  CARDBOARD,  REMOVABLE  TAPE,  GLUE,  CORRECTION    FLUID,  AND  SCISSORS.  

At  some  point  your  designs  will  have  to  match  the  PHONE  screen  dimensions—320  ×  480  pixels  (640  ×  960  for  iPhone  4)—but  paper  prototypes  can  be  less  exact.  Using  a  larger  form  factor  will  make  it  easier  for  others  to  interact  with  the  design  (e.g.,  rearrange  the  layout  and  write  in  text  Fields)  

Your  prototype  will  include  a  background,  the  screens,  and  the  user  interface  controls.    

RECAP

How can food joints use mobile

devices to improve their customer

experience?

Create Paper Prototype – 60 mins

PAPER  PROTOTYPE  

1.  Create a paper prototype that illustrates 3 major tasks for

your interface / interaction design, likely (but not

necessarily) based on your storyboards.

2.  The prototype should be complete enough to "run" a new

user through each task.

Test Paper Prototype – 60 mins

PAPER  PROTOTYPE  

1.  Prepare for testing your paper prototype

2.  Identify a participant as user, provide him a test script

3.  Identify and make notes of your finding

LUNCH  

TACTICAL  PROTOTYPING  

Sketching  

Paper  Prototyping  

Interac`ve  On-­‐Device  Prototyping  

1

2

3

Interac`ve  On-­‐Device  Prototyping  includes:  

In-­‐screen  mobile  prototype    

Mobile  browser  prototype  

Mobile  prototype  using  presenta`on  so]ware  

Pla_orm  specific  prototype  

1

2

3

44

Pros  and  Cons  of  Common  On-­‐Device  Prototyping  Tools  

Level  of  Complexity/Difficulty  to  Create  

Level  of  Interac+vity  

Level  of  Programming  Required  

In-­‐Screen  Prototype   Low   Low   None  

Browser  Prototype   Medium   Low   Low  

Keynote/Powerpoint  Prototype  

Medium   Medium   None  

Pla_orm-­‐Specific  Prototype  (example:  XCode  for  the  Apple  pla_orm)  

High   High   High  

Given  the  limita`ons  of  sta`c  image  prototypes,  

Interac`ve  On-­‐Device  Prototyping  are  interac`ve  

prototyping  techniques.  

Interac`ve  On-­‐Device  Prototyping  

You  can  explore  almost  any  aspect  of  the  user  experience.      In  contrast  to  sta`c  image  prototypes,  you  can  provide  forms,  transi`ons,  and  scrolling  content.  

ISSUES  TO  EXPLORE  

Although  interac`ve  prototypes  are  powerful,  there  are  s`ll  some  aspects  that  differen`ate  them  from  the  “real”  experience.    In  par`cular,  you  will  s`ll  likely  need  to  fake  the  current  loca`on  informa`on,  live  data  feeds,  and  the  handling  of  interrup`ons  (what  happens  when  the  connec`on  is  lost  or  disrupted?).  

CHALLENGES  

In-­‐screen  mobile  prototype    

The  idea  behind  this  technique  is  simple:  place  the  paper  prototype  of  the  mobile  applica`on  inside  the  mobile  device.  

In-­‐screen  mobile  prototype    

This  prototyping  technique  is  prac`cal  since  it  leverages  prototypes  that  are  likely  to  have  been  previously  made  for  tes`ng.    

In-­‐screen  mobile  prototype    

If  a  designer  has  sketched  a  number  of  paper  prototypes  to  conduct  a  usability  test  or  a  heuris`c  evalua`on,  these  can  be  easily  turned  into  paper-­‐in-­‐screen  prototypes.  

In-­‐screen  Mobile  Prototype  How  to    

In-Screen Prototype – 60 mins

IN-­‐SCREEN  PROTOTYPE  

1.  Identify one of the scenarios/flows from your previous

exercise

2.  Create a quick paper version of the prototype

3.  Take pictures from your camera, upload it, optimize it and

test it

10  MINS  BREAK  

A  browser  prototype  is  simply  a  prototype  that  is  

rendered  by  using  your  mobile  device’s  browser,  

which  is  using  HTML  and  other  browser-­‐based  

programming  such  as  JavaScript.  

MOBILE  BROWSER  PROTOTYPE  

For  those  less  familiar  with  extensive  markup,  

you  can  easily  upload  a  series  of  linked  image  

maps  of  screen  layouts  and  view  them  through  

your  phone’s  browser.  

MOBILE  BROWSER  PROTOTYPE    

1

Mobile  Browser  Prototypes  are  medium  fidelity,  very  

interac`ve  and  hence  can  be  tested  with  full  

interac`ons  

MOBILE  BROWSER  PROTOTYPE  BENEFITS  

Mobile  Browser  Prototype  How  to    

Mobile Browser Prototype – 30 mins

MOBILE  BROWSER  PROTOTYPE  

1.  Identify one of the scenarios/flows from your previous

exercises

2.  Create a click through version of your App

3.  Test it in mobile browser or emulators

Crea`ng  prototypes  using  presenta`on  so]ware  such  

as  Apple  Keynote  or  Microso]  PowerPoint  is  an  

efficient  way  to  prototype  interac`vity  and  transi`ons  

on  a  mobile  device.  

MOBILE  PROTOTYPE  USING  PRESENTATION    SOFTWARE  

You  can  easily  download  pla_orm  components  from  

the  Web,  build  your  prototype  using  the  presenta`on  

so]ware,  fine-­‐tune  the  interac`ons  and  transi`ons  

included  in  the  so]ware,  and  download  the  file  to  

your  mobile  device.  

MOBILE  PROTOTYPE  USING  PRESENTATION    SOFTWARE  

While  designers  use  various  types  of  tools  to  

document  their  wireframe  ideas,  presenta`on  

so]ware  is  emerging  as  a  favorite  tool  in  the  mobile  

UX  realm.  

MOBILE  PROTOTYPE  USING  PRESENTATION    SOFTWARE  

In  addi`on  to  specifying  the  placement  of  design  

elements  on  a  screen,  presenta`on  so]ware  

enables  designers  to  turn  their  work  into  low-­‐

fidelity  on-­‐device  prototypes.    

MOBILE  PROTOTYPE  USING  PRESENTATION    SOFTWARE  -­‐  BENEFITS  

Instead  of  flat,  sta`c  documents,  presenta`on  

so]ware  offers  designers  the  ability  to  

experiment  with  transi`ons  and  interac`vity.  

MOBILE  PROTOTYPE  USING  PRESENTATION    SOFTWARE  -­‐  BENEFITS  

MOBILE  PROTOTYPE  USING  PRESENTATION    SOFTWARE  -­‐  HOW  TO  

Mobile Prototyping – 30 mins

MOBILE  PROTOTYPING  

1.  Identify one of the scenarios/flows from your previous

exercises

2.  Create a click through prototype using power point or

keynote

3.  Upload your design file into mobile device

4.  Test it on device

BREAK  

PLATFORM  SPECIFIC  PROTOTYPING  

PLATFORM  SPECIFIC  PROTOTYPING  

Is  a  technique  where  pla_orm  specific  prototypes  are  created  using  na`ve  SDK’s  

PLATFORM  SPECIFIC  PROTOTYPING  –    CHALLENGES  

Requires  pla_orm  specialized  Programming  skills    

PLATFORM  SPECIFIC  PROTOTYPING  –    CHALLENGES  

Development  `me  and  effort  is  more  

PLATFORM  SPECIFIC  PROTOTYPING  –    BENEFITS  

Completely  interac`ve  and  can  leverage  device’s  na`ve  capabili`es  

EXPERIENTIAL  PROTOTYPING  

Storyboarding  

Bodystorming  

Speed  da`ng  prototypes  

Concept  videos  

EXPERIENTIAL  PROTOTYPING  

1

2

3

4

STORYBOARDING  

is  a  powerful  UX  technique  borrowed  from  the  filmmaking  process  

Storyboarding  helps  us  to  understand  exis`ng  scenarios,  a  well  as  test  hypotheses  for  poten`al  scenarios.  

STORYBOARDING  HOW  TO?  

Storyboarding  

Bodystorming  

Speed  da`ng  prototypes  

Concept  videos  

EXPERIENTIAL  PROTOTYPING  

1

2

3

4

BODYSTORMING  

Body storming is a technique that helps capture and harness these messy yet essential aspects of human behavior and account for them in the mobile design process.

Body storming involves acting out possible scenarios or use cases with actors and props.  

BODYSTORMING  HOW  TO?  

BODYSTORMING  HOW  TO?  

Bodystorming will help you capture the emotional tenor of mobile interactions

Storyboarding  

Bodystorming  

Speed  da`ng  prototypes  

Concept  videos  

EXPERIENTIAL  PROTOTYPING  

1

2

3

4

SPEED  DATING  PROTOTYPES  

Speed  Da`ng  Prototypes  are  especially  well-­‐suited  for  gathering  user  impressions  of    a  new-­‐to-­‐the-­‐world  experience    

SPEED  DATING  PROTOTYPE  HOW  TO?