Popular related searches

Filters

Simple Guidelines When You Design for Mobile

| 10 min read

If you’re going to design for mobile, 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.

Josh Clark, the author of Tapworthy: Designing Great iPhone Apps, describes three types of mobile mindsets:

  • “I’m Microtasking”: When the user interacts with their device for brief but frenzied periods of activity. Think about how you can accommodate users who are in a hurry. Make frequent, recurring tasks as efficient as possible.

  • “I’m Local”: When the user wants to know what’s going on around them. Take advantage of mobile devices’ sensors such as location, device orientation, ambient light to personalize the experience where appropriate (and with permission, of course!)

  • “I’m Bored”: When the user has nothing better to do and is looking to be entertained or otherwise diverted. Think beyond the task-focused features—what can you offer for users when they’re browsing leisurely?

We might add a few more categories that have emerged since Josh wrote that book early on in the smartphone era:

  • Extended browsing/ engagement: When the user is lost in content (scrolling ad nauseum e.g., Instagram), tapping and swiping (e.g., Tinder) or ‘rabbit holing’ going deeper and deeper, usually algorithm driven (e.g. YouTube). 

  • Interrupted attention: When notifications pull users back to check up on activity, status updates, or anything else. Note this is not always good as notifications notoriously pull users back for no urgent reason, other than for the company’s app engagement monetization needs (e.g. Facebook). 

In that last category, Microsoft offers a whole set of guidelines called Respecting Focus. They fall into five main areas:

  1. Understand urgency and medium: There are many ways technology communicates: a visual pop up, orange blinking light, a sound, a vibration. Are all modes needed, capturing full attention for one low-urgency communication?

  2. Adapt to the customer’s behavior: How a customer interacts with each feature or part of your experience will change over time. 

  3. Adapt to context: We all focus, filter, and consume information in unique ways. We have capabilities and limitations for tuning in and out information. These preferences and capabilities can rapidly change based on context. Because of that, how a person interacts with each feature or part of an experience will change. Can your system learn from how people interact to modify the way it communicates?

  4. Enable the customer to adapt: Personal experiences are tailored to an individual. Customizable features help customers feel empowered and in control of their devices. Many alerts on computers today are difficult to tune out or turn off. With multiple applications running at once, we can be inundated with communications. Better systems have ways for users to control the type and timing of notifications.

  5. Reduce mental cost: Experiences are moving beyond screens to engage and immerse simultaneous human senses. Each of these new interactions presents new potential points of friction.

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. Remember, 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.

  • 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, Material Design etc) as possible.

Prioritize the Primary Task

Using a task-first approach can help guarantee that you’re putting the main task up front. Think of it as an urgency issue. In this example, the context is school shootings in America (a big social problem that sadly occurs frequently in the United States). Notice how the primary “panic button” is featured above all other tasks and takes a stronger priority on screen.

Screenshots of the Rave Panic Button App

So what’s your “panic button” in terms of task urgency and priority?

© RaveMobileSafety, Fair-Use (Link)

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 labeling is clear and concise for navigation.

  • Offer short-key access to different features.

  • Remember to offer a minimum 10mm size to all buttons.

    10 mm touch targets are

    © Interaction Design Foundation, CC BY-SA 4.0

    © Interaction Design Foundation, CC BY-SA 4.0

  • Ensure that links are visually distinct and make it clear when they have been activated.

  • Make it easy to ‘hand off’ or swap between the mobile and full site and to keep task continuity between devices if possible.

  • Offer navigation links of the footer of a page (if mobile website) and a back to top function. This helps mobile scroll down, so users don’t have to go all the way to the top for navigation. Also screen readers (blind users) need repeat footer links so they have a forward motion path. 

  • Make sure hamburger menus are visually distinct (don’t assume users know what they are) and tag them (add for accessibility—a classic mistake still many developers make).

Various studies have been done on the mobile Menu (hamburger) display affordance. This study by developer James Foster found adding the word menu and adding a border had a much higher conversion than a menu without a border—and no hamburger was involved!

© James Foster, Fair Use

As always, test with your users and make sure you are making your mobile menu accessible.

Keep Content to a Minimum 

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

  • Ensure content is universally supported on all devices or avoid it.  

  • Make page descriptions and microcopy short, verb-oriented and concise.

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 or app offering. Consider:

  • 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 allow scrolling in only one direction.

Remember Mobile Connections Are Not Stable

Mobile connections can be a colossal pain in areas with patchy service. Don’t make things difficult for 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).

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 you use standard UX and usability considerations, the mobile environment 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. It is also important to respect a user’s attention and focus and minimize interruptions. 

References and Where to Learn More

Creative Bloq suggests focusing on these 10 principles of interactive design for mobile. 

Read Microsoft’s guide on Respecting Focus

Learn more about designing interruptions in this Medium article.

Familiarize yourself with Toptal’s Guide to notification design.

Learn about how to make a hamburger menu accessible.

Get Weekly UX Insights

Join 309,942 designers who get useful UX tips from our newsletter.
A valid email address is required.