Designing for Mobile Users - 9 Considerations for Your Website

The rise of mobile browsing makes it ever important to design specifically for mobile users. In fact, mobile usage is so prevalent that in September of 2020 Google switched to a mobile-first model for indexing, stating that they predominately use “the mobile version of a site’s content, crawled with the smartphone agent, for indexing and ranking.”

For this reason, having a mobile-optimized website and separate designs for mobile users is now table stakes for all websites. Here are 9 important things to consider when designing for mobile users.

1

Design everything for large fingers

From the menu and navigation elements to call to action buttons and links — you should ensure that every aspect of your site accounts for the wide variety of users that may interact with your content. Importantly, not only should you design for individuals with large fingers or small hands (who may struggle with small or spaced out UX elements), but you should also consider the needs of individuals with disabilities or issues with fine motor skills.

Space out your menu to allow for ample room for tapping each item, and keep menus short so that they display in their entirety on a mobile screen. Leave adequate space around all buttons, especially important calls to action.

Further, stick to familiar design patterns that account for how the user holds their phone. For example, keep your mobile menu button in the top right (as opposed to the top left) to ensure the majority of people can access it easily with their thumb, and try to avoid placing navigational elements at the far left or far right of the page where it might conflict with the edge of the user’s screen.

2

Offer easy, consistent, prominent calls to action

Compared to desktop users, mobile users tend to be goal-oriented in their journey to your site, so don’t shy away from bold calls to action that are displayed prominently above the fold. Often, mobile users will visit a site with a unique purpose, such as looking for contact information, for directions, or to take another important action.

Consider different patterns of user intent and make large, prominent, and easy-to-find calls to action to help them accomplish their task.

Calls to action should be easy — a simple click of a button. Mobile users should never have to copy, paste, or pinch the screen to zoom to accomplish something. Offering up clear buttons that lead a user along a journey is best.

Remain consistent with button styles and colors. Buttons are often framed in boxes, and typically use the brighter color in a color palette to draw attention. Leverage color as a cue — highlighting the most direct solution to the user’s desired action (“call now,” “view projects,” etc.). Choose one or two colors for links/buttons, and don’t use them for other text that is not an action item.

3

Design action cues in place of hover states

On desktop, action items are often underlined or change color when a user mouses over them. Desktop users are trained to explore with their mouse in order to know what actions are available. However, mobile users are unable to navigate with cursers, and so designers must use other visual cues to prompt action.

Clear, descriptive buttons for tapping are encouraged for important calls to action.

Animated cues (such as gifs, Lottie animations, or micro-animations) are a fun and easy way to indicate that users should scroll or swipe. Highlighting buttons and links with animation, such as a jumping scroll indicator at the bottom of the homepage is a great way to highlight action items, so long as they’re not overwhelming. Spacing them out so that the user only sees one at a time as they scroll is typically better, as to not overwhelm users.

Progressive disclosure — navigational information that displays as a user needs it — is also a great way to let users know their options without overwhelming them. Hoverstates that appear as users scroll are a great option to invite users to interact.

Whichever path you take, be consistent across your site. Establish consistent cues that tell users that something is tappable, scrollable, swipeable, etc.

4

Leverage commonly used navigation signals

When it comes to important navigational items, it’s often best not to try to reinvent the wheel. Three horizontal lines are often used as a menu button, and it’s a great way to save space on the page while also giving users constant access to navigational items (this is traditionally referred to as a “hamburger” menu). Arrows on either side of a section let users know to swipe (or tap the arrow). Pulling down on the screen is becoming a universal signal to refresh the page. Pull-up screens that come up from the bottom of a screen are becoming a popular way to give users the ability to explore something without losing their place on the website.

Leveraging these widely-used signals will aid in users finding what they’re looking for on your site while enjoying a seamless user experience. When it comes to navigation, don’t make users think. All responses from your site should be predictable and expected on the part of your users.

5

Make it easy to access the menu

Sticky menus that stay in place as users scroll down the page are a great way to keep navigational items handy. Menus that disappear as you scroll down, and then reappear as users start to scroll up are another way to aid in navigation. As a rule of thumb, never make a mobile user scroll all the way up a page to navigate around your site.

Additionally, note that your main menu (both in its content and design) may need to be different on mobile than on desktop. While desktop users are familiar with large menus and other custom design elements, the restricted space on mobile often necessitates more creative UX patterns, such as full-screen menus with scrollbars or sub-menus that open when a user clicks a link.

6

Make forms seamless

Forms should automatically scale to display the entire box while entering information, and the correct keyboard should pull up — e.g. numbers if the form field is a date. Push users to the next field in scenarios where they’ve entered 7 digits for their phone number or 8 digits for a date. Provide a visual calendar for selecting dates. It’s also beneficial to enable realtime validation for forms, where feedback is given to a user as they type in the fields, instead of only after the form is submitted. Don’t ask for more information than necessary.

Additionally, work with your developer to enable auto-fill features on your forms, both for desktop and mobile users. While desktop users may not be as accustomed to filling out information in a form, mobile users are increasingly driven toward “one-click” solutions on their phones that fill out all their information with a single tap. Proper tagging of your form elements is key to ensuring this is possible on your forms.

7

Offer filtering for pages that serve up lots of options

If your site serves a significant amount of content at one time — such as on a blog overview page or a list of team members — you should offer easy filtering options to narrow down the choices. Screen real estate on mobile devices is limited, so you’ll want to be careful to show only the most relevant content to users who visit these pages. Often, this means giving users greater control over what they want to see through filters, search bars, and other content customization options.

Additionally, consider lazy loading content automatically as users scroll down the page. This helps pages load faster initially, and only delivers as many results as necessary for a smoother mobile experience.

8

Think of the bottom of the screen as prime real estate

As phones get larger, the top of the screen is increasingly cumbersome to reach with a thumb. Increasingly since 2019, mobile sites are taking a cue from applications and moving navigational items down to the bottom of the screen. Menu bars can be placed at the bottom of a screen and still be “sticky” at the bottom, or hamburger menu icons can appear at the bottom when users start to scroll up the screen, just as they often do when placed at the top.

Similarly, many organizations that don’t want to move their primary navigation from the top of the screen will instead add floating pop-up bars to the bottom to direct users to pages of significant interest. For example, you could add a floating bar with an “apply now” button on it to your careers page or a more generalized floating bar with information about a recent merger or acquisition.

9

Take page load speed to the next level on mobile

Many mobile users are browsing your site using data through slower connections than your average business wifi. Take this into account when designing your site and simplify the elements that often bog down a site the most — images and video.

Consider replacing large videos that autoplay with static images on mobile, and make sure that all images are optimized for web and correctly sized for the purpose they are being used. Utilize lazy loading for pages that serve up lots of information so that pages load quickly initially and only serve up enough information as needed by users as they scroll.

Testing is critical

When it comes to designing for mobile user experience, there’s no substitute for user testing, particularly users that are unfamiliar with your site. You can leverage heatmapping tools such as CrazyEgg or HotJar to watch user recordings for clues on how users browse your site, where there may be hiccups, and how to make the user experience even better. Also, test it out with several people and collect feedback on their journey.

Was anything cumbersome? Were they missing any information at any point in their journey? Were they able to find information logically?

Ultimately, design plays a central role in user experience and designing for mobile should be given proper attention.