• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Mobile ux   breakfast briefing - dubai september

Mobile ux breakfast briefing - dubai september






Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    Mobile ux   breakfast briefing - dubai september Mobile ux breakfast briefing - dubai september Presentation Transcript

    • @uservisionmena Chris Rourke chris@uservision.co.uk Mobile User Experience September 19th 2013 Laura Farrant LauraFarrant@uservision.com Dr Ali al-Azzawi ali@uservision.com & 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 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? 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