Special Thanks to our Sponsors
Introduction to Mobile Design3 ACTIVITES - DESIGNING FOR MOBILITY                 IDENTIFYING NEED FOR A MOBILE APPLICATIO...
Mobile Design Guidelines and patternsThe Design Process 3 ACTIVITES - DESIGNING FOR MOBILITY           	    Card Sort   St...
MOBILE IS GROWINGLIKE CRAZY
“MOBILE PHONESWILL OVERTAKE PC’SAS THE MOST COMMONWEB ACCESS DEVICESBY 2013”                     Gartner	  Research,	  201...
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 ANOPPORTUNITY TO INVENTNEW WAYS FOR USERS TOINTERACT WITHINFORMATION.
NEXT	  BIG	  QUESTION	  	  WHAT	  TYPE	  OF	  MOBILE	  APP	  TO	  START	  WITH	  	  
RESPONSIVE	  WEBSITE?	  	  WEB	  APP	  ?	  	  NATIVE	  APP?	  	  HYBRID	  APPS?	  
Thin ClientBrowser Apps
PROS
CONS
Rich ClientNative Apps
PROS
CONS	  
MOBILE DESIGNCHALLENGESANDGUIDELINES
Who are the users?What do you know about them?What type of behavior can you assume or predict aboutthe users?What is happe...
FACTORS THAT INFLUENCE PERFORMANCE.
OPTIMIZEYOURAPP FORHIGHPERFORMANCE
ONLY DESIGN WHATMAKES SENSE FOR AMOBILE CONTEXT
COMMON FEATURESTHAT IMPACT THEUSER EXPERIENCE
FEATURE            WHAT IT DOES                EXAMPLE APP OR                                               FEATURECamera ...
How can food joints use mobiledevices to improve their customerexperience?
Identifying Needs – 30 mins1.  Divide into groups2.  Head to the nearest food joint3.  Observe mobile users in a mobile co...
Ideating the Context – 30 mins1.  Brainstorm with the team2.  Create 2-3 unique concepts based on the needs   your team id...
Presenting Concepts1.  Each team would present a 10 minute introduction to their   app which would include   1.  Elevator ...
MOBILE MINDSET
Because of thedifferences betweenmobile and desktop,it’s imperative to getyourself into amobile mindsetbefore gettingstart...
Be	  focused:	  More	  is	  not	  bePer.	  Edit	  your	  features	  1   ruthlessly.	  You	  are	  going	  to	  have	  to	 ...
2   Be	  unique:	  Know	  what	  makes	  your	  app	  different	  and	      amplify	  it.	  	      	      There	  are	  lot...
3   Be	  charming:	  Mobile	  devices	  are	  intensely	  personal.	  They	      are	  our	  constant	  companions.	  	   ...
Be	  considerate:	  App	  developers	  too	  o]en	  focus	  on	  what	  4   would	  be	  fun	  to	  develop,	  their	  own...
MOBILE CONTEXTS
IS THIS THECONTEXTS?
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	  mob...
There	  are	  a	  lot	  of	  people	  using	  their	  smartphones	  on	  the	  couch	  at	  home.	  In	  this	  context,	 ...
This	  is	  the	  running	  though	  the	  airport	  scenario.	  The	  ability	  to	  accomplish	  micro-­‐tasks	  quickly...
Users	  who	  are	  in	  transit,	  in	  unfamiliar	  surroundings,	  or	  in	  familiar	  surroundings	  but	  interested...
COMMUNICATIONS
Provide	  instant	  feedback	  for	  every	  interac`on.	  	  	  If	  you	  don’t,	  the	  user	  will	  wonder	  if	  the...
Modal	  alerts	  are	  extremely	  pushy	  and	  intrusive	  to	  the	  user’s	  flow,	  so	  you	  should	  only	  use	  t...
When	  you	  have	  to	  ask	  a	  user	  to	  confirm	  an	  ac`on,	  it’s	  acceptable	  to	  display	  a	  modal	  confir...
GLOBAL GUIDELINES
Different	  apps	  call	  for	  different	  approaches,	  designs	  and	  techniques.	  	  	  The	  inherent	  nature	  of	 ...
Responsiveness	  is	  absolutely	  cri`cal.	  	  If	  your	  user	  does	  something,	  your	  app	  needs	  to	  acknowle...
Polish	  is	  extremely	  valuable.	  	  	  Because	  of	  the	  constant	  companion	  nature	  of	  our	  rela`onship	  ...
With	  the	  advent	  of	  touchscreen	  interfaces,	  everyone	  is	  always	  talking	  about	  finger	  this	  and	  fing...
The	  revolu`on	  of	  touch	  interfaces	  is	  that	  they	  enable	  us	  to	  interact	  directly	  with	  our	  conte...
Avoid	  scrolling.	  	  Having	  a	  non-­‐scrolling	  screen	  has	  a	  more	  solid	  and	  dependable	  feel	  than	  ...
NAVIGATION MODEL
There	  are	  plenty	  of	  novel	  naviga`on	  models	  for	  mobile	  apps	  but	  if	  youre	  going	  to	  use	  one	 ...
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	 ...
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)....
GESTURES
One	  of	  the	  most	  iconic	  aspects	  of	  modern	  touch	  interfaces	  is	  that	  they	  support	  gesture-­‐based...
Gestures	  are	  invisible,	  so	  discovery	  is	  an	  issue.	  You	  have	  to	  decide	  how	  to	  reveal	  their	  e...
Mul`-­‐touch	  gestures	  require	  two-­‐handed	  opera`on.	  	  EXAMPLE	  in	  the	  na`ve	  Maps	  app	  on	  iOS	  whi...
Discover	  Understand	  and	  iden`fy	  the	  core	  	  problems	  first	  	  
HOW	  DO	  WE	  	  DEFINE	  	  PROBLEMS?	  
CULTURAL	   A ND	   S OCIAL	  
CHALLENGES	   	  AND	   	  NEEDS	  
DEMOGRAPHICS	   A ND	   A BILITIES	   	  
ENVIRONMENTAL	   A ND	  CONTEXTUAL	  
HOW	  DO	  WE	  	  IDENTIFY	  	  PROBLEMS?	  
STAKEHOLDER	   I NTERVIEWS	  
KICKOFF	   M EETINGS	  
CONTENT	   A UDIT/INVENTORY	  
FOCUS	   G ROUP	  
CONTEXTUAL	   I NQUIRIES	  
PERSONAS	  
PLAN	  Iden`fy	  possible	  solu`ons	  and	  plan	  	  execu`on	  	  
Design	  Create	  designs	  that	  resolve	  the	  core	  	  problems	  	  
HOW	  DO	  WE	  	  RESOLVE	  THE	  PROBLEMS?	  
SCENARIOS	  
CARD	   S ORTING	  
APP	   M AP	   O R	   F LOWCHART	  
WIREFRAME	  
PROTOTYPE	  
USABILITY	   T ESTING	  
BUILD	  Develop	  func`onal	  code	  based	  on	  the	  	  designs	  	  
EVALUATE	  Review,	  test,	  and	  analyze	  effec`veness	  	  of	  the	  design	  	  
RECAPHow can food joints use mobiledevices to improve their customerexperience?
INFORMATION	   G ATHERING	  Information Gathering– 45 mins1.  Note down a list of possible features for your app    concep...
15 MINUTES BREAK
STORYBOARDING	  Storyboarding – 60 mins1.  Based on your previous activities, Identify the central   idea(s) you are tryin...
MOBILE PROTOTYPING ESSENTIALS2 ACTIVITES - DESIGNING FOR MOBILITY                 QUIZ Need Analysis                 DESIG...
MOBILE PROTOTYPING ESSENTIALS3 ACTIVITES - DESIGNING FOR MOBILITY                 IN DEVICE INTERACTIVE PROTOTYPES Need An...
MobilePrototypingTools andMethods
What isPrototyping?
THE	  WORD	                   PROTOTYPE	  comes	                   from	  the	  Greek	  	  FIRST	          pratos,	  	    ...
Why	  Prototyping?	  
Prototypes	  can	  help	  you	  solve	  design	  problems,	  evaluate	  designs	  and	  communicate	  design	  ideas	  
SOLVE	   D ESIGN	   P ROBLEMS	  Prototypes	  can	  be	  an	  efficient	  way	  to	  work	  through	  design	  problems	  bef...
SOLVE DESIGN PROBLEMSThey	  can	  help	  address	  everything	  from	  higher-­‐level	  conceptual	  issues	  to	  lower-­...
EVALUATE	   D ESIGN	   I DEAS	  Prototypes are often used to evaluatedesign ideas, concepts, flows, andInteractions before...
IN	   A 	   N UTSHELL	      1       Prototypes	  make	  your	  designs	  bePer	      2       Prototypes	  facilitate	  com...
THE PROTOTYPINGSPECTRUM
LOW	   F IDELITY	  
MEDIUM	   F IDELITY	  
HIGH	   F IDELITY	  
THE PROTOTYPINGGENRES
TACTICAL	   P ROTOTYPING	   1   Sketching	   2   Paper	  Prototyping	   3   Interac`ve	  On-­‐Device	  Prototyping	  
Interac`ve	  On-­‐Device	  Prototyping	  includes:	      1   In-­‐screen	  mobile	  prototype	  	      2   Mobile	  browse...
Best suited for design explorations where: 1     You are working on a “focused” mobile       project. 2     Target mobile ...
EXPERIENTIAL	   P ROTOTYPING	   1   Storyboarding	   2   Bodystorming	   3   Speed	  da`ng	  prototypes	   4   Concept	  v...
Best suited for design explorations where: 1     You are working on a “broader” mobile       project.       Target mobile ...
TACTICAL	   P ROTOTYPING	  
TACTICAL	   P ROTOTYPING	   1   Sketching	   2   Paper	  Prototyping	   3   Interac`ve	  On-­‐Device	  Prototyping	  
Sketching	  is	  rapid,	  freehand	  drawing	  that	  we	  do	  with	  no	  inten`on	  of	  its	  becoming	  a	  finished	 ...
Sketching	  is	  a	  founda`on	  upon	  which	  we	  can	  overlay	  our	  actual	  design	  work.	  
SKETCHING	   B ENEFITS	  
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,	  espe...
WHEN	  DO	  WE	  USE	  THESE	  SKETCH	  	  PROTOTYPES?	  
DESIGNING	  INTERFACES	  	  •	  Visualizing	  concepts	  	  •	  Exploring	  alterna`ves	  	  •	  Resolving	  feature	  det...
TESTING	  INTERFACES	  	  •	  Intelligibility	  -­‐	  can	  you	  read	  or	  interpret	  this?	  	  •	  Trackability	  -­...
PRESENTING	  INTERFACE	  IDEAS	  	  •	  To	  UI	  designers	  -­‐	  looking	  at	  all	  parts	  of	  the	  interface	  	 ...
TACTICAL	   P ROTOTYPING	   1   Sketching	   2   Paper	  Prototyping	   3   Interac`ve	  On-­‐Device	  Prototyping	  
PAPER	  PROTOTYPE?	  
Paper	  prototyping	  is	  a	  key	  component	  of	  the	  DESIGN	  process	  and	  is	  a	  popular	  method	  among	  d...
Paper	  prototypes	  are	  essen`ally	  paper	  models	  of	  your	  smartphone	  apps	  	  
PAPER	   P ROTOTYPE	   B ENEFITS	  
Quick	  itera+ons	  	  Paper	  prototypes	  enable	  you	  to	  rapidly	  iterate	  and	  experiment	  with	  many	  ideas...
Inexpensive	  	  Ordinary	  office	  supplies	  can	  be	  used	  for	  paper	  prototypes:	  Sharpies,	  Pos`ts,	  printer	...
Collabora+ve	  	  Paper	  prototypes	  do	  not	  require	  any	  technical	  skills;	  thus	  everyone	  (users,	  too!)	...
Easy	  to	  edit	  	  You	  or	  your	  users	  can	  edit	  paper	  prototypes	  on	  the	  &	  y	  (e.g.,	  change	  lab...
PAPER	   P ROTOTYPE	   C HALLENGES	    Paper	  prototypes	  are	  less	  suitable	  for	    refining	  low-­‐level	  intera...
PAPER	   P ROTOTYPE	   C HALLENGES	   Less	  useful	  for	  certain	  classes	  of	  apps,	   such	  as	  musical	  instru...
User	  experience	  issues	  o]en	  explored	  with	  paper	  prototypes	  include	  
App	  concept	  -­‐	  Do	  users	  understand	  your	  app’s	  central	  1   concept?	  2   Workflows	  -­‐	  Is	  the	  ov...
PAPER	   P ROTOTYPING	   	  HOW	   T O?	  
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	 ...
Your	  prototype	  will	  include	  a	  background,	  the	  screens,	  and	  the	  user	  interface	  controls.	  	  
RECAPHow can food joints use mobiledevices to improve their customerexperience?
PAPER	   P ROTOTYPE	  Create Paper Prototype – 60 mins1.  Create a paper prototype that illustrates 3 major tasks for   yo...
PAPER	   P ROTOTYPE	  Test Paper Prototype – 60 mins1.  Prepare for testing your paper prototype2.  Identify a participant...
LUNCH	  
TACTICAL	   P ROTOTYPING	   1   Sketching	   2   Paper	  Prototyping	   3   Interac`ve	  On-­‐Device	  Prototyping	  
Interac`ve	  On-­‐Device	  Prototyping	  includes:	     1    In-­‐screen	  mobile	  prototype	  	     2    Mobile	  browse...
Pros	  and	  Cons	  of	  Common	  On-­‐Device	   Prototyping	  Tools	                                   Level	  of	       ...
Interac`ve	  On-­‐Device	  Prototyping	   Given	  the	  limita`ons	  of	  sta`c	  image	  prototypes,	   Interac`ve	  On-­...
ISSUES	  TO	  EXPLORE	  You	  can	  explore	  almost	  any	  aspect	  of	  the	  user	  experience.	  	  	  In	  contrast	...
CHALLENGES	  Although	  interac`ve	  prototypes	  are	  powerful,	  there	  are	  s`ll	  some	  aspects	  that	  differen`a...
In-­‐screen	  mobile	  prototype	  	    The	  idea	  behind	  this	  technique	  is	  simple:	  place	    the	  paper	  pr...
In-­‐screen	  mobile	  prototype	  	    This	  prototyping	  technique	  is	  prac`cal	  since	  it	    leverages	  protot...
In-­‐screen	  mobile	  prototype	  	     If	  a	  designer	  has	  sketched	  a	  number	  of	  paper	     prototypes	  to...
In-­‐screen	  Mobile	  Prototype	  How	  to	  	  
IN-­‐SCREEN	   P ROTOTYPE	  In-Screen Prototype – 60 mins1.  Identify one of the scenarios/flows from your previous   exer...
10	   M INS	   B REAK	  
MOBILE	   B ROWSER	   P ROTOTYPE	     A	  browser	  prototype	  is	  simply	  a	  prototype	  that	  is	     rendered	  by...
MOBILE	   B ROWSER	   P ROTOTYPE	  	           1  For	  those	  less	  familiar	  with	  extensive	  markup,	    you	  can...
MOBILE	   B ROWSER	   P ROTOTYPE	  BENEFITS	   Mobile	  Browser	  Prototypes	  are	  medium	  fidelity,	  very	   interac`v...
Mobile	  Browser	  Prototype	  How	  to	  	  
MOBILE	   B ROWSER	   P ROTOTYPE	  Mobile Browser Prototype – 30 mins1.  Identify one of the scenarios/flows from your pre...
MOBILE	  PROTOTYPE	  USING	  PRESENTATION	  	         SOFTWARE	  Crea`ng	  prototypes	  using	  presenta`on	  so]ware	  su...
MOBILE	  PROTOTYPE	  USING	  PRESENTATION	  	  SOFTWARE	  You	  can	  easily	  download	  pla_orm	  components	  from	  th...
MOBILE	  PROTOTYPE	  USING	  PRESENTATION	  	  SOFTWARE	   While	  designers	  use	  various	  types	  of	  tools	  to	   ...
MOBILE	  PROTOTYPE	  USING	  PRESENTATION	  	  SOFTWARE	  -­‐	  BENEFITS	   In	  addi`on	  to	  specifying	  the	  placeme...
MOBILE	  PROTOTYPE	  USING	  PRESENTATION	  	  SOFTWARE	  -­‐	  BENEFITS	    Instead	  of	  flat,	  sta`c	  documents,	  pr...
MOBILE	  PROTOTYPE	  USING	  PRESENTATION	  	  SOFTWARE	  -­‐	  HOW	  TO	  
MOBILE	   P ROTOTYPING	  Mobile Prototyping – 30 mins1.  Identify one of the scenarios/flows from your previous   exercise...
BREAK	  
PLATFORM	   S PECIFIC	   P ROTOTYPING	  
PLATFORM	   S PECIFIC	   P ROTOTYPING	    Is	  a	  technique	  where	  pla_orm	  specific	    prototypes	  are	  created	  ...
PLATFORM	   S PECIFIC	   P ROTOTYPING	   – 	   	  CHALLENGES	     Requires	  pla_orm	  specialized	     Programming	  skil...
PLATFORM	   S PECIFIC	   P ROTOTYPING	   – 	   	  CHALLENGES	     Development	  `me	  and	  effort	  is	  more	  
PLATFORM	   S PECIFIC	   P ROTOTYPING	   – 	   	  BENEFITS	     Completely	  interac`ve	  and	  can	     leverage	  device...
EXPERIENTIAL	   P ROTOTYPING	  
EXPERIENTIAL	   P ROTOTYPING	   1   Storyboarding	   2   Bodystorming	   3   Speed	  da`ng	  prototypes	   4   Concept	  v...
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	 ...
STORYBOARDING	   H OW	   T O?	  
EXPERIENTIAL	   P ROTOTYPING	   1   Storyboarding	   2   Bodystorming	   3   Speed	  da`ng	  prototypes	   4   Concept	  v...
BODYSTORMING
Body storming is a technique thathelps capture and harness thesemessy yet essential aspects ofhuman behavior and account f...
Body storming involves acting outpossible scenarios or use cases withactors and props. 	  
BODYSTORMING	   H OW	   T O?	  
BODYSTORMING	   H OW	   T O?	  
Bodystorming will help you capture theemotional tenor of mobile interactions
EXPERIENTIAL	   P ROTOTYPING	   1   Storyboarding	   2   Bodystorming	   3   Speed	  da`ng	  prototypes	   4   Concept	  v...
SPEED	   D ATING	   P ROTOTYPES	  
Speed	  Da`ng	  Prototypes	  are	  especially	  well-­‐suited	  for	  gathering	  user	  impressions	  of	  	  a	  new-­‐t...
SPEED	   D ATING	   P ROTOTYPE	   H OW	   T O?	  
Mobile Prototyping
Mobile Prototyping
Mobile Prototyping
Mobile Prototyping
Mobile Prototyping
Mobile Prototyping
Mobile Prototyping
Mobile Prototyping
Mobile Prototyping
Mobile Prototyping
Mobile Prototyping
Mobile Prototyping
Mobile Prototyping
Mobile Prototyping
Mobile Prototyping
Mobile Prototyping
Mobile Prototyping
Mobile Prototyping
Mobile Prototyping
Mobile Prototyping
Mobile Prototyping
Mobile Prototyping
Mobile Prototyping
Mobile Prototyping
Mobile Prototyping
Mobile Prototyping
Mobile Prototyping
Mobile Prototyping
Mobile Prototyping
Mobile Prototyping
Mobile Prototyping
Mobile Prototyping
Mobile Prototyping
Mobile Prototyping
Mobile Prototyping
Mobile Prototyping
Mobile Prototyping
Mobile Prototyping
Mobile Prototyping
Mobile Prototyping
Mobile Prototyping
Mobile Prototyping
Mobile Prototyping
Mobile Prototyping
Mobile Prototyping
Mobile Prototyping
Mobile Prototyping
Mobile Prototyping
Mobile Prototyping
Mobile Prototyping
Mobile Prototyping
Mobile Prototyping
Mobile Prototyping
Mobile Prototyping
Mobile Prototyping
Mobile Prototyping
Mobile Prototyping
Mobile Prototyping
Mobile Prototyping
Mobile Prototyping
Mobile Prototyping
Mobile Prototyping
Mobile Prototyping
Mobile Prototyping
Mobile Prototyping
Mobile Prototyping
Mobile Prototyping
Mobile Prototyping
Mobile Prototyping
Mobile Prototyping
Mobile Prototyping
Mobile Prototyping
Mobile Prototyping
Mobile Prototyping
Mobile Prototyping
Mobile Prototyping
Mobile Prototyping
Upcoming SlideShare
Loading in …5
×

