Guidelines and Best PracticesThe Elements Of The Mobile User Experience

Advertisement

Mobile users and mobile usage are growing. With more users doing more on mobile1, the spotlight is on how to improve the individual elements that together create the mobile user experience.

The mobile user experience encompasses the user’s perceptions and feelings before, during and after their interaction with your mobile presence — be it through a browser or an app — using a mobile device that could lie anywhere on the continuum from low-end feature phone to high-definition tablet.

Creating mobile user experiences that delight users forces us to rethink a lot of what we have taken for granted so far with desktop design. It is complicated in part by mobile-specific considerations that go hand in hand with small screens, wide variations in device features, constraints in usage and connectivity, and the hard-to-identify-but-ever-changing mobile context.

Dissecting the mobile user experience into its key components gives us a conceptual framework for building and evaluating good mobile experiences, within the context of a user-centered approach to designing for mobile2. These components shape the mobile user experience — including functionality, context, user input, content and marketing, among others.

The elements of mobile user experience

The relevance of these elements will change depending on the type of device (feature phone versus smartphone versus tablet) and the presentation interface (app versus Web). This article briefly describes each of these elements and elaborates on each with selected guidelines.

Functionality

This has to do with tools and features that enable users to complete tasks and achieve their goals.

Guidelines

  • Prioritize and present core features from other channels that have especial relevance in a mobile environment. For an airline, this includes flight statuses and flight check-ins. For cosmetic chain Sephora, it includes supporting in-store shopping via easy access to product reviews on mobile devices.
  • Offer relevant mobile-only functionality (like barcode scanning and image recognition), and enhance functionality using the capabilities of mobile devices where possible to engage and delight users. Old Navy’s app serves up surprise games or savings when users snap the logo in a store.
  • Ensure that fundamental features and content are optimized for mobile. For example, make sure the store locator shows the nearest stores based on the device’s location, and make the phone numbers click-to-call.
  • Include features that are relevant to the business category. For retail websites and apps, this would include product search, order status and shopping cart.
  • Offer key capabilities across all channels. Users who sign in should see their personalized settings, irrespective of the device or channel being used. If certain functionality is not offered on mobile, then direct users to the appropriate channel, as TripIt does to set up a personal network.

    TripIt directs users to the website for setting up a network

Additional Reading

Information Architecture

This has to do with arranging the functionality and content into a logical structure to help users find information and complete tasks. This includes navigation, search and labeling.

Guidelines

  • Present links to the main features and content on the landing page, prioritized according to the user’s needs. Mobile Design Pattern Gallery4 has examples of primary and secondary navigation patterns for mobile, many of which are vertical instead of horizontal as on desktop websites.
  • Enable mobile users to navigate to the most important content and functionality in as few taps or key presses as possible. Navigation optimized for small screens is usually broad and shallow instead of deep. While three clicks (or taps) is not the magic number5, users need to be able to recognize that each tap is helping them complete their task. Every additional level also means more taps, more waiting for a page to load and more bandwidth consumed.
  • Address the navigation needs of both touchscreen and non-touchscreen users. When designing for touch, make sure the tap size of the navigation item is at least 30 pixels wide or tall. Provide keypad shortcuts for feature phones, so that users can enter, say, a number (0 to 9) to quickly access a link:

    Cater to feature phone users, as CNN does with access keys, not as Delta does by making the first action to be nine key presses downs
    Cater to feature phone users, as CNN does with access keys (left), not as Delta does by making the first action to be nine key presses downs (middle and right).

  • Provide navigational cues to let users know where they are, how to get back and how to jump back to the start. Mobile breadcrumbs are often implemented by replacing the “Back” button with a label showing users the section or category that they came from. For mobile websites, use standard conventions, such as a home icon that links back to the start screen, especially when navigation is not repeated on every screen.
  • Use concise, clear, consistent and descriptive labels for navigation items and links. While always a good practice, it becomes even more important on tiny mobile devices.

Additional Reading

Content

Otherwise known as “the stuff on your website” (as Lou Rosenfeld and Peter Morville refer to it in Information Architecture for the World Wide Web), content is the various types of material in different formats, such as text, images and video, that provide information to the user.

