7 simple UI/UX fixes that instantly improve your website or application

In my work, I deal with many different applications and websites. What stands out to me is that the same easily fixable errors are often made. Below are 7 tips that instantly improve the user-friendliness of your website or application.
Robert Roose
Door Robert Roose

7 simple UI/UX fixes that instantly improve your website or application

1. There is only one primary action

On every page of a website or application, there can only be one primary action. It cannot be that all actions on the page are equally important. This is confusing for the user because what is expected of them? Therefore, ensure that there is a button that stands out visually. This is the 'call to action' (CTA). It is possible to repeat this CTA multiple times on the same page as long as it leads to the same action.

Don't know what the most important action is? And do you have lengthy discussions with stakeholders about this? Let the user or visitor determine what is most important. Conduct interviews with customers or users to discover what they use your application or website for.

Image
Wrong example of two buttons who look the same for different actions.
Example of how not to do it: two primary buttons for different actions side by side.
Image
Example of a primary action with blue color and a more toned down secondary button.
Example of how it should be done: The primary action button stands out the most.

2. Group elements with sufficient white space

Ensure that elements belonging together are grouped. Avoid confusion, for instance, by leaving too little space between form elements. If the user is unsure which label corresponds to which text field, something is amiss. This can be easily fixed by doubling all spaces between elements. Give it a try. Does it feel odd? Then you can always reduce the spaces, but in practice, you'll find that double spaces work better. For you and your users.

Image
Voorbeeld van twee formuliervelden die te dicht op elkaar staan.
In this example, the form fields are too close together.
Image
In this example there is enough space between the form elements so it's easier to understand.
In this good example, there is enough space between the form fields.

3. Avoid long lines

You've probably encountered it yourself: websites with text where the lines almost fill the entire screen. That immediately makes you lose interest in reading. You're not alone. According to a study by the Baymard Institute, users find long lines of text challenging:

"Indeed, during testing we’ve observed users immediately go back to a previous page when arriving at a page that includes long lines of text, as they simply didn’t want to bother trying to “get through” the information."

Therefore, frame texts so that the lines don't become too long. How many characters should be on a line? Maximum of 80 characters. This is the most comfortable to read and is even a requirement if you want your website to comply with the WCAG accessibility guidelines.

4. Never display an icon without a label

Icons can be useful because they help users recognize certain actions or elements more quickly, such as a home icon for navigation to the home page or a trash bin for deletion. However, not all icons are equally clear to every user. Therefore, you should never place an icon without an accompanying text label. You cannot assume that all users will immediately understand the icons.

A good example is the so-called 'hamburger' menu icon. These are three vertical lines that you usually see on mobile websites. Clicking on this icon reveals the navigation. Often, you see this icon displayed without a text label. However, it is not immediately clear to everyone that behind this icon, a menu is hidden. On some websites, the icon is used to indicate a list. If you use a hamburger menu, make sure that 'Menu' always appears next to the icon. This makes it immediately clear to everyone.

Image
Fout voorbeeld waarbij er alleen iconen zonder label getoond worden.
Incorrect example where only icons are displayed without labels.
Image
Goed voorbeeld waarbij er een label naast het icoon getoond wordt.
Correct example where a label is displayed next to the icon.

5. Label above input field

A common sentiment is that users do not want to scroll and dislike long pages. As a result, designers and developers aim to display as much as possible in a small space. Especially forms should ideally be presented as compactly as possible.

As a consequence, you often see labels placed next to input fields instead of above them. However, research indicates that users find it challenging to scan and fill in forms when labels are not above the input fields.

A simple fix is, therefore, to always place labels above the input fields and not to make the form too wide (maximum 600 pixels). This makes the form easy to scan and more user-friendly for your visitors to complete.

6. Check Contrast

The contrast between the color of the foreground (e.g., text) and the background is often considered a matter of accessibility. If you want your website or application to comply with WCAG guidelines and be accessible to everyone, you must ensure that the contrast between the two colors is sufficient.

However, it is also a usability issue. Low contrast, such as white letters on a yellow background, results in a less usable website or application because it is challenging to read. Checking contrast is easy to do with online tools like this one from WebAIM.

7. Readable Font

What I still see too often is the use of an almost unreadable font. It was trendy for a while to use a thin font. Although it may look cool, it doesn't contribute to readability. Therefore, always choose a font that is easy to read.

Not sure which font to choose? Check Google Fonts and sort by 'Most popular.' When using Google Fonts, make sure to host these fonts locally (learn how to do it with Drupal).

Do you have simple UI/UX fixes?

Share them by leaving a comment below.

The content of this field is kept private and will not be shown publicly.

Beperkte HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.