Mobile User Experience
September 19th 2013
Dr Ali al-Azzawi
& UAE mGov
2 Mobile UX Overview | 30/09/2013
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
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
– Smaller Screen
– Variable connectivity & speed
– Limited battery life
– Harder text input
– No Flash (maybe)
– Potentially expensive (data plans)
– Use it anywhere
– Location services
6 Mobile UX Overview | 30/09/2013
The User, Content and Context
type & form of content
Context sets constraints
Content provides experience Users do task
7 Mobile UX Overview | 30/09/2013
Mobile User Behaviours (from Google)
– Find & search
– Create / edit
– Location specific
– Status (email, sports, Facebook etc)
– Data snacking
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
– 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
– 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
– Offer list picks, date barrels
– Big targets to pick from
Take advantage of phone features
– Bar code scanner
11 Mobile UX Overview | 30/09/2013
Responsive designs - What Is It?
A definition: Utilising CSS media queries,
features to display HTML content in the most
suitable format for the browser requesting
“Rather than tailoring disconnected designs to
each of an ever-increasing number of web
devices, we can treat them as facets of the same
Ethan Marcotte – A List Apart
13 Mobile UX Overview | 30/09/2013
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
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
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?
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
Less resource intensive but still elegant.
On 7” tablet mobile (portrait) and
18 Mobile UX Overview | 30/09/2013
Responsive patterns - Mondrian
• Three large areas
• Becomes a vertical
19 Mobile UX Overview | 30/09/2013
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
21 Mobile UX Overview | 30/09/2013
1. Assess current situation - Mobile Strategy
Do weed need a mobile
App Site App Site App Site
• What type of devices are they pointing at your site with?
• What tasks do they undertake?
• What content/features do they need?
Mobile web stats =
22 Mobile UX Overview | 30/09/2013
2. Understand your users
Prominence of search
Depth of navigation
Presentation of content
I know what
Impact on the design guidelines?
23 Mobile UX Overview | 30/09/2013
3. Prioritise Mobile Features
Ask your users (FG’s, CrowdSourcing)
I know what
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
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
A particular slide catching your eye?
Clipping is a handy way to collect important slides you want to go back to later.