Mobile UX breakfast briefing - Dubai september 2013

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

3
Dubai eGovernment’s GWEM
Government Website Excellence Model Dubai Government Website Guidelines Version 3.0 – 2011

4
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
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
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
Perfect Combination
Users
Business
Channels/Technology

8
Definition of mGov
Guideline: Mobile Government
UAE Telecommunications Regulatory Authority (TRA)
Version 1.0 – 1 August 2013

9
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”

11
Conversion rate for different platforms
Device
Conversion Rate
Desktop computer
3.5%
Mobile phone
1.4%
Tablet
3.2%
(Nielson & Budiu, 2013)

12
Global market
(IDC, 2013)
UK
USA
China

13
UAE market (2)
(TRA, May 2013)
50%
14%
11%
10%
15%
Market Share %
Others, including

14
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
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 %

Dimensions of UX: How can we make a systematic assessment of mGov apps?

17
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
Dimensions of Mobile UX
(al-Azzawi, 2013)

19
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
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
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
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
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
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
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
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
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
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
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
Super-Dimensions of App Development

32
UX Profile of Mobile Apps
Quick-view UX profile, showing overall performance for each app.

33
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

We reviewed each app, highlighting areas of success and failure. Here is a sample of the kinds of observations made…

Here’s a quick view of some of the observations made…

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

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

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

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

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.

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

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

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

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

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

This app is NOT brought to you by ANYONE …
Over reliance on an internet connection, can provide a less than perfect User Experience.
1

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

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

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

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

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

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

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

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

Conclusion
Magic trio Design / Technology Business needs User Needs

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

59
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

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.

61
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

62
The User, Content and Context
Context
Users
Content
Context determines type & form of content
Context sets constraints & expectations
Content provides experience
Users do task

63
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/

64
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

65
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

66
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

67
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

68
An example

69
HTML
CSS
JQueries/Javascript
Fluid Grids
Responsive design - What Is It?

70
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

71
HTML
CSS
JQueries/Javascript
Fixed Grids
Adaptive design - What Is It?

72
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

73
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/

74
Responsive patterns - Mondrian
•Three large areas of content separated by breaks.
•Becomes a vertical layout.

75
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

76
The mobile UX cycle
Source: strategist.net

77
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%

78
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?

79
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?

80
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

81
4. Prototype Review & Refine

82
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

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

Mobile UX breakfast briefing - Dubai september 2013

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Mobile UX breakfast briefing - Dubai september 2013

Semelhante a Mobile UX breakfast briefing - Dubai september 2013 (20)

Mais de User Vision

Mais de User Vision (20)

Último

Último (20)

Mobile UX breakfast briefing - Dubai september 2013