Guidelines

  • Present an appropriate and balanced mix of content to users (product information, social content, instructional and support content, marketing content).
  • Use multimedia when it supports the user’s tasks in a mobile context, adds value to the content or supports the goals of the website. Most of the time, multimedia content is best provided when the user is looking for distraction or entertainment (such as news or funny clips) or when it has instructional value (for example, how to use an app or new feature).
  • Always give the user control over multimedia content by not auto-starting video or sound, by allowing the user to skip or stop multimedia content and by being mindful of the bandwidth it takes up.
  • Ensure that content is mobile appropriate. Just as we had chunking guidelines when going from print to Web, copy should be written for shorter attention spans on mobile devices. Optimize images and media for the device; this means scaling down for smaller devices and making sure images are sharp enough for the new iPad7.
  • Ensure that primary content is presented in a format supported on the target device. Even now, websites such as Volkswagen’s ask iOS users to download Flash.

    VW asks iPad users to download an unsupported Flash plugin

Additional Reading

Design

This has to do with the visual presentation and interactive experience of mobile, including graphic design, branding and layout.

Guidelines

  • Remember the sayings “Mobilize, don’t miniaturize” (popularized by Barbara Ballard) and “Don’t shrink, rethink” (of Nokia). Both make the point that mobile design should not just rehash the desktop design.
  • Design for glanceability and quick scanning. Glanceability refers to how quickly and easily the visual design conveys information.
  • Maintain visual consistency with other touchpoints and experiences (mobile, app, Web, print and real world) through the use of color, typography and personality. Identifying Amazon in the stack below is easy even though the brand name is not visible.

    Amazon's visual design is easily recognizable

  • Guide users from the initial and most prominent element of the design to other elements to help them complete their tasks. This is known as visual flow. A good design brings together visual elements as well as information architecture, content and functionality to convey the brand’s identity and guide the user.
  • Consider both portrait and landscape orientations in the design process. Devices increasingly support multiple orientations and automatically adjust to match their physical orientation. Maintain the user’s location on the page when they change orientation. Indicate additional or different functionality in the new orientation if applicable, as shown by ING:

    The ING app informs users about additional features in the landscape mode

Additional Reading

User Input

This has to do with the effort required to enter data, which should be minimized on mobile devices and not require the use of both hands.

Guidelines

  • Limit input to essential fields. Or, as Luke Wroblewski says in his book Mobile First, “When it comes to mobile forms, be brutally efficient and trim, trim, trim.” Limit registration forms to the minimum fields required, and use shorter alternatives where possible, such as a ZIP code instead of city and state. My favorite offender of this guideline is Volkswagen’s form to schedule a test drive; the mobile form has more required fields than the desktop version (the extra fields are highlighted below):

    Volkswagen's mobile form to schedule a test drive is more tedious than the desktop version

  • Display default values wherever possible. This could be the last item selected by the user (such as an airport or train station) or the most frequently selected item (such as today’s date when checking a flight’s status):

    United and NJ Transit use defaults to simplify user input

  • Offer alternate input mechanisms based on the device’s capabilities where possible. Apps take advantage of quite a few input mechanisms built into devices, including motion, camera, gyroscope and voice, but mobile websites are just starting to use some of these features, particularly geolocation.
  • Use the appropriate input mechanism and display the appropriate touch keyboard to save users from having to navigate their keyboard screens to enter data. Keep in mind that inputting data is more tedious on feature phones that have only a numeric keypad. For non-sensitive applications, allow users to stay signed in on their mobile device; and save information such as email address and user name because mobile phones tend to be personal devices, unlike tablets, which tend to be shared between multiple people.

    Use appropriate keyboard; examples from the iOS Developer Library

  • Consider offering auto-completion, spellcheck suggestions and prediction technology to reduce the effort required to input data and to reduce errors — with the ability to revert as needed. Disable features such as CAPTCHA where not appropriate.

Additional Reading

Mobile Context

A mobile device can be used at anytime, anywhere. The mobile context is about the environment and circumstances of usage — anything that affects the interaction between the user and the interface, which is especially important for mobile because the context can change constantly and rapidly. While we often focus on distractions, multitasking, motion, low lighting conditions and poor connectivity, it also includes the other extreme — think using a tablet in a relaxed setting over a fast Wi-Fi connection.

Design Sketch: The Context of Mobile Interaction
The Context of Mobile Interaction13,” Nadav Savio

