Mobile UX breakfast briefing - dubai september 2013
Upcoming SlideShare
Loading in...5

Mobile UX breakfast briefing - dubai september 2013






Total Views
Views on SlideShare
Embed Views



1 Embed 3 3



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Mobile UX breakfast briefing - dubai september 2013 Mobile UX breakfast briefing - dubai september 2013 Presentation Transcript

  • Mobile  UX  &  UAE  mGov:   a  UX  recipe  for  award-­‐winning  apps       Dr  Ali  al-­‐Azzawi  &  Laura  Farrant   1          ©  User  Vision  Limited™,  2013.    All  rights  reserved    
  • mGov  
  • Dubai  eGovernment’s  GWEM   Government  Website  Excellence  Model   Dubai  Government  Website  Guidelines   Version  3.0  –  2011       3   ©  User  Vision  Limited™,  2013.    All  rights  reserved    
  • Simple  target   Government  eServices  to  be  “delivered  to  the  public  through  mobile  phones   …  in  a  creaOve  and  easy  manner  on  smart  phones  within  24  months.”     May  2013       ? 4   ©  User  Vision  Limited™,  2013.    All  rights  reserved    
  • mGov  Awards   The  apps  will  be  assessed  for:   Efficiency  and  EffecOveness,  Ease  of   Use,  and  InnovaOon.  For  ‘ease  of  use’,   the  apps  will  be  assessed  for   “saOsfacOon  for  interacOons  between   the  public  and  businesses  and   between  governments”,  including   “User  Experience:    Easy  navigaOon   with  friendly  design  (Look  and  Feel).”   5   ©  User  Vision  Limited™,  2013.    All  rights  reserved    
  • Focus  points   Guideline:  Mobile  Government   UAE  TelecommunicaOons  Regulatory  Authority  (TRA)   Version  1.0  –  1  August  2013       “Technology  and  services  development  are  at  the  core  but  are   the  simplest  element  in  adopOng  smart  mobile  government.   However  the  soG  issues  are  of  significant  importance,  such  as   strategic  approaches  to  mGovernment,  capacity  building  in   government,  change  management,  building  mobile  society,   assuring  user  adopJon  and  use.”     6   ©  User  Vision  Limited™,  2013.    All  rights  reserved    
  • Perfect  CombinaOon   Users   Business   Channels/ Technology   7   ©  User  Vision  Limited™,  2013.    All  rights  reserved    
  • DefiniOon  of  mGov   Guideline:  Mobile  Government   UAE  TelecommunicaOons  Regulatory  Authority  (TRA)   Version  1.0  –  1  August  2013       8   ©  User  Vision  Limited™,  2013.    All  rights  reserved    
  • DefiniOon  of  ‘mobile  enabled’   Guideline:  Mobile  Government   “All  government  enOOes  should  achieve  Step-­‐1  &  Step-­‐2  as  a   minimum  baseline  in  order  to  be  considered  mobile  enabled.”     “focus  on  G2C  services  as  an  immediate  priority”   9   ©  User  Vision  Limited™,  2013.    All  rights  reserved    
  • Mobile  …  in  numbers  
  • Conversion  rate  for  different  plaborms   Device Conversion Rate Desktop computer 3.5% Mobile phone 1.4% Tablet 3.2% (Nielson  &  Budiu,  2013)   11   ©  User  Vision  Limited™,  2013.    All  rights  reserved    
  • Global  market   China   (IDC,  2013)   12   ©  User  Vision  Limited™,  2013.    All  rights  reserved     USA   UK  
  • UAE  market  (2)   Market Share % Others,  including   15% 10% 50% 11% 14% (TRA,  May  2013)   13   ©  User  Vision  Limited™,  2013.    All  rights  reserved    
  • UAE  market  (1)   Registered)on)UAE)Networks)(%)) Smartphone Popularity rank 60# iPhone 4S 1 50# iPhone 4 2 40# Samsung SIII 3 iPhone 5 50# 4 ©  User  Vision  Limited™,  2013.    All  rights  reserved     he rs # Ot # ny #E ric s on le # Ap p So Bl a 14   ng # 0# No kia (TRA,  2013)   8.4# 1.5# m su 6 10# 10.7# Sa Blackberry Bold 9780 10.7# ck be rry # 5 18.7# 20# # Blackberry Bold 9900 30#
  • UAE  market  (3)   Common%Mobile%Handset%Models%%% 3.5% 3.08% 3% 2.93% 2.9% 2.93% 2.61% 2.5% 2.11% 2% 1.5% 1% 0.5% 0% Nokia%1280% iPhone%4S% Nokia%X1701% Nokia%E5% (TRA,  May  2013)   15   ©  User  Vision  Limited™,  2013.    All  rights  reserved     iPhone%4% Samsung% SIII%
  • Dimensions  of  UX:   How  can  we  make  a  systema9c     assessment  of  mGov  apps?  
  • Ten  Usability  Guidelines   1.  Visibility  of  app  status     2.  Match  between  app  and  the  real  world     3.  User  control  and  freedom     4.  Error  prevenOon     5.  Consistency  and  standards     6.  RecogniOon  rather  than  recall     7.  Flexibility  and  efficiency  of  use     8.  AestheOc  and  minimalist  design     9.  Help  users  recognise,  diagnose,  and  recover  from  errors     10. Help  and  documentaOon     (Nielson,  &  others)   17   ©  User  Vision  Limited™,  2013.    All  rights  reserved    
  • Dimensions  of  Mobile  UX   (al-­‐Azzawi,  2013)   18   ©  User  Vision  Limited™,  2013.    All  rights  reserved    
  • Dimensions  of  UX  for  mGov   1.  OS  cover   2.  File  size  (~download  Omes)   3.  NaOve  or  Web-­‐app   4.  Findability   5.  ProposiOon  &  purpose   6.  MulO-­‐Lingual   7.  RegistraOon   8.  Visual  Simplicity  &  Complexity   9.  AestheOc  design   10. Input  &  Buoons   11. Context  &  LocaOon   12. Menus,  Concepts  &  InformaOon  Architecture   13. Consistency  and  standards   14. Efficiency   15. Errors   16. Support,  Help  &  DocumentaOon   19   ©  User  Vision  Limited™,  2013.    All  rights  reserved    
  • UX  for  mGov  (1)   1.  OS  cover  (iOS,  Android,  Blackberry,  Windows)   Score 1 > 15Mb 2 >5 – 15Mb 3 >2 – 5Mb 4 >1 – 2Mb 5 20   Criteria < 1Mb ©  User  Vision  Limited™,  2013.    All  rights  reserved    
  • UX  for  mGov  (2  &  3)   2.  File  size  (~download  7mes)  (size  of  app  itself)   Score Criteria 1 > 15Mb 2 >5 – 15Mb 3 >2 – 5Mb 4 >1 – 2Mb 5 < 1Mb 3.  Na7ve  or  Web  app  (na9ve  app  using  OS,  or  using  web  tech)   Score 1 All web 2 Mostly web 3 Mixed 4 Mostly native 5 21   Criteria All native ©  User  Vision  Limited™,  2013.    All  rights  reserved    
  • UX  for  mGov  (4)   4.  Findability  (ease  of  finding  the  app  on  the  store)   Score Criteria 1 2 Difficult – found, but required considerable time and effort 3 Moderate – found after some effort 4 Easy – found quickly after filtering or reviewing search results 5 22   Very difficult or unable to find Very easy – found on first attempt, cross promoted on other channels ©  User  Vision  Limited™,  2013.    All  rights  reserved    
  • UX  for  mGov  (5  &  6)   5.  Proposi7on  &  Purpose  (clarity  of  purpose  &  benefits  of  app)   Score Criteria 1 Very unclear 2 Information available but difficult to find 3 Information available but had to find it 4 Reasonable clear 5 Very clear 6.  Mul7-­‐Lingual  (availability  of  UI  languages)   Score Criteria 1 2 Arabic and English only 3 Three languages 4 Four languages 5 23   Arabic or English only More than four languages ©  User  Vision  Limited™,  2013.    All  rights  reserved    
  • UX  for  mGov  (7  &  8)   7.  Registra7on  (clear  and  efficient  process)   Score Criteria 1 Very complex or requires physical presence at a government location 2 Difficult, complex or unclear 3 Somewhat complex but manageable 4 Fairly simple though multiple stages 5 Very clear process and easy to do, a few steps 8.  Visual  Simplicity  &  Complexity  (visual  aspect  only)   Score Criteria 1 2 Somewhat complex 3 Average complexity 4 Somewhat simple 5 24   Very complex Very simple ©  User  Vision  Limited™,  2013.    All  rights  reserved    
  • UX  for  mGov  (9  &  10)   9.  Aesthe7c  Design  (enhance  not  hinders  experience)   Score Criteria 1 Very poorly 2 Poorly 3 Neutral 4 Well 5 Very well 10.  Input  &  BuXons  (easy  to  physically  interact  with  app  UI)   Score Criteria 1 2 Difficult 3 Reasonable 4 Fairly easy 5 25   Very difficult or impossible Very easy ©  User  Vision  Limited™,  2013.    All  rights  reserved    
  • UX  for  mGov  (11  &  12)   11.  Context  &  Loca7on  (use  of  contextual  /  geographical  data)   Score Criteria 1 Very poorly 2 Poorly 3 Neutral 4 Well 5 Very well 12.  Menus,  Concepts  &  Informa7on  Architecture  (understandable)   Score Criteria 1 2 Confusing 3 Somewhat easy 4 Fairly easy 5 26   Very confusing Very easy ©  User  Vision  Limited™,  2013.    All  rights  reserved    
  • UX  for  mGov  (13  &  14)   13.  Consistency  &  Standards  (language,  labels,  nav,  design)   Score Criteria 1 Very inconsistent 2 Inconsistent 3 Somewhat consistent 4 Fairly consistent 5 Very consistent 14.  Efficiency  (efficient  to  conduct  target  task)   Score Criteria 1 2 Slow and awkward 3 Reasonable speed and efficiency 4 Fast and efficient 5 27   Very slow and awkward Very fast and efficient ©  User  Vision  Limited™,  2013.    All  rights  reserved    
  • UX  for  mGov  (15  &  16)   15.  Errors  (prevent  errors,  or  support  users  to  recover)   Score Criteria 1 Very poorly 2 Poorly 3 Neutral 4 Well 5 Very well 16.  Support,  Help  &  Documenta7on  (how  easy  to  find?)   Score Criteria 1 2 Difficult 3 Reasonable 4 Fairly easy 5 28   Very difficult or impossible Very easy ©  User  Vision  Limited™,  2013.    All  rights  reserved    
  • Super-­‐Dimensions  of  UX  for  mGov   Implementation Access Use OS Cover Findability Input / Buttons Native / Web Download / Size IA Language Aesthetics Proposition Complexity Registration Consistency Efficiency Help & Doc Context / Location Errors 29   ©  User  Vision  Limited™,  2013.    All  rights  reserved    
  • Super-­‐Dimensions  of  App  Development   30   ©  User  Vision  Limited™,  2013.    All  rights  reserved    
  • UX  Profile  
  • UX  Profile  of  Mobile  Apps   Quick-­‐view  UX  profile,  showing  overall  performance  for  each  app.   32   ©  User  Vision  Limited™,  2013.    All  rights  reserved    
  • Availability  of  apps  on  operaOng  systems   OS No. of apps Apple 22 Android 12 Blackberry 5 Windows 4 Scope No. of apps UAE Abu Dhabi 13 Sharjah ©  User  Vision  Limited™,  2013.    All  rights  reserved     3 Dubai 33   5 2
  • Example  App  assessment  
  • We  reviewed  each  app,   highlighOng  areas  of  success  and   failure.  Here  is  a  sample  of  the   kinds  of  observaOons  made…    
  • Here’s  a  quick  view  of  some  of   the  observaOons  made…  
  • Dubai  Metro  RTA   Keeping  it  naJve…   1 2 Majority  of  the  experience  maintained  within  the   mobile  context  and  whilst  not  everything  is   implemented  in  a  way  that  is  sympatheOc  to  the   environment  the  user  is  kept  within  the  app  itself.       Clarity  in  proposiJon…   This  is  a  task  based  focused  app  that  intends  to  deliver   service  informaOon  to  it’s  audience.       Content  and  navigaOon  labels  are  all  structured  to   enable  the  user’s  access  to  informaJon  and  the   proposiOon  is  therefore  made  immediately  clear  
  • Dubai  Metro  RTA   1 Failing  to  consider  the  mobile  environment…   The  content  is  brief  and  punchy,  delivering  key  facts  to  the   user.       However,  there  are  many  instances  where  the  delivery  of   content  fails  to  translate  into  the  mobile  context.  This  is   most  apparent  in  the  way  that  maps  and  Ometables  are   delivered.  Rather  than  delivering  these  in  a  mobile-­‐friendly   way  they  are  presented  within  a  frame  that  the  user  has  to   try  and  navigate.       This  is  difficult  to  use  and  frustraOng.       It  also  prevents  them  from  doing  the  very  thing  that  they   may  have  downloaded  the  app  to  complete  -­‐  ie,  review  the   metro  system  and  the  Omings  of  it's  services.    
  • Dubai  Metro  RTA   1 Confusing  labels  and  an  assumpJon  of  knowledge…   A  user  accessing  metro  Omings  is  presented  with  the   adjacent  screen  in  which  they  are  asked  to  select  the   direcOon  that  they  want  to  travel  in.       However,  here  we  assume  that  every  user  is  going  to   understand  where  these  places  are  in  relaJon  to   landmarks  within  the  city.       This  is  a  huge  assumpOon  and  risk.      
  • Dubai  Metro  RTA   1 One  language.  Many  design  styles…   The  app  is  seemingly  only  available  in  English.  There  is  no   provision  for  the  delivery  of  Arabic.     Various  font  types  are  adopted  throughout,  providing  a  feel   of  inconsistency.       There  are  spelling  mistakes  within  the  content  -­‐  most   notably  on  the  Top  up  Nol  screen  where  machines  is   presented  incorrectly.    
  • MOH  Ministry  of  Health   Web  page  inside  the  app  frame   Several  apps  we  reviewed  were  essenOally  a  web  page,  with  no   consideraOon  to  the  limited  mobile  screen.  The  mean  a  lot  of  scrolling;   verOcal  and  horizontal.  Some  apps  did  not  even  allow  pinch/zoom,   which  broke  the  expected  interacOon  paradigm.  
  • Sallety  Department  of  Economic  Developments   Well  promoted  and  bi-­‐lingual…   1 The  Sallety  app  is  strongly  promoted  on  the  website  -­‐  it   rests  in  a  posiOon  of  priority  on  the  homepage  -­‐  and  is   available  for  both  Android  and  iOS.  Users  can  also   choose  to  view  the  content  in  both  English  and  Arabic.      
  • Sallety  Department  of  Economic  Developments   OK,  but  what  does  it  actually  do?   1 The  purpose  of  this  app  is  very  unclear.       The  user  would  have  had  to  spend  Ome  reading  the  site   (  in  order  to  understand  what  the  purpose  of   the  iniOaOve  actually  is.       Should  the  user  circumvent  this  route  and  go  directly  to   download  the  app  they  will  not  be  provided  with  any   background  context.       Even  the  key  categories  used  in  the  menu  -­‐  outlets/ special  offer/complaint  -­‐  do  not  align  conceptually  and   do  not  therefore  tell  a  story  about  what  this  app  is   about.    
  • Sallety  Department  of  Economic  Developments   Misleading  design  elements…   1 Even  if  we  assume  that  those  downloading  understand   the  proposiOon  will  they  understand  how  to  interact   with  the  content?         The  app  exhibits  several  examples  of  poor  design  style     • Primary  and  secondary  acOon  buoons  are  presented  in   the  same  graphical  style  -­‐  that  is  shaded  in  blue.   • Inconsistent  presentaOon  of  content  -­‐  ie,  the  way  in   which  the  “Steps”  of  the  process  are  shown.    
  • Sallety  Department  of  Economic  Developments   A  frustraJng  process…   1 The  primary  purpose  of  the  app  is  to  allow  users  to   obtain  comparaOve  insight  into  how  products  are   currently  priced.       However,    if  the  journey  is  intended  to  be  a   comparaOve  one,  with  users  able  to  stack  one   supermarkets  offering  against  another,  then  the   experience  is  broken.     • The  user  can  only  select  one  retailer  at  a  Ome   • They  cannot  compare  prices  unless  they  undertake  a   manual  process     This  makes  the  app  extremely  labour  intensive  to  use   and  makes  a  user  quesOon  why  they  should  bother   expending  the  effort  in  the  first  place.    
  • DHA  Dubai  Health  Authority   This  app  is  brought  to  you  by  MicrosoG…   1 The  design  adopted  for  the  DHA  follows  a  “Metro  UI”,   as  seen  in  Windows  8.       Here  Oles  are  used  to  project  key  funcOons  and  app   elements  to  the  end  user.  The  approach  feels  fresh  and   funcOonal.     There  are  many  useful  tools  housed  here  -­‐  BMI   calculators  for  instance  work  well  and  are  easy  for  the   user  to  interact  with.      
  • DHA  Dubai  Health  Authority   This  app  is  NOT  brought  to  you  by  ANYONE  …   1 Over  reliance  on  an  internet  connecOon,  can  provide  a   less  than  perfect  User  Experience.  
  • DHA  Dubai  Health  Authority   Dated  content…   1 Whilst  the  app  feels  quite  fresh  in  terms  of  design  much   of  the  content  is  old.       Look  at  the  Events  secOon  for  instance  and  the  user  will   be  presented  with  events  that  happened  last  year/ earlier  this  year.       What  is  the  value  of  this  informaOon?       Why  would  a  user  select  this  and  view  the  dates/ locaOon/descripOon  informaOon  for  an  event  that  has   already  passed?    
  • DHA  Dubai  Health  Authority   But  let’s  journey  deeper…   1 As  soon  as  the  user  journey  deeper  they  will  face   confusing  convenOons:       a)  The  way  in  which  the  app  promotes  the  journey   home  -­‐  the  icon  on  the  booom  lev  hand  corner  of  the   screen  is  consistently  placed  but  it's  appearance  is  not   convenOonal.       b)  Language  used  is  not  always  appropriate  for  the   general  consumer  -­‐  for  instance  when  looking  at  the   Blood  DonaOons  secOon  where  users  are  shown  opOons   such  as  "List  acOve  campaign".       c)  Colour  contrast  is  someOmes  poor  for  key  pieces  of   informaOon  -­‐  for  example,  the  map  for  health  centres   uses  a  very  faint  colour  to  communicate  the  Otle  of  the   health  centre  itself.    
  • mDubai  The  Mobile  Gateway   1 A  slow  introducJon…   Even  on  a  stable  wireless  connecOon  this  took  39   seconds  to  load  and  move  to  the  iniOal  language   selector  screen.     2 ProposiJon   The  purpose  of  the  app  is  clearly  understood  upon   examinaOon  of  the  key  secOons.  The  app  offers  users   the  ability  to  obtain  informaOon  regarding  life  in  the   UAE  as  well  as  the  ability  to  complete  services  online.     3 Language  selecJon   The  user  is  able  to  select  between  English  and  Arabic  at   both  the  beginning  of  the  app  and  also  as  they  journey   deeper.  This  mechanism  is  provided  on  the  top  lev   hand  corner  of  the  screen.     HOWEVER,  whilst  the  user  would  have  acOvely  selected   a  specific  language  they  will  be  presented  with  content   in  a  mixture  of  both  -­‐  see  the  Latest  feed  for  an  example   of  this.          
  • mDubai  The  Mobile  Gateway   1 NavigaJon  structure…   The  way  in  which  users  access  informaOon  -­‐  by   interacOng  with  a  carousel  and  then  seeing  resulOng   informaOon  appear  beneath  -­‐  is  slightly  unexpected.     This  type  of  presentaOon  requires  very  specific  taps  to   be  made  and  it  confuses  the  focus.  Am  I  supposed  to  be   looking       At  the  header   At  the  carousel  or   At  the  footer     …as  my  primary  navigaOon  tool?    
  • mDubai  The  Mobile  Gateway   1 What  is  a  link  and  what  is  content?     As  the  user  journeys  deeper  into  the  app,  the   disOncOon  between  what  is  content  and  what  is  a  link   becomes  less  clear  and  more  inconsistent.     Consider  the  screenshot  to  the  lev  -­‐  nothing  tells  the   user  these  are  linked  Otles  and  it  is  only  when  they  tap   on  screen  that  they  will  be  informed  that  this  is  the   case.    
  • DEWA  Dubai  Electricity  and  Water  Authority   1 The  welcome  screen   The  welcome  screen  for  the  app  -­‐  once  the  user  has   declared  their  preferred  language  -­‐  presents  a  range  of   informaOon  and  funcOon.  A  menu  runs  across  the   booom  of  the  screen  framing  the  page  and  news  stories   are  posiOoned  within  the  body  of  the  screen.     A  couple  of  points  to  note  here:     a)  It  is  not  clear  what  the  selected  state  is  -­‐  for   example  am  I  looking  at  Events  informaOon  or   News?   b)  FuncOonality  -­‐  search  funcOon  and  sexngs  -­‐  are   posiOoned  on  the  top  right  hand  corner  of  the   screen  but  they  sit  so  Oghtly  together  that  it  would   be  very  easy  for  a  user  to  accidentally  interact  with   this.    
  • DEWA  Dubai  Electricity  and  Water  Authority   1 The  app’s  true  value…   Whilst  the  DEWA  app  does  offer  users  the  ability  to   read  informaOon  about  the  organizaOon  (Press   releases)  and  watch  videos  the  real  value  lies  in  the   funcJonality  associated  with  Payment.       This  is  where  the  user  can  obtain  a  view  of  what   amounts  are  due  and  how  this  breaks  down  by  service   provided.       At  this  point  the  user  is  also  able  to  submit  payment  for   mPay  -­‐  and  if  they  are  not  registered,  sign  up  and   register  in  order  to  do  so.      
  • Study  …   So,  what  is  significant?   •  Evolu9on  of  eGov  &  mGov   •  mGov  UX:  Systema9c  assessment   •  Over-­‐use  of  Web  apps/technology   •  Over-­‐complex  designs   •  iGov  ==  mGov  (iOS  rules)   •  mGov  2.0  is  coming  
  • Conclusion   Magic  trio    Design  /  Technology    Business  needs    User  Needs  
  • THANK  YOU     Any  quesOons?   User Vision M.E.N.A. FZE Dubai, United Arab Emirates Dr Ali al-Azzawi m: +971 (56) 2636 631 e: Laura Farrant m: +971 (55) 5297 123 e: