Blog

1. Add icons to make user interactions more visual

When scanning a webpage, users are typically able to identify an icon quicker than reading text. Therefore, icons are an immediate indicator of their associated action, whether it be account navigation, adding to basket or proceeding to the checkout. Take those as examples, for instance. You can have a user icon to represent the link to sign in, a basket icon for the add-to-basket buttons, and some sort of directional arrow for the button used to proceed to checkout (which represents movement throughout the ordering process).

2. Replace the default menu with a mega-menu

The default menu, aside from not looking great, can be particularly difficult to navigate with its classic, operating-system-like UX. This means when navigating through the menu levels, you have to be very careful to not mouse outside, causing the menu to close. Replacing this with a more modern and full-width menu not only improves the look of the site to look much more modern, but it will also greatly improve the user experience, allowing users to more easily navigate through the category structure.

3. Auto open mini-cart on add-to-basket

By default, it is not always clear when an add to basket action has been successful, particularly when adding multiple quantities of one item in succession. Automatically opening the mini-cart will more clearly tell the user that the add-to-basket has completed successfully. It will also present to them the option of proceeding to checkout, reducing the number of manual steps necessary and guiding the user through the process of placing their order.

4. Consistency of form field validation

Magento 2 consists of two different paradigms with regards to page content: PHP driven, server-rendered templates; and Knockout JS html templates with associated M-V-VM JS files. What this means for the user experience in Magento 2 currently is that there is an inconsistency between how form fields act in these two different scenarios. This can be seen by comparing the registration form to the forms present in the checkout. When going through the checkout we can see that validation occurs on-the-fly, when blurring between fields. However, when using the registration form, the fields act differently, only validating on form submission. Ideally, all forms would act the same, to maintain consistency and uphold customer expectations when navigating from one area of the site to another.

5. Replace locale store switcher with flags

The default store switcher uses text to represent changes between locales, such as English and French. To make it easier for international users to find their locale, you can change this to use different country flags to represent the different locales. This would be particularly useful for countries with non-latin based languages such as Japanese and Mandarin.