Mobile Prototyping

1,128 views

Published on

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

Published in: Design
3 Comments
4 Likes
Statistics
Notes
No Downloads
Views
Total views
1,128
On SlideShare
0
From Embeds
0
Number of Embeds
32
Actions
Shares
0
Downloads
38
Comments
3
Likes
4
Embeds 0
No embeds

No notes for slide

Mobile Prototyping

  1. 1. Special Thanks to our Sponsors
  2. 2. Introduction to Mobile Design3 ACTIVITES - DESIGNING FOR MOBILITY IDENTIFYING NEED FOR A MOBILE APPLICATION Need Analysis BRAINSTORMING AND IDEATING PRESENTING CONCEPTS Ideating
  3. 3. Mobile Design Guidelines and patternsThe Design Process 3 ACTIVITES - DESIGNING FOR MOBILITY   Card Sort Story Boards
  4. 4. MOBILE IS GROWINGLIKE CRAZY
  5. 5. “MOBILE PHONESWILL OVERTAKE PC’SAS THE MOST COMMONWEB ACCESS DEVICESBY 2013” Gartner  Research,  2010  
  6. 6. Google:  Our  Mobile  Planet,  May  2012  
  7. 7. Google:  Our  Mobile  Planet,  May  2012  
  8. 8. Google:  Our  Mobile  Planet,  May  2012  
  9. 9. Google:  Our  Mobile  Planet,  May  2012  
  10. 10. Google:  Our  Mobile  Planet,  May  2012  
  11. 11. MOBILE PRESENTS ANOPPORTUNITY TO INVENTNEW WAYS FOR USERS TOINTERACT WITHINFORMATION.
  12. 12. NEXT  BIG  QUESTION    WHAT  TYPE  OF  MOBILE  APP  TO  START  WITH    
  13. 13. RESPONSIVE  WEBSITE?    WEB  APP  ?    NATIVE  APP?    HYBRID  APPS?  
  14. 14. Thin ClientBrowser Apps
  15. 15. PROS
  16. 16. CONS
  17. 17. Rich ClientNative Apps
  18. 18. PROS
  19. 19. CONS  
  20. 20. MOBILE DESIGNCHALLENGESANDGUIDELINES
  21. 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. 22. FACTORS THAT INFLUENCE PERFORMANCE.
  23. 23. OPTIMIZEYOURAPP FORHIGHPERFORMANCE
  24. 24. ONLY DESIGN WHATMAKES SENSE FOR AMOBILE CONTEXT
  25. 25. COMMON FEATURESTHAT IMPACT THEUSER EXPERIENCE
  26. 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. 27. How can food joints use mobiledevices to improve their customerexperience?
  28. 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. 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. 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. 31. MOBILE MINDSET
  32. 32. Because of thedifferences betweenmobile and desktop,it’s imperative to getyourself into amobile mindsetbefore gettingstarted.
  33. 33. Be  focused:  More  is  not  bePer.  Edit  your  features  1 ruthlessly.  You  are  going  to  have  to  leave  stuff  out  
  34. 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. 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. 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. 37. MOBILE CONTEXTS
  38. 38. IS THIS THECONTEXTS?
  39. 39. It  is  certainly  one  context,  but  it’s  not  the  only  one.  
  40. 40. To  begin  to  put  ourselves  in  the  shoes  of  our  users,  we  need  to  consider  three  major  mobile  contexts  
  41. 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. 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. 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. 44. COMMUNICATIONS
  45. 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. 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. 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. 48. GLOBAL GUIDELINES
  49. 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. 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. 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. 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. 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. 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. 55. NAVIGATION MODEL
  56. 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. 57. None:  Single  screen  u`lity  apps  (eg  Weather  app  on  iPhone)  
  58. 58. Tab  bar:  Three  to  six  dis`nct  content  areas  (eg  TwiPer  for  iPhone)  
  59. 59. Drill  down:  List  and  detail  content  hierarchy  (eg  Sekngs  app  on  iPhone)  
  60. 60. USER INPUT
  61. 61. Typing  s`nks  even  on  the  best  devices,  so  you  should  do  what  you  can  to  make  it  easier  for  your  users.  
  62. 62. If  your  app  invites  a  lot  of  typing,  you  should  ensure  you  support  landscape  orienta`on.  
  63. 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. 64. GESTURES
  65. 65. One  of  the  most  iconic  aspects  of  modern  touch  interfaces  is  that  they  support  gesture-­‐based  user  interac`on.    
  66. 66. Gestures  are  invisible,  so  discovery  is  an  issue.  You  have  to  decide  how  to  reveal  their  existence  to  the  user.  
  67. 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. 68. Discover  Understand  and  iden`fy  the  core    problems  first    
  69. 69. HOW  DO  WE    DEFINE    PROBLEMS?  
  70. 70. CULTURAL   A ND   S OCIAL  
  71. 71. CHALLENGES    AND    NEEDS  
  72. 72. DEMOGRAPHICS   A ND   A BILITIES    
  73. 73. ENVIRONMENTAL   A ND  CONTEXTUAL  
  74. 74. HOW  DO  WE    IDENTIFY    PROBLEMS?  
  75. 75. STAKEHOLDER   I NTERVIEWS  
  76. 76. KICKOFF   M EETINGS  
  77. 77. CONTENT   A UDIT/INVENTORY  
  78. 78. FOCUS   G ROUP  
  79. 79. CONTEXTUAL   I NQUIRIES  
  80. 80. PERSONAS  
  81. 81. PLAN  Iden`fy  possible  solu`ons  and  plan    execu`on    
  82. 82. Design  Create  designs  that  resolve  the  core    problems    
  83. 83. HOW  DO  WE    RESOLVE  THE  PROBLEMS?  
  84. 84. SCENARIOS  
  85. 85. CARD   S ORTING  
  86. 86. APP   M AP   O R   F LOWCHART  
  87. 87. WIREFRAME  
  88. 88. PROTOTYPE  
  89. 89. USABILITY   T ESTING  
  90. 90. BUILD  Develop  func`onal  code  based  on  the    designs    
  91. 91. EVALUATE  Review,  test,  and  analyze  effec`veness    of  the  design    
  92. 92. RECAPHow can food joints use mobiledevices to improve their customerexperience?
  93. 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. 94. 15 MINUTES BREAK
  95. 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. 96. MOBILE PROTOTYPING ESSENTIALS2 ACTIVITES - DESIGNING FOR MOBILITY QUIZ Need Analysis DESIGNING AND TESTING PAPER PROTOTYPES Ideating
  97. 97. MOBILE PROTOTYPING ESSENTIALS3 ACTIVITES - DESIGNING FOR MOBILITY IN DEVICE INTERACTIVE PROTOTYPES Need Analysis MOBILE BROWSER PROTOTYPE MOBILE PROTOTYPE USING PRESENTATION SOFTWARE Ideating
  98. 98. MobilePrototypingTools andMethods
  99. 99. What isPrototyping?
  100. 100. THE  WORD   PROTOTYPE  comes   from  the  Greek    FIRST   pratos,     which  means  "first,"  IMPRESSION     and  typos.  which   means   "impression.”    
  101. 101. Why  Prototyping?  
  102. 102. Prototypes  can  help  you  solve  design  problems,  evaluate  designs  and  communicate  design  ideas  
  103. 103. SOLVE   D ESIGN   P ROBLEMS  Prototypes  can  be  an  efficient  way  to  work  through  design  problems  before  gekng  deep  into  coding.      
  104. 104. SOLVE DESIGN PROBLEMSThey  can  help  address  everything  from  higher-­‐level  conceptual  issues  to  lower-­‐level  interac`ons.  
  105. 105. EVALUATE   D ESIGN   I DEAS  Prototypes are often used to evaluatedesign ideas, concepts, flows, andInteractions before investingdevelopment time.
  106. 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. 107. THE PROTOTYPINGSPECTRUM
  108. 108. LOW   F IDELITY  
  109. 109. MEDIUM   F IDELITY  
  110. 110. HIGH   F IDELITY  
  111. 111. THE PROTOTYPINGGENRES
  112. 112. TACTICAL   P ROTOTYPING   1 Sketching   2 Paper  Prototyping   3 Interac`ve  On-­‐Device  Prototyping  
  113. 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. 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. 115. EXPERIENTIAL   P ROTOTYPING   1 Storyboarding   2 Bodystorming   3 Speed  da`ng  prototypes   4 Concept  videos  
  116. 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. 117. TACTICAL   P ROTOTYPING  
  118. 118. TACTICAL   P ROTOTYPING   1 Sketching   2 Paper  Prototyping   3 Interac`ve  On-­‐Device  Prototyping  
  119. 119. Sketching  is  rapid,  freehand  drawing  that  we  do  with  no  inten`on  of  its  becoming  a  finished  product.    
  120. 120. Sketching  is  a  founda`on  upon  which  we  can  overlay  our  actual  design  work.  
  121. 121. SKETCHING   B ENEFITS  
  122. 122. Quick:  A  sketch  is  quick  to  make,  or  at  least  gives  that  impression.  
  123. 123. Timely:  A  sketch  can  be  provided  when  needed.  
  124. 124. Inexpensive:  A  sketch  is  cheap.  Cost  must  not  inhibit  the  ability  to  explore  a  concept,  especially  early  in  the  design  process.  
  125. 125. WHEN  DO  WE  USE  THESE  SKETCH    PROTOTYPES?  
  126. 126. DESIGNING  INTERFACES    •  Visualizing  concepts    •  Exploring  alterna`ves    •  Resolving  feature  details      •  Developing  interac`on  scenarios  
  127. 127. TESTING  INTERFACES    •  Intelligibility  -­‐  can  you  read  or  interpret  this?    •  Trackability  -­‐  can  you  follow  this?    •  Fumble  factor  -­‐  can  you  make  this  work?    
  128. 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. 129. TACTICAL   P ROTOTYPING   1 Sketching   2 Paper  Prototyping   3 Interac`ve  On-­‐Device  Prototyping  
  130. 130. PAPER  PROTOTYPE?  
  131. 131. Paper  prototyping  is  a  key  component  of  the  DESIGN  process  and  is  a  popular  method  among  designers.  
  132. 132. Paper  prototypes  are  essen`ally  paper  models  of  your  smartphone  apps    
  133. 133. PAPER   P ROTOTYPE   B ENEFITS  
  134. 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. 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. 136. Collabora+ve    Paper  prototypes  do  not  require  any  technical  skills;  thus  everyone  (users,  too!)  can  par`cipate.  
  137. 137. Easy  to  edit    You  or  your  users  can  edit  paper  prototypes  on  the  &  y  (e.g.,  change  labels,  add  screens,  add  buPons)  
  138. 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. 139. PAPER   P ROTOTYPE   C HALLENGES   Less  useful  for  certain  classes  of  apps,   such  as  musical  instruments,  videos,  and   games.  
  140. 140. User  experience  issues  o]en  explored  with  paper  prototypes  include  
  141. 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. 142. PAPER   P ROTOTYPING    HOW   T O?  
  143. 143. PAPER,  PEN,  CARDBOARD,  REMOVABLE  TAPE,  GLUE,  CORRECTION    FLUID,  AND  SCISSORS.  
  144. 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. 145. Your  prototype  will  include  a  background,  the  screens,  and  the  user  interface  controls.    
  146. 146. RECAPHow can food joints use mobiledevices to improve their customerexperience?
  147. 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. 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. 149. LUNCH  
  150. 150. TACTICAL   P ROTOTYPING   1 Sketching   2 Paper  Prototyping   3 Interac`ve  On-­‐Device  Prototyping  
  151. 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. 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. 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. 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. 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. 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. 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. 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. 159. In-­‐screen  Mobile  Prototype  How  to    
  160. 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. 161. 10   M INS   B REAK  
  162. 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. 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. 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. 165. Mobile  Browser  Prototype  How  to    
  166. 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. 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. 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. 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. 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. 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. 172. MOBILE  PROTOTYPE  USING  PRESENTATION    SOFTWARE  -­‐  HOW  TO  
  173. 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. 174. BREAK  
  175. 175. PLATFORM   S PECIFIC   P ROTOTYPING  
  176. 176. PLATFORM   S PECIFIC   P ROTOTYPING   Is  a  technique  where  pla_orm  specific   prototypes  are  created  using  na`ve   SDK’s  
  177. 177. PLATFORM   S PECIFIC   P ROTOTYPING   –    CHALLENGES   Requires  pla_orm  specialized   Programming  skills    
  178. 178. PLATFORM   S PECIFIC   P ROTOTYPING   –    CHALLENGES   Development  `me  and  effort  is  more  
  179. 179. PLATFORM   S PECIFIC   P ROTOTYPING   –    BENEFITS   Completely  interac`ve  and  can   leverage  device’s  na`ve  capabili`es  
  180. 180. EXPERIENTIAL   P ROTOTYPING  
  181. 181. EXPERIENTIAL   P ROTOTYPING   1 Storyboarding   2 Bodystorming   3 Speed  da`ng  prototypes   4 Concept  videos  
  182. 182. STORYBOARDING  
  183. 183. is  a  powerful  UX  technique  borrowed  from  the  filmmaking  process  
  184. 184. Storyboarding  helps  us  to  understand  exis`ng  scenarios,  a  well  as  test  hypotheses  for  poten`al  scenarios.  
  185. 185. STORYBOARDING   H OW   T O?  
  186. 186. EXPERIENTIAL   P ROTOTYPING   1 Storyboarding   2 Bodystorming   3 Speed  da`ng  prototypes   4 Concept  videos  
  187. 187. BODYSTORMING
  188. 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. 189. Body storming involves acting outpossible scenarios or use cases withactors and props.  
  190. 190. BODYSTORMING   H OW   T O?  
  191. 191. BODYSTORMING   H OW   T O?  
  192. 192. Bodystorming will help you capture theemotional tenor of mobile interactions
  193. 193. EXPERIENTIAL   P ROTOTYPING   1 Storyboarding   2 Bodystorming   3 Speed  da`ng  prototypes   4 Concept  videos  
  194. 194. SPEED   D ATING   P ROTOTYPES  
  195. 195. Speed  Da`ng  Prototypes  are  especially  well-­‐suited  for  gathering  user  impressions  of    a  new-­‐to-­‐the-­‐world  experience    
  196. 196. SPEED   D ATING   P ROTOTYPE   H OW   T O?  

×