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


Dubai eGovernment’s GWEM

Government Website Excellence Model Dubai Government Website Guidelines

Version 3.0 – 2011


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


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


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


Perfect Combination

Users Business

Channels/Technology

http://www.google.co.uk/url?sa=i&rct=j&q=&esrc=s&frm=1&source=images&cd=&cad=rja&docid=Cd5A6nueBE435M&tbnid=Knmbq32mMEn9PM:&ved=0CAUQjRw&url=http://jamesladdcode.com/2008/08/19/224/&ei=d7MsUaKcKMTPsgar8YHgCA&bvm=bv.42965579,d.Yms&psig=AFQjCNFxxEG0zbyPWCS_paaxCE-lf6Fb7g&ust=1361970372124787

https://www.google.co.uk/url?sa=i&rct=j&q=&esrc=s&frm=1&source=images&cd=&cad=rja&docid=tTwUPESacOqUcM&tbnid=M0zOiVoUfx3ZzM:&ved=0CAUQjRw&url=https://github.com/MonoCross/MonoCross&ei=0LQsUYXLMNHesgbbq4DACg&bvm=bv.42965579,d.Yms&psig=AFQjCNH8NRgozfXEBFoH9_kOk2qxOt3agA&ust=1361970685954075


Definition of mGov

Guideline: Mobile Government UAE Telecommunications Regulatory Authority (TRA)

Version 1.0 – 1 August 2013


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”

Mobile … in numbers


Conversion rate for different platforms

Device Conversion Rate

Desktop computer 3.5%

Mobile phone 1.4%

Tablet 3.2%

(Nielson & Budiu, 2013)


Global market

(IDC, 2013)

UK USA China


UAE market (2)

(TRA, May 2013)

50%

14%

11%

10%

15%

Market Share %

Others, including


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.78.4

1.5

18.7

0

10

20

30

40

50

60

Nokia

Blackberry

Samsung

Apple

SonyEricson

Others

RegisteredonUAENetworks(%)


UAE market (3)

(TRA, May 2013)

3.082.93 2.9

2.61

2.93

2.11

0

0.5

1

1.5

2

2.5

3

3.5

Nokia1280 iPhone4SNokiaX1-01 NokiaE5 iPhone4 SamsungSIII

CommonMobileHandsetModels%

Dimensions of UX: How can we make a systematic 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 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)


Dimensions of Mobile UX

(al-Azzawi, 2013)


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


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)


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)


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)


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)


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)


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)



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)



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)



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


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


Super-Dimensions of App Development

UX Profile


UX Profile of Mobile Apps

Quick-view UX profile, showing overall performance for each app.


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

Example App assessment

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


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.


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


The User, Content and Context

Context

Users Content

Context determines type & form of content

Context sets constraints & expectations

Content provides experience Users do task


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/


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


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


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


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


An example

http://www.macdonaldhotels.co.uk/


HTML

CSS

JQueries/Javascript

Fluid Grids

Responsive design - What Is It?


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


HTML

CSS

JQueries/Javascript

Fixed Grids

Adaptive design - What Is It?


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


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/

http://137pillarshouse.com/


Responsive patterns - Mondrian

• Three large areas of content separated by breaks.

• Becomes a vertical layout.

http://www.anderssonwise.com/


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


The mobile UX cycle

Source: strategist.net


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%


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?


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?


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


4. Prototype Review & Refine


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: [email protected]

Laura Farrant m: +971 (55) 5297 123 e: [email protected]

Mobile UX breakfast briefing - Dubai september 2013

Internet

Transcript of Mobile UX breakfast briefing - Dubai september 2013