Mobile Prototyping

  • 666 views
Uploaded on

Prototyping for Mobile Design Workshop - January, 2012. Bangalore Presentation

Prototyping for Mobile Design Workshop - January, 2012. Bangalore Presentation

More in: Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
666
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
32
Comments
3
Likes
4

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Special Thanks to our Sponsors
  • 2. Introduction to Mobile Design3 ACTIVITES - DESIGNING FOR MOBILITY IDENTIFYING NEED FOR A MOBILE APPLICATION Need Analysis BRAINSTORMING AND IDEATING PRESENTING CONCEPTS Ideating
  • 3. Mobile Design Guidelines and patternsThe Design Process 3 ACTIVITES - DESIGNING FOR MOBILITY   Card Sort Story Boards
  • 4. MOBILE IS GROWINGLIKE CRAZY
  • 5. “MOBILE PHONESWILL OVERTAKE PC’SAS THE MOST COMMONWEB ACCESS DEVICESBY 2013” Gartner  Research,  2010  
  • 6. Google:  Our  Mobile  Planet,  May  2012  
  • 7. Google:  Our  Mobile  Planet,  May  2012  
  • 8. Google:  Our  Mobile  Planet,  May  2012  
  • 9. Google:  Our  Mobile  Planet,  May  2012  
  • 10. Google:  Our  Mobile  Planet,  May  2012  
  • 11. MOBILE PRESENTS ANOPPORTUNITY TO INVENTNEW WAYS FOR USERS TOINTERACT WITHINFORMATION.
  • 12. NEXT  BIG  QUESTION    WHAT  TYPE  OF  MOBILE  APP  TO  START  WITH    
  • 13. RESPONSIVE  WEBSITE?    WEB  APP  ?    NATIVE  APP?    HYBRID  APPS?  
  • 14. Thin ClientBrowser Apps
  • 15. PROS
  • 16. CONS
  • 17. Rich ClientNative Apps
  • 18. PROS
  • 19. CONS  
  • 20. MOBILE DESIGNCHALLENGESANDGUIDELINES
  • 21. Who are the users?What do you know about them?What type of behavior can you assume or predict aboutthe users?What is happening?What are the circumstances in which the users will bestabsorb the content you intend to present?
  • 22. FACTORS THAT INFLUENCE PERFORMANCE.
  • 23. OPTIMIZEYOURAPP FORHIGHPERFORMANCE
  • 24. ONLY DESIGN WHATMAKES SENSE FOR AMOBILE CONTEXT
  • 25. COMMON FEATURESTHAT IMPACT THEUSER EXPERIENCE
  • 26. FEATURE WHAT IT DOES EXAMPLE APP OR FEATURECamera Takes photos & often Too many to list! video.GPS Provides the phone’s Maps location.Accelerometer Detects the phone’s Determines when to orientation. switch from portrait to landscape viewMagnetometer Detects the phone’s Compass direction.Gyroscope Detects 3-axis angular Gaming acceleration around the X, Y and Z axes.Proximity sensor Detects proximity of user Cue to dim screen when to phone. user speaking on phone.Light sensor Determines how much Adjusts screen brightness light is available in the to area surrounding the conserve battery. phone
  • 27. How can food joints use mobiledevices to improve their customerexperience?
  • 28. Identifying Needs – 30 mins1.  Divide into groups2.  Head to the nearest food joint3.  Observe mobile users in a mobile context4.  Develop a list of customer needs based on your observations
  • 29. Ideating the Context – 30 mins1.  Brainstorm with the team2.  Create 2-3 unique concepts based on the needs your team identified3.  Give your concept a name4.  Create user profiles
  • 30. Presenting Concepts1.  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
  • 31. MOBILE MINDSET
  • 32. Because of thedifferences betweenmobile and desktop,it’s imperative to getyourself into amobile mindsetbefore gettingstarted.
  • 33. Be  focused:  More  is  not  bePer.  Edit  your  features  1 ruthlessly.  You  are  going  to  have  to  leave  stuff  out  
  • 34. 2 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?  
  • 35. 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.    
  • 36. Be  considerate:  App  developers  too  o]en  focus  on  what  4 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.  
  • 37. MOBILE CONTEXTS
  • 38. IS THIS THECONTEXTS?
  • 39. It  is  certainly  one  context,  but  it’s  not  the  only  one.  
  • 40. To  begin  to  put  ourselves  in  the  shoes  of  our  users,  we  need  to  consider  three  major  mobile  contexts  
  • 41. 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.    
  • 42. 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.  
  • 43. 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.  
  • 44. COMMUNICATIONS
  • 45. 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).    
  • 46. 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.  
  • 47. 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.    
  • 48. GLOBAL GUIDELINES
  • 49. 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.  
  • 50. 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.  
  • 51. 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.        
  • 52. 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.          
  • 53. 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.  
  • 54. 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.        
  • 55. NAVIGATION MODEL
  • 56. There  are  plenty  of  novel  naviga`on  models  for  mobile  apps  but  if  youre  going  to  use  one  of  common  naviga`on  models,  be  sure  to  pick  the  one  that  makes  the  most  sense  for  your  app.  
  • 57. None:  Single  screen  u`lity  apps  (eg  Weather  app  on  iPhone)  
  • 58. Tab  bar:  Three  to  six  dis`nct  content  areas  (eg  TwiPer  for  iPhone)  
  • 59. Drill  down:  List  and  detail  content  hierarchy  (eg  Sekngs  app  on  iPhone)  
  • 60. USER INPUT
  • 61. Typing  s`nks  even  on  the  best  devices,  so  you  should  do  what  you  can  to  make  it  easier  for  your  users.  
  • 62. If  your  app  invites  a  lot  of  typing,  you  should  ensure  you  support  landscape  orienta`on.  
  • 63. 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.  
  • 64. GESTURES
  • 65. One  of  the  most  iconic  aspects  of  modern  touch  interfaces  is  that  they  support  gesture-­‐based  user  interac`on.    
  • 66. Gestures  are  invisible,  so  discovery  is  an  issue.  You  have  to  decide  how  to  reveal  their  existence  to  the  user.  
  • 67. 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    
  • 68. Discover  Understand  and  iden`fy  the  core    problems  first    
  • 69. HOW  DO  WE    DEFINE    PROBLEMS?  
  • 70. CULTURAL   A ND   S OCIAL  
  • 71. CHALLENGES    AND    NEEDS  
  • 72. DEMOGRAPHICS   A ND   A BILITIES    
  • 73. ENVIRONMENTAL   A ND  CONTEXTUAL  
  • 74. HOW  DO  WE    IDENTIFY    PROBLEMS?  
  • 75. STAKEHOLDER   I NTERVIEWS  
  • 76. KICKOFF   M EETINGS  
  • 77. CONTENT   A UDIT/INVENTORY  
  • 78. FOCUS   G ROUP  
  • 79. CONTEXTUAL   I NQUIRIES  
  • 80. PERSONAS  
  • 81. PLAN  Iden`fy  possible  solu`ons  and  plan    execu`on    
  • 82. Design  Create  designs  that  resolve  the  core    problems    
  • 83. HOW  DO  WE    RESOLVE  THE  PROBLEMS?  
  • 84. SCENARIOS  
  • 85. CARD   S ORTING  
  • 86. APP   M AP   O R   F LOWCHART  
  • 87. WIREFRAME  
  • 88. PROTOTYPE  
  • 89. USABILITY   T ESTING  
  • 90. BUILD  Develop  func`onal  code  based  on  the    designs    
  • 91. EVALUATE  Review,  test,  and  analyze  effec`veness    of  the  design    
  • 92. RECAPHow can food joints use mobiledevices to improve their customerexperience?
  • 93. INFORMATION   G ATHERING  Information Gathering– 45 mins1.  Note down a list of possible features for your app concept2.  Prepare the cards3.  Execute card sorting4.  Analyze the results
  • 94. 15 MINUTES BREAK
  • 95. STORYBOARDING  Storyboarding – 60 mins1.  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
  • 96. MOBILE PROTOTYPING ESSENTIALS2 ACTIVITES - DESIGNING FOR MOBILITY QUIZ Need Analysis DESIGNING AND TESTING PAPER PROTOTYPES Ideating
  • 97. MOBILE PROTOTYPING ESSENTIALS3 ACTIVITES - DESIGNING FOR MOBILITY IN DEVICE INTERACTIVE PROTOTYPES Need Analysis MOBILE BROWSER PROTOTYPE MOBILE PROTOTYPE USING PRESENTATION SOFTWARE Ideating
  • 98. MobilePrototypingTools andMethods
  • 99. What isPrototyping?
  • 100. THE  WORD   PROTOTYPE  comes   from  the  Greek    FIRST   pratos,     which  means  "first,"  IMPRESSION     and  typos.  which   means   "impression.”    
  • 101. Why  Prototyping?  
  • 102. Prototypes  can  help  you  solve  design  problems,  evaluate  designs  and  communicate  design  ideas  
  • 103. SOLVE   D ESIGN   P ROBLEMS  Prototypes  can  be  an  efficient  way  to  work  through  design  problems  before  gekng  deep  into  coding.      
  • 104. SOLVE DESIGN PROBLEMSThey  can  help  address  everything  from  higher-­‐level  conceptual  issues  to  lower-­‐level  interac`ons.  
  • 105. EVALUATE   D ESIGN   I DEAS  Prototypes are often used to evaluatedesign ideas, concepts, flows, andInteractions before investingdevelopment time.
  • 106. IN   A   N UTSHELL   1 Prototypes  make  your  designs  bePer   2 Prototypes  facilitate  communica`on   Prototypes  enable  user  input  and  usability   3 assessment   4 Prototypes  help  assess  technical  feasibility  
  • 107. THE PROTOTYPINGSPECTRUM
  • 108. LOW   F IDELITY  
  • 109. MEDIUM   F IDELITY  
  • 110. HIGH   F IDELITY  
  • 111. THE PROTOTYPINGGENRES
  • 112. TACTICAL   P ROTOTYPING   1 Sketching   2 Paper  Prototyping   3 Interac`ve  On-­‐Device  Prototyping  
  • 113. Interac`ve  On-­‐Device  Prototyping  includes:   1 In-­‐screen  mobile  prototype     2 Mobile  browser  prototype   3 Mobile  prototype  using  presenta`on  so]ware   4 Pla_orm  specific  prototype   4
  • 114. Best suited for design explorations where: 1 You are working on a “focused” mobile project. 2 Target mobile hardware and software scope is known. 3 The design space is relatively known.
  • 115. EXPERIENTIAL   P ROTOTYPING   1 Storyboarding   2 Bodystorming   3 Speed  da`ng  prototypes   4 Concept  videos  
  • 116. Best suited for design explorations where: 1 You are working on a “broader” mobile project. Target mobile hardware and software 2 scope is unknown (perhaps being created). 3 The design space is relatively unchartered.
  • 117. TACTICAL   P ROTOTYPING  
  • 118. TACTICAL   P ROTOTYPING   1 Sketching   2 Paper  Prototyping   3 Interac`ve  On-­‐Device  Prototyping  
  • 119. Sketching  is  rapid,  freehand  drawing  that  we  do  with  no  inten`on  of  its  becoming  a  finished  product.    
  • 120. Sketching  is  a  founda`on  upon  which  we  can  overlay  our  actual  design  work.  
  • 121. SKETCHING   B ENEFITS  
  • 122. Quick:  A  sketch  is  quick  to  make,  or  at  least  gives  that  impression.  
  • 123. Timely:  A  sketch  can  be  provided  when  needed.  
  • 124. Inexpensive:  A  sketch  is  cheap.  Cost  must  not  inhibit  the  ability  to  explore  a  concept,  especially  early  in  the  design  process.  
  • 125. WHEN  DO  WE  USE  THESE  SKETCH    PROTOTYPES?  
  • 126. DESIGNING  INTERFACES    •  Visualizing  concepts    •  Exploring  alterna`ves    •  Resolving  feature  details      •  Developing  interac`on  scenarios  
  • 127. TESTING  INTERFACES    •  Intelligibility  -­‐  can  you  read  or  interpret  this?    •  Trackability  -­‐  can  you  follow  this?    •  Fumble  factor  -­‐  can  you  make  this  work?    
  • 128. 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  
  • 129. TACTICAL   P ROTOTYPING   1 Sketching   2 Paper  Prototyping   3 Interac`ve  On-­‐Device  Prototyping  
  • 130. PAPER  PROTOTYPE?  
  • 131. Paper  prototyping  is  a  key  component  of  the  DESIGN  process  and  is  a  popular  method  among  designers.  
  • 132. Paper  prototypes  are  essen`ally  paper  models  of  your  smartphone  apps    
  • 133. PAPER   P ROTOTYPE   B ENEFITS  
  • 134. 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.  
  • 135. 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.    
  • 136. Collabora+ve    Paper  prototypes  do  not  require  any  technical  skills;  thus  everyone  (users,  too!)  can  par`cipate.  
  • 137. Easy  to  edit    You  or  your  users  can  edit  paper  prototypes  on  the  &  y  (e.g.,  change  labels,  add  screens,  add  buPons)  
  • 138. PAPER   P ROTOTYPE   C HALLENGES   Paper  prototypes  are  less  suitable  for   refining  low-­‐level  interac`ons  such  as   transi`ons,  scrolling,  and  swiping.  
  • 139. PAPER   P ROTOTYPE   C HALLENGES   Less  useful  for  certain  classes  of  apps,   such  as  musical  instruments,  videos,  and   games.  
  • 140. User  experience  issues  o]en  explored  with  paper  prototypes  include  
  • 141. App  concept  -­‐  Do  users  understand  your  app’s  central  1 concept?  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  users  expecta`ons?   Terminology  -­‐  Are  the  labels  on  tabs,  screens,  and  4 buPons  clear?  
  • 142. PAPER   P ROTOTYPING    HOW   T O?  
  • 143. PAPER,  PEN,  CARDBOARD,  REMOVABLE  TAPE,  GLUE,  CORRECTION    FLUID,  AND  SCISSORS.  
  • 144. 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)  
  • 145. Your  prototype  will  include  a  background,  the  screens,  and  the  user  interface  controls.    
  • 146. RECAPHow can food joints use mobiledevices to improve their customerexperience?
  • 147. PAPER   P ROTOTYPE  Create Paper Prototype – 60 mins1.  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.
  • 148. PAPER   P ROTOTYPE  Test Paper Prototype – 60 mins1.  Prepare for testing your paper prototype2.  Identify a participant as user, provide him a test script3.  Identify and make notes of your finding
  • 149. LUNCH  
  • 150. TACTICAL   P ROTOTYPING   1 Sketching   2 Paper  Prototyping   3 Interac`ve  On-­‐Device  Prototyping  
  • 151. Interac`ve  On-­‐Device  Prototyping  includes:   1 In-­‐screen  mobile  prototype     2 Mobile  browser  prototype   3 Mobile  prototype  using  presenta`on  so]ware   4 Pla_orm  specific  prototype   4
  • 152. Pros  and  Cons  of  Common  On-­‐Device   Prototyping  Tools   Level  of   Level  of   Level  of   Complexity/ Interac+vity   Programming   Difficulty  to  Create   Required  In-­‐Screen  Prototype   Low   Low   None  Browser  Prototype   Medium   Low   Low  Keynote/ Medium   Medium   None  Powerpoint  Prototype  Pla_orm-­‐Specific   High   High   High  Prototype  (example:  XCode  for  the  Apple  pla_orm)  
  • 153. Interac`ve  On-­‐Device  Prototyping   Given  the  limita`ons  of  sta`c  image  prototypes,   Interac`ve  On-­‐Device  Prototyping  are  interac`ve   prototyping  techniques.  
  • 154. ISSUES  TO  EXPLORE  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.  
  • 155. CHALLENGES  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?).  
  • 156. In-­‐screen  mobile  prototype     The  idea  behind  this  technique  is  simple:  place   the  paper  prototype  of  the  mobile  applica`on   inside  the  mobile  device.  
  • 157. 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.    
  • 158. 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.  
  • 159. In-­‐screen  Mobile  Prototype  How  to    
  • 160. IN-­‐SCREEN   P ROTOTYPE  In-Screen Prototype – 60 mins1.  Identify one of the scenarios/flows from your previous exercise2.  Create a quick paper version of the prototype3.  Take pictures from your camera, upload it, optimize it and test it
  • 161. 10   M INS   B REAK  
  • 162. MOBILE   B ROWSER   P ROTOTYPE   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.  
  • 163. MOBILE   B ROWSER   P ROTOTYPE     1 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.      
  • 164. MOBILE   B ROWSER   P ROTOTYPE  BENEFITS   Mobile  Browser  Prototypes  are  medium  fidelity,  very   interac`ve  and  hence  can  be  tested  with  full   interac`ons  
  • 165. Mobile  Browser  Prototype  How  to    
  • 166. MOBILE   B ROWSER   P ROTOTYPE  Mobile Browser Prototype – 30 mins1.  Identify one of the scenarios/flows from your previous exercises2.  Create a click through version of your App3.  Test it in mobile browser or emulators
  • 167. MOBILE  PROTOTYPE  USING  PRESENTATION     SOFTWARE  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.      
  • 168. 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.      
  • 169. 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.    
  • 170. MOBILE  PROTOTYPE  USING  PRESENTATION    SOFTWARE  -­‐  BENEFITS   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.    
  • 171. 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.  
  • 172. MOBILE  PROTOTYPE  USING  PRESENTATION    SOFTWARE  -­‐  HOW  TO  
  • 173. MOBILE   P ROTOTYPING  Mobile Prototyping – 30 mins1.  Identify one of the scenarios/flows from your previous exercises2.  Create a click through prototype using power point or keynote3.  Upload your design file into mobile device4.  Test it on device
  • 174. BREAK  
  • 175. PLATFORM   S PECIFIC   P ROTOTYPING  
  • 176. PLATFORM   S PECIFIC   P ROTOTYPING   Is  a  technique  where  pla_orm  specific   prototypes  are  created  using  na`ve   SDK’s  
  • 177. PLATFORM   S PECIFIC   P ROTOTYPING   –    CHALLENGES   Requires  pla_orm  specialized   Programming  skills    
  • 178. PLATFORM   S PECIFIC   P ROTOTYPING   –    CHALLENGES   Development  `me  and  effort  is  more  
  • 179. PLATFORM   S PECIFIC   P ROTOTYPING   –    BENEFITS   Completely  interac`ve  and  can   leverage  device’s  na`ve  capabili`es  
  • 180. EXPERIENTIAL   P ROTOTYPING  
  • 181. EXPERIENTIAL   P ROTOTYPING   1 Storyboarding   2 Bodystorming   3 Speed  da`ng  prototypes   4 Concept  videos  
  • 182. STORYBOARDING  
  • 183. is  a  powerful  UX  technique  borrowed  from  the  filmmaking  process  
  • 184. Storyboarding  helps  us  to  understand  exis`ng  scenarios,  a  well  as  test  hypotheses  for  poten`al  scenarios.  
  • 185. STORYBOARDING   H OW   T O?  
  • 186. EXPERIENTIAL   P ROTOTYPING   1 Storyboarding   2 Bodystorming   3 Speed  da`ng  prototypes   4 Concept  videos  
  • 187. BODYSTORMING
  • 188. Body storming is a technique thathelps capture and harness thesemessy yet essential aspects ofhuman behavior and account forthem in the mobile design process.
  • 189. Body storming involves acting outpossible scenarios or use cases withactors and props.  
  • 190. BODYSTORMING   H OW   T O?  
  • 191. BODYSTORMING   H OW   T O?  
  • 192. Bodystorming will help you capture theemotional tenor of mobile interactions
  • 193. EXPERIENTIAL   P ROTOTYPING   1 Storyboarding   2 Bodystorming   3 Speed  da`ng  prototypes   4 Concept  videos  
  • 194. SPEED   D ATING   P ROTOTYPES  
  • 195. Speed  Da`ng  Prototypes  are  especially  well-­‐suited  for  gathering  user  impressions  of    a  new-­‐to-­‐the-­‐world  experience    
  • 196. SPEED   D ATING   P ROTOTYPE   H OW   T O?