Mobile User Experience (UX) Design

Your constantly-updated definition of Mobile User Experience (UX) Design and collection of topical content and literature

551 shares
336
171
44

What is Mobile User Experience (UX) Design?

Mobile user experience (UX) design refers to the design of positive experiences during the use of mobile devices and wearables, and applications or services running on such devices. The mobile market, like the contexts in which mobiles are used, places unique requirements on the design of the user experience. Mobile UX design focuses strongly on efficiency and discoverability.

Mobile users engage with their devices at crucial moments and only for short periods. Their experiences need to be personalized, efficient and enjoyable in order to keep them engaged and ensure their continued use of such items. Therefore, mobile UX design focuses on delivering devices and services that are streamlined to serve spontaneous user needs that change with the context the user finds himself or herself in, while keeping the interaction levels as low as possible. For instance, a user may have two free hands and fewer distractions while standing in a coffee shop than she would if, five minutes later, she must grasp a pole or railing on a bus traveling on an uneven road.

Another significant challenge for mobile UX is discoverability (i.e., how easily potential users can find the service or app) due to the sheer size of app marketplaces. For the same reason, retention and engagement also pose significant challenges, since users are often able to find plentiful and free alternatives to suit their needs. For mobile UX designers, the careful shaping of the mobile user experience—from discovery to operation and co-operation with other devices or services—is a key goal in creating positive and personally meaningful experiences for users. Designing for mobile also involves appreciating the need for brand consistency and the users’ expectations of content regarding their threshold for inferior versions of “full-fledged” designs they would find on computers at home or in the office.

Literature on Mobile User Experience (UX) Design

Here’s the entire UX literature on Mobile User Experience (UX) Design by the Interaction Design Foundation, collated in one place:

Featured article

Designing for the Mobile Environment – Some Simple Guidelines

Designing for the Mobile Environment – Some Simple Guidelines

If you’re going to design for mobile, then it’s likely you’re going to need to consider the way that the device is used and the specifics of the device itself. There are some general principles that can help designers for mobile get started but don’t forget that these don’t replace the need for user research. They are guidelines not hard and fast rules.

There are many things to consider when designing for mobile and while many are standard UX considerations; there are going to be mobile specific design considerations too. Are you going to integrate your mobile offering with your current offering? Will you use responsive design or adaptive design if you do?

A lot of this will boil down to context. E.g the context in which the mobile device will be used. If your users access the mobile web from their desks, that’s awesome, but many users don’t. They’re going to be trying to use them in the supermarket, on their daily commute, on the walk to the coffee shop, etc.

That means you’re going to have to consider how to reduce distractions and make it easy for the user to focus on the task in hand too.

Josh Clark, the author of Tapworthy- Designing Great iPhone Apps, offers three categories for mobile web access:

  • Microtasking: When the user interacts with their device for brief but frenzied periods of activity
  • Local: When the user wants to know what’s going on around them
  • Bored: When the user has nothing better to do and is looking to be entertained or otherwise diverted

Basic Design Considerations for the Mobile Web

Small Screens

You don’t have as much screen real estate for mobile devices as you do for PCs and laptops. That means, normally, you’ll be designing for multiple screen sizes. You need to make a decision early as to whether to use responsive design (where the device handles the changes in display) or adaptive design (where your servers handle the changes).

You want to focus on a “mobile first” approach which means designing for the smallest mobile platforms and increasing complexity from there.

A good process to follow would be:

  • Group device types based on similar screen sizes and try to keep this to a manageable number of groups
  • Define content rules and design adaption rules that enable you to display things well on each group of devices
  • Try to adhere as closely to web standards (W3) as possible when implementing flexible layouts

Don’t forget that there are many different browser types available for the mobile web and the wider Internet too. You want to ensure that you support as many of these as possible – including those that are no longer current (such as BlackBerry and Nokia WebKit).

Author/Copyright holder: Philip Jägenstedt. Copyright terms and licence: CC0 1.0

Keep Navigation Simple

