mobile ux breakfast briefing - dubai september
DESCRIPTION
TRANSCRIPT
@uservisionmena
Chris Rourke
Mobile User Experience
September 19th 2013
Laura Farrant
Dr Ali al-Azzawi
& 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