A functional store, what does that mean? Design your store to meet the customer’s needs.

Klaudia Pawłowska
A functional store, what does that mean? Design your store to meet the customer’s needs.

Does a perfectly designed online store even exist? Certainly not. There will always be some element that could have been designed better. Often even the owners or designers of these stores are aware of issues that need improvement, however, they are limited by things such as budget, store software or hosting. In this article, I will try not to think about all limitations and present the elements of a store that are useful and designed to benefit users.

Safe and building trust

First of all, a useful store is a secure store, meaning one that is protected by at least an SSL certificate. A secure store is also one that contains all legally mandated information. It should include an “About Us” tab, which tells users who the seller is, what their values are and how to contact them.

Responsive

I can’t imagine a functional store that isn’t responsive – it’s a staple these days. Nowadays, designing a store starts with creating a mobile version, or at least it should. An online store cannot work properly only on computers and phones, but also on other devices, such as tablets, and maybe even smartwatches in the near future. It is worth remembering that the functionalities available on the desktop should also work similarly on other versions. Sometimes I come across a functionality that I know and like on the desktop version, but which are missing on my phone.

Inclusive

There is more and more talk about inclusivity in the context of web design. This is great news, because everyone should be able to freely use the Internet and experience its full potential at the same time. Faced with this, a useful store is one that can be enjoyed by all interested parties.

In order to be able to say that a website is inclusive, it is necessary to ensure that every element of it is designed in accordance with the art, preferably in accordance with the WCAG 2 requirements.

What exactly is WCAG2? Web Content Accessibility Guidelines is a set of recommendations on web content accessibility. The standard is a set of 12 guidelines that define the features of each piece of content on the web, for example, on online stores or mobile applications. The overriding principles state that it should be: perceivable, functional, understandable and robust.

Through the use of various attributes and meta tags, blind people can navigate freely through websites with the help of appropriate readers.

On the other hand, bearing in mind the visually impaired and those with other visual problems, such as problems in distinguishing colors, do not forget about the appropriate contrast of the font in relation to the background.

Avoid a situation where the label for filtering products by color is just a square filled with a color. It is also worth adding a label indicating the particular color.

Source: https://semilac.pl/en/uv-hybrids/uv-hybrid-colors. An example of missing labels for a color filter

It is also obvious that fonts should be the appropriate size. It is believed that those smaller than 14 px are difficult to read and should be avoided.

Also, do not forget that the users of our site may use other titles to identify themselves than just man or woman. Try to avoid gender-specific questions in your forms or provide an additional option in your responses.

Visually appealing

The website, of course, should look attractive. However, we are referring to minimalism, simplicity and neatness more than to over-the-top graphics. Often beautiful graphics and moving elements are interesting only at the first perception of the site, but when the user is supposed to find something on the site, these types of elements begin to interfere, annoy and often make the store load longer and make it harder to find the product on the site.

Functional menu

We should provide an aesthetically pleasing and clear menu for our online store, preferably in the form of a megamenu. It is important that the category division is transparent, and the user knows which one to choose without any hesitation. To ensure this, we should avoid creating similar categories, which confuse the user who is unable to differentiate between them. Also, let’s not overly condense categories if it isn’t necessary.
Personally, I’m a big fan of stores where I can browse all the products without having to select more subcategories. Certainly there are more such users. Being able to browse products without the need to select more categories is a bit like visiting stationary stores.

Sometimes we enter markets because we are looking for a particular product. Then we go to the appropriate aisle and reach for a specific product. Sometimes, however, we enter such a store thinking “maybe I’ll buy something,” but we don’t know exactly what. The same goes for an online store. Let’s provide users with an option that allows them to browse all products without having to reach the last sub-category possible.

Properly designed webpages

1. Home page

More often than not, the home page is the place of a user’s first interaction with an online store. This is where they decide whether they want to continue their shopping or not. Therefore, when talking about the usability of an online store, we must not forget about the homepage.

The homepage should display the online store’s offer and what kind of items the user can expect to find there. It is worth informing users about your flagship products that you wish to show off or which are liked by your customers.

The home page should have an intuitive layout. It is important that the user can easily navigate to the desired category, find their profile or shopping cart in the same place they usually see these icons.

2. Category page

The category card needs to include relevant features. In addition to the main menu, it must also include a breadcrumb menu that will allow the user to easily find their way around the site.

What is a breadcrumb menu? It’s a menu-building technique for an e-commerce site that makes it easier for Google robots and users to find their way around the website. The idea is to simplify navigation. This procedure also plays an important role in the SEO process.

The user should be able to filter and sort the product list easily. At the same time, make sure that the filters are complementary to the displayed products. If we are on the “dresses” category page, at least it should be possible to filter by color, material, size and price.

It is worth ensuring that the user has the ability to change the amount of products and the way they are displayed.

