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.
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.
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.
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.
Various research has shown that top left aligned labels work best because it require less eye movement in order to scan through your form.
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.
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.
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.
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.
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.
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.
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.
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.