Guidelines

  • Use device features and capabilities to anticipate and support the user’s context of use. The iCookbook app allows users to walk through a recipe using voice commands — a nice feature when your hands are covered in batter!
  • Accommodate for changes in context based on the time of day and when the user is using the app. The Navfree GPS app automatically switches from day to night mode, showing low-glare maps for safer nighttime driving.

    GPS app sensing context

  • Use location to identify where the user is and to display relevant nearby content and offers. A Google search for “movies” on a mobile device brings up movies playing nearby and that day’s showtimes, with links to buy tickets online if available.
  • Leverage information that the user has provided, and respect their preferences and settings. After the first leg of a multi-leg flight, TripIt showed me the flight and gate information for my next flight, as well as how much time I had to kill. United’s app did no such thing, even though it knew much more about me. It could have shown me how to get from my current plane to the connecting flight and highlighted the location of the United Club along the way, where I could comfortably spend my two-hour wait, since it knew I was a member.
  • Default to the user experience most appropriate for the device (i.e. a mobile experience for small screens, and perhaps a desktop-like experience for tablets), but give users the option to have enhanced features. A big discussion on how to present this to the user recently took place, with Jakob Nielsen recommending a separate mobile website14 and Josh Clark arguing instead for a responsive design15; yet others believe that Nielsen and Clark are both wrong16.

Additional Reading

Usability

This is the overall measure of how well the information architecture, design, content and other elements work together to enable users to accomplish their goals.

Guidelines

  • Make it clear to the user what can be selected, tapped or swiped (this is known as affordance), especially on touchscreen devices. One of the big findings of Nielsen Norman Group’s usability studies of the iPad20 was that users didn’t know what was touchable or tappable. Another issue was swipe ambiguity: when the same swipe gesture means different things in different areas of a screen. Ensure that touchability is clear and that items such as links, icons and buttons are visibly tappable.
  • For touchscreen devices, ensure that touch targets are appropriately sized and well spaced to avoid selection errors. Also, place touch targets in the appropriate screen zones; for example, put destructive actions such as those for deletion in the “Reach” zone, as shown by Luke Wroblewski in his book Mobile First:

    Zones showing ease of access for right handed touch-screen use from Mobile First

  • Follow conventions and patterns to reduce the learning curve for users and to make the mobile experience more intuitive. Dedicated apps should follow platform-specific standards and guidelines. A comprehensive collection of links to official UI and UX guidelines is available in the article “UI Guidelines for Mobile and Tablet Web App Design2321” on Breaking the Mobile Web.
  • Ensure usability in variable conditions, including for daylight glare and changed angle of viewing and orientation, by paying attention to design elements like contrast, color, typography and font size.
  • Do not rely on technology that is not universally supported by your audience’s devices, including Java, JavaScript, cookies, Flash, frames, pop-ups and auto-refreshing. When opening new windows or transitioning from an app to the browser, warn users to avoid overwriting already open tabs.

Additional Reading

Trustworthiness

This relates to the level of confidence, trust and comfort that users feel when using a mobile website or app. According to a 2011 study by Truste and Harris Interactive25, privacy and security are the top two concerns among smartphone users:

Privacy and security are the top two concerns among smartphone users

Guidelines

  • Do not collect or use personal information (such as location and contact list) from mobile devices without the explicit permission of the user. The first few months of this year have seen numerous reports of apps secretly copying smartphone address books, with watchdogs up in arms26 and users retaliating27.
  • Make it easy for users to control how their personal information is shared in a mobile app by asking before collecting their location data and by allowing them to opt out of targeted advertising.
  • Clearly state your business practices (including for privacy, security and returns), and present them contextually (such as by displaying links to your privacy and security policies on the registration screen). The policies themselves should be accessible in a secondary section of the mobile user experience (such as the footer or a “More” tab). Reinforce credibility by displaying trusted badges, especially when users need to trust you with their personal or financial information.
  • Present policies appropriately on mobile devices by offering a concise summary and an option to email the entire policy. Privacy and security policies tend to be notoriously long and full of boring legalese that users often blindly click through to continue what they really want to do, so make it easy for users who are interested in the fine print.
  • Don’t break the user’s workflow when displaying legalese. Take them back to where they were28 before being interrupted, instead of making them start all over.