It should be possible for users to add products to the shopping cart directly from the category page, as well as to add items to favorites or some other list allowing to save them for later.

Source: https://www.zalando.co.uk/womens-clothing-dresses/ – An example of a well-designed product category page.

3. Product card

The product card should also be designed in a particular way. It should include such elements as:

  • photos of the product — preferably from different angles, and above all make sure they are sharp, with the possibility to zoom in, as to examine small details such as the materials from which the goods are made. Make sure the product photos are not only on a white background, but also in space, so that they adequately show the dimensions of the products. Recently, 360° photos have become popular, allowing you to see the product from all sides, even from underneath. Avoid photos where you can’t see the product clearly, for example, there are often black and white, blurry photos on the Zara’s website, or photos where you can’t see the entire product. Such photos should be avoided unless you want to be talked about.

    Source: www.zara.com

  • The price of the product, along with any promotional information;
  • a brief description, size and other features of the product — presenting this information in a graphic form, such as a table, works best;
  • a clearly visible “Add to cart” button — such a button should stand out from other information on the product card;
  • information about product’s availability and stock;
  • information about the shipping fee and delivery date;
  • product opinions and reviews by other users — this is an extremely important element that buyers pay attention to. It is worthwhile to allow users to add a picture of the product to the reviews, example: shein.com;

    Source: shein.com

  • The ability to add products to favorites.

In addition, it is worth thinking about such features as:

  • a video presenting the product — especially useful if you offer a specific product, which can benefit from motion, such as a dress that fits nicely when walking; it is also a good practice to add a video with instructions for using the product or assembly instructions;
  • use of Augmented Reality (AR) technology — recently, the ability to place products in your own space using AR has become popular. So it can be expected that it will be increasingly used in e-commerce. I recommend you start thinking about it now;
  • Suggestions for complimentary products and those found in images.

4. The shopping cart

Everyone knows that a well-designed shopping cart is extremely important. What should you keep in mind to ensure that the shopping process is easy and enjoyable?

It is a good idea to divide the ordering process into several stages, so that the user will feel more in control of where they are and their next steps.

Above all, the shopping form should be designed correctly. As a general rule, ask the user to fill in only the relevant text fields. Consider having some fields fill in automatically based on other users information. For example, if the user has entered the street and city they live in, the system to be able to automatically fill in the postal code.

It is good practice for the system to automatically verify the correctness of the data, for example, to check whether the given street exists in the given city or whether “@” is included in the email address.

Keep in mind that the text field labels should be above the text fields, never within them. Do not use labels inside the text fields for two reasons. First, because such a view may be treated by users as default or already entered values. Secondly, internal labels disappear as you enter information, making it difficult or impossible to make corrections or verify whether you are entering the correct data.

It is also important to ensure that incorrectly filled form fields are clearly marked. Underneath each wrongly filled text field, there should be information about the incorrect completion and a hint to correct the error. Solely marking an incorrectly filled field with a red box is not enough.

It is useful to label mandatory fields correctly. As a rule, if most of the fields are optional, a red asterisk marks those that are obligatory, and if that is the case for most fields, add a label next to those that are optional.

There should also be an option to change the number of products in the shopping cart, and the total cost of the order should be automatically recalculated.

Before the user is requested to pay for the order, they should be able to see a summary of the data concerning them.

It is worth providing various payment methods. Users are very keen on choosing the blik method, which is important to keep in mind nowadays.

It should also be possible for users to place an order without logging in.

User-friendly features

Stores are outdoing themselves with ideas on how to be better and friendlier than the competition. As a result, they have developed functionalities that are slowly becoming demanded by users. Customers welcome them with open arms, and they can change the entire perception of your store.

Free delivery

Of course, in a perfect world, a store would always offer free delivery, but providing it if a user spends a certain amount at the store is also welcomed by customers, and moreover, it often encourages them to spend more at the store than they initially anticipated. If the store allows free delivery, it is worth informing users about it in several strategic places. I suggest providing such information above the top menu bar, on the product card, in the shopping cart preview and at the checkout.

Easy returns and refunds

Nowadays, before users buy a product online, they check whether they can easily return it. Automatic forms on the website are worth considering. It’s best to make several return options available, such as by courier, postbox or in a stationary store. And if only we have the ability to offer free returns, I recommend implementing this feature.

Summary

Apart from the above-mentioned advice, further tips could be listed, including how to properly set up an account, what a user profile should look like, how a user-friendly search engine should work, how the right messages should sound. However, by providing the above-mentioned functionalities in our store, we can without any doubt claim that our store meets usability standards.

Klaudia Pawłowska
Junior UX Team Leader | iCEA Group International
Junior UX Team Leader with experience in SEO. On a daily basis, I design experiences and conduct research for iCEA Group clients. My passions are traveling, reading fantasy books and music.