The ease with which we can shop today is staggering. Almost instantaneous purchasing has become the norm, and aren’t we grateful for it! 

From a retailer’s perspective, it’s all about making things as easy as possible for customers to make their purchase. This covers a variety of touchpoints, but a perennial one is the website through which they are purchasing.

We don’t need to talk about the importance of a good website for a retailer today. But we do need to explore some of the subtleties and elements that can make a massive difference to the success of your online store.

One area specifically to consider is how your website is accessed. Shopping via personal handheld devices is the norm today, done via smartphones, tablets and plenty more forms of technology to boot.

Users shop, browse and behave differently when shopping via a desktop and a mobile device. One major difference is the size of screens used on mobile sites, while accessibility elements like text size and brightness are factors that make contrast ratios all the more important to understand and implement effectively. This enables an inclusive design to be created.

This shift to mobile is something that cannot be ignored from a design perspective. If it is, the user experience (UX) that you deliver will suffer substantially. This is where effective design for mobile comes into its own.

Williams Commerce has worked with a wide variety of ecommerce retailers. We have tailored their respective mobile offerings across devices to meet the demands of this potentially challenging medium.

Our latest blog picks out 9 things we believe are crucial to delivering a top-level mobile user experience and that can help enable higher rates of mobile purchasing.

1 – Start designing with mobile in mind

When designing a new website or redesigning an existing one, we advocate starting on mobile and then look at progressive enhancement onto larger device sizes, working outwards. The chances are that a significant proportion of your user base will use mobile devices anyway, but fitting your design ideas and style within the restrictions that mobile brings allows you to effectively expand your design ideas into the desktop and laptop space. It’s easier to do this than the reverse, where you’re stripping elements back and potentially limiting the UX as a consequence.

 

A website on a laptop and mobile background with subtly different designs
A dashboard with data present on a laptop

2 – Use data

As with any design decision, we feel that using data is the best way to inform your choice. A data-led approach allows you to cater for the specific habits and desires of your site’s visitors. Tools like Google Analytics and Hotjar can provide in-depth insight into the way people are using your site. This gives you a feel for the best way to cater for these through your site’s overall design and specific touchpoints.

 


3 – Let responsive design flourish

Because of this need to cater for a variety of devices and devices sizes, responsive design approach is crucial to successful sites today. There are a number of ways sites can be made responsive in order to allow for a seamless and positive user experience regardless of the specific device a user is using. These include designing to a grid to make sure all components expand and collapse as you’d wish, and considering screen orientation and how things will look when displayed landscape or portrait. Other considerations should include adjusting the user interface to fit various screen sizes, and making sure icons and images cater to high resolution outputs. These should however be vector-based where possible, in order to keep the file size down and thereby negatively impact page speed.

 

An ecommerce website visible on both a desktop and a mobile screen.
a mobile and laptop with a well-designed ecommerce website evident upon them.

4 – Keep it speedy

Site speed is a vital part of the user experience, and has an impact on your SEO value as well. Design can play a crucial role in this, as quicker page load speeds are the best way to tick this box. This can be achieved from a design perspective with suitable imagery that doesn’t take an age to appear on the user’s screen. Google has also recently rolled out a fastbadge sign for pages that load quickly – something to potentially aim for.

 

5 – Tailoring Touchpoints

This is all about knowing where on your mobile site people are touching, and tailoring this knowledge into your design to enhance the UX. For example, a retailer could want to have bigger fonts and clearer buttons in order to enhance the accessibility of their site and cater to a larger demographicThe general tap real estate needed is between 40x40px and 58x58px, but this does vary depending on the source and the user. So be sure to make things clickable for your users with enough space, no one likes tiny buttons or to click on something else by mistake. On desktops and laptops, you can implement certain features that happen when you hover over or rollover elements of your page. But on mobile, these are no good as the experience needs to just be simpler and easier. You want buttons and features to be clickable to enable that streamlined, easy user experience on mobile.

 

A person using a mobile phone and identifying touchpoints
a person holding a mobile phone with a graphic indicating the most used thumb zones.

6 – Know the Thumb Zone

This is particularly important when shopping on mobiles, as your thumb tends to do all the work. But unless you have some kind of ginormous thumb, it can only reach a certain distance up your mobile device. That means that placing important buttons and functions within reach of your thumb is important to the overall UX. It might not seem a big deal to have to use another finger to reach certain parts of the screen, but these small things soon add up and create an increasingly negative UX.

 


7 – Get those hierarchies right

The visual hierarchy and content hierarchy of a website are truly important tenets that are key to delivering an impressive UX. On desktops and laptops, this informs what you place above or below ‘the fold’, but on mobile devices this is less of a factor as users are used to scrolling. This doesn’t mean you can afford to overlook these hierarchies though, as with space at a premium on mobile devices, they’re arguably even more important to get right. With regards to content, it’s all about making sure content is being surfaced in the correct order, with the most important content being given the greatest visibility. Using scaled typography and weighted fonts can help ensure headers and body text complement one another, while making sure the images you use and the ratio of images to background is suitable enhances the visual appeal and accessibility of your site.

 

A webpage with a series of clothing items upon it with a hierarchy in place
A ecommerce website on a mobile phone with icons clearly present and visible

8 – Make your key icons clear

All online retailers should have a set of important key icons that users can quickly and easily return to during their visit. These may include their basket, their account page or their wish list of desired items. On mobile, these should be readily available and sticky headers or sticky footers provide a great area of the page in which to do this. The icons representing these options should also be clear and easy to understand, while using text as part of these can be advantageous from an accessibility standpoint.

 


9 – Get your functionality sorted

There are a number of site elements that are relatively navigable on a desktop or laptop, but far less so on mobile. Examples include forms that need to be filled out. These really don’t convert to mobile well, much like dropdown menus which fail to make the transition easily. Equally, banner carousels and product carousels don’t tend to roll smoothly over to mobile. Designing your mobile site to come up with happy alternatives will take your UX to higher levels.

 

A woman using a mobile phone to scan in to a location
A person shopping via a mobile phone with laptop in background


10 – Keep it simple 

There can be a lot going on with a website. But on mobile, less is more. Keeping your design simple, with effective use of content and white space, just makes for a cleaner, smoother experience and removes the chances of any unwanted usage complications.

 

 


Make things mobile-first, make things happen

The importance of getting the design and UX side of your website right cannot be underestimated. The shift to mobile has moved the goalposts, but too many brands don’t adapt their online presence to accommodate for that shift. Don’t make the same mistake!

At Williams Commerce, we have worked with dozens of clients to help take their mobile design capabilities and standards to new levels, with the result of higher mobile sales and most importantly, more revenue.

To join these ranks and get more out of mobile, get in touch with the Williams Commerce team today.