Mobile UX breakfast briefing August 2013

  • 1,158 views
Uploaded on

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

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

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,158
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
0
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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.
  • 11. Client example: Emirates Q: What content is required for the mobile site?
  • 12. Client example: Emirates
  • 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