Mobile UX breakfast briefing August 2013

Mark Westwater - Senior User Experience Consultant
mark@uservision.co.uk
Mobile UX -
Breakfast Briefing
August 29th 2013

2 Mobile UX Overview | 06/09/2013
Outline
 The mobile UX cycle
 Current trends in mobile UX
– Responsive Design
 The future?

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?
• Where are they?
BlackberryAndroidiOS
Mobile web stats =
>10%

Why create a mobile site?
Why create a
mobile site?
mCommerce
sites can
work
Findability
Android
upsurge
Reach
App
promotion
eg. Name &
icon
App features
in mobile
sites
No approval
process
Links
App Shelf life
Google Play
http://mashable.com/2012/06/06/mobile-site-mobile-app-
infographic/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+Mashable+%28Mashable%29

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. Content delivery - What?
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 cost 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.
 Make the design self-sufficient.
 Minimise the interaction cost.
4. Design with mobile considerations

5. Test & Refine - Test rigs - ‘Sleds’

Background - Fit For Purpose
Navigation first content second
Avoid ‘Getting started’ and ‘Skip Intro’.
What the audience
wants.

Client example: Emirates
Q: What content is required for the mobile site?

Halfords Case Study
Execution:
 Visitors browsing to Halfords.com via any mobile device are
automatically directed to the new mobile platform, where
they can search for products, read customer reviews, make
product comparisons, locate their nearest store that stocks
that product, then choose from Home/Work Delivery, Order
& Collect (Free to Store) or Reserve & Collect.
 Halfords was the first mass UK retailer to offer PayPal as a
mobile payment method.
 The site also has some unique touches. When browsing you
are then asked for your registration or make and model of
car and the system automatically finds the right parts for
your car.
Results:
 Since the launch of the mobile site, the retailer has seen
mobile visitor numbers increase to over 10% of the
Halfords’ dotcom total.

Outline
 The future?

Responsive designs - What Is It?
 Neilsen: ‘Good mobile
user experience requires
a different design than
what’s needed to satisfy
desktop users. Two
designs, two sites, and
cross-linking to make it
all work.’
– Wrong!
– Why?
– Responsive Design…..

Responsive designs - What Is It?
 ‘Utilising CSS media queries, HTML5, JavaScript and
modern browser features to display HTML content in
the most suitable format for the viewport requesting
the content.’
I prefer…
 ‘Your site will look good across smartphones, tablets,
small monitors and large displays’.

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

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 designs - Good idea?
 Less Maintenance: It is much easier to add and manage layouts
for new devices than it would be to create and manage
separate sites that are optimised for various devices.
 Search Engine Optimization: SEO will not become diluted as all
links and bookmarks point to one URL.
 Better User Experience?: Responsive design does not imply
plug-and-play. Inherent in this design approach, is deliberate
consideration for multiple user experiences.
 Conversion Optimisation: Your conversion goals are balanced
effectively based on varying user intent and within the
constraints of each specific layout.
 Web Analytics / Tracking: Performance tracking is centralised.

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

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

Responsive patterns - Basic Gallery
• Thumbnail
galleries.
• Reduce the
number of
columns a few
times.

Responsive patterns - Featured Items
• Similar to gallery
layout but
highlights a few
items compared
to multiple.
• Four featured
with introductory
content above.
• It jumps down to
two then one.
• The navigation
moves under the
logo.

Responsive patterns - Column Flip
• As you reduce the
size of the
browser, the first
column flips onto
its side and
becomes a row.
• It can make for a
lot of scrolling.

Responsive patterns - Feature Shuffle
• Different take on
featured items.
• It creates a
staggered two
column layout
where sections
are floated to
either side.
• For the single
column layout,
the thumbnail
images are
dropped
altogether for
text emphasis.

Navigation types
Responsive
Mobile
Navigation
Top Nav Toggle‘Select’
Footer
Anchor
No
Navigation
Left Flyout Footer Only

