10 actions for a cleaner user interface

10 tips for a clean 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 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 colors, 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, color, 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

3