Responsive frameworks revisited
Mobile first
On responsive websites, elements of a page reshuffle and resize as the viewport expands or contracts. It’s a great way to provide equal access to information regardless of the device. But does this cut it? Well, the thing is: complex interactions can be hard to fit into components that adapt to different screen sizes. Let alone preserve their clarity and usability.
Since e-commerce websites tend to hold a lot of functionality, they require extra attention during the design process. Especially on mobile. In a 2018 eMarketer Report, they state that by 2021 mobile commerce will account for 72,9% of the e-commerce market. So, improving the shopping experience of customers with ever-increasing expectations seems to be the only way to set yourself apart.
Implementing known navigation patterns
Mobile users are accustomed to certain navigation patterns that allow them to move quickly through an app or an e-commerce website. The need to manipulate smaller screens with your fingers has made the current navigation patterns emerge and evolve over time. It means that overcoming the physical limitations of mobile devices has turned these into best practices. Developing a great shopping experience means tapping into these best practices to ensure a safe and familiar feel while navigating.
But don’t (only) take our word for it: Google also has done quite some research on the topic. Let’s dive into the different types of existing navigation and see how we can apply them to mobile platforms.
Lateral navigation
Lateral navigation is the way your visitors move through all top-level destinations of hierarchy. Some examples:
- Functionalities: Products, search, basket, wishlist, profile
- Products: Woman, man, kids, new, promotions
- Product filters: Size, brand, price, color, length
- Product information: Description, specifications, delivery, reviews
For every example, we can apply the following best practices:
- Top bar navigation: (navigation, branding and actions)
- Bottom bar navigation: This kind of navigation gives your mobile commerce site a distinct app feeling, but it will be harder to implement well in all browsers across different mobile devices and operating systems.
- Navigation drawer
- Side sheets: A derivative of the navigation drawer. Side sheets can contain supplementary content like filters for your product overview
- Tabs: Product information clustering for shorter pages and easier access
- Accordion: an alternative to tabs. Tabs - as shown in the previous example - are not always the best solution for handling lots of items. That is where the accordion shines.
An example of navigation drawer, side sheets, tabs and accordion - by this order:
Building in and outside the box
Knowing how navigation works on mobile and how visitors are accustomed to navigating through other mobile platforms is of paramount importance. It will become your base to make informed decisions on how you should present and structure your product categories, organize your checkout process, etc. As a result, even if it is their first visit, your visitors will be directly familiar with your mobile commerce website.
Don’t underestimate the role creativity plays in this seemingly functional process! You are perfectly able to be creative within the boundaries of these navigation patterns. A mobile commerce experience is far more than navigation alone. It's the way interactions, navigation patterns and product visuals all blend together into one intuitive and immersive platform.
Need help in creating the best mobile shopping experience possible? Get in touch with our UX Studio!
Types of navigation
Within your mobile commerce website, a visitor will typically move in one of three navigational directions. Lateral navigation consists in moving between screens that are at the same level of hierarchy. Forward navigation means moving between screens at consecutive levels of hierarchy. Reverse navigation implies moving back through screens or moving up in the hierarchy.
By identifying the use case for each type of navigation, it is easier to know the best way to structure products, information and functionalities. For each type, we have picked out a few examples to illustrate the topic.
Lateral navigation
Lateral navigation is the way your visitors move through all top-level destinations of hierarchy.
Some examples:
Functionalities: Products, search, basket, wishlist, profile
Products: Woman, man, kids, new, promotions
Product filters: Size, brand, price, color, length
Product information: Description, specifications, delivery, reviews
For every example, we can apply the following best practices:
Top bar navigation: (navigation, branding and actions)
Bottom bar navigation: This kind of navigation gives your mobile commerce site a distinct app feeling, but it will be harder to implement well in all browsers across different mobile devices and operating systems.
Navigation drawer
Side sheets: A derivative of the navigation drawer. Side sheets can contain supplementary content like filters for your product overview
Tabs: Product information clustering for shorter pages and easier access
Accordion: an alternative to tabs. Tabs - as shown in the previous example - are not always the best solution for handling lots of items. That is where the accordion shines.
Forward navigation
Forward navigation is the way your visitors move through screens to perform a task. There are three main tasks we can identify:
Move downward: Your visitor wants to drill down product categories to find the right product and read up about its specs. This way, they can decide whether or not they want to put the product in their basket.
Sequential flow: Once they've put a product in their basket, you want to guide the visitor forward through the checkout process in a sequence of screens.
Directly: Search on the other hand is the best way to directly navigate from one screen to any other page in your e-commerce website. It's a powerful way of navigating, as it skips the whole process of going through product categories, subcategories and filters. It is especially useful when your visitor already knows what they're looking for.
Implementing forward navigation can be done in numerous ways. For an e-commerce website, we typically use the following methods:
Lists: They are used to show available product categories and subcategories within a navigation drawer.
Cards: They can also be used as an alternative way to navigate through product categories in the main content, but also serve as a way to show products. Cards can be implemented in many different ways. As cards can take up quite some space, the way they are implemented depends on the screen real estate they are allowed to occupy.
Call-to-action buttons: In our e-commerce website, these buttons will typically be used for functions such as "add to basket", "add to favorites" and of course as a way of guiding users through the check-out process.
Search bar: To navigate quickly to a certain product and to find answers to urgent questions such as a shipping policy. Implementing search on mobile is not an easy task and needs to be quite intuitive, as typing on mobile is not the greatest experience.
Links: Not to forget regular hyperlinks within the product content, FAQ pages, ...
Reverse navigation
Reverse navigation is when your visitor is moving backwards (chronologically) or upwards (hierarchically) through your e-commerce website.
Reverse chronologically: This is typically done by using the browser’s back button and is a built-in feature, so you will not need to implement it within your website.
Reverse hierarchically: This navigation can be achieved by using a breadcrumb. Bear in mind that breadcrumbs can become quite long. You will need to take a different approach for your mobile commerce. One approach is to only show the previous level in the hierarchy and make this the starting point for going back a level.