Previously, the design of online stores was reduced only to making the site visually attractive and demonstrating the values ​​of the customer company through it. But often, despite all the aesthetics of the interface, a visitor to an online store encountered inconvenient filter settings, made dozens of ineffective clicks, was nervous because of a confusing order form, etc. As a result, the online store left him with a negative impression, and the visitor refused to visit it again.

When developing a design, you must remember that on the other side of the online store there is a potential client. And he may not care how beautifully chosen the color scheme or stylishly designed brand logo. It is more important that the online store solves its problem – to easily and quickly purchase the right product. How the buyer feels when interacting with the site will largely determine his attitude to the brand, to the product and will directly affect sales.

A UI/UX designer will help you make shopping in an online store or marketplace a pleasant experience and not miss out on potential buyers.

First, let’s understand the terms.

UX design (User Experience) is the creation of a website architecture that will be user-friendly. The elements are arranged intuitively, the user performs the target action in a minimum of time and effort.

UI design (User Interface) creating the visual appearance of the site (colors, fonts, indents, information blocks). The appearance of the site responds to the target audience, you want to stay on it longer.

 

Together, UI and UX design are responsible for making an online store pleasing to the eye and convenient for shopping.

Cart-Power UI/UX designer Sergey Rogov wrote a detailed guide for our internal work on how to make the design of any project better. We decided to share with you his most useful tips: they are suitable for both online stores at the development stage and for redesigning existing ones. By following them, you can improve user experience and increase conversions.

Sergey Rogov has been working in IT for more than 8 years, and since 2018 he has been engaged in UI/UX design. He was on the team launching such projects as: the Sotovik-M online store, the Krasnostop wine selection and reservation service (this project won the Tagline Awards), the Belarusian Avocado marketplace, RAD (Russian auction house), developed premium templates for CS-Cart.

1. Experiment with font color and weight

When it comes to highlighting important information, it’s often limited to just changing the font size. But you can also build a hierarchy in the text using color or thickness.

2. Don’t use gray text on a colored background

Light gray text on a white background looks good. So you can “weaken” it and make it more pleasing to the eye. Gray on a colored background is a bad decision, the text is lost.

3. Don’t use too many borders

Borders are the obvious way to separate two elements from each other. But when there are too many borders, the design looks overloaded. Alternatively, you can use color highlighting.

4. Keep Small Images Small

Vector images do not degrade in quality when you increase their size, but they may lose or gain unnecessary emphasis.

5. Use contrast

Contrast helps emphasize the hierarchy of the text and draw attention to important elements. It can be by size or color, and between objects or sets of objects.

6. Use the minimum number of fonts

Using more than three fonts at the same time overloads the interface. It is best to limit them to 1-2 options, but at the same time you can “play” with different styles of the same font.

7. Limit the length of lines

The user is easily focused at the beginning of the line, but by the end of his attention gradually dissipates. In order not to let the visitor get bored and keep his attention on the information, stick to the optimal line length. For devices with a diagonal of more than 10 inches, this is 50-75 characters; for phones – 30-45 characters.

8. Use the right alignment

Justifying creates a lot of empty space. Because of this, the readability of the content is reduced, as it breaks the rhythm of reading and users are forced to stare at the paragraph. This alignment is good for documents, but not for texts in the interface.

Center alignment is more suitable for headings or small texts to highlight certain aspects and create a visual hierarchy.

For texts in the interface, left-alignment is best. It looks natural, does not impede perception and does not burden the eyes.

9. Apply the rule of seven

In 1956, Princeton University cognitive psychologist George A. Miller theorized that the average person can only retain 7 plus or minus 2 items in short-term memory. This law has been applied to UI/UX design.

The user needs to jump on the site and quickly buy the desired product. That is, he usually does not have time to figure out what is where in the interface of the online store. To facilitate the user’s path to purchase, it is best to organize information in an online store in small portions of 5-9 items each.

10. Apply the three-click rule

The visitor should be able to get from the main page to any other page of the site by making no more than 3 clicks. This rule works even for complex catalogs such as the Wildberries online store: main page – catalog – subdirectory – product.

It is especially worth keeping track of the number of clicks in the shopping cart: each extra step during checkout increases the risk that the user will abandon the purchase.

The directory can use many filters that seem to increase the number of clicks. But this is good for the online store and helps users find the right products.

11. Don’t contradict what you wrote.

UX is about user experience. Do not mislead him with double meanings. If the button is called “remove 2 items from cart”, then it should actually remove both items.

12. Watch your composition

Try to keep the composition of your project balanced. That is, even if at first glance it looks chaotic, the elements should be evenly spaced in accordance with their significance. If the interface is balanced, visitors subconsciously feel comfortable.

13. Avoid Information Overload

In a world of time pressure, users stopped reading text long ago. Usually they scan the screen in large blocks, snatching out meaningful information. To draw the user’s attention to important elements and help him “skip” the page with his eyes, dilute the information with white space.

White space is the empty area between design elements or within elements. Despite the name, white space is not necessarily white. It can be any color, texture, pattern, and even a background image. The main thing is that the content is well read against this background.

---

These tips are universal. They are suitable for any online stores or services at any stage of development. But for the most effective results, UI/UX design should be at the heart of the development of online stores.

Then it will consist of seven stages:

1. Understanding the business and tasks. You need to figure out how the online store will earn. What goals and objectives will be before users.
2. Information analysis. The designer studies information from the client, and also looks in open sources to see how competitors work.
3. Generation of ideas. Ideas that have arisen in the past stages are recorded in the form of text or sketches, and the most suitable ones are selected.
4. Description of scenarios. This is an important step that makes UI/UX design truly user-centric. Here key and secondary scenarios of user interaction with the site are defined. Scenarios are described in detail and recorded.
5. Development of prototypes (frameworks). All scenarios are assembled into a single project structure (framework structure).
6. Choice of visual style. It determines which image should be broadcast by the brand. Based on this, the site’s color scheme, fonts and element styles are selected.
7. Layout design. This is the final rendering of all layouts and possible scenarios. Layouts are agreed with the client and go to the developers.

Further design improvements should be based on the features of the product and the target audience. You need to do research, A/B testing and track changes. This is the only way to find effective solutions.

UI/UX design from Cart-Power is not just about the beautiful appearance of the site. Involving a UI/UX specialist in the team allows us to immediately develop such online stores and marketplaces that solve user problems in any interaction scenario, which means they sell more. Good design helps you stand out from the competition and convey the character of your brand. It evokes an emotional response from the target audience and becomes the key to its loyalty.