A huge checklist of UX and UI design best practices

August 10th, 2019

This article contains an ever growing checklist of UX/UI best practices I've picked up from various books and articles during my 10 year career in UX design. Whenever I find myself discussing one with my team or referenced in a book, I add it to this list. Hoping to turn this into a downloadable checklist eventually.

Mobile design

Make buttons on mobiles large enough to 'tap'

Remember, mobile users tapping with a finger, don't have the same accuracy as those on a desktop with a mouse. If they are too small, or have a very specific clickable area they can be very difficult to access. Apple's iPhone UI Guidelines recommends buttons are a minimum of 44pixels wide and 44 pixels tall.

Don't place clickable links of buttons too close together

Similar to above, as well as size, margins are important too. If buttons or links are too close together it can be incredibly frustrating for mobile users to select the right one.

Form Design

Ask for less by removing non-essential fields

Seems obvious but we can't help asking for that extra bit of detail that we don't necessarily need. Make sure every single question on your form is one you really need the customer to complete.

Use top left aligned labels for faster scanning

Various research has shown that top left aligned labels work best because it require less eye movement in order to scan through your form.

Break up long forms into multiple steps

One long form will almost always reduce your completion rate. By splitting longer forms across multiple steps, significantly reduces the cognitive load and feel like there is less to complete, despite having the same number of questions as on your single form.

Order your questions from easiest to hardest

By starting with easier questions, you'll likely build up a sense on commitment with visitors seeing very little friction to getting started. As the questions get harder, they already feel they have invested time so are more likely to complete your form. Starting with a harder question may encourage a, "I'll do this later" mentality from your visitors.

Add help tips or additional info for sensitive questions

When asking for something like a date of birth, it can help to provide additional context on why this might be needed. Even when it might seem obvious, this can make a visitor far more comfortable in providing certain data. Of course, if it's not essential then not asking for it is an even more powerful solution to this.

Use appropriate field input sizes

Always use an appropriate field input size dependent on the length of content you're expecting from a user. This might be the width of a simple text input or the combination of the width and number of rows of a text area input. This will give users a subtle hint about what is expected of them when entering information.


Leverage negative space

Negative space, sometimes called white space is the area throughout a layout that is left empty. The right balance of negative space is really what helps content to stand out. It's important because it stops a layout from looking overwhelming and cluttered. It makes content much easier to scan, enhances visual hierarchy and reduces distraction for the user, focusing them only on the key elements.


All copy must have high contrast

High contrast isn't just for those with vision impairments, it's to ensure your copy is as legible as possible for those viewing on different devices or even just different types of screens (Not everyone has a nice 24inch HD screen). Use a simple tool like contrast checker to test the contrast of copy on your website. This site will also give you the closest alternative where you don't meet the requirements.

Don't rely exclusively on colour to communicate things

It's estimated that colour-blindness affects nearly 10% of the population - you cannot just rely on colour to communicate something to your users. One of the most common examples of this are form error messages. Highlighting an input in red and providing red error text might seem prominent to you but it won't stand out at all to 10% of your users. In this scenario, you should also include a supporting icon to effectively communicate the issue.


Most of these best practices have come from some amazing books that I've read over the years. I'll be adding a full list of those books as well as some relevant articles here shortly.

By Jonathan Clift, a UX Desginer based in the UK.