Mobile experience design is getting more and more significant for businesses and brands. So, welcome to check a set of mobile design best practices worth considering.
Mobile accounts for approximately half of the website traffic worldwide. In the second quarter of 2020, mobile devices (excluding tablets) generated 51.53% of global website traffic, according to Statista.
Needless to say, you should be focusing your efforts on optimizing your online presence for mobile devices. The modern audience is savvy enough to recognize the poor design, and simply put, you can’t compete without a business website that renders a first-rate mobile experience.
What’s more, due to Google’s mobile-first indexing, the mobile (not the desktop!) version of your business website is the benchmark for how Google indexes your website and determines your rankings. That means your mobile user experience can make or break your website’s rankings on Google.
Now, there are many mobile experience design best practices to consider, but in this post, let’s take a look at five of the most important yet overlooked ones that you must focus on.
First off, designing for mobile means you need to take one special consideration into account — how people hold and interact with smartphones in their hands. According to Steven Hoober’s research, 75% of users touch the screen only with one thumb, and 10% of users hold their phone in one hand and tap with a finger of the other hand.
That means you need to optimize your mobile site experience for the “thumb zone” — the area of a phone’s screen that can be easily accessed with the thumb when a person is holding their phone with one hand.
In essence, put primary interactions front and center (easy-to-reach areas of the screen) and less important ones at the top and bottom screen edges.
Tesla does this really well in the mobile version of their website. As you can see below, the most essential elements — the calls to action that take visitors to the next crucial step — are easily accessible with the thumb when holding your phone with one hand.
And so does HuffPost — as all the content is easily reachable with your thumb — it makes for a comfortable mobile reading experience resulting in more content consumption and engagement.
Thus, putting the bulk of your important interactive content (especially the calls-to-action) in the thumb zone makes it easy to use your website and is crucial to creating a strong mobile experience.
This is another key mobile experience design best practice that’s often overlooked. Typing on a touch screen is still far from perfect, and it can be frustrating for visitors to fill out forms or input data that can be fetched from elsewhere.
“Good mobile design minimizes the amount of typing required, and only requires typing when strictly necessary. For that, you must minimize the number of form fields on the mobile version of your site,” explains Devesh Sharma of Design Bombs.
Asking users to fill out a form with four or five fields is totally acceptable on desktop, but on a mobile device, even four fields are enough to turn a user away, especially if they can’t see a purpose.
So, make sure that every single field in your mobile forms is necessary, and eliminate any that aren’t. You can also combine multiple form fields into a single field (first and last name, for instance) or segment the form filling process into two or three steps to reduce the perceived workload.
Moreover, enable autofill wherever possible so that users only have to enter the bare minimum of information. Provide the option to connect their existing accounts (such as a Facebook, Google, or Twitter account) instead of signing up from scratch.
Wix, the famous website builder, is an excellent example of this best practice in action. When you want to get started using Wix to create a website on your mobile, they only ask for the essential details — email address and password — or you can simply authenticate using your Facebook or Google account.
And once you sign up, they guide you through the process step-by-step with multiple-choice questions to learn your preferences and little-to-no typing. The whole process looks and feels neat.
Strava, the super popular fitness app, minimizes typing and allows one-click authentication elegantly on the desktop version of their site as well.
This one-click alternative to authorize one of their existing accounts constitutes a far more seamless mobile experience. Still, don’t rely solely on these secondary apps — some people may be distrustful of linking their accounts to your business and prefer filling out a form.
You’re likely already aware of the importance of compressing images on your website. Bulky, full-sized images slow down your page load speed, which hurts both your site’s user experience and search rankings.
In fact, mobile page speed is an official ranking factor. And mobile users simply don’t have the patience to wait for your site to load. It doesn’t take long for them to click away if your site doesn’t finish loading.
So, make sure to use an image compression tool like TinyJPG to optimize your images’ file size without compromising on quality before you upload them on your website.
That is especially crucial if you have an ecommerce site as it’s likely brimming with thousands of images that need to be of high quality yet small in size.
For instance, Nike does a great job of keeping all images super crisp and yet loads at a lightning-fast speed on desktop and mobile. As you can see below, the website is also well optimized for the thumb zone and thus, is an exemplar of mobile experience design.
Furthermore, to ensure optimal speed on mobile, enable compression, minify CSS and JS, avoid unnecessary redirects, leverage browser caching.
A navbar is super useful on a desktop or laptop — it allows visitors to conveniently browse the pages on your site and quickly find what they’re looking for. But on mobile, real estate is premium, and as shown below, your navbar can take up a lot of space that could otherwise be used for important content such as text and visuals.
Of course, the navbar still remains a vital navigational element, and you do need it on your mobile site. For that, your best bet is to incorporate a hamburger menu, which turns your space-hungry navbar into an expandable menu.
As you can see, the hamburger menu serves as a drawer that shows the various navigational buttons only when called upon by the user. Nearly every high authority website you come across today uses a hamburger menu in place of a navigation bar.
For example, Backlinko, the renowned SEO and marketing blog by Brian Dean, incorporates a hamburger menu rather than keeping the whole navbar as is.
And so does J.Crew, as shown below.
Navigation on mobile sites needs to be more intuitive than it is on desktop versions, and visitors need to immediately identify how to get around without having to think. Using recognizable icons and design patterns, such as the hamburger menu, is how you’re going to achieve that.
If you wish for your mobile site to rank high in Google search (and render a top-notch user experience), you need to pay heed to Google’s guidelines for better content accessibility on mobile devices.
In 2017, Google introduced a soft penalty for what they call “intrusive interstitials.” According to Google, showing a popup that covers the main content, either immediately after the user navigates to a page from the search results, or while they are looking through the page, or displaying a standalone interstitial that the user has to dismiss before accessing the main content — are examples of techniques that make content less accessible to a user.
So, simply put, popups are a huge no-no on mobile devices — they are already annoying on full-sized desktop screens and even more so on smaller mobile screens.
They seriously hurt the mobile user experience, as visitors cannot easily find the content they were expecting upon clicking through.
To combat this, Google is discouraging popups on mobile sites by clearly specifying that “pages, where content is not easily accessible to a user on the transition from the mobile search results, may not rank as highly.”
Long story short, disable popups on mobile right away. If it’s important, keep the popup content as an unobtrusive section on your page, as Icons8 does on the blog section to capture newsletter subscribers.
Some of these best practices may seem obvious to you, but countless businesses still tend to overlook these and, as a result, suffer from low mobile conversion rates. The bar has been raised even further in terms of what mobile users expect from websites and apps, and people would readily ditch yours for one that’s more user-friendly, intuitive, or streamlined.
Thus, your mobile experience design can no longer be an afterthought. Make sure to work with your remote team to incorporate all of the best practices discussed above into your mobile design.
About the Author: Pratik Dholakiya is the Founder of Growfusely, a content marketing agency specializing in content & data-driven SEO. He regularly speaks at various conferences about SEO, Content Marketing, Entrepreneurship, and Digital PR. Get in touch with him on Twitter.
Title image from Gummy pack in Ouch illustration library
Learn how to work on user experience for multilingual websites and design for mobile ecommerce, check how to design user-friendly product pages and billing forms for ecommerce websites, and read how user experience influences the level of trust in the website.
Discover top Figma plugins to streamline your workflow, enhance visuals, and add creative flair to…
Learn how to manage visuals in blog posts to optimize them for SEO in this…
Unraveling Figma’s pricing structure: tips to avoid hefty bills and save money. (more…)
Don't switch tabs to browse icons, illustrations, and photos for your websites. Get them inside…
Transform your Notion space with custom covers! Dive in for easy steps, pro tips, and…
Each design has its own scale. It applies to elements size and like thickness. Now,…
This website uses cookies.