tour of mobile usability testing apps and services

Post on 27-Jun-2015

1.558 Views

Category:

Technology

5 Downloads

Preview:

Click to see full reader

DESCRIPTION

Ok, you have been asked to go off and research how to design/architect a mobile user experience. After the initial excitement and learning all about mobile UX, you decide to jump head-on and start designing. Then comes the realization, how are you going to test the designs in context of a mobile device? Do you have to package everything in an app or is there a way to test preliminary designs? What tools are available? Which works for what Mobile OS? When to use a particular tool? Can, we, designers use it without developer help?In this presentation I have various testing app/methods/tools/services available specifically for Mobile, for which OS, when to best use them during design process, cost associated with some of the tools, and what are pros & cons of each of them.

TRANSCRIPT

ì  Whirlwind tour of Mobile Usability Testing Apps & Services

Vijay  Hanumolu    @vijju2k  

Disclaimer  

@vijju2k  

Mobile  Operating  Systems  

@vijju2k  

Responsive  Design  

@vijju2k  

Terminology  

Courtesy  Pizza  Kitchen  @vijju2k  

ì  Conceptual  Design  

@vijju2k  

Conceptual  Design   iOS  Stencils  

Courtesy  UIStencils.com  @vijju2k  

Conceptual  Design   Android  Stencil  

Courtesy  UIStencils.com  @vijju2k  

Conceptual  Design   Windows  Stencil  

Courtesy  UIStencils.com  @vijju2k  

Conceptual  Design   Sketchpad  

Courtesy  UIStencils.com  @vijju2k  

Conceptual  Design   Sketchbook  

Courtesy  UIStencils.com  @vijju2k  

Conceptual  Design   SHckies  

Courtesy  UIStencils.com  @vijju2k  

Conceptual  Design   Paper  Prototype  

@vijju2k  

Conceptual  Design   Paper  Prototype  

@vijju2k  

ì  Detail  Design  

@vijju2k  

Detail  Design   Blueprint  

hJp://www.groosoM.com/blueprint/  @vijju2k  

Detail  Design   Blueprint  

@vijju2k  

Detail  Design   Blueprint  

@vijju2k  

Detail  Design   Blueprint  

@vijju2k  

Detail  Design   Blueprint  

@vijju2k  

Detail  Design   Blueprint  Blueprint  is  a  mockup  app  for  iPhone  and  iPad  applicaHons.    

ì  Highlights  ì  Pixel  perfect  alignment  ì  Import  images    ì  ProperHes  for  each  UI  element  ì  AcHons  for  each  UI  element  ì  Supports  tap  (leM,  right,  up,  down)  ì  Support  Swipe  (leM,  right,  up,  down)  ì  Highlevel  story  board  ì  Dropbox  integraHon  ì  Also  Export  to  PDF/PNG  

 @vijju2k  

Detail  Design   App  Cooker  

hJp://www.appcooker.com/  @vijju2k  

Detail  Design   App  Cooker  

@vijju2k  

Detail  Design   App  Cooker  

@vijju2k  

Detail  Design   App  Cooker  

@vijju2k  

Detail  Design   App  Cooker  App  Cooker  allows  users  to  Design,  Mockup  and  Prototype  mobile  applicaHons  directly  on  your  iPad  

ì  Highlights  

ì  Full  blown  graphics  editor  

ì  Support  upto  200  screens  

ì  Support  upto  99  icons  

ì  Supports  export/import  directly  to  Dropbox  

ì  Supports  both  orientaHons  

ì  Icon  editor  

ì  Pricing  esHmates  

ì  In  future  Appcoker  is  looking  into  ways  where  your  mockup  created  in  Appcooker  can  be  exported  to  xcode  –  COOL  –  if  it  works.  Similar  to  FlashCatalyst  concept  –  bridging  gap  between  designer  and  developer.  

 @vijju2k  

Detail  Design   Too  much  Hme  on  hand  

@vijju2k  

Detail  Design   Adobe  Device  Central  

@vijju2k  

Detail  Design   Adobe  Device  Central  

@vijju2k  

Detail  Design   Adobe  Shadow  

hJp://labs.adobe.com/technologies/shadow/  @vijju2k  

Detail  Design   Adobe  Shadow  Adobe  Shadow  is  an  inspecHon  and  preview  tools  that  allows  designers  to  work  faster  and  more  efficiently  by  streamlining  the  preview  process,  making  it  easier  to  customize  websites  for  mobile  devices  

ì  Highlights  ì  MulHple  iOS  and/or  Android  devices  at  once  ì  Responsive  web  design  tesHng  ì  Support  OrientaHon  

