Mobile ux breakfast briefing - dubai september

@uservisionmena

Chris Rourke

chris@uservision.co.uk

Mobile User Experience

September 19th 2013

Laura Farrant

LauraFarrant@uservision.com

Dr Ali al-Azzawi

ali@uservision.com

& UAE mGov

2 Mobile UX Overview | 30/09/2013

Outline

� Mobile: Constraints and opportunities

� Mobile UX design guidelines and examples

� Responsive web design

� The UX design process for mobile

� UAE mGov apps study

3 Mobile UX Overview | 30/09/2013

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.

5 Mobile UX Overview | 30/09/2013

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

6 Mobile UX Overview | 30/09/2013

The User, Content and Context

Context

UsersContent

Context determines

type & form of content

Context sets constraints

& expectations

Content provides experience Users do task

7 Mobile UX Overview | 30/09/2013

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/

8 Mobile UX Overview | 30/09/2013

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

9 Mobile UX Overview | 30/09/2013

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

10 Mobile UX Overview | 30/09/2013

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

11 Mobile UX Overview | 30/09/2013

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

12 Mobile UX Overview | 30/09/2013

An example

13 Mobile UX Overview | 30/09/2013

HTML

CSS

JQueries/Javascript

Fluid Grids

Responsive design - What Is It?

14 Mobile UX Overview | 30/09/2013

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

15 Mobile UX Overview | 30/09/2013

HTML

CSS

JQueries/Javascript

Fixed Grids

Adaptive design - What Is It?

16 Mobile UX Overview | 30/09/2013

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

17 Mobile UX Overview | 30/09/2013

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/

18 Mobile UX Overview | 30/09/2013

Responsive patterns - Mondrian

• Three large areas

of content

separated by

breaks.

• Becomes a vertical

layout.

19 Mobile UX Overview | 30/09/2013

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

20 Mobile UX Overview | 30/09/2013

The mobile UX cycle

Source: strategist.net

21 Mobile UX Overview | 30/09/2013

1. Assess current situation - Mobile Strategy

Do weed need a mobile

offering?

Yes No

App Site App Site App Site

Stand

AloneResp

Stand

AloneResp

Stand

AloneResp

Questions:• What type of devices are they pointing at your site with?

• What tasks do they undertake?

• What content/features do they need?

WindowsAndroidiOS

Mobile web stats =

>10%

22 Mobile UX Overview | 30/09/2013

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?

23 Mobile UX Overview | 30/09/2013

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?

24 Mobile UX Overview | 30/09/2013

� 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

25 Mobile UX Overview | 30/09/2013

4. Prototype Review & Refine

26 Mobile UX Overview | 30/09/2013

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