Skip to main content

10 actions for a cleaner user interface

How do you create a website with fewer distractions and less friction? Visma Digital Commerce’s UX designer shares 10 tips to get you started. 

10 tips for a clean user interface
10 tips for a clean user interface

 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’s never a bad time to do some spring cleaning.

1. Stick to your fonts — check for outliers

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

3. Check your font-sizes

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

5. Keep to one visual language

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

7. Check that your elements have sufficient space

8. Restez dans la même langue

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

10. Ask for second, third, and fourth opinions

Make a note of key learnings during the process

Most popular

  • ""

    What is an IT Security Policy?

    Every organisation—from startups to large, global corporations and nonprofits—must make sure that they have procedures to keep up with an ever-changing landscape of threats and vulnerabilities to keep its assets secure. But what is an IT Security Policy, and how do you enforce them?

  • ""

    Turning the UEFA Euro into math

    The Finnish company Weoptit, a company in Visma, has turned the UEFA Euro tournament into math and simulations. Based on a model originally built by their analysts prior to the World Cup 2006, they have played out the tournament 1,000 000 times to find out what results each team can expect from this summer’s football festival.