10 actions for a cleaner user interface

1. Stick to your fonts — check for outliers

The sheer amount of text address reminds us of how important it is to have our type-checked. Maybe you forgot to set the correct font on that module you installed way back, or maybe the marketing team is using a resembling font, but looks off in context with the rest of the site? A good rule of thumb is to limit yourself to max two typefaces with a selection of their weights. This gives enough flexibility while making going out of your boundaries a little harder.

2. Justify each use of font-weights

I’ve yet to see all 14 weights of a typeface used purposely on an e-commerce site. Principally, there should be enough contrast between different types of type and their function. Ask yourself why you applied Regular when all your other body text is in Light. Limit the number of weights and create a hierarchy with size and case instead. Fewer weights fetched may also lead to faster load speed for your site.

3. Check your font-sizes

Create tidiness and structure with consistent rules for font-sizes. Just like weights, a small difference in size between two types of type may distort contrasts and hierarchy. Their rules will quickly blend into each other. This is also crucial for accessibility; avoid tiny type and make sure it can be read (and even seen) by your users.

4. Keep elements’ styling consistent

A common mistake I see is the inconsistent styling of the most essential components. Look at your primary Call to Action button’s (i.e. Add to Cart on product pages) colour, border, shadows, corners and so on, and compare it to other Call to Actions buttons.

5. Keep to one visual language

You can say a lot with the visual style of your interface and when it’s blurred out it may say nothing at all. As an example, we can narrow down to iconography. Using icons from different sources is quick, but dirty. Find an icon library with the icons you need, or get them drawn up from scratch in accordance with your brand. The same applies to images, where images with the same style create a harmonious experience that communicates your brand effectively.

6. Contain and avoid out of line elements

Get your ruler out and check if your elements are following the same line down the page. Make some rules on how much space elements should have to screens’ edges and you’re on your way to make a grid. A grid works as the framework that helps you create harmony for your customers. Here’s a good, scannable guide I found. https://visme.co/blog/layout-design/

7. Check that your elements have sufficient space

Give enough air and create hierarchy inside and around your components. Does your element look good alone? Good. Do your element look good in context with other elements? Great. An example here is a product presented in a category view. Missing space between two rows of products might make the product name, price, or stock status appear to belong to the wrong product.

8. Restez dans la même langue

Friction occurs if you experience English menu labels in your French store view. It sticks out. The same applies to tone-of-voice. Have your targeted group of customers in mind, and write so they understand — without the jargon. Copy and paste exemplary bits from your site and communication into one cheat sheet, and pass it around the team.

9. Check that everything deserves to be there

Use data and analytic tools, such as heat maps, to find redundant or missed elements. Are you missing a much searched or visited category amongst your category buttons on your front page (Google Analytic’s “Behaviour>Landing Pages>Entrance Paths” tab is your friend here)? Change one that’s not, or just simply add it. Are all prices ending in “,00”? Remove decimals.

10. Ask for second, third, and fourth opinions

When unsure or “done”, test your tidying by asking someone else to take an extra look. A quick review by a colleague or friend (or even a visitor in your physical store, if applicable) will confirm or deny that you’re on the right track.

Make a note of key learnings during the process

After you’ve gone through one of these clean-ups, you’ll be able to spot it earlier, either in reviews of new features, or even specify it in the planning phase. The more people in your organization that do this, the faster you’ll create a culture for quality.

And if you really want to win big with this small action of a clean up: Write notes during it, collect and release them internally for the rest. You have now the starting pieces of a design system (which the lack of created this mess in the first place), that everyone can reference the next time they create new pages or elements.

Keywords for this whole article are justification (pun intended) and consistency. Something should only stick out if it’s a reason for it (aka. when you need/want it to). In theatre, we would call this Checkhov’s gun — which segues into some final words, from Anton Chekhov himself, you can flaunt with during lunch:

“Remove everything that has no relevance to the story. If you say in the first chapter that there is a rifle hanging on the wall, in the second or third chapter it absolutely must go off. If it’s not going to be fired, it shouldn’t be hanging there.”

PS: Here’s the tips repeated. Copy them to note and stick it to your screen, and you’ll be pretty safe year-round:

1. Stick to your fonts — check for outliers
2. Justify each use of font-weights
3. Check your font-sizes
4. Keep elements’ styling consistent
5. Keep to one visual language
6. Contain and avoid out of line elements
7. Check that your elements have sufficient space
8. Restez dans la même langue
9. Check that everything deserves to be there
10. Ask for second, third, and fourth opinions