Navigation - Top Nav
Pros:
• Easy to implement.
• Desktop site almost as-is.
• No need to shift nav lists
around in the source.
Cons:
• Nav in the way.
• Core content is cut off:
• Scalable? - What happens
when you want to add a
new section?
http://timkadlec.com

Responsive patterns - Footer anchor
Pros:
• Easy to implement.
• Single button in header- A
simple menu icon or link
takes up very little room in
the header.
Cons:
• Anchor jump can be
disorienting.
• Not elegant. A jarring jump,
isn’t the interaction mobile
users are used to.
Navigation list at the footer
of the site, while the header
contains a link pointing to
the footer nav.
www.greygoose.com

Navigation - Toggle
Pros:
• Clear context.
• Elegant.
• Easy to scale up.
Cons:
• Animation performance.
Android is notoriously poor
with CSS animations.
• This approach relies on a bit
of JavaScript in order to
trigger the menu.The menu slides open in the
header. Simple and widely
utilised.
http://www.starbucks.co.uk

Navigation - Select Menu
Pros:
• Tidy and provides
space.
• Keeps interactions in
the header.
• Easily recognisable.
Cons:
• Lack of styling control
Each browser handles
them in their own way.
• Presenting nested lists.
• JavaScript dependency.Transforms a list of links into
a select menu. and is a
clever way to save real
estate
http://viljamis.com

Navigation - Footer only
Pros:
• Content-first, nav-
second.
Cons:
• Difficult to Discover.
• Difficult to Access.
No anchor in the header. It
requires mobile users to scroll
to the bottom to navigate.

Navigation - Select Menu
Pros:
• Lots of space for long lists.
• Facebook conventions.
Cons:
• Cross platform compatibility.
c.f. Facebook left navigation
for mobile. The nav is
accessed by a menu icon.
Site no longer exists

Navigation - No Navigation
Pros:
• Clears up plenty of
space - by removing
the nav.
Cons:
• Removes
content/functionality
for mobile.
• Maintenance - Two
separate navigations.
Nav removed for smaller
device screens.
http://www.authenticjobs.com
http://designshack.net/articles/css/5-really-useful-responsive-web-design-patterns/

Navigation - Pull Down
Pros:
• Screen real estate.
• Takes advantage of an existing
smartphone convention.
Cons:
• Potentially confusing - Mobile
users are used to pulling down
the top of the page to refresh a
list of content items, not to
reveal a navigation.

Outline
 The future?

What’s next?
Mobile users expect their
mobile experience to be as
good as their desktop
experience.
Google Research

A word of caution
 Responsive Design:
• Multiple devices/break points.
• Building all those templates and layouts plus
keeping the media queries up to date to
deliver the right layouts to the right devices.
• This approach responds to devices but not
situations.

The responsive experience
 Responsive Experiences:
• Consider location, browsing history, campaign
response.
• Alter the site according to the situation.
eg. You’ve booked a flight and are on your
way to the airport. You want flight schedules
not a booking engine.
Or emphasise dining and local experiences.

The responsive experience - The Holiday
Photos, Reviews,
Booking Engine
Resort events,
local attractions
In their home In the resort
Same Device
Looking for a holiday
What’s happening
now?

What’s next?
 The responsive experience
 Monetisation
 Targeting & personalisation
 HTML 5
 In-App analytics

Thank you
For further information, please contact:
Mark Westwater
Senior UX Consultant
User Vision
55 North Castle Street
Edinburgh
EH2 3QA
Tel: 0131 225 0856
Email: mark@uservision.co.uk
Web: www.uservision.co.uk

Mobile UX breakfast briefing August 2013

Recommended

Recommended

More Related Content

What's hot

What's hot (16)

Viewers also liked

Viewers also liked (7)

Similar to Mobile UX breakfast briefing August 2013

Similar to Mobile UX breakfast briefing August 2013 (20)

More from User Vision

More from User Vision (20)

Recently uploaded

Recently uploaded (20)

Mobile UX breakfast briefing August 2013