Whether or not a transaction takes place is often a subconscious decision that is influenced by the presentation of the products as well as the environment in which the product is presented.
This applies to purchase decisions in physical shops as well as online – if the atmosphere is appealing and comfortable for the customer, it is more likely that a purchase will be made. Stationary merchants create this sense of well-being with good lighting, attractive decoration of the shop floor and, of course, optimal positioning of the products. But how do you create that in an online shop?
In online retail in particular, user experience and usability are essential to creating an optimal shopping experience. A good UX design is crucial here. We’ll show you what is important when designing your online shop with examples from online shops based on Shopware 6.
Why is UX design important and how does it help your business?
The user experience (UX) describes the experience a user has while browsing through an online shop. This happens both on a functional and especially on an emotional level and contributes to a good customer journey. Through a relevant user experience, your customers build an emotional relationship with your products and your brand. This creates trust, which at the same time benefits your business and helps you to win users as customers. UX design puts the user at the centre of the design. The User Interface (UI), on the other hand, deals with how the user interacts with the software. It describes the user interface with which users can control the software. The aim is to make the use of the software, but also of the online shop, as simple and intuitive as possible. The UI design helps to convey the entire look of the brand, including things like font and colour.
A good user interface makes it quick and easy for your visitors to find their way around the shop. You can achieve an optimal customer journey through a harmonious interaction of user experience and user interface – the look and feel of your online shop. Find the perfect symbiosis of both these factors for your online business and express your brand values and corporate identity in a way that makes you stand out from your competitors.
Planning your UX design
Before implementing your UX design, it is important to plan exactly what message you want to convey in your online shop and how your own company, brand and values are presented. These aspects play a central role:
- Who is the target group and how can you best address them
- How can the user be actively and interactively involved in the journey
- What should the focus be
- How can you guide the user through the shop in a meaningful way
The customer journey can be created if the strategic direction is clear from the beginning. Once you have found the right shop system, your customers' user experience can begin.With Shopware 6, you have the optimal basis to easily create an attractive user experience with the help of the Shopping Experience feature. We will show you some best practices for UX design based on successful Shopware 6 shops.
Together with Marie Reckendrees, Product Owner CMS at Shopware, we would like to give you some tips for an appealing UX design. "If you want to create outstanding shopping experiences that enable customers to interact with the brand, you have to focus on the fusion of content and commerce. This is exactly the point where branding has to take place – the point where stories are told and the shop becomes about more than just selling products. With our powerful headless CMS, we want to help you do just that."
1. The power of images
Emotional shopping experiences help to convince your visitors of your brand. It is well known that images are indispensable in this. But not all pictures are the same.
Through the power of images, you can optimally present your products, tell your own story and make the product tangible for your visitors. Image positioning enables the viewer to remember their own experiences from the situation depicted and, in the best case, associate a positive emotion, scent, flavour, and feel with the images. In general, people tend to look at other people. Emotions can be conveyed even better through people and the viewer can more easily put themself in the place of the person depicted.
Here, you can see how hair care products from the product line "Orientalny ogród" – "Oriental Garden" in English – are presented. The category header image consists of three images. The combination of these three images allows users to imagine themselves in the scenario depicted. We all know how good it feels to have a relaxing shower or bath. The image of the product standing in the water surrounded by floating flowers and also the name of the product line lead the viewer to infer the smell of the product and identify the personal benefit. The interaction of the images sparks a positive feeling and the viewer wants to learn more about the product.
You should also consider the following factors when using images:
- Include a meaningful image directly on the start page – first impressions count
- Brightness of the images: present your products so that they are well lit and ideally in natural light
- To create uniformity in product images, present your products with a consistent style. For example, if you remove the background from a product image, the other products should be presented in the same way, as this makes it easier to distinguish them
- Take note of how people will view the images: the human eye always travels from left to right. This means the page should also be arranged accordingly. If a person depicted is pointing to the right, the picture should be placed on the right. It is important for your shop that the product takes centre stage
- Have the courage to use simple "mood images": they help to convey messages, feelings and smells
- Keep your target group in mind: in pictures with people, always depict people who correspond to your target group
- Backdrop design: showing the products actually being used helps to graphically illustrate how to use the product, and also shows the dimensions
2. Outstanding interplay of image and text
It is not only emotional and meaningful images that play an important role in the user experience, but also the text on and next to the photos. In terms of content, this should be a meaningful addition to what is presented. A harmonious interplay of visual language, text and type leads to a coherent overall image and makes the brand values tangible.
The perfect example of this can be seen in the ames shop:
There is no standard font used here. On the contrary, the font merges perfectly with the overall picture. Even more than this, it nestles into the shape of the products. At the same time, the text refers to the materials used. Ames combines traditional Colombian craftsmanship with modern and timeless design. Without knowing the brand, the customer can easily deduce the products and the values of the brand.
3. Create accentuation and highlights using colours
In the ames shop, the colour themes are also very clear. Colombian culture is colourful and diverse. This is also reflected in the colour scheme of the shop. The colours used are very strong and bold and provide a pleasing contrast with the products. Key colours are also used to create highlights. The pink used in this case serves as an eye-catcher and automatically draws the eye to the highlighted text. The balanced interplay of shapes, colours, typeface and text effectively communicates the brand's story. This creates an outstanding user experience, which sets ames apart from the crowd.
4. Keep it simple – try white space
An outstanding user experience is characterised by good guidance through the shop – like a thread running through a story. Colours, shapes and text help to achieve this. But it is important not to overload the visual interface, so as not to overwhelm your customers. In principle, less is more. A conscious use of white space helps to bring more structure into your shop. It helps to separate elements from each other and thus ensure a better overview in the shop to aid the eye. This way you can better distinguish your products and information from each other.
By removing the background from the coffee machine, the text and especially the white space between the product and the description, the focus is on the coffee machine and its functionality. This placement makes the product look very high-quality and classy. Through keywords and the call-to-action, the text invites you to find out more details about the product and experience the brand.
5. Using icons
In addition to a good structure, the use of icons to guide you through the shop can also optimise usability. In the Yours Truly online shop, it is easy to see that the icons help both to keep a better overview of the shop, and also to illustrate the values of the brand clearly and concisely. In addition to the large headline, the icons explain what the products are made of and what makes them special through a clever combination of image and text.
Through experience with packaging, brochures, websites and the like, the eye has already become accustomed to the use of icons and knows that they provide important information at a glance. Simple and meaningful icons also demonstrate quality and high value.
YOURS TRULY was implemented with the help of Shopware Enterprise Partner elio.
6. Interactive storytelling
Guide your users through your online shop in an interactive way and create a brand that they can experience. There is a lot happening in the Vintageria online shop, which was implemented together with our solution partner HCE, and users have plenty to discover. In addition to products, there are also special features in the shop such as the unicorn loading bar. Not only are the colours, images and shapes appealing, but the user automatically interacts with the page through the many animated actions and gets the feeling of shopping in a game from the 90s, which sums up the story perfectly.
There are endless possibilities to create an outstanding user experience and therefore unique shopping experiences. Above all, it is important that you convey the values of your brand in the best possible way using images, language, text, form and colours. Put people at the centre and show them how they benefit from your products and services in order to create a lasting impression on your customers.
These tips and best practices were written in collaboration with:
Product Owner CMS at shopware AG