A huge checklist of UX/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 the 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.

Layout

Accessibility

- 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.

Navigation

References

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.