Additional Reading

Feedback

This has to do with the methods for attracting the user’s attention and displaying important information.

Guidelines

  • Minimize the number of alerts the app displays, and ensure that each alert offers critical information and useful choices. For a smile, look at Chris Crutchfield’s video on notification and alert overload30.
  • Keep alerts brief and clear, explaining what caused the alert and what the user can do, along with clearly labeled buttons.
  • Notifications should be brief and informative, not interfere with anything the user is doing, and be easy to act on or dismiss.
  • Provide feedback and confirmation on screen without disrupting the user’s workflow.
  • If your app displays badges and status bar notifications, keep the badges updated and clear them only when the user has attended to the new information. Chase clears the notifications badge for its mobile app the moment the user visits the notification section, even before the user has seen which of their multiple accounts triggered the badge, forcing them to hunt through each account to see what triggered it.

Additional Reading

Help

This relates to the options, products and services that are available to assist the user in using the website or app.

Guidelines

  • Make it easy for users to access help and support options. Users commonly look for help in the footer of a mobile website and in the toolbar or tab bar of an app.
  • Offer multiple ways to get support, including options relevant in a mobile context, such as self-serve FAQs, live support via click-to-call, and near-real-time Direct Message tweets. Two financial service companies that actively offer support via Twitter are American Express and Citibank.
  • Present a quick introduction and short tutorial on using the app when it first launches, with options for the user to skip and view later.
  • When introducing new or unique functionality (such as when check depositing via mobile apps was first introduced), offer contextual help and tips to guide users the first time, and as a refresher for infrequently used functionality.
  • Offer help videos when appropriate, but allow the user to start, pause, stop and control the volume as they wish, and keep in mind the multimedia guidelines mentioned in the “Content” section above.

Additional Reading

Social

This relates to content and features that create a sense of social participation, that enable user interaction and that facilitate sharing on established social networks.

Guidelines

  • Create and maintain a presence on social networks (for example, a Facebook page) and local services (for example, a profile page on services such as Google Places, Bing Business Portal and Yahoo Local). These will be highlighted in search results and on location-based social networking services. In addition to your business’ name, include your physical address, phone number, URL and hours of operation.
  • Incorporate your social presence and activity into your website’s mobile experience by showing your recent activity and offering an easy way to follow or like you on these networks.
  • Integrate social networking features into your website’s mobile experience to make it easy for users to connect with their own social networks. This could be as simple as using APIs36 to enable social sharing, bookmarking, tagging, liking and commenting.
  • Invite users to generate content featuring your brand, product or service from their mobile device, offering some incentive in return. For example, the burger chain Red Robin could invite the user to share a picture of their child reading a school book at one of its locations to get a free milkshake.
  • Provide mobile offers that can be shared and go viral. American Express currently offers savings and discounts to users who sync their profiles37 on networks such as Facebook, Twitter and Foursquare to their credit card.
  • Apps that rely on social contributions from users should look at ways to seed content in a way that is useful and, eventually, self-sustaining. For example, the My TSA app has a user-contributed feature that shows the wait times at security checkpoints, but it often shows outdated information, even though airport staff post physical signs of wait times at some airports.

Additional Reading

Marketing

This has to do with the methods by which a user finds a website or app and the factors that encourage repeated usage.

Guidelines

  • Ensure findability by optimizing for mobile search and discovery, such as by keeping URLs short. If you have a separate mobile website, follow URL naming conventions (m.site.com or mobile.site.com). In mobile search results, provide quick access to location-based content (e.g. directions from one’s current location) and device-formatted options (e.g. click to call).

    Mobile optimized formatted information for UPS, but partially missing for Fedex
    Mobile-formatted information is optimized for UPS (left), but partially missing for FedEx (right).

  • “Quick response” (QR) codes should lead to a mobile-optimized landing page, instead of a traditional page that requires zooming or, worse still, to the website’s home page, from where the user has to hunt for information. As a side note, QR codes painted on buildings39 should be big and clear enough to be recognized and deciphered by mobile devices.
  • Email campaigns should include a link to view the message in a mobile-friendly format, which itself links to the relevant offer page formatted for mobile — unlike CVS/pharmacy, which takes users to its mobile home page.
  • Promote your app in other channels where possible (TV, print and in-store advertising), and offer incentives to download and use the app, usually in the form of discounts and savings. If your app has a price tag, attract users to buy it in an overcrowded market by offering a limited-time promotional price. Another option is to promote the app through the Free App A Day marketplace.
  • Prompt users to rate and review your app or to share it on social networks after they have used it, but give them the option to postpone or stop these prompts. This will not only generate word of mouth, but give you insight into what users like and don’t like about the app. “Taking Control of Your Reviews40” by smalltech discusses the strategy of encouraging happy customers to post reviews and unhappy customers to email you feedback.

