Discussion on the user experience of mobile and tablet devices focusing on the importance of user research and the latest patters in use-centred design for mobile
1. Mark Westwater - Senior User Experience Consultant
mark@uservision.co.uk
Mobile UX -
Breakfast Briefing
August 29th 2013
2. 2 Mobile UX Overview | 06/09/2013
Outline
The mobile UX cycle
Current trends in mobile UX
– Responsive Design
The future?
3. 3 Mobile UX Overview | 06/09/2013
The mobile UX cycle
Source: strategist.net
4. 4 Mobile UX Overview | 06/09/2013
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%
5. 5 Mobile UX Overview | 06/09/2013
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
6. 6 Mobile UX Overview | 06/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?
7. 7 Mobile UX Overview | 06/09/2013
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?
8. 8 Mobile UX Overview | 06/09/2013
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
9. 9 Mobile UX Overview | 06/09/2013
5. Test & Refine - Test rigs - ‘Sleds’
10. 10 Mobile UX Overview | 06/09/2013
Background - Fit For Purpose
Navigation first content second
Avoid ‘Getting started’ and ‘Skip Intro’.
What the audience
wants.
13. 13 Mobile UX Overview | 06/09/2013
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.
14. 14 Mobile UX Overview | 06/09/2013
Outline
The mobile UX cycle
Current trends in mobile UX
– Responsive Design
The future?
15. 15 Mobile UX Overview | 06/09/2013
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…..
16. 16 Mobile UX Overview | 06/09/2013
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’.
17. 17 Mobile UX Overview | 06/09/2013
HTML
CSS
JQueries/Javascript
Fluid Grids
Responsive design - What Is It?
18. 18 Mobile UX Overview | 06/09/2013
HTML
CSS
JQueries/Javascript
Fixed Grids
Adaptive design - What Is It?
19. 19 Mobile UX Overview | 06/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
20. 20 Mobile UX Overview | 06/09/2013
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.
21. 21 Mobile UX Overview | 06/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).
22. 22 Mobile UX Overview | 06/09/2013
Responsive patterns - Mondrian
• Three large areas
of content
separated by
breaks.
• Becomes a vertical
layout.
23. 23 Mobile UX Overview | 06/09/2013
Responsive patterns - Basic Gallery
• Thumbnail
galleries.
• Reduce the
number of
columns a few
times.
24. 24 Mobile UX Overview | 06/09/2013
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.
25. 25 Mobile UX Overview | 06/09/2013
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.
26. 26 Mobile UX Overview | 06/09/2013
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.
27. 27 Mobile UX Overview | 06/09/2013
Navigation types
Responsive
Mobile
Navigation
Top Nav Toggle‘Select’
Footer
Anchor
No
Navigation
Left Flyout Footer Only
28. 28 Mobile UX Overview | 06/09/2013
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
29. 29 Mobile UX Overview | 06/09/2013
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
30. 30 Mobile UX Overview | 06/09/2013
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
31. 31 Mobile UX Overview | 06/09/2013
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
32. 32 Mobile UX Overview | 06/09/2013
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.
33. 33 Mobile UX Overview | 06/09/2013
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
34. 34 Mobile UX Overview | 06/09/2013
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/
35. 35 Mobile UX Overview | 06/09/2013
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.
36. 36 Mobile UX Overview | 06/09/2013
Outline
The mobile UX cycle
Current trends in mobile UX
– Responsive Design
The future?
37. 37 Mobile UX Overview | 06/09/2013
What’s next?
Mobile users expect their
mobile experience to be as
good as their desktop
experience.
Google Research
38. 38 Mobile UX Overview | 06/09/2013
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.
39. 39 Mobile UX Overview | 06/09/2013
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.
40. 40 Mobile UX Overview | 06/09/2013
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?
41. 41 Mobile UX Overview | 06/09/2013
What’s next?
The responsive experience
Monetisation
Targeting & personalisation
HTML 5
In-App analytics
42. 42 Mobile UX Overview | 06/09/2013
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