User Experience Guide
Download the PDF Version
A mobile device has limited screen real estate, so the most relevant information must be shown first. Considering 40% of mobile consumers will leave a page if it takes more than three seconds to load, businesses must ensure the mobile user experience (UX) of their website delivers.
Studies show that mobile consumers are more likely to be impatient. They are looking for something specific and want to find a product in the least amount of clicks as possible. Additionally, 59% of smartphone users feel more favourable to mobile websites that allow them to make purchases quickly. So, designing your mobile search and navigation with UX in mind is essential.
No matter if your company benefits from having a native app or not, it’s now a necessity to adapt your website for mobile. In September 2020, Google launched mobile-first indexing as the default for the popular search engine. This means Google will use the mobile version of your website to rank pages. To benefit from this, businesses should focus on developing ‘responsive web design’.
Top tip: An app should offer something your website can’t. If this isn’t the case, a mobile-friendly website is the best choice.
Responsive web design allows pages to adapt to any user device automatically, while the search engine can simultaneously crawl and index all your content. This provides the perfect combination of user experience and functionality, so there’s no need to design separate sites for every device. Additionally, responsive websites can be deployed in a couple of days, saving time, money, and maintenance costs that come with creating an app.
Here are some worthwhile considerations to remember when creating your mobile website:
There is no mouse pointer on mobile, and clumsy fingers are more likely. There must be a certain distance between links and buttons so mobile users don’t click the wrong link by accident.
Top tip: Spacing between clickable elements need to be a minimum of 2x2mm. The minimum hit area is approximately 7x7mm.
Mobile websites have less context. It’s key to have each label name and header written in clear and unambiguous terms so the user can easily understand them.
Top tip: To make your mobile website easier to understand, combine text and icons.
There is no hover state interface on mobile. This means that the interface must make it clear what is, and what isn’t, clickable. Or, the user can learn via trial-and-error – a sometimes acceptable trade-off that is frequently used in games or productivity apps.
Site search plays a vital role in m-commerce. Navigating through thousands of products on mobile isn’t as easy as it is on desktop – and there’s only so much you can fit on a five-inch screen. This is why mobile users choose to use the search bar, so the site search experience you provide must be smart enough to deliver the right results. Additionally, your site search must account for taxonomy that is used or spelling mistakes that often result from error-prone thumbs typing on small keyboards.
Ensure your search box stands out graphically and is visible. A full-length search-bar is preferable, with an open text field followed by a search button.
Show the search bar on every page, except for the checkout, so the user doesn’t abandon their cart.
‘Pin’ the search box to the header, so that users can easily refine their search or make a new search after scrolling down the search results. Alternatively, include a “back to top” arrow.
Include helpful, prompting text in the search box. For example, ‘search for products or brands’. This text can disappear automatically when the user starts typing.
Make sure your navigational menus do not cover the search box.
Top tip: The magnifying glass icon is a universally recognised symbol, and so your site search should always include it.
If you don’t have enough space for a search box, use a magnifying glass icon as a last resort. This icon needs to visually stand out and be ready for input as soon as the user taps it. However, we advise against going icon-only, as a/b tests show that the number of searches increases by around 15% with an open search bar.
The value and impact of the user search experience are formed by the way that autocomplete suggestions can assist and guide users to better search queries.
Poor autocomplete suggestions can lead the user on a detour, destroy the experience, or force the user to abandon their search journey altogether. Good autocomplete is especially important on mobile, as it’s harder to type on a digital keyboard. Ideally, you want to keep the number of keystrokes to a minimum.
Keep the search box populated with the visitor’s search query. This allows the user to narrow their search without having to go back or recall what they previous searched.
Rather than highlighting what the user has already input, consider highlighting the differences in the search.
Use autocomplete to suggest searchable keywords for every key pressed by the user after two letters are typed. Limit the rows of suggestions to 4-8 on mobile, to minimise the user input.
Scopes allow the user to narrow their search options while searching. Think of scopes as the aisles of a store.
Consider indicating previous search history through a distinct style to help users quickly access relevant information. If the user has never searched on your website before, then include a “Top Searches” placeholder.
Top tip: Use manual search scope selectors for large and varied catalogues only. Always set default scope to “all” and make it visually secondary to the search field. Additionally, it is preferable to use a drop-down menu.
When adapting your website for mobile devices, it is tempting to overcome the limited screen real estate by using a ‘hamburger’ menu for your main navigation. However, even though site search plays a prominent role on mobile, category navigation is vital for signalling the breadth of your product range, inspiring customers to browse new products, and guiding users towards the right terminology to search for.
There is no one-size-fits-all approach for structuring your categories on mobile. Whatever design choice suits your eCommerce store best, make sure to give your users visual clues on how to navigate to the products they are looking for.
One of the best ways to give visitors an idea what your store is about is visually featuring at least 30-40% of your main product categories on the homepage (i.e. the first level of product categories).
Because it’s easier to get lost in navigation on a mobile website, limit the levels of navigation to a maximum of three.
Visually distinguish main from sub-navigation, and make sure your users can locate where they are in your navigation structure. This is vital for users that have not navigated to a certain page themselves, and have instead landed on it through external links or advertising.
Use tabbed navigation if your site structure allows it. Users are more likely to interact with what’s already in front of them.
Categories should be clear with no overlap. Do not confuse filterable product attributes or product ‘states’ with categories. For example, Best Sellers, Sales, Gifts, Just Arrived, or Brands. Categories are mutually exclusive, while filters are not.
Top tip: As a rule of thumb, if there are less than 30 items in the category, use it as a filter instead.
Use thematic navigation with pre-filtered lists, such as ‘New Arrivals’ or ‘Women’s Fall Jackets’. While these might look like categories, don’t make these attributes categories in your data structure. Doing so will severely deteriorate your search and recommendation engines.
Top tip: Thematic browsing is often neglected on mobile because of the limited screen real estate. However, it can look like guides, finders, or content linking to popular products. If you chose to make them look like categories, make sure to visually separate them to make scanning through the navigation easier.
Allowing ‘search within’ behaviour provides users with more relevant results within the context of their current search. For example, if a user has searched for ‘camera’, they can then search for ‘7MM’ and your search engine understands the context. Rather than searching for ‘7MM’ site-wide, the user gets results that are relevant to ‘camera’.
How to cater to ‘search within’ behaviour:
Faceted search provides a service by removing your shopper’s keyword responsibilities. For those users who aren’t sure what they want, it outlines some of the attributes they might want to consider and offers suggestions on their search. While for those who do, it narrows-down results by what’s important, without limiting user choice to exactly one item.
Filters use certain product metadata as visible criteria visitors can use to refine their search queries. Faceted filters take it one step further and allow users to narrow results by several different dimensions simultaneously.
Display the filtering option on the product listings page in a way that stands out to the customer.
Top tip: Truncate lists of filtering values after the tenth attribute, so that the customer does not lose their overview of the filtering options and get lost in endless scrolling.
Where appropriate, provide a combination of sorting and filtering options. There’s no need to get fancy, display commonly used product attributes first and use differentiating product attributes as facets, such as:
Dynamic facets change according to the context and adapt filters for each query in real-time, as the user interacts with their search results. Irrelevant filters are removed automatically, and new filters appear when they become relevant to user actions.
Top tip: If users are rarely clicking on a facet, consider replacing it with a more useful option, or removing it altogether. Regularly refining your faceted search based on user data is best practice.
Mobile has limited “screen real estate”, which means fewer search results can be shown at once, and search accuracy becomes much more important than on desktop. Additionally, you also need to provide the customer with relevant information in the product listings to make it easy to compare results.
Designing search result list items is a balancing act of including the necessary product attributes that the vast majority of users will need, without overloading the list with so much information that users get discouraged from exploring.
Use personalisation to make sure the most relevant product appears first for search and category navigation.
Depending on if the types of products you are selling are more visually or spec driven, design the product listings as grid or list. If your site’s product catalogue is a mix of both visually and spec-driven products, you will need to design two different search result layouts.
When naming your products, users should get sufficient information to distinguish it from alternatives just by reading the title. This depends on the item you are selling, whether it is a well-known brand or your audience’s knowledge about the product.
An item’s price is an essential datum that should always be included in the product listing page. Other fundamental attributes include the title, product type and variants.
Depending on the product category there are key attributes besides manufacturer and model customers look at when deciding whether or not to click on a product. These could be added to the product title as well. For technical equipment, it could be the dimensions; for clothes, material or cut; and for toys and games, suitable age.
Top tip: If you are the brand, and have a webshop for your products, you don’t have to start every title stating your brand. Onsite, this information is obvious anyway and when having the titles in PPC campaigns, the brand will be visible in the ad anyway.
Loading speed is crucial on mobile. If a site takes more than three seconds to load, the potential buyer is likely to abandon it. Also, Google punishes sites that take too long to load and might not list them in their search results.
Top tip: Lazy loading is a common technique to use so that some results will be displayed while the rest are being loaded. This way, pages load quickly because very few products are loaded initially. For lazy-load of products, it’s good to show the text of the products first, so impatient users can scan for target products without waiting for all images to load.
Shoppers expect the same level of relevance and personalisation online as they experience in-store. Powered by Machine Learning and built exclusively for eCommerce, Loop54 delivers that exceptional online shopping experience for both mobile and desktop users.
.png?width=109&height=45&name=loop54-logo_a_FF_Company%20(1).png){kind=logo}
