On the PrestaShop blog, we have already given advice for improving user experience, like this article explaining how to boost conversions. Now we're back again to talk about UX and offer some tips for improving design. The thing is, there are a number of mistakes designers make very often that can detract from an online store's quality.
Creating a superior UX requires considering all the design factors and elements that visitors to the site will be interacting with. User experience is affected by design—usability, accessibility, graphic design...the list goes on. But just as important are psychological considerations such as the emotions users might feel when coming into contact with your brand or products.
Let's go through some of the most common design-related mistakes that are likely to come up during any project. These mistakes are frequently present in the interface when personal information needs to be entered or when the user is presented with a set of options. In both cases, design is a key factor in achieving a website that's both aesthetic and user-friendly.
More specifically, we'll be delving into recurrent mistakes in form design, since this is vital to any online store in a world where users have no issue closing a page with a full shopping cart. There are certainly exceptions to the rules we'll be listing here. Consider it a handy little guide to help you improve your store's design.
One-column form lists
Users usually prefer to read questionnaires from top to bottom, so when they're faced with a myriad of boxes to fill out, it's best if lists show up in one column rather than many.
Another option is grouping form elements together by information type and presenting them separately. That means one column for personal data, another for payment information, and another for delivery. To improve user interaction, the information you ask for within each of these categories should always be in just one column.
Place labels at the top of forms
Forms are filled out more quickly when labels are shown above the form or section instead of on the left-hand side. Nonetheless, there is a very clear exception to this rule. For big lists with multiple choice fields, it's best to place labels to the left. This helps reduce the total height of the form and makes reading easier by giving more importance to labels, thus improving usability.
Grouping labels with their input box
Leaving exactly the same distance between options and their labels could confuse users.
Group together labels to make it clear which box goes with which information at a mere glance.
This is a crucial step when there are lots of fields. Otherwise, users could end up losing track of which field goes with which label.
Don't use capital letters
Seriously, capital letters have got to go. Firstly, in the digital world, capital letters are equivalent to yelling, and no customer wants to be yelled at. Secondly, they are quite simply harder to read. On the other hand, barring specific styles which should be uniform across the entire page, never write only in lower case.
Don't use input boxes as labels
The space saving factor is likely the only reason designers keep doing this in the first place. Although it was common practice back in the day, the truth is that it ends up causing usability problems.
Once users click in the box, the label information disappears. If they click on something else, it's easy to forget what they needed to put in it when they come back. They also can't check to make sure everything was typed in correctly before they confirm their purchase or that the system detects no errors. It's also difficult to visualize the fields to fill out when scrolling through.
Specify where entry errors are located
When users make a mistake while filling out a form, indicate exactly where the error is located. If possible, indicate its nature, too. This is even more important for longer forms, since an error that can't be located could cause a user to close the page. Use this method to greatly improve interaction with the user.
Keep basic help in plain view
There are times when basic help for users filling out your questionnaire can come in handy. If you've made it available, keep it in plain view. After all, the point is to help the user finish as quickly as possible.
Whichever way you choose to do this, users just might enter a password incorrectly, or they could enter too few characters. In any case, if an error pops up, users should be able to locate it, hover over a (?) symbol, find out that it needs to be five characters or more, and fix the problem. It's infinitely easier if you explain it. It's one more way to offer a simple, user-friendly experience.
Highlight call-to-action buttons
If you offer two options, highlight the call-to-action (CTA) that will generate the most interest. To do this, you can opt for a larger size or a color that pops. The goal is to direct user attention. If you don't think that the second option is useful, simply eliminate it. Not only does this improve user experience, making it easier for the customer to choose the more logical option, but it also enables designers to highlight the CTAs that are more beneficial to them.
Get rid of anything unnecessary
Quite frankly, site owners often ask for data that isn't truly necessary during checkout and customers who fill out never-ending forms tend to call it quits. The buying experience can sometimes be so slow and boring that users don't buy anything from the store, despite being happy with the product.
Think about what's absolutely necessary, what's optional, and finally, what you could do without. Nobody wants to spend half the day filling out information just to make a purchase, so keep things as simple and as fun as possible. User experience will improve and you will see your conversion ratios follow suit!