Have you ever bought anything online on-the-go with your phone instead of when you’re at home near your laptop or a desktop computer? I bet you did. And if you didn’t, you’re in the minority, as by the end of 2021, mobile e-commerce (or simply m-commerce) is expected to be responsible for 72.9% of global e-commerce sales. That’s 3.5 trillion USD.
If that alone doesn’t answer the question from the title, I’m slightly worried. But I’m not going to end the article just here. Let’s talk a bit more about mobile-first approach, what it actually consists of and how it can be utilized in your business.
What does mobile-first actually mean?
Essentially, it’s an approach to designing your platform for smartphones first (in contrary to what we were used to before — computers), to then scale it up to work on bigger screens. What this implies is that the designer has to focus on making a more complicated case work, in this scenario fitting all the required elements into a much tighter space than a wide-screen monitor, before they can proceed with factoring in desktops. By shifting your focus to mobile-first, you’ll be also compelled to create a solution that works flawlessly on devices with lower computing power than full-size computers, and therefore you won’t butcher your mobile user experience by cramming in all the possible features that otherwise would break low-spec devices. As we’ll discuss further, performance is extremely important for mobile users.Another reason to take the mobile-first approach seriously is that you wouldn’t like to be limiting your customers to a specific location for shopping on your platform — their homes or offices, the places with high probability of them finding themselves near desktop devices. It would be counterintuitive to not cherish the fact your customers can purchase from you from anywhere, anytime and in just a few taps on their screens. Hoping that I managed to convince you or at least get you to the point where you’re like: ‘Okay, I’mma listen to what this guy has to say’, let’s have a look at a few more reasons.
3 more reasons to consider mobile-first design
The mobile device usage keeps growing on a year-to-year basis, which shows in the statistics from 2019, when, for instance, 61% of Google’s search traffic was already generated by mobile users alone. Not only that, since the beginning of 2017, mobile devices been responsible for over 50% of total global internet traffic, with 54.8% in Q1 2021. Which swiftly leads us to the next reason.
Economically future-proof
It’s rather difficult to deny the fact we’re living in the mobile era and the data doesn’t seem to show any signs of this trend doing a U-turn. Which means investing into designing mobile-first will be especially beneficial in the long run. More so, starting with mobile and going from the ground up will provide you with a unified cross-platform user experience. In comparison, when using a desktop-first approach, very often the capabilities of mobile devices and smaller screens are not taken into account, thus when you finally sit down to design a mobile version of your solution — you end up removing some of the desktop features, delivering your end-user a crippled product. By focusing on mobile devices first, you save time and money for development of an equally functional platform.
Cross-platfrom accessibility
I wouldn’t surprise anyone if I said people don’t use a single type of device to access the internet. Which means cross-platformability is one of the key factors to designing a successful solution. According to GWI’s survey from 2019, 96% of participants age 16-64 claimed they use mobile devices to browse the World Wide Web. What’s also interesting, the drop in percentage of people claiming that they use laptops/PCs as their main source of access to the internet has dropped in half.
As you can see, in order to provide a competitive digital services, you need to be able to follow users’ attention, and currently it’s diverting from desktop computers to mobile devices.
Importance of customer experience
Have you ever been annoyed by a sluggish interaction with a mobile version of a website or an e-commerce platform? Maybe to the extent that you ditched that portal and switched to their competitors? Well, if you haven’t, according to PwC, at least one in three customers (32%) will have such a situation and walk away from a brand they love after just one bad experience. This percentage is even higher in Latin America — 49%.I don’t think it’s a wise business decision to willingly be ready to lose one third of your customers.
6 best practices for mobile-first approach
Now, assuming you decided to implement a mobile-first approach in your business, let’s talk how you can start this transformation.
More doesn’t mean better, it means cluttered
I love the approach to designing space rockets that Elon Musk presented in one of his interviews, which I think is easily applicable to any type of design, for that matter. To summarize the idea, you need to question every element of your product on whether it is actually needed and whether the solution can function if you remove it. Obviously, it’s more crucial for space rockets than to an e-commerce that sells handcrafted wallets, but you get the gist. To give a couple of examples for then more means cluttered, I’ll refer to Baymard Institute’s work.
Visual hierarchy is important
In design, visual hierarchy is simply the way to organize information on the screen according to its importance to the user and subsequently to the business. Let’s have a look at the Etsy’s mobile homepage. As you can see, they know exactly why people come to their website and try to minimize the number of steps it takes for the user to end up exactly where they wanted to. It is also optimized for those, who know what they are looking for and those who are not sure yet. The first group will simply tap-through to the needed category while the second — scroll looking for inspirations.
What’s also important, the menu doesn’t take too much space and there’s no bottom menu bar, which would only obscure and distract the users’ eye travel path. Overloading customers with stimuli isn’t the smartest idea, even if you think what you’re presenting on the screen is of an extreme importance to the business. It’s about them, not you, after all.
Loading speed is your biggest friend and enemy
In one of their researches, Google measured the probability of users exiting your website that grew exponentially with each second it took to load a page.
And if that’s not scary enough, the average loading speeds are waaay above the number you see on the image above.
‘The average page loading speed for a web page is 10.3 seconds on desktop and 27.3 seconds on mobile. On average, pages take 87.84% longer to load on mobile devices than on desktop.’— Backlinko’s page speed analysis
Learn about and build PWA
For those who are unaware of what PWA is, a quick crash course. PWA, or in other worlds a ‘Progressive Web Application’, is a website that is built with mobile usage in mind both from the perspective of RWD (responsive web design) and the fact it can serve as a mobile application that can be ‘installed’ on the end-user's phone with just a few taps. I’m currently compiling a list of well-known companies that adopted PWA as their go-to web technology and the data shows that it easily outperformed regular websites of those companies once PWA was finally implemented. Just to give a taste of what’s to come, here’s what Flipkart accomplished by switching to PWA:
- 3x increase in time spent on the site
- 40% higher re-engagement rate
- 70% higher conversion rate amongst users arriving via ‘Add to homescreen’ (PWA’s equivalent of installing the app)
- 3x lower data usage
I’ll post the list on our blog once it’s ready, so make sure you subscribed to our newsletter to not miss it.
Use rich snippets
What are rich snippets? It’s a Google search snippet with additional data. It’ll be easier to show it on specific examples.
And while they don’t have direct effect on your website being mobile-first, I thought it’s worth mentioning you can boost the performance of your platform thanks to the tools that increase your search tap-through rate by simply catching more of the user's attention (rich snippets take more space on the result page, especially on mobile, where they can cover up nearly an entire screen). If you’d like to implement such snippets on your website, I’ll redirect you to Google’s official documentation.
Consider one-handed use
And last but not least. When designing for mobile devices, you need to not forget that many people use it only with one hand. Making it important to not place often used interactive elements out of reach for a single-handed tap. According to a 2013’s study by Steven Hoober, 49% of people held their mobile phones with only one hand. Out of which, 67% used their right hand. Which leaves us with a somewhat limited field of reach.
If you design your ecommerce for mobile devices, putting elements that directly influence your customers’ ability to make purchases would be a business suicide and that’s why I won’t stop repeating that user experience in design is of a top importance. Designing a beautiful screen is relatively easy. Designing a beautiful screen that is easy to use — that’s the challenge that stands before many companies, especially within the e-commerce sector. To read more about designing for one-hand usage, I’ll point in the direction of amazing in-depth article by Maitrik Kataria in the Smashing Magazine.
Summary
As you can see, the subject of mobile-first goes way beyond the fact that we irreversibly entered the era of mobile devices. Very often businesses focus too much on the fact they want their platforms to look beautiful to the eye, giving much less attention to the usability of what is in front of them. An e-commerce that looks brilliantly on a screenshot sent to you by your designer can be a nightmare to navigate, if all the details of a dynamic use weren’t worked through. I hope this articles was nice of an introduction to mobile-first approach and will motivate you to adopt it in your business. If any help will be needed, you can contact me at ross@rst.software, and I’ll grab our UX/UI Lead for a free 30-minute consultation with you and your business partners or designers. In other cases, I’ll see you soon in the next piece!
