Mobile Breakfast Briefing June 2012


Published on

Published in: Technology, Business
  • Be the first to comment

Mobile Breakfast Briefing June 2012

  1. 1. Mobile UX - Breakfast BriefingJune 14th 2012Mark Westwater – Senior User Experience
  2. 2. Outline  Background  What’s happened since the last mobile breakfast briefing? (September 2009)  Design principles  Current trends in mobile UX – Responsive Design  The future?2 Mobile UX Overview | 14/06/2012
  3. 3. Background3 Mobile UX Overview | 14/06/2012
  4. 4. Background (2)4 Mobile UX Overview | 14/06/2012
  5. 5. Background (3)  2011 as a year in Mobile: – Nokia relevance questionable. – Windows Mobile’s poor IE browser. – Palm Web OS gone. – Blackberry’s struggling to evolve past being enterprise email. – Windows phone?  The mobile market is essentially down to only two competitors: iOS and Android.  Think of it as building desktop software for Windows and Mac. You have no excuse not to build a custom app optimised for at least one or the other. – If you really must have an app that is – in certain instances a good mobile website could work better…..5 Mobile UX Overview | 14/06/2012
  6. 6. Outline  Background  What’s happened since the last mobile breakfast briefing?  Design principles  Current trends in mobile UX – Responsive Design  The future?6 Mobile UX Overview | 14/06/2012
  7. 7. Breakfast Briefing 2009 - Mobile Statistics Some statistics: – 20% of UK mobile phone users now use the Internet on their mobile devices (source: – In 2008 alone there was an estimated 58 million PDAs sold worldwide (source: eTForecast). – A recent press release from Comscore indicated that mobile web use has more than DOUBLED from 10.8 million in January 2008 to 22.4 million in January 2009. – By 2011, more smart phones than PCs. – It is clear that mobile web use is a growing market.7 Mobile UX Overview | 14/06/2012
  8. 8. Now - Mobile Statistics 2011 saw 500M mobile internet users worldwide, 20M in the UK alone. Of all the time spent accessing the internet, 23% of it is done on a mobile device. YouTube mobile has 200M video playbacks each day worldwide. have had $1 billion in sales via mobile commerce. App development has gone through the roof. Smartphone sales are expected to overtake PC sales by 2013.8 Mobile UX Overview | 14/06/2012
  9. 9. Since last briefing 2009  App development/downloads gone through the roof. – Longevity is questionable.  Mobile site creation has not grown as fast.  Squeezing more content into the mobile space.9 Mobile UX Overview | 14/06/2012
  10. 10. The mobile challenges Source: NNG Lecture10 Mobile UX Overview | 14/06/2012
  11. 11. The mobile challenges Variety of browsers Tricky input method Poor success rates Download times Scrolling ‘Bloated’ pages Unfamiliarity Reluctance to use11 Mobile UX Overview | 14/06/2012
  12. 12. The mobile UX cycle Source: strategist.net12 Mobile UX Overview | 14/06/2012
  13. 13. 1. Assess current situation  When an organisation decides to design a website or an app targeted at mobile web users, they need to consider several factors like: – Why should we make / create a mobile web application? – What are the benefits of doing so? – What kind of content can be made available online? – Will the content delivered on mobile devices make sense for the target audience? – Is it really adding value to their usage? – Are the tasks short and sweet? – Will it work across multiple device profiles?13 Mobile UX Overview | 14/06/2012
  14. 14. 1. Assess current situation - Mobile Strategy Do weed need a mobile offering? Yes No Mobile web stats = iOS Android Blackberry >10% App Site App Site App Site Stand Stand Stand Resp Resp Resp Alone Alone Alone 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?14 Mobile UX Overview | 14/06/2012
  15. 15. Apps vs. mobile sites Why bother creating a mobile version of a website when an app seems to be in vogue? – The app needs to be downloaded from app store whereas everyone can access the mobile website and often are automatically directed there. – Apps difficult to find in app store? – All apps require Apples’ blessing. Not the case with Android. – Downloading the iPhone app requires a wireless network or the experience can be frustrating. I recently downloaded an app over the 3G network which took over 20mins to download and install correctly! – In many cases the iPhone app load time appears longer than the mobile website. – The mobile website is eg. Safari driven/displayed and given that up to 8 pages can remain open at any given time it is easier to switch between them. – Limit to the number of apps that can be installed. – Apps ‘lost’ in folders (iOS).15 Mobile UX Overview | 14/06/2012
  16. 16. Why create a mobile site? mCommerce Android sites can Reach Findability upsurge work Why create a Google Play App Shelf life mobile site? App App features promotion No approval in mobile Links eg. Name & process sites icon Mobile UX Overview | 14/06/2012
  17. 17. 2. Understand your users Who are your users? Just I know what browsing I want! Impact on the design guidelines? Prominence of search Depth of navigation Presentation of content17 Mobile UX Overview | 14/06/2012
  18. 18. 3. Content delivery - What? Who are your users? Just I know what browsing I want! What are the primary tasks? Web stats Content workshops Ask your users (FG’s, CrowdSource)18 Mobile UX Overview | 14/06/2012
  19. 19. Outline  Background  What’s happened since the last mobile breakfast briefing?  Design principles  Current trends in mobile UX – Responsive Design  The future?19 Mobile UX Overview | 14/06/2012
  20. 20. Background - Fit For Purpose20 Mobile UX Overview | 14/06/2012
  21. 21. Background - Fit For Purpose Navigation first content second What the audience Avoid ‘Getting started’ and ‘Skip Intro’. wants.21 Mobile UX Overview | 14/06/2012
  22. 22. 4. Design with mobile considerations Consider the opportunity cost of each design element Display only relevant content. Keep it short and simple. Use the available phone features. – GPS, camera, accelerometer, compass, etc. Make the design interruptible. – Save state often. Make the design self-sufficient. Minimise the interaction cost.22 Mobile UX Overview | 14/06/2012
  23. 23. Amazon - How to!  A lot of content has been removed.  Amazon’s mobile site, and the navigation has been tremendously cut down.  Instead of being able to browse through Amazon’s offerings, the user is taken to a landing page focused on a few book covers instead.23 Mobile UX Overview | 14/06/2012
  24. 24. Amazon (2)  Simple search box  Auto-suggest  Deals with misspellings  Provides sorting/ filtering options  Keeps checkout short  Provide purchases process length (e.g. step x of y)  Registration process unnecessary  Transactional security24 Mobile UX Overview | 14/06/2012
  25. 25. Client example: EmiratesQ: What content is required for the mobile site?
  26. 26. Client example: Emirates
  27. 27. Neilsen guidelines  Big overlap with desktop rules of thumb:
  28. 28. Neilsen guidelines - Unique to mobile
  29. 29. What makes a usable mobile interface? 1. Meet users needs quickly – Mobile browsing is most often for ‘immediate’ information – directions, phone numbers, addresses or instant entertainment. – A usable mobile interface would make finding information ‘and using it’ a quick simple process. – If possible, predict the desired information, links, such as ‘call them’, email or map links etc. – RESEARCH YOUR USERS! 2. Dont repeat the navigation on every page – Page real estate is particularly precious on a mobile devices 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.29 Mobile UX Overview | 14/06/2012
  30. 30. What makes a useable mobile interface? 3. Clearly distinguish selected items – Navigation is more difficult on mobile devices, the cursor not only selects items but also scrolls down pages - The cursor must move quick enough to travel the entire screen at a reasonable rate for navigation, but also slow enough for the user to be able to select items within the page – Selected items should stand out from everything else – by changing font, colour, size, borders etc. Dont forget the effect of background colour (and other page design factors) 4. Make user input as simple as possible – Text input is limited on mobile devices and therefore should be avoided where possible. – Instead, offer the user the option to browse from existing options/categories. – Text input can be offered as a backup where necessary.30 Mobile UX Overview | 14/06/2012
  31. 31. What makes a useable mobile interface? 5. Only show essential information – As screen size is a major issue, information sent should be prioritised in terms of what is most valued/required. – Only essential information should be provided to allow more effective use of the limited page real estate, but also as the rate charged for downloading page content can vary. – By avoiding sending unnecessary content, the desired information will be easier to find and cost less for the user. 6. Place basic browsing controls on the page – As navigation is tricky, and real estate is at a premium, the navigation options that are offered need to be as effective as possible. – These are often website and function specific, but in general, back to homepage /results(new search), back (1 page), next page are the minimum (and maximum) navigation that is often required.31 Mobile UX Overview | 14/06/2012
  32. 32. Information architecture If your app/site makes sense on the web which features and content belong on mobile web? – Limit categories to roughly 5. – 10 links can map to access keys. – Keep navigation levels to a minimum (5 max). – Regularly update link ordering based on traffic. – Ensure at least 1 content item per category.32 Mobile UX Overview | 14/06/2012
  33. 33. What makes a useable mobile interface?33 Mobile UX Overview | 14/06/2012
  34. 34. App trends - Gestures34 Mobile UX Overview | 14/06/2012
  35. 35. 5. Test & Refine - Test rigs - ‘Sleds’35 Mobile UX Overview | 14/06/2012
  36. 36. Halfords Case Study Execution:  Visitors browsing to via any mobile device are now 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.  When using the mobile site, customers can choose to pay by credit/debit card or PayPal, the same payment methods supported by  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 8% of Halfords’ dotcom total.36 Mobile UX Overview | 14/06/2012
  37. 37. Outline  Background  What’s happened since the last mobile breakfast briefing?  Design principles  Current trends in mobile UX – Responsive Design  The future?37 Mobile UX Overview | 14/06/2012
  38. 38. 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…..38 Mobile UX Overview | 14/06/2012
  39. 39. Responsive designs - What Is It?  ‘Utilising CSS3, 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 using single code.39 Mobile UX Overview | 14/06/2012
  40. 40. Responsive designs - Good idea?  Responsive designs essentially hide content on smaller screens that would otherwise be visible on desktop/laptop screens.  This strategy implicitly assumes mobile sites should have less content than their desktop counterparts.  Also, its almost always a bad idea to send a full desktop sites worth of mark-up, CSS, JS, and images to devices that wont use all of it and might have limited connectivity.  What is wrong is building a site without data on how people expect and want to use it on a mobile device.40 Mobile UX Overview | 14/06/2012
  41. 41. Responsive designs - Good idea? Q: Are the tasks performed cross-platform the same? Yes No Responsive Dedicated Mobile Designs Site Factors: Factors: Less customisation Fully customised Reduced support Fully supported Imperfect Design ‘Ideal’ layout41 Mobile UX Overview | 14/06/2012
  42. 42. Responsive designs - Good idea?  Less Maintenance  Search Engine Optimization  Better User Experience?  Conversion Optimisation  Web Analytics / Tracking42 Mobile UX Overview | 14/06/2012
  43. 43. Responsive designs - How to! Mobile UX Overview | 14/06/2012
  44. 44. Responsive designs - Good idea?  There are times when it makes sense to have a separate mobile website. – Your separate website is so small, it’s easy to maintain. – You are creating a mobile only landing page. – The mobile version of the site really needs to be that different. Amazon and eBay? – You really want to focus on trimming the content down for mobile users. – You’d like the mobile website to look more like a mobile app.44 Mobile UX Overview | 14/06/2012
  45. 45. Tablet design…..well the iPad  No need to rely on one orientation. – Many apps only work in landscape. Natural location of the ‘home’ button.  Do not view the large iPad screen as an invitation to bring back all the functionality you removed from your iPhone application. – Ensure touchpoints are discoverable. – Consider touchpoint size (visible vs. actual) and proximity.  Despite CloudOn the iPad is still mostly used for email, video, reading and gaming.45 Mobile UX Overview | 14/06/2012
  46. 46. Outline  Background  What’s happened since the last mobile breakfast briefing?  Design principles  Current trends in mobile UX – Responsive Design  The future?46 Mobile UX Overview | 14/06/2012
  47. 47. What’s next?  Monetisation  Security  Targeting & personalisation  HTML 5  In-App analytics47 Mobile UX Overview | 14/06/2012
  48. 48. 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: Web: Mobile UX Overview | 14/06/2012