Resources

Article

10 actions for a cleaner user interface

Article

10 actions for a cleaner user interface

Article

10 actions for a cleaner user interface

Innovation and development

Article

10 actions for a cleaner user interface

Innovation and development

Visma Digital Commerce’s UX designer shares 10 tips to get you started.


10 steps to a tidier and clean user interface

  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

You’ve upgraded your checkout and you noticed prices in the summary are given in the “99 $”-format. In your category view, they’re “99 USD” and your third-party product recommendations use “99,00 USD”. Three logics for the same purpose/function means two too many for your customers.

It’ll slow their reading subconsciously and they’ll blame your site for it. If you now think about all the different elements that make up sites, we’re talking colours, grid layouts, boxes, buttons, information architecture, and typography, how many logics are you demanding from your user?

It came to this because you manage an e-commerce site, which implies you work in a high tempo. It’s easy to forget or take something for granted when you really, really want that feature released by Thursday, so you can push out marketing the following day. Ugly is okay when you’re sending it out to be tested, whether or not it creates value for your users. Oh, and the greater number of people working on your site, the greater chance for consistency breaking. This is why I suggest you sit down and do some spring cleaning.

You already know that there is “stuff” on your site that looks off. Getting it done, will free that space in your head to focus on what’s next in store (pun intended). During the process, you might also find new needs, wishes, or ideas, as you look at your site anew with the eyes of your users.

It’s never a bad time to do some spring cleaning.

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.

Before: Articles with different fonts and sizes for titles and body text. After: Same styling for same elements.


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.

A chaotic group of buttons with just one change from eachother. Stick to one styling for your Call to Action.

These buttons are all “the same” with the exception of one little change to border-radius, shadow, colour, size or font.

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.

Icons of different styles (i.e. filled or outlined, line width and padding) versus icons with the same style.


Keep in mind the placement of the icon within its boundaries!

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.

Timeline of user interface showing small steps and changes to get the clean, harmonious interface shown on top of the article


Many small streams make one big river.

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


Related content