December 6, 2019 - System
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.
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.
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 is the way your visitors move through all top-level destinations of hierarchy. Some examples:
For every example, we can apply the following best practices:
An example of navigation drawer, side sheets, tabs and accordion - by this order:
Forward navigation is the way your visitors move through screens to perform a task. There are three main tasks we can identify:
Implementing forward navigation can be done in numerous ways. For an e-commerce website, we typically use the following methods:
An example of cards, CTA buttons and search bar - by this order:
Reverse navigation is when your visitor is moving backwards (chronologically) or upwards (hierarchically) through your e-commerce website.
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!
Martijn Brackman
UX Architect
Freek Heyman
Motion Designer