ì  Support  scrolling  and  zooming  ì  Support  private  user  interacHon  with  the  content  (doesnot  affect  other  parts)  

ì  Works  with  only  Chrome  

ì  Make  sure  you  are  on  the  Same  network  and  NOT  using  a  VPN  

@vijju2k  

Visual  Design   Live  View  

hJp://www.zambe`.com/projects/liveview/  @vijju2k  

Visual  Design   Live  View  LiveView  is  a  specialized  remote  screen  viewing  applicaHon  intended  as  a  tool  to  help  designers  create  graphics  for  mobile  applicaHons,  it  has  also  proven  to  be  useful  for  creaHng  quick  and  dirty  simulaHons,  demos,  and  experience  prototypes.    ì  Highlights  

ì  InteracHve  mode  –  enables  touch  to  control  the  mouse  on  the  screen  

ì  1  device  at  a  Hme  when  different  form  factor  ì  MulHple  iPhones  or  iPads  can  be  connected  at  the  same  Hme  ì  AnimaHons  are  slow    

ì  Different  opHons  like  loosless/high  quality/medium  quality/low  quality  ì  Ability  to  rotate  the  viewer  window  on  Mac  

ì  Support  for  reHna  

ì  Used  successfully  to  do  demo  of  a  clickable  prototype  using  keynote  and  clickable  PDF  –  easy  light  weight  

@vijju2k  

Visual  Design   Bjango  Skala  

hJp://bjango.com/mac/skalapreview/  @vijju2k  

Visual  Design   Bjango  Skala  Skala  Preview  is  the  fastest  way  to  send  pixel  perfect,  color  perfect  design  previews  from  Mac  to  iPhone  or  iPad  

ì  Highlights  ì  Connect  mulHple  iOS  devices  at  once  ì  Very  responsive  –  images  changes  in  realHme  as  the  source  file  is  

changed  in  Photoshop  ì  Also  has  different  modes  to  sent  images  (live  preview,  or  via  

clipboard)  ì  Color  blindness  test  ì  Support  for  Scrolling  and  zooming  on  the  device  ì  OrientaHon  support  –  portrait  and  landscape  ì  Email/Tweet/Save  to  device  ì  You  can  even  open  up  a  previously  saved  photo  and  view  it  

 @vijju2k  

ì  App  Testing  

@vijju2k  

MAM   TestFlight  

@vijju2k  

App  TesHng   Android  

@vijju2k  

Detail  Design   got  5  min?  

Courtesy  Kronos  Inc  @vijju2k  

ì  User  Observation  

@vijju2k  

Usability  Study   Mods  

@vijju2k  

Usability  Study   Mods  

@vijju2k  

Usability  Study   Tobii  Mobile  Eye  Tracking  

Courtesy  Tobii  Technology  

hJp://www.tobii.com/ui/pages/productoverviewpage.aspx?id=669&epslanguage=en  

@vijju2k  

Usability  Study   Looxcie  Cam  

hJp://looxcie.com/   Courtesy  Looxcie  Inc  @vijju2k  

ì  Services  

@vijju2k  

Services   UserTesHng  

@vijju2k  

Services   MobileUserTests  

@vijju2k  

Services   Apphance  

hJp://www.apphance.com/  @vijju2k  

HIT   Crowd  sourced  Micro  labor  

hJps://www.mturk.com/mturk/welcome  hJp://crowdflower.com/  @vijju2k  

HIT   Crowd  sourced  Micro  labor  

Courtesy  Amazon.com  @vijju2k  

ì  Others  

@vijju2k  

Others   proto.io  

hJps://proto.io  @vijju2k  

Others   Responsinator  

hJp://www.responsinator.com/  @vijju2k  

ì  Demo  Time  

@vijju2k  

App/Services   iOS   Android   WinMo  Paper  prototyping  (Stencils/Sketchpad/SHckies/etc)   X   X   X  

Blueprint     X  

Appcooker   X  

Adobe  Device  Central  (pre  CS6)   X   X   X  

Adobe  Shadow  (web  based  app)   X   X  

LiveView   X  

Bjango  Skala   X  

got  5  min?   X   X   X  

TestFlight   X  

NaHve  Android   X  

Mods  (Mr.Tappy/Mod  1000/etc)   X   X   X  

Tobii  Eye  wear   X   X   X  

Looxcie  Cam   X   X   X  

UsertesHng.com   X   X  

apphance   X   X   X  

proto.io   X   X  

Responsinator  (web  based  app)   X   X  

Support  Matrix  

@vijju2k  

Thank  you!!  Vijay  Hanumolu                                                                                @vijju2k  

@vijju2k  

top related