User Interface Usability Checklist Part 2

So you made it through part 1 of the usability check list, how about part 2?

21. Poor Label Alignment

If you have been through design 101 you have probably heard of the wonderful acronym for the basic principles of design, C.R.A.P. This of course stands for Contrast, Repetition, Alignment and Proximity. Proximity is very important when identifying which label belongs to which input. Each different form of alignment has its advantages and disadvantages.

Left Alignment

The label appearing on the left of a box is a common practice. This often helps with vertical space and keeping all of the elements of a form on a single page, which can be beneficial in aiding the user in form completion and making them aware of all of the possible options they can, or made need to provide information for. It does however have a few disadvantages.

• Long labels cause short label's input boxes to be far away from the end of the label, this damages that basic principle of proximity. In extreme cases it can be a bit tricky to track which label refers to which input. If you have minimal control over the labels and/or need to serve a lot of languages this can become a difficult issue to overcome.
• Many mobile browsers have a zoom in focus effect which can lead to left align labels disappearing off the left of the visible screen, this can force the user to need to manipulate the zoom in order to read fields and is not the smoothest user experience.
• Multi-column forms can be difficult implement and often require grid lines or zebra stripping to aid quick scanning of forms.

Right aligned labels, left aligned inputs

This allows you to have highly varied length labels with the distance between the input boxes and the labels being a uniform distance. This really helps users identify which label points to which input box, 

However every choice does lead to disadvantages.

• Difficult to have multiple labels horizontally as the variable alignments can make it difficult to see all of the inputs.
• It does lead to a ragged alignment which can be a bit trick to scan through large forms quickly 
• Aesthetically it may even look cluttered and requires some skill to look good, aesthetics have been shown in studies to be an important aspect of usability.

Top Aligned labels

Having the label above the box allows for left alignment of labels as well as multiple input boxes horizontally, but it is heavy on vertical space compare to other alignments. Tends to work better on mobile devices due to the zoom obscuring the label when there are other alignments.

• Make sure that the gap between the following label and the unrelated input box above it is significantly greater than the distance between the related input box and label. Failure to do so will mean that users could be confused and think that it is a bottom aligned label.

22. Inconsistent label alignment

Switching between different alignments is likely to lead to confusion especially if the form has more than one column of inputs.

23. Tiny Fonts

Web browsers default to 16px for a reason. On a standard monitor at normal viewing distance 16px represents a similar size of text to that of a normal paperback book held at reading distance. Tiny fonts are normally employed because the UI is unfocused, tiny fonts to an extent compound the issue. Obviously this is not so bad if all your users are very young with perfect eye sight, but anyone outside that narrow bracket is unlikely to appreciate your choice of font.

24. Actions and information being separated by a long distance

A common example of this is input errors appearing at the top of a form rather than next to the field with the error or even the submit button that was just selected. The human eye can only focus on a very small part of the screen. Although it is sensitive to movement, if an error is generated far away from the users focus point they may go unnoticed resulting in frustration and potentially an incomplete task.

25. Requiring unnecessary information

A user should not really be asked for a "random" salt for encryption of a password, the system should perform this task for them. The time taken to comprehend the question and submit an appropriate answer could be more productively spent on any other endeavour, yes even checking Facebook is more productive than this.  When requesting information it is important to make sure that anything that can be gathered via context or any other source is done to aid swift task completion.

26. Laggy sliders / menu bars etc.

If your selection lags behind the movement of the mouse or your click is interrupted by animation then you are inviting miss-clicks and intense user hatred.