Additional Reading

Conclusion

Mobile user experience is still a developing field, and opportunities for improvement continue to emerge. We’ve presented an overview of the key elements of the mobile user experience, along with some guidelines to get started in each. Focusing on these individual elements will help us create great overall mobile user experiences for our users.

(al)

Footnotes

  1. 1 http://www.businessinsider.com/the-future-of-mobile-deck-2012-3?op=1
  2. 2 http://www.smashingmagazine.com/2011/05/02/a-user-centered-approach-to-mobile-design/
  3. 3 http://www.fastcompany.com/1816610/why-entrepreneurs-must-focus-on-saying-no-bump-slashes-features
  4. 4 http://mobiledesignpatterngallery.com/mobile-patterns.php?colid=65438029-72157627607680275
  5. 5 http://www.uie.com/articles/three_click_rule/
  6. 6 http://mobiledesignpatterngallery.com/mobile-patterns.php?colid=65438029-72157627607680275
  7. 7 http://bradfrostweb.com/blog/mobile/hi-res-optimization/
  8. 8 http://www.useit.com/alertbox/mobile-writing.html
  9. 9 http://karenmcgrane.com/2011/12/14/mobile-content-strategy/
  10. 10 http://www.eecs.berkeley.edu/Pubs/TechRpts/2006/EECS-2006-113.pdf
  11. 11 http://www.amazon.com/gp/product/1592535879/ref=as_li_ss_tl?ie=UTF8&tag=strategistnet
  12. 12 http://www.smashingmagazine.com/2010/03/11/forms-on-mobile-devices-modern-solutions/
  13. 13 http://www.giantant.com/antenna/2007/06/design-sketch-the-context-of-m.html
  14. 14 http://www.useit.com/alertbox/mobile-vs-full-sites.html
  15. 15 http://www.netmagazine.com/opinions/nielsen-wrong-mobile
  16. 16 http://www.netmagazine.com/opinions/nielsen-vs-clark-theyre-both-wrong
  17. 17 http://www.giantant.com/output/mobile_context_model.pdf
  18. 18 http://blog.cloudfour.com/on-mobile-context/
  19. 19 http://www.lukew.com/ff/entry.asp?1263
  20. 20 http://www.nngroup.com/reports/mobile/ipad/
  21. 21 http://www.mobilexweb.com/blog/ui-guidelines-mobile-tablet-design
  22. 22 http://www.nngroup.com/reports/mobile/ipad/
  23. 23 http://www.mobilexweb.com/blog/ui-guidelines-mobile-tablet-design
  24. 24 http://www.useit.com/alertbox/mobile-usability.html
  25. 25 http://www.truste.com/why_TRUSTe_privacy_services/harris-mobile-survey/
  26. 26 http://venturebeat.com/2012/02/22/privacy-policy-apps/
  27. 27 http://venturebeat.com/2012/03/17/apple-address-book-lawsuit/
  28. 28 http://www.useit.com/alertbox/disrupting-users.html
  29. 29 http://www.truste.com/blog/2011/05/20/layered-policy-and-short-notice-design/
  30. 30 http://vimeo.com/35873217
  31. 31 http://www.avc.com/a_vc/2011/03/mobile-notifications.html
  32. 32 http://www.trueventures.com/2011/03/01/the-future-of-mobile-notifications/
  33. 33 http://mobiledesignpatterngallery.com/mobile-patterns.php?colid=65438029-72157627731646558
  34. 34 http://www.uxbooth.com/blog/mobile-design-patters/
  35. 35 http://www.inspireux.com/2011/02/07/top-6-help-design-patterns-for-iphone-apps/
  36. 36 http://www.verious.com/marketplace/social-networking.php
  37. 37 https://sync.americanexpress.com/
  38. 38 http://www.verious.com/marketplace/social-networking.php
  39. 39 http://techcrunch.com/2012/03/25/facebook-rooftop-qr-code/
  40. 40 http://www.smallte.ch/blog-read_en_24001.html
  41. 41 http://mobileorchard.com/ipad-app-marketing-case-study-flickpad/
  42. 42 http://www.smashingmagazine.com/2012/04/05/art-of-launching-app-case-study/
  43. 43 http://www.smashingmagazine.com/2010/03/03/how-to-market-your-mobile-app/