Keypads and touch screens don’t make for precise navigation like mice do – so try to:

  • Prioritize navigation based on the way users work with functionality – the most popular go at the top
  • Minimize the levels of navigation involved
  • Ensure labelling is clear and concise for navigation
  • Offer short-key access to different features
  • Remember to offer a 30x30 pixel space for touch screen tap points
  • Ensure that links are visually distinct and make it clear when they have been activated too
  • Make it easy to swap between the mobile and full site (if you choose to implement separate versions)

Keep Content to a Minimum

Don’t overwhelm your users – respect the small screen space. Keep content to a minimum.

Make sure that content is universally supported on all devices or avoid it. Think Flash and then don’t use it, for example.

Make page descriptions short and to the point – for relevant bookmarks.

Reduce the Inputs Required from Users

The less the user has to fiddle with their phone; the more they’re going to enjoy using your mobile web offering. Consider:

  • Keeping URLs short.
  • Offering alternative input mechanisms (video, voice, etc.)
  • Minimizing inputs in forms (you can always ask for more data when the user logs on to the desktop)
  • Allowing permanent sign in (most smartphones are password or fingerprint protected – the risks of staying logged in are less than on the desktop)
  • Keep scrolling to a minimum and only allow scrolling in one direction

Author/Copyright holder: Subhashish Panigrahi. Copyright terms and licence: CC BY-SA 3.0

    Remember Mobile Connections Are Not Stable

    Mobile connections can be a colossal PITA in areas with patchy service. Don’t make things hard on your users. Try:

    • Retaining data so that it’s not lost in a connection break
    • Minimizing page size for rapid loading
    • Killing off ad-networks, etc. on mobile sites which consume huge amounts of bandwidth and data
    • Keeping images to a minimum and reducing the size of those images
    • Reducing the numbers of embedded images to a minimum (speeding up load times)

    Author/Copyright holder: Stefano De Sabbata and Mark Graham. Copyright terms and licence: CC BY-SA 3.0

      Continuous Integrated Experiences

      As users move between mobile and the desktop they’re going to expect similar experiences. Remember to:

      • Maintain continuity. If they log into your webstore on mobile they should be able to track orders and make purchases just like they would on the desktop.
      • Maintain consistency. Offer the option to switch between mobile and desktop offerings at will.
      • Maintain brand. The look and feel of each version should be similar.

      The Take Away

      Mobile is different from the traditional desktop environment and while standard UX and usability considerations are needed in a mobile context – the mobile environment also brings new design considerations. It’s important for mobile designers to pay attention to the details in order to deliver the best possible user experiences.

      References & Where to Learn More

      Course: Mobile User Experience (UX) Design:
      https://www.interaction-design.org/courses/mobile-user-experience-design

      Creative Bloq suggest focusing on these 10 principles of interactive design for mobile - http://www.creativebloq.com/mobile/10-principles-mobile-interface-design-4122910

      Give Good UX offer 5 simple tips for mobile design - http://www.givegoodux.com/5-crucial-principles-great-mobile-design/

      Smashing Magazine offers 7 principles for mobile UX design - http://www.smashingmagazine.com/2011/07/seven-guidelines-for-designing-high-performance-mobile-user-experiences/

      InfoWorld thinks you need to look at these 10 tips to get mobile app design right - http://www.infoworld.com/article/2612190/mobile-apps/heed-these-10-expert-tips-for-mobile-app-design.html

      Hero Image: Author/Copyright holder: Michael Sean Gallagher. Copyright terms and licence: CC BY-SA 2.0

      Show full article Show collapsed article

      Learn more about Mobile User Experience (UX) Design

      All literature

      Adaptive vs. Responsive Design

      Adaptive vs. Responsive Design

      The differences between responsive and adaptive design approaches spotlight important options for us as web and app designers. Choosing with insight can empower you to plan and execute your designs with better aim, purpose and results.With the pervasiveness and diversity of mobile devices, as designers we need to cater to the variety of screen s...

      • 137 shares
      • 1 month ago
      Don’t Build It, Fake It First – Prototyping for Mobile Apps

      Don’t Build It, Fake It First – Prototyping for Mobile Apps

      The design phase for mobile applications should include a prototyping stage. It is at this point that users can “play” with your ideas and concepts and give you valuable feedback that shapes the final designs before you begin development. This can save time and money in development and create products that offer significantly better user experie...

      • 381 shares
      • 10 months ago
      Designing for the Mobile Environment – Some Simple Guidelines

      Designing for the Mobile Environment – Some Simple Guidelines

      If you’re going to design for mobile, then it’s likely you’re going to need to consider the way that the device is used and the specifics of the device itself. There are some general principles that can help designers for mobile get started but don’t forget that these don’t replace the need for user research. They are guidelines not hard and fas...

      • 251 shares
      • 2 weeks ago
      Wearable Computing

      Ch 23: Wearable Computing

      Wearable computing is the study or practice of inventing, designing, building, or using miniature body-borne computational and sensory devices. Wearable computers may be worn under, over, or in clothing, or may also be themselves clothes (i.e. "Smart Clothing" (Mann, 1996a)). 23.1 Bearable ComputingThe field of wearable computing, however, exte...

      Book chapter
      Context-Aware Computing

      Ch 14: Context-Aware Computing

      A tablet computer switching the orientation of the screen, maps orienting themselves with the user’s current orientation and adapting the zoom level to the current speed, and switching on the backlight of the phone when used in the dark are examples of computers that are aware of their environment and their context of use. Less than 10 years ago...

      Book chapter
      Getting into the Mobile App User’s Mind – User Research for Mobile Applications

      Getting into the Mobile App User’s Mind – User Research for Mobile Applications

      It’s well understood that user research is what makes for the best user experiences but what are the right user research techniques for mobile apps? While, there is no doubt that any classic UX research technique may be turned to mobile app user research – there are some techniques which have already been demonstrated to show proven value. Maste...

      • 436 shares
      • 2 months ago
      A User-Centred Approach to Mobile Design and a 5 Stage Process for You to Use

      A User-Centred Approach to Mobile Design and a 5 Stage Process for You to Use

      The mobile web is here to stay. However, it’s important to remember that having a mobile website isn’t the key to success – it’s providing the right approach to the mobile user experience that brings success. Taking a user-centred approach to mobile (and other) design can help you keep in mind the outcomes that you intend rather than wasting tim...

      • 449 shares
      • 11 months ago
      Mobile Usability Research – The Important Differences from the Desktop

      Mobile Usability Research – The Important Differences from the Desktop

      It’s important to remember that while we may use the same methods for mobile usability research as we use for other types of usability research; the mobile environment is different to the environment at the desktop. This means being aware of the context and adapting research to take advantage of that context. It’s not so much learning new resear...

      • 469 shares
      • 7 months ago
      The Anatomy of a Smartphone – Things for Designers to Consider for Mobile Development

      The Anatomy of a Smartphone – Things for Designers to Consider for Mobile Development

      If you’re going to design for mobile, then it’s a good idea to have a grasp of what makes up the modern smartphone in terms of hardware and software. You can then start to think about the possibilities these offer when creating user experiences. The better you know the device, the more you can exploit its capabilities within your products. ...

      • 621 shares
      • 11 months ago
      User Interface Design Adaptation

      Ch 39: User Interface Design Adaptation

      This chapter aims to help user interface designers and developers understand the issues involved in multi-device interactive applications, which can be accessed through mobile and stationary devices, even exploiting different interaction modalities (graphical, vocal, etc.). The chapter provides a discussion of the possible solutions in terms of ...

      Book chapter
      The Myths of Mobile Design and Why It Matters

      The Myths of Mobile Design and Why It Matters

      When it comes to any school of thought surrounding a new concept – there comes a point when there is a body of “accepted knowledge”. That body of knowledge then becomes sacrosanct and instead of being treated as a guide to inform our work – it becomes practical dogma. It is worth challenging such myths and seeking to explore beneath the surface ...

      • 312 shares
      • 2 months ago
      Functionality and Mobile Design – Don’t Shrink the Screen, Focus on the Tasks

      Functionality and Mobile Design – Don’t Shrink the Screen, Focus on the Tasks

      Mobile design and design for other devices such as laptops and desktops does not mean producing the same product, just smaller. It means focusing on what matters to the mobile user and delivering a differentiated user experience. To do this successfully, you need to focus on tasks and how they are executed. Design for mobile is no longer option...

      • 459 shares
      • 5 months ago
      Show Me the Way to Go Anywhere – Navigation for Mobile Applications

      Show Me the Way to Go Anywhere – Navigation for Mobile Applications

      It doesn’t matter how great the functions and content, that your mobile apps serve, are – if your user can’t find them, they aren’t going to contribute to a great user experience. Navigation on the mobile web comes with challenges thanks to the reduced screen real estate available on smartphones. However, there are some good best practice guidel...

      • 436 shares
      • 3 months ago
      The Heart of the Matter, Information Architecture in the Mobile Age

      The Heart of the Matter, Information Architecture in the Mobile Age

      Content is the key ingredient in so many user experiences. So how does it change when it comes to planning a mobile user experience? Should you rewrite your content for each platform or do you need a different strategy to make the most of your content on all platforms? Handling content on mobile doesn’t need to be a chore but it does take planni...

      • 394 shares
      • 1 month ago
      What You Need to Know About Smartphones vs. Tablet use of the Mobile Internet

      What You Need to Know About Smartphones vs. Tablet use of the Mobile Internet

      It has become an industry standard to put “mobile first” when designing for the mobile web and while this is, in general, a good thing – it has also left to a neglect of the tablet platform in mobile design. There are clear differences between smartphones and tablets and key differences in the way that users interact with them. It’s important fo...

      • 647 shares
      • 2 years ago
      It Ain’t What You Do, It’s the Way That You Do It – Mobile App Usability Best Practices

      It Ain’t What You Do, It’s the Way That You Do It – Mobile App Usability Best Practices

      There are best practices for mobile usability as there are best practices for usability on other platforms. These best practices are not a substitute for user research and usability testing; they are intended as a “quick start” guide to get your designs moving in the right direction. There are no absolute rules in usability design and your users...

      • 599 shares
      • 1 year ago
      5 Ways to Improve the UX of Your Applications

      5 Ways to Improve the UX of Your Applications

      Application design is the biggest field of endeavour in technology at the moment. It seems that ever since Apple launched the iPhone that clever people are coming together to try and make our lives ever more interesting via the various app stores. Yet, there are some simple things that these wonderful folks could do to improve our overall user e...

      • 208 shares
      • 1 month ago
      We Think Therefore It Is – Conceptual Modelling for Mobile Applications

      We Think Therefore It Is – Conceptual Modelling for Mobile Applications

      A conceptual model is the mental model that people carry of how something should be done. Conceptual modelling can be carried out at a very early point in the design cycle so that there is a basic understanding of how users conceive tasks and this can then be brought to bear on UI design. The ability to sketch conceptual models quickly and easil...

      • 477 shares
      • 3 months ago
      Probes for Context Mapping – how to Design and Use them

      Probes for Context Mapping – how to Design and Use them

      Whether you are designing a mobile app, a professional online platform or an interactive museum exhibition, it is essential to understand users and the context in which they will use your design. Traditional methods such as interviews and observations will help you to touch the surface of their lives. A deeper understanding of what your users fe...

      • 270 shares
      • 2 weeks ago
      Make it Easy on the User: Designing for Discoverability within Mobile Apps

      Make it Easy on the User: Designing for Discoverability within Mobile Apps

      Discoverability sometimes also referred to as “learnability” is the ease at which users can find new features or functions with an app and learn to use the things that they find. While this has always been an important part of user experience design – it becomes even more important in the mobile design environment where limitations on screen rea...

      • 508 shares
      • 1 year ago