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.

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.

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.

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.