Graphic design has 4 basic principles that appear to varying degrees in all well designed works; Contrast, Repetition, Alignment and Proximity. They are there to help guide you in making attractive designs, but I think they can (and should!) be applied when designing user interfaces. This post will show you how. Anyway, I like the acronym!
Contrast
In design avoid things that look similar; if 2 elements are not exactly the same make them very different. Don’t do your titles in 12pt Arial and your body text in 10pt Arial – they just look too similar to stand out. You can create contrast in many ways for example:
- Different fonts
- Different sizes
- Colours and backgrounds
- Borders
- Differing alignments
- Spacing
Our eyes are fond of contrast, it helps us prioritise and sort through the information before us. So how can we use contrast to improve usability?
Emphasise Primary Interactions
Use contrast to put emphasis on the most common or likely interface interaction and reduce the weight of secondary choices.
Figure 1.
Figure 1 shows a good use of contrast. By reducing the visual weight of the cancel action, emphasis is put on the OK button. This makes the cancel button less prominent and therefore less likely to be quickly clicked by mistake.
Highlight Important Notices
Contrast can be used to highlight important notices requiring attention. For example, when showing an error message it is important that this immediately stands out otherwise the user will not see that they have made a mistake and will assume that something is broken!
Figure 2.
Figure 2 shows the default look for error messages displayed when writing web applications using Ruby On Rails. The bright red box jumps out against the rest of the page and the user is in no doubt that they need to correct something before continuing. The field on the form containing the error is also outlined in red to increase its contrast with the accepted fields.
Group Related Elements
Contrast can also used to group related interface elements together and make them stand apart from each other.
Figure 3
Figure 3 shows the posting controls in WordPress. Notice how background colour contrast is used to group together the actions for Save, Publish and Delete Post. Bonus marks go to the WordPress interface designers for using contrast to reduce the visual weight of the “Delete post” link!
Repetition
Repeat visual elements throughout the design. Repetition creates unity and ties together things that would otherwise be perceived as separate. Repetition in usability at its most basic is simply to “be consistent”. If you have a way of interacting to achieve a certain goal in one place, make sure you repeat it everywhere to promote internal consistency. If you aren’t internally consistent across your system it gives the impression that the product was thrown together and there was no clear guiding vision. So, it is important to either ensure that team members working on different parts of the system stay in contact, or appoint someone with overall responsibility to maintain the consistency of the interface.
Consistency helps improve the learnability of the product. People are very good at recognising things they have already seen, and will be confident in their expectations of the results of their actions. Take advantage of this to speed up learning of the system by letting them apply things they already know.
Consistency doesn’t stop at the boundaries of your product. Repeat pre-existing conventions to achieve external consistency. For example if you are writing an application for the Mac take advantage of the existing skills people have and follow the conventions of that platform.
Google Web Search
Google Map Search
Google Product Search
The search interfaces are consistent across Google’s suite of products allowing users to rely on their existing knowledge of how to use the system and how it will react.
Alignment
Alignment is probably the most obvious of the 4 design rules; it is the placement of elements such that the edges (or their centre lines) line up horizontally or vertically. No element of a design should be just thrown on the page randomly, it should have some connection with another element on the page to create a unified, cohesive feel.
Alignment can be used to guide people through a design; such as arranging form fields in to columns to indicate the order the elements should be filled in. Users will naturally go down the form vertically, but if they reach a row containing more than one element horizontally they will follow that alignment before continuing vertically.
In a nutshell, unless you are drawing attention to a specific element (by increasing spatial contrast), ensure that elements of your page are neatly aligned to ensure a clear reading order.
Figure 4
Figure 4 shows the print dialogue from Firefox 3. Notice how the labels down the left are right aligned to the central column of colons and the controls are left aligned. This creates an association between the labels and their controls. The row of colons lead the eyes down the page vertically and where more than one control appears on a row your eyes are led horizontally.
Proximity
Related items should be close to each other. Grouping related controls together helps to organise the interface. Controls that are close together are perceived to be more related than ones that are far apart. The related items create a single visual unit so your interface is perceived as being made up of a small number of related units rather than as a page full of many individual controls.
Figure 5
Figure 5 shows the left hand side of the iTunes interface. The playback controls are grouped together and perceived as one visual unit. The Library, Store and Playlists elements group their own sub-elements as 3 distinct groups, but their proximity to each other allows the sidebar to be perceived as an interrelated whole.
Contrast, Repetition, Alignment and Proximity are good and simple ways to improve the look and the usability of an interface. So next time you are designing a user interface, look for ways you can make it more CRAP!
Follow me on Twitter!