Probably the most common mistake in e-commerce UX design is the prioritization of components on a product card. It’s a fatal error, I would say. Poorly structured priorities of elements on an online store’s product card greatly diminish usability and reduce users’ interest in the products overall. So, what exactly are the priority issues? You’ve probably often seen online stores where the font size of the product name is much larger than the price. About 10 years ago, such priorities were normal.
However, subsequent years of experience have shown that online shoppers first look at the picture, and if they like it, the next priority is the price. These are the two aspects that most (but not all) compare first. This is because the product image in an online store usually gives a good visual representation of the product. The product name essentially duplicates information that we’ve already understood from looking at the image.
Therefore, the product name on the card is generally used for search optimization and does not require top priority among frame elements or a huge font. So, if you see a UX design with a large product name and small price font, you can be sure you’re dealing with a newbie in e-commerce.
And again about font size. Yes, it’s a common issue. You’ve probably visited websites like Medium or Bloomberg and read articles on Esquire or the New York Times. You might not have noticed that the font size of articles has been increasing over the years, while it took years of A/B testing, data collection, and a lot of money from big companies to understand this issue. The main goal of a blog on your site is to have it read. Of course, there’s the side benefit of search engine optimization, but everyone wants their article to be read. The sneaky error lies in the fact that the “canvas” of text we write in articles is very hard to perceive if it’s written in a small, “squished” font, without spaces and simplicity between paragraphs.
It seems obvious, right? What’s so complicated about it? The larger the font, the easier it is to read. The design system of any CMS comes into conflict here, whether it’s WordPress, Magento, Shopify, or any other low-code solution often used by small and medium businesses. In their developed design system, it’s not anticipated that the “P” category font (plain text) will be different in the blog and on the site. That means, originally, the same tag is assigned to the “text” category. Therefore, everyone working with low code has to go through hoops and make changes to improve the user experience in the blog.
What does this affect? First of all, the number of refusals to read. No one wants to read an “impenetrable wall” of text, so no matter how interesting an article is, in most cases, the user will simply refuse to read it.
And also, it’s a violation of the ADA (Americans with Disabilities Act). Even a completely healthy person might start having convulsions from trying to read 5 such articles. I’m serious.
In reality, typography makes up more than 95% of web design. If you make a mistake, you can lose from 12% to 20% of potential customers. By optimizing typography, you make the site user-friendly.
We can talk for hours about mistakes in interface navigation. It’s a big topic worthy of a separate post. Right now, let’s touch on just one, the most common mistake in website navigation development.
Compactness / Brevity / Clarity – these are words that every UX designer must keep in mind. This is especially important for large websites, like online stores and platforms with many pages. There’s no need to ‘cram’ everything you have into the website header. Instead, it’s wise to carefully create the menu and optimize the navigation by reducing the number of items, using standards and international names that will definitely be clear to your users and help them find the room they’re looking for. Don’t make users wander through endless corridors of links and impassable mazes of web pages. They don’t deserve that.
However, remember the three-click rule: every user should be able to reach any page on the site in no more than three clicks (although there are exceptions).
One common UX mistake is cluttering the homepage with pop-up windows. Instead of getting the information they need right away, users have to deal with a multitude of banners. Not all pop-up windows are bad, but remember that they need to be well-designed and placed properly. Make sure that visitors can easily close them.
To create user-friendly pop-up windows, think about how many you really need and when they should appear. It’s better to stick to just one per page, making sure it doesn’t take up the whole screen. Banners should be easy to close, requiring only a few clicks, and they should fit in with the overall style of the site.
There’s often a mess of fonts, colors, and elements due to the lack of a design system. This is a common problem. Many people like to experiment with fonts and color schemes to stand out, but this only ends up confusing the user in this sea of characters, images, and variety. In reality, people prefer simplicity and conciseness.
Minimalism helps users quickly orient themselves and easily absorb information. The market trend in all designs, from interiors to mobile phones, is moving towards minimalism, not away from it. Pay attention to details like properly formatted text and a consistent color palette. Mobile user interface design especially needs consistent, minimalist solutions. Strive to provide content and features that people need at the moment. A well-developed design system can help eliminate clutter and improve user experience. Make your users happier with a design system!
In conclusion, I’ll add the most important advice, which will help you avoid all these mistakes. Your user should be at the center of everything you do. Don’t fall into the trap of thinking that you know everything better than others, better than your user. It’s extremely important to take feedback seriously to bridge the gap in understanding the needs.
