Mobile UX breakfast briefing - Dubai september 2013

1,188 views

Published on

User Vision presentation covering the emphasis on mobile for eGovernment in the UAE and the core principles of user experience design for mobile. Presented in Dubai September 2013

Published in: Internet, Business
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,188
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
8
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Mobile UX breakfast briefing - Dubai september 2013

  1. 1. 1 © User Vision Limited™, 2013. All rights reserved Mobile UX & UAE mGov: a UX recipe for award-winning apps Chris Rourke, MD User Vision MENA
  2. 2. mGov
  3. 3. 3 © User Vision Limited™, 2013. All rights reserved Dubai eGovernment’s GWEM Government Website Excellence Model Dubai Government Website Guidelines Version 3.0 – 2011
  4. 4. 4 © User Vision Limited™, 2013. All rights reserved Simple target ? Government eServices to be “delivered to the public through mobile phones … in a creative and easy manner on smart phones within 24 months.” May 2013
  5. 5. 5 © User Vision Limited™, 2013. All rights reserved The apps will be assessed for: Efficiency and Effectiveness, Ease of Use, and Innovation. For ‘ease of use’, the apps will be assessed for “satisfaction for interactions between the public and businesses and between governments”, including “User Experience: Easy navigation with friendly design (Look and Feel).” mGov Awards
  6. 6. 6 © User Vision Limited™, 2013. All rights reserved Focus points Guideline: Mobile Government UAE Telecommunications Regulatory Authority (TRA) Version 1.0 – 1 August 2013 “Technology and services development are at the core but are the simplest element in adopting smart mobile government. However the soft issues are of significant importance, such as strategic approaches to mGovernment, capacity building in government, change management, building mobile society, assuring user adoption and use.”
  7. 7. 7 © User Vision Limited™, 2013. All rights reserved Perfect Combination Users Business Channels/Technology
  8. 8. 8 © User Vision Limited™, 2013. All rights reserved Definition of mGov Guideline: Mobile Government UAE Telecommunications Regulatory Authority (TRA) Version 1.0 – 1 August 2013
  9. 9. 9 © User Vision Limited™, 2013. All rights reserved Definition of ‘mobile enabled’ Guideline: Mobile Government “All government entities 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”
  10. 10. Mobile … in numbers
  11. 11. 11 © User Vision Limited™, 2013. All rights reserved Conversion rate for different platforms Device Conversion Rate Desktop computer 3.5% Mobile phone 1.4% Tablet 3.2% (Nielson & Budiu, 2013)
  12. 12. 12 © User Vision Limited™, 2013. All rights reserved Global market (IDC, 2013) UK USA China
  13. 13. 13 © User Vision Limited™, 2013. All rights reserved UAE market (2) (TRA, May 2013) 50% 14% 11% 10% 15% Market Share % Others, including
  14. 14. 14 © User Vision Limited™, 2013. All rights reserved UAE market (1) Smartphone Popularity rank iPhone 4S 1 iPhone 4 2 Samsung SIII 3 iPhone 5 4 Blackberry Bold 9900 5 Blackberry Bold 9780 6 (TRA, 2013) 50 10.7 10.7 8.4 1.5 18.7 0 10 20 30 40 50 60 Nokia Blackberry Samsung Apple Sony Ericson Others Registered on UAE Networks (%)
  15. 15. 15 © User Vision Limited™, 2013. All rights reserved UAE market (3) (TRA, May 2013) 3.08 2.93 2.9 2.61 2.93 2.11 0 0.5 1 1.5 2 2.5 3 3.5 Nokia 1280 iPhone 4S Nokia X1-01 Nokia E5 iPhone 4 Samsung SIII Common Mobile Handset Models %
  16. 16. Dimensions of UX: How can we make a systematic assessment of mGov apps?
  17. 17. 17 © User Vision Limited™, 2013. All rights reserved Ten Usability Guidelines 1.Visibility of app status 2.Match between app and the real world 3.User control and freedom 4.Error prevention 5.Consistency and standards 6.Recognition rather than recall 7.Flexibility and efficiency of use 8.Aesthetic and minimalist design 9.Help users recognise, diagnose, and recover from errors 10.Help and documentation (Nielson, & others)
  18. 18. 18 © User Vision Limited™, 2013. All rights reserved Dimensions of Mobile UX (al-Azzawi, 2013)
  19. 19. 19 © User Vision Limited™, 2013. All rights reserved Dimensions of UX for mGov 1.OS cover 2.File size (~download times) 3.Native or Web-app 4.Findability 5.Proposition & purpose 6.Multi-Lingual 7.Registration 8.Visual Simplicity & Complexity 9.Aesthetic design 10.Input & Buttons 11.Context & Location 12.Menus, Concepts & Information Architecture 13.Consistency and standards 14.Efficiency 15.Errors 16.Support, Help & Documentation
  20. 20. 20 © User Vision Limited™, 2013. All rights reserved UX for mGov (1) Score Criteria 1 > 15Mb 2 >5 – 15Mb 3 >2 – 5Mb 4 >1 – 2Mb 5 < 1Mb 1. OS cover (iOS, Android, Blackberry, Windows)
  21. 21. 21 © User Vision Limited™, 2013. All rights reserved UX for mGov (2 & 3) Score Criteria 1 > 15Mb 2 >5 – 15Mb 3 >2 – 5Mb 4 >1 – 2Mb 5 < 1Mb 2. File size (~download times) (size of app itself) Score Criteria 1 All web 2 Mostly web 3 Mixed 4 Mostly native 5 All native 3. Native or Web app (native app using OS, or using web tech)
  22. 22. 22 © User Vision Limited™, 2013. All rights reserved UX for mGov (4) Score Criteria 1 Very difficult or unable to find 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 Very easy – found on first attempt, cross promoted on other channels 4. Findability (ease of finding the app on the store)
  23. 23. 23 © User Vision Limited™, 2013. All rights reserved UX for mGov (5 & 6) 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 5. Proposition & Purpose (clarity of purpose & benefits of app) Score Criteria 1 Arabic or English only 2 Arabic and English only 3 Three languages 4 Four languages 5 More than four languages 6. Multi-Lingual (availability of UI languages)
  24. 24. 24 © User Vision Limited™, 2013. All rights reserved UX for mGov (7 & 8) 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 7. Registration (clear and efficient process) Score Criteria 1 Very complex 2 Somewhat complex 3 Average complexity 4 Somewhat simple 5 Very simple 8. Visual Simplicity & Complexity (visual aspect only)
  25. 25. 25 © User Vision Limited™, 2013. All rights reserved UX for mGov (9 & 10) Score Criteria 1 Very poorly 2 Poorly 3 Neutral 4 Well 5 Very well 9. Aesthetic Design (enhance not hinders experience) Score Criteria 1 Very difficult or impossible 2 Difficult 3 Reasonable 4 Fairly easy 5 Very easy 10. Input & Buttons (easy to physically interact with app UI)
  26. 26. 26 © User Vision Limited™, 2013. All rights reserved UX for mGov (11 & 12) Score Criteria 1 Very poorly 2 Poorly 3 Neutral 4 Well 5 Very well 11. Context & Location (use of contextual / geographical data) Score Criteria 1 Very confusing 2 Confusing 3 Somewhat easy 4 Fairly easy 5 Very easy 12. Menus, Concepts & Information Architecture (understandable)
  27. 27. 27 © User Vision Limited™, 2013. All rights reserved UX for mGov (13 & 14) Score Criteria 1 Very inconsistent 2 Inconsistent 3 Somewhat consistent 4 Fairly consistent 5 Very consistent 13. Consistency & Standards (language, labels, nav, design) Score Criteria 1 Very slow and awkward 2 Slow and awkward 3 Reasonable speed and efficiency 4 Fast and efficient 5 Very fast and efficient 14. Efficiency (efficient to conduct target task)
  28. 28. 28 © User Vision Limited™, 2013. All rights reserved UX for mGov (15 & 16) Score Criteria 1 Very poorly 2 Poorly 3 Neutral 4 Well 5 Very well 15. Errors (prevent errors, or support users to recover) Score Criteria 1 Very difficult or impossible 2 Difficult 3 Reasonable 4 Fairly easy 5 Very easy 16. Support, Help & Documentation (how easy to find?)
  29. 29. 29 © User Vision Limited™, 2013. All rights reserved 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 Super-Dimensions of UX for mGov
  30. 30. 30 © User Vision Limited™, 2013. All rights reserved Super-Dimensions of App Development
  31. 31. UX Profile
  32. 32. 32 © User Vision Limited™, 2013. All rights reserved UX Profile of Mobile Apps Quick-view UX profile, showing overall performance for each app.
  33. 33. 33 © User Vision Limited™, 2013. All rights reserved Availability of apps on operating systems Scope No. of apps UAE 5 Abu Dhabi 3 Dubai 13 Sharjah 2 OS No. of apps Apple 22 Android 12 Blackberry 5 Windows 4
  34. 34. Example App assessment
  35. 35. We reviewed each app, highlighting areas of success and failure. Here is a sample of the kinds of observations made…
  36. 36. Here’s a quick view of some of the observations made…
  37. 37. Dubai Metro RTA Keeping it native… Majority of the experience maintained within the mobile context and whilst not everything is implemented in a way that is sympathetic to the environment the user is kept within the app itself. Clarity in proposition… This is a task based focused app that intends to deliver service information to it’s audience. Content and navigation labels are all structured to enable the user’s access to information and the proposition is therefore made immediately clear 1 2
  38. 38. Dubai Metro RTA 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 timetables 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 frustrating. 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 timings of it's services. 1
  39. 39. Dubai Metro RTA Confusing labels and an assumption of knowledge… A user accessing metro timings is presented with the adjacent screen in which they are asked to select the direction that they want to travel in. However, here we assume that every user is going to understand where these places are in relation to landmarks within the city. This is a huge assumption and risk. 1
  40. 40. Dubai Metro RTA 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. 1
  41. 41. MOH Ministry of Health Web page inside the app frame Several apps we reviewed were essentially a web page, with no consideration to the limited mobile screen. The mean a lot of scrolling; vertical and horizontal. Some apps did not even allow pinch/zoom, which broke the expected interaction paradigm.
  42. 42. Sallety Department of Economic Developments Well promoted and bi-lingual… The Sallety app is strongly promoted on the website - it rests in a position 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. 1
  43. 43. Sallety Department of Economic Developments OK, but what does it actually do? The purpose of this app is very unclear. The user would have had to spend time reading the site (sallety.ae) in order to understand what the purpose of the initiative 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. 1
  44. 44. Sallety Department of Economic Developments Misleading design elements… Even if we assume that those downloading understand the proposition will they understand how to interact with the content? The app exhibits several examples of poor design style •Primary and secondary action buttons are presented in the same graphical style - that is shaded in blue. •Inconsistent presentation of content - ie, the way in which the “Steps” of the process are shown. 1
  45. 45. A frustrating process… The primary purpose of the app is to allow users to obtain comparative insight into how products are currently priced. However, if the journey is intended to be a comparative 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 time •They cannot compare prices unless they undertake a manual process This makes the app extremely labour intensive to use and makes a user question why they should bother expending the effort in the first place. 1 Sallety Department of Economic Developments
  46. 46. DHA Dubai Health Authority This app is brought to you by Microsoft… The design adopted for the DHA follows a “Metro UI”, as seen in Windows 8. Here tiles are used to project key functions and app elements to the end user. The approach feels fresh and functional. There are many useful tools housed here - BMI calculators for instance work well and are easy for the user to interact with. 1
  47. 47. DHA Dubai Health Authority This app is NOT brought to you by ANYONE … Over reliance on an internet connection, can provide a less than perfect User Experience. 1
  48. 48. DHA Dubai Health Authority Dated content… Whilst the app feels quite fresh in terms of design much of the content is old. Look at the Events section for instance and the user will be presented with events that happened last year/earlier this year. What is the value of this information? Why would a user select this and view the dates/location/description information for an event that has already passed? 1
  49. 49. DHA Dubai Health Authority But let’s journey deeper… As soon as the user journey deeper they will face confusing conventions: a) The way in which the app promotes the journey home - the icon on the bottom left hand corner of the screen is consistently placed but it's appearance is not conventional. b) Language used is not always appropriate for the general consumer - for instance when looking at the Blood Donations section where users are shown options such as "List active campaign". c) Colour contrast is sometimes poor for key pieces of information - for example, the map for health centres uses a very faint colour to communicate the title of the health centre itself. 1
  50. 50. mDubai The Mobile Gateway A slow introduction… Even on a stable wireless connection this took 39 seconds to load and move to the initial language selector screen. Proposition The purpose of the app is clearly understood upon examination of the key sections. The app offers users the ability to obtain information regarding life in the UAE as well as the ability to complete services online. Language selection 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 left hand corner of the screen. HOWEVER, whilst the user would have actively selected a specific language they will be presented with content in a mixture of both - see the Latest feed for an example of this. 1 2 3
  51. 51. mDubai The Mobile Gateway Navigation structure… The way in which users access information - by interacting with a carousel and then seeing resulting information appear beneath - is slightly unexpected. This type of presentation 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 navigation tool? 1
  52. 52. mDubai The Mobile Gateway What is a link and what is content? As the user journeys deeper into the app, the distinction between what is content and what is a link becomes less clear and more inconsistent. Consider the screenshot to the left - nothing tells the user these are linked titles and it is only when they tap on screen that they will be informed that this is the case. 1
  53. 53. DEWA Dubai Electricity and Water Authority The welcome screen The welcome screen for the app - once the user has declared their preferred language - presents a range of information and function. A menu runs across the bottom of the screen framing the page and news stories are positioned 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 information or News? b)Functionality - search function and settings - are positioned on the top right hand corner of the screen but they sit so tightly together that it would be very easy for a user to accidentally interact with this. 1
  54. 54. DEWA Dubai Electricity and Water Authority The app’s true value… Whilst the DEWA app does offer users the ability to read information about the organization (Press releases) and watch videos the real value lies in the functionality 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. 1
  55. 55. Study … So, what is significant? •Evolution of eGov & mGov •mGov UX: Systematic assessment •Over-use of Web apps/technology •Over-complex designs •iGov == mGov (iOS rules) •mGov 2.0 is coming
  56. 56. Conclusion Magic trio Design / Technology Business needs User Needs
  57. 57. 58 Mobile UX Overview | 03/10/2014 Part 2 – Mobile UX - Outline Mobile: Constraints and opportunities Mobile UX design guidelines and examples Responsive web design The UX design process for mobile UAE mGov apps study
  58. 58. 59 Mobile UX Overview | 03/10/2014 What is Mobile UX ? User’s perception of the usefulness, usability, and desirability of a mobile application based on the sum of all their direct and indirect interactions with it. Forrester Mobile App Design Best Practices
  59. 59. http://www.idc.com/getdoc.jsp?containerId=prUS23398412 Mobile is growing – fast! International Data Corporation IDC predicts that by 2016 more than 1 billion smartphones a year will be shipped.
  60. 60. 61 Mobile UX Overview | 03/10/2014 Mobile is…. Constraining –Smaller Screen –Variable connectivity & speed –Limited battery life –Storage –Harder text input –No Flash (maybe) –Potentially expensive (data plans) Liberating –Use it anywhere –Location services –Orientation –Camera –WiFi
  61. 61. 62 Mobile UX Overview | 03/10/2014 The User, Content and Context Context Users Content Context determines type & form of content Context sets constraints & expectations Content provides experience Users do task
  62. 62. 63 Mobile UX Overview | 03/10/2014 Mobile User Behaviours (from Google) Urgent Now –Find & search –Create / edit –Location specific Repetitive Now –Status (email, sports, Facebook etc) –Data snacking Bored Now –Play –Distractions http://www.mobify.com/blog/understanding-mobile-user-experience-the-3-modes-of-mobile-usage/
  63. 63. 64 Mobile UX Overview | 03/10/2014 A couple “Laws” relevant for mobile Hick’s Law: The more things there are to choose from, the more time it takes to make a decision –Limit the choices you offer at once Fitts's Law: The time required to select something is a function of the distance to the target and the size of the target –Make the tap targets big enough
  64. 64. 65 Mobile UX Overview | 03/10/2014 What makes a usable mobile interface? Meet users' needs quickly –‘immediate’ information – directions, phone numbers, addresses or instant entertainment. –Shortcuts through LBS, links to call, email Don't repeat the navigation on every page –Page real estate is particularly precious on a mobile device screen. –Where as normal WebPages display the navigation options on each and every page, this is not always a viable option on a mobile device. –The Content often IS the navigation
  65. 65. 66 Mobile UX Overview | 03/10/2014 What makes a useable mobile interface? Clearly distinguish selected items –Selected items should stand out from everything else – by changing font, colour, size, borders etc. Make user input as simple as possible –Text input is limited on mobile devices – avoid it where possible. –Offer list picks, date barrels –Big targets to pick from Take advantage of phone features –Camera –Geo-Location –Bar code scanner
  66. 66. 67 Mobile UX Overview | 03/10/2014 Responsive designs - What Is It? A definition: Utilising CSS media queries, HTML5, JavaScript and modern browser features to display HTML content in the most suitable format for the browser requesting the content “Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience” Ethan Marcotte – A List Apart
  67. 67. 68 Mobile UX Overview | 03/10/2014 An example
  68. 68. 69 Mobile UX Overview | 03/10/2014 HTML CSS JQueries/Javascript Fluid Grids Responsive design - What Is It?
  69. 69. 70 Mobile UX Overview | 03/10/2014 RWD has distinct advantages Universal compatibility across smartphones and tablets Marketing-friendly - One site to maintain; One strategy to implement SEO-friendly - A single URL makes it easier for search engines to find your content Web Analytics - Performance tracking is centralised No redirections or impeding page load times
  70. 70. 71 Mobile UX Overview | 03/10/2014 HTML CSS JQueries/Javascript Fixed Grids Adaptive design - What Is It?
  71. 71. 72 Mobile UX Overview | 03/10/2014 Responsive designs - Good idea? Q: Are the tasks performed cross-platform the same? Yes No Responsive Designs Dedicated Mobile Site Factors: Less customisation Reduced support Imperfect Design Factors: Fully customised Fully supported ‘Ideal’ layout
  72. 72. 73 Mobile UX Overview | 03/10/2014 Responsive patterns - Basic Only a single transformation. Remaining adaptation is very gradual and is merely a narrowing of the initial layout.  Less resource intensive but still elegant.  On 7” tablet mobile (portrait) and landscape (tablet/desktop). http://designshack.net/articles/css/5-really- useful-responsive-web-design-patterns/
  73. 73. 74 Mobile UX Overview | 03/10/2014 Responsive patterns - Mondrian •Three large areas of content separated by breaks. •Becomes a vertical layout.
  74. 74. 75 Mobile UX Overview | 03/10/2014 Mobile First Focus on the most important things first “If you design mobile first, you create agreement on what matters most. You can then apply the same rationale to the desktop/laptop version of the web site.” Ethan Marcotte – A List Apart
  75. 75. 76 Mobile UX Overview | 03/10/2014 The mobile UX cycle Source: strategist.net
  76. 76. 77 Mobile UX Overview | 03/10/2014 1. Assess current situation - Mobile Strategy Do weed need a mobile offering? Yes No App Site App Site App Site Stand Alone Resp Stand Alone Resp Stand Alone Resp Questions: •What type of devices are they pointing at your site with? •What tasks do they undertake? •What content/features do they need? Windows Android iOS Mobile web stats = >10%
  77. 77. 78 Mobile UX Overview | 03/10/2014 2. Understand your users Who are your users? Prominence of search Depth of navigation Presentation of content Just browsing I know what I want! Impact on the design guidelines?
  78. 78. 79 Mobile UX Overview | 03/10/2014 3. Prioritise Mobile Features Who are your users? Web stats Content workshops Ask your users (FG’s, CrowdSourcing) Just browsing I know what I want! What are the primary tasks?
  79. 79. 80 Mobile UX Overview | 03/10/2014 Consider the opportunity of each design element Display only relevant content. Keep it short and simple. Use the available phone features. –LBS, camera etc. Make the design interruptible. –Save state often. 4. Design with mobile considerations
  80. 80. 81 Mobile UX Overview | 03/10/2014 4. Prototype Review & Refine
  81. 81. 82 Mobile UX Overview | 03/10/2014 Some Final Thoughts The mobile web is different than the static PC Understand the various contexts of use Consider mobile first Native app, web app or hybrid? Define constraints – e.g. screen size Is a ‘Responsive’ Design suitable? Do research with users and prototypes Get something on device ASAP & research in context
  82. 82. THANK YOU Any questions? User Vision M.E.N.A. FZE Dubai, United Arab Emirates Dr Ali al-Azzawi m: +971 (56) 2636 631 e: ali@uservision.com Laura Farrant m: +971 (55) 5297 123 e: LauraFarrant@uservision.com

×