Everything you need to know about user guidance in online shops

#1 Responsive Design

In 2021, 60 percent of internet users in Germany were already using their smartphones to shop online.³ Laptops, desktop PCs, and tablet PCs are becoming less and less important in this context. That's why it's essential that your online shop is optimized for mobile devices and offers the same intuitive user experience as on a larger screen.

This not only ensures a pleasant user experience, but also improves your Google ranking. Since March 2021, Google has been crawling all websites with its smartphone bot and evaluating them according to the "Mobile First Index."⁴ This means that only the mobile versions of the pages are taken into account for the ranking.

But responsive design means even more than that. Due to the special feel of mobile devices, the mobile UI should also be designed according to the "thumb first" principle. Many online shops and websites are starting to place important elements so that they are easy to reach with the thumb. For example, the search buttons or chat button can be arranged so that the user of the device can reach them easily.

By placing the icons in the lower area, they are easy to reach with your thumb. (Source: Screenshot from epoq.de)

#2 Meaningful page structure and navigation

The basic structure of your shop is important in helping visitors quickly find their way around your site. It should contain all the necessary elements while still being coherent and clearly structured. If you would like to learn more about how to build a meaningful navigation structure and how to integrate personalization, please take a look at our article Well-designed navigation structure for better orientation in online shops.

Shop customers are used to websites having a hierarchical structure. The navigation should have a maximum of nine items. However, it is better to have fewer than seven so as not to overload the page unnecessarily. Shop visitors should be able to reach the desired subpage in a maximum of two or three clicks using this navigation.

In most cases, a tree structure is recommended for online shops: the content and products are grouped into logical units and linked to each other according to theme. Breadcrumbs at the top left of the page let shop visitors know where they are at all times. The individual elements are linked so that they can return to the relevant top-level category. In the NKD online shop, for example, it looks like this:

Home / Living & More / Household goods / Kitchen gadgets

Linked breadcrumbs let customers in the NKD online shop know where they are at any time and allow them to return to the top category with a single click.
(Source: Screenshot from nkd.com)

#3 Emotional appeal through first-class photos

Whether on the Home, in the flyout menu, or on the product detail pages, High-quality product photos appeal to shop visitors on an emotional level. and provide them with guidance. On the Home page of the Villeroy & Boch online shop users see, for example, a seasonal product made of porcelain that has been lovingly staged. This immediately shows customers what kind of products are sold in this online shop.

High-quality product photos on the homepage of the Villeroy & Boch online shop appeal to customers on an emotional level
(Source: Screenshot from villeroy-boch.de/shop/)

#4 Optimal placement of important links

Links are also important elements of intuitive user guidance. They can appear in the shop in the form of CTAs, text links, image content, or icons. Users should be clear about what they can expect from the interactive elements. For example, if you place a plus sign (+) under a section with product details, clicking on it should reveal further information about the product.

In addition , users have learned where certain elements are located in an online shop. The shopping cart usually appears at the top right, as do buttons for logging in or registering. Shop visitors expect the language selection to be located at the top center or on the right.

By following these classic shop layouts, you make it easier for your potential buyers to navigate your site. However, check the layout regularly, as expectations can change over time.

#5 Clear product detail pages

Once shop visitors have found a product that interests them, they want to learn more about it on the detail pages. Here, Classic user interface designs have also proven themselves: This is how potential buyers find the information in the familiar locations. So make sure your shop is always clearly structured and stick to what visitors know and expect when it comes to certain elements. For example Product images, CTAs, product details, and recommendations on product detail pages always arranged in a similar way. With additional Calls to action such as "Add to cart" or "Order now" you also make it easier for your shop visitors to complete the purchase process.

The intuitive layout of the elements makes visitors feel comfortable and helps them quickly find their way around your shop. (Source: Screenshot from görtz.de)

#6 Faceted navigation

You can improve the user experience on your website with another building block: the Faceted NavigationThis element allows your shop visitors to narrow down the wide range of your products according to individual criteria. In contrast to a simple filter, this selection function allows users to combine multiple filters, e.g., size 39 sandals for a festive occasion that cost less than €50 and are available for immediate delivery. This allows you to Reduce product selection from hundreds or thousands of shoe models to just a fewThis makes the selection process much easier for potential buyers.

In the Gartenhaus online shop, customers can narrow down the product selection using faceted navigation to find the desired product features
(Source: Screenshot from gartenhaus-gmbh.de)

#7 Intelligent product search

Shop visitors are impatient creatures. That's why they want to find the product they want as quickly as possible. Otherwise, they will abandon their visit and you will lose a potential sale. For optimal user guidance, you should not only place the product search in your online shop in a central and clearly visible location, but also use an ecommerce search engine function.

Users are accustomed to finding the search field in the header of the online store. It should be visible on all product-related pages. This is the best way to attract visitors.

Autosuggest

With an intelligent product search, shop visitors can quickly find the product they want, even if they don't know the exact name. The autosuggest function helps here by suggesting suitable products and words from different categories. These are displayed in a window below the search bar and can be easily selected.

In the mobilezone online shop, customers receive relevant search suggestions as soon as they start typing in the search field, including products and categories.
(Source: Screenshot from mobilezone.ch)

Fault-tolerant search

In addition, an error-tolerant search helps shop visitors: the search algorithm also accepts terms with typos if the tolerance is set high enough. Users receive relevant results even if they have entered "handbag" instead of "handbag," for example.

Stay up to date on personalization: Sign up for the epoq newsletter. Register now!

Semantic search

In semantic search, artificial intelligence supports users by recognizing their natural language. It considers the context of a search query and can thus show shop visitors relevant results. For example, when the user enters "men's winter jacket," the algorithm suggests all men's winter jackets available in the online shop.

Thanks to semantic search, customers receive relevant results for their search query "
" (Source: Screenshot from peek-und-cloppenburg.de) in the Peek&Cloppenburg* Hamburg online shop.