↑ Back to topShare on Twitter

Lyndon Cerejo is a certified user experience strategist in Capgemini's Rapid Design & Visualization practice, with a successful track record with clients including Allstate, American Express, Coca-Cola, General Motors, Merrill Lynch, and Wal-Mart. His key areas of expertise are user experience analysis, information architecture, rapid prototyping, usability testing, online strategy & marketing. He is the co-author of marketing.com - a book about marketing adaptations on the Internet.

Advertising
  1. 1

    Great!
    Would be nice if you, SM, can prepare an article with a list of all responsive mobile frameworks at the moment and their characteristics.
    Best Regards from Chile!…

    1
  2. 2

    Having a click to call button is nice! One issue I’ve run into though with a couple of sites is a bunch of extra characters get added to the phone number which makes it useless.

    0
  3. 3

    This is an amazing and comprehensive mobile resource. Thanks, Lyndon!

    5
    • 4

      Opera Mini 5 beta has far too many kinks that the developers need to sort out. Same goes for Opera Mobile 9.5 and the new beta 9.7. Sometimes I’m focred to switch between Opera Mobile 9.5/9.7, IE, and Opera Mini 5 beta. It’s beyond frustrating.So yeah. Developers need to see a business case for fine-tuning mobile. And not even Tim Bergers-Lee will make them if the only people who use mobile are Africans. Americans need to start using mobile web en masse for the developers to attend to it pronto.

      -1
  4. 5

    Hi Lyndon,
    Thanks for highlighting the importance of maintaining visual consistency across other touch points. With all this talk of “trim, trim, trim” for the mobile web experience, it wouldn’t surprise me to see brands tempted by a minimalist makeover for their mobile presence. Your guide suggests that there can be a balance of consistent branding and concise content/interaction.

    Cheers!
    Sarah Bauer
    Navigator Multimedia

    2
  5. 6

    That’s a great in-depth article Lyndon!

    One of the key points I’d like to add here is that you might be designing for the mobile experience – the mobile user with different needs and behaviours – but you are not designing for different users. Desktop or mobile, you are designing for the *same users* on multiple platforms – and that means that you also need to make the mobile experience RELATE to the desktop experience as well as not being the rehash you so rightly suggest should be avoided. One key benefit to considering the design approach of Luke Wroblewski’s ‘Mobile First’ is that you feedback into desktop what you learn from mobile – and that ultimately will improve the experience that users have, not just desktop or mobile, but *across and between* platforms.

    For even further reading, see also my own slides and presentation write up on The Mobile UX from the MobileEast conference last month, and which discusses the constraints and capabilities that mobile provides. http://www.thinkui.co.uk/resources/the-mobile-user-experience/

    Roger Attrill

    5
    • 7

      Roger, you make a very valid point about designing for the same users on multiple platforms – which makes consistency and continuity across these platforms and channels important.
      Liked your presentation!

      1
  6. 8

    This is an amazing and comprehensive mobile resource.

    -1
  7. 9

    Nice article.Great mobile resources.Thank you for sharing.

    -1
  8. 10

    Parvin Singh Panesar

    July 14, 2012 10:46 am

    It will be a knee-jerk reaction, if we were to translate the entire user experience from a desktop website to a mobile app.
    Need to keep in mind that we are designing for the same user across platforms, to provide a seamless experience.

    Appreciate the various reference articles that have been provided.

    thanks to Lyndon !!

    0
  9. 11

    Thanks for this blog. We’re doing a lot more mobile work these days and this will help our team. It’s a still a very young market here in Australia but growing all the time.

    Simon Dell
    TwoCentsGroup.com.au

    -1
  10. 12

    Great Article Lyndon!! it is help us to learn more about mobile user experience

    0
  11. 13

    Thank You!!

    Thanks for the blog…!! I could feel some difference after getting into this, Its not the same as everybody write and everybody else reading it!!! But it make sense taking the major points into consideration. This will be very helpful for the developers and we as learners:-)

    1
  12. 14

    Hello Lyndon,

    Thanks for the clear overview! Some things were new for me.

    I work at Accessibility Foundation, a dutch organisation that measures whether websites comply with accessibility guidelines for people with disabilities. From these international Web Content Accessibility Guidelines (WCAG 2.0), I can see an overlap with a lot of things you say.

    The following also came to mind when I read your article. Maybe it’s useful or maybe you deliberately let it out for not making the article too long. Anyway, I’ll just share my thoughts:

    A lot of problems appear when people change the roll of an element with JavaScript. E.g. making an img or div element clickable with JavaScript. Touchscreens can still handle that, but feature phones and other phones with keyboard can not access the element, since it can not receive tab-focus. The sollution is simple: just use . It still amazes me that big online applications like Google Maps don’t do that and change the roll of img and div elements to clickable things that are not reachable with a keyboard. Another problem can be the use of :hover on menu’s, without making this accessible for keyboard users (also :focus). (more info: Succescriterium 4.1.2 in WCAG 2.0, http://www.w3.org/TR/WCAG/);

    In addition to using the right contrast (4,5:1), I would like to add: do not rely on color alone, but also give another hint. E.g. underlining the links as is done on this page. This helps people who are colorblind, but also ofcourse when you use your mobile phone outside and cannot see the screen very well (more info: Succescriterium 1.4.1 in WCAG 2.0).

    And I was curious what you or others think about telling beforhand why you need that specific info in a form (when not clear) for increasing the trustworthiness? And what you think about dividing the form in multiple pages (after ofcourse making it as short as possible)? Is that always a good practice for mobile?

    Thanks again for the good article!

    Tim

    0
    • 15

      Tim, you guessed right – I had to leave a few things out to avoid the article being longer than it is. This includes things that we take as a given when designing on other platforms as well (e.g. not relying on color alone) – they still hold true here.

      When designing forms, we try to ask only what is necessary from the user at a given point in time. There are ways to progressively ask for more information when required. As an example, when signing up for an email newsletter you don’t need a user’s physical mailing address – just their email address, name (personalization), and at the most, a zip code if you have geo-targeted information. When that user then requests for something to be mailed (information, purchase etc.) that’s when they expect to give you their mailing address and are more open to it.

      To your question about increasing trust, a link like “why do we need this?” or “how do we use this?” is very useful in reassuring the user about the information they are about to entrust to you. A contextual link to privacy and security policy are good practices as well.

      Using a multi-step or a long scrolling form (after reducing it to what you really, really, really need) comes down to what you are doing on that form and your users. Theresa Neil’s Mobile Design Pattern Gallery book has a few examples in Chapter 2. Some examples are online: http://www.mobiledesignpatterngallery.com/mobile-patterns.php?colid=65438029-72157627731642078

      0
  13. 17

    The VW website does not really ask for flash or javascript. Is the screenshot outdated? I checked on my firefox (desktop) with JS and flash blocked. The warning appears only on iOS?

    If so, it is grossly unjustified that people without JS and flash are able to view the website without warnings and people who CANNOT have flash anyway, get the warning!

    0
    • 18

      Manoj, the VW screenshot is fairly recent (taken just before the editorial review process). I agree that it was not appropriate for a device that cannot access flash anyway – but a good lesson to keep in mind.

      0
  14. 19

    Second half of the article is quite useful, but the first few sections are a mass of buzz words and meaningless sentences. As for an info-graphic that simply shows all the areas of mobile / web world hovering around a device, I am not sure what anyone can learn from that.

    Surely design for the web / mobile web /apps whatever that is not user-centred is simply bad design? To refer to the classic Norman example of a door handle, one not designed for the user would simply be a wall.

    0
    • 20

      Liam,

      The image at the start of the article was not intended to be an info-graphic – it was intended as a visual overview of the elements of the mobile user experience, so users know what’s in store in the rest of the article.

      I’m glad you found the latter part of the article useful – if you feel inclined to DM me on twitter @lycerejo about the parts you did not find as useful, I would appreciate it. Thanks!

      0
  15. 21

    Hello Lyndon – what a terrific post! – thankyou for your fine efforts.
    —-
    Lyndon,
    I cannot find any app (preferably on iphone or mac) that affords the designer a workspace tool where they can play with the “flow” of screen’s. The split-second interactions (UX) they wish to create for the user. Think of it like the concept layout documentation but at a prototype level. I have always used this” flow approach” in my board game design (non-digital).

    Why? — when working in intangible content domains (e.g. human dynamics, culture) people need to experience stuff, to get the content. Abstract is not helpful. Static prototype tools dont trigger that split-second response (which is the indicator of flow)

    So, I am looking for a current UI screen-FLOW tooling app (mac or iphone). I have not found one. Not one. How strange I thought. What am i missing?.

    What I have found:
    a) I have mockup apps of the actual screen layout (I like the app, interface — there are many available on iphone. none so far a wow. but they are ok).
    b) a repository for iphone screenshots.
    - There is 1 iphone app called screenshot journal but i gave it 1 star — unfortunately it follows iphoto design (and doesnt allow you to really build a repository as in wiki-style repository, and assign a select group of screenshots to a project). I have 1000s of gallery images.

    Tool, I am looking for is sorta like my animation tool I use (Toon), it affords the designer with a shared library concept. Abiltity to tag gallery images, bullet point comment what is good/bad, provide on-image scribble tools to highlight screen elements, or highlight aspects you want to point out in the flow.

    i read this
    http://www.smashingmagazine.com/2010/06/16/design-better-faster-with-rapid-prototyping/
    but it is out of date. 2010.

    —–
    Why do I want this tool badly?
    1: My research is focused on quantifying and articulating the cognitive load of different UI layouts and flows. To the sub-second. So i compare oodles of iphone layouts DAILY. We learn the best by comparison. So if I want to show a developer a finite point, I use comparison of three screenshots to highlight the subtlety. So for me, it would be so much easier if I had a tool that enabled simple side-by-side comparison.

    2: For clients, in my view, I prefer to show 3 options, rather than 1 recommendation. This way, your teaching rather than deliverying. This will generate some buy-in but a different relationship between UX and client. (app and client)

    3: Most tools are designed for web page design prototyping. The web page and mobile device are not even comparable as context in my world.

    Another important point, for the mobile context (or cross-screen of the various devices), is from Rachel Heiman 2012 book “Mobile Frontier” design for the user’s ecosystem, design for interruption. That is a great book. Best so far on really getting the split-second impact of user interaction (= cognitive load)

    So comparing same flow across device, from one device to another device, would be easier in a “flow” style tool. Keynote is not a flow tool. Its a series of static images in flow. Very different from touch interaction flow.

    4: Need a tool to support FULL digital prototyping process — from concept to mock — with flow/interaction emphasis.

    When flow is important, you cannot move into static design tools. Flow is like water, it keeps moving. It is lost in a split second. It dams up in a split second. Same as water around a rock etc..

    Animations could be designed from static prints, (movement was shown) as they were not focusing on the split-second reaction to a person’s “action”. I mention this as Balsmiq app writes up on their site, movement is not requirement. Animations have been designed from static for eons.

    —–
    thankyou

    0
  16. 22

    Vaishakh Pushpoth

    December 9, 2012 11:17 pm

    That was an amazingly useful and comprehensive article, Lyndon!

    Would definitely recommend this as a start-to-end reference bible
    for anyone getting into mobile UX strategy for their products.

    Thanks a bunch!

    -Vaishakh Pushpoth

    0
  17. 23

    How your give me the good right way,to support your system best site.
    TQ.

    0
  18. 24

    Good to have discovered this. Thank you for the help you have been..I am more than likely to get back here

    0
  19. 25

    Great article, thanks. In the fifth bullet under the Design section you write “Maintain the user’s location on the page when they change orientation. Indicate additional or different functionality in the new orientation if applicable.” Can you advise please how to do that? Have searched and can’t find much info on how to achieve this but it must be a common need and certainly would be useful to avoid a disjointed experience when changing orientation and would improve a page’s ease of use. Thanks for any pointers you can provide or any resources on how to implement this solution.

    0
  20. 26

    very nice and this very useful for me

    0

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top