This is a follow-up blog from the latest Webinar done in partnership with SAP, The Evolving Customer and their need for Mobile First Commerce. You can watch the webinar as an On-demand recording here to see Lucy present the information along with a demo of SAP’s latest platform, SAP Upscale, that puts Mobile First Commerce at the heart of every interaction and offers an experience, unlike others.

We’ll take a look at why you should be focusing your website designs on a mobile-first approach. What the benefits are of doing this and some practical steps you can implement on your website today.

 

Why focus on mobile

To put it simply most people are accessing your website through their mobile phone. Smartphones were first introduced to the public back in 2007. Since the first iPhone hit the UK shelves there has been a steady increase in people accessing the internet on these devices. The graph below shows this trend in the UK. In October 2019 mobile usage overtook desktop for the first time and despite Covid sending everyone indoors mobile usage is still up on the year before. This trend is even more obvious globally where mobile overtook desktop back in 2016.

The reason for their popularity is that they are so versatile. We’re now able to have a computer with us all the time and can play games, browse the internet and go shopping all while sitting on the bus. It’s estimated that 95% of UK households have a smartphone. Being able to use a smartphone to take high-quality photos and share them instantly with your friends on social media has also made them wildly popular. Instead of carrying around a camera, all you need is your mobile. Smartphones are cheaper and more portable than a desktop so it’s no surprise that fewer people have been accessing the internet through a traditional desktop computer.

 

Other benefits

Since mobile takes up the majority of the market share Google ranks for mobile-friendliness. Since 2017 Google has been using mobile-first indexing this means that Google will look at the mobile version of your website for indexing and ranking. If you want your website to rank highly on Google, and let’s face it who wouldn’t, you need to make sure the mobile version of your site is designed well and meeting Google’s criteria.

Adobe discovered that companies with mobile-optimized sites triple their chances of increasing the mobile conversion rate to 5% or above. It’s a no brainer good mobile design increases conversion.

 

Success story

Sincerely Nude was founded by London based Michelle Asare in 2018. She noticed that she could never find any nude clothing close to her skin tone. This realisation became a frustration. She has always loved fashion and wanted to be part of the change she wanted to see in the world. Sincerely Nude aims to empower women to feel beautiful and sexy in their skin tone no matter what shade or size.

In an interview with Below the fold, Asare explains that having used Instagram as a personal account she began to study how businesses of all sizes used the platform as a marketing tool. From here she launched the clothing brand and eCommerce site and it picked up in just a few days after they launched. Through great product development and a killer Instagram strategy they now have a following of 16,700. Michelle estimates that 70% of her customers are driven by Instagram traffic. Since Instagram is almost exclusively used on the mobile app all of those customers are viewing her website on a mobile. So, it was important for the brand to have a seamless mobile experience. By harnessing the power of social media Michelle was able to drive traffic and sales through her website. A great success story for a business in its first 2 years of operating.

 

Designing for mobile

Now we’ve looked at why it’s so important to have a great mobile website let’s get to the nitty-gritty of how you can improve your site for mobile. Despite the upward trend for mobile people are slow to change and are still designing for desktop.

 

The old way – Graceful Degradation

Responsive web design has become the norm. Creating designs that can be resized to suit any screen size. This ideology is known as graceful degradation it is where all the details and complexities are added to a website for the desktop. Once you have the complex version of the design the features are stripped away to suit a mobile screen. The problem with this is that often the most important features and content get muddled together. This can result in the most important information and priorities of the website for the user on a mobile device to be lost.

 

The new way – Progressive enhancement

The future is mobile-first. This is because that’s where most people will be accessing your site from so they must get the best possible experience when they do. This is why you should move to the progressive enhancement method where you start with mobile and scale-up. By starting the design process with mobile then upscaling to larger devices it makes sure that the key information is presented to the user.

 

How we interact with mobiles

We interact with mobile devices differently to desktops instead of a mouse and cursor we use our fingers and thumbs. These are larger surface areas so we must increase the size of clickable elements and increased the space between them. As a rule, 30px or 7mm is the minimum height you should be looking at for a button for example. Any bigger than this then you may have to compromise other areas of the design and any increase in size after this has little impact on missed taps. The graph below shows the number of missed taps compared to the target size.

(ux.stackexchange.com)

These touchpoints should be within the parts of the screen that is most accessible known as the ‘Thumb zone’. Particularly if they require additional interactions like swiping. This diagram shows the easiest areas for people to reach. Keep this in mind when thinking of placement of CTA and add to cart buttons.

 

Image Credit (smashingmagazine.com)

 

Mobile-only features

Mobile phones have a great advantage over the desktop because they have a built-in camera. This feature opens up so many opportunities that can’t be recreated on a desktop. That means there’s the potential to have a mobile experience that’s even better than desktop.

Search by photo – With this feature users can take a photo on their mobile and upload it straight into a search which will return visually similar product images. The eliminates the need for typing and lets users snap a picture of items they like while they’re out and about.

Card scanning – This is used for capturing card details which is a big pain point for users and can be a big sticking point in the checkout flow. This is a way to alleviate this frustration, instead of having to manually type out 16 digits the camera on the phone can scan the details and enter them automatically.

Augmented Reality – Plenty of big brands are starting to make use of AR to show products in consumers in their real-life environment. For example, with Ikea place, you can see how a table would size in your own kitchen. This isn’t just for large companies either with solutions like Eclipse’s Ares AR solution it’s possible to implement it on your own site.

 

Practical solutions you can implement to improve your UX/UI

  • Keep only the most important information. This is probably the most important thing to consider when designing for mobile. Without the luxury of space, you must keep only the most important information that the user needs to complete the journeys on your site.
  • Don’t be afraid of a scroll. It may be tempting to hide away content in carousels and accordions to fit everything nicely into the small screen. In doing this you create more work for the user by increasing the number of actions they need to take to get the information they want, that’s if they find it at all. Instead, make use of vertical scroll people have become accustomed to scrolling to find the information that they want so having it open and accessible by only a scroll away will come naturally to users getting them to where they want to be as quickly as possible.
  • Think about where your site will be accessed. If people are on the bus on a train or out and they may have poor connectivity to the internet. People will still expect a fast-loading time. By focusing on designing/developing for 3G by default you make sure you’re still providing a great experience when connectivity is limited.
  • Make use of mobile devices native UI for example date pickers. These are familiar to people as they use them daily.
  • When there is a form field that requires an input with numbers use the numerical keyboard. This will prevent mistyping and allow people to fill out the form more quickly.
  • Integrate Apple/Google Pay in the checkout. These stop the users having to enter their card and shipping details making the checkout experience seamless and easy for users. They also have the added benefit of additional security and are easy to set up.

 

Final thought

Mobile phones aren’t going anywhere so businesses must adapt to the ever-changing market. I hope you found this article useful and that you have taken away some useful tips for designing for mobile. If you’d like more advice on optimising your mobile experience contact us, we’d be happy to help.