Reduced to its fundamentals, good visual interface design seems to me to be composed of three parts, or requirements. How well each is met will dictate the quality of the work. If all are satisfied, we arrive at work of the best degree. If only one or two are satisfied then the work will be mediocre. If none are satisfied then the work will certainly be bad. The three requirements are:
- The clarity of individual interface elements
- The relationship of every element to every other element
- The effect of the composition as a combined whole
The clarity of the individual elements refers to the clarity with which each element communicates its function and its means of interaction (or affordances). Are the elements easy to see and is the text easy to read? Does a button look like a button and does the user know that they can interact with it? Does a list of items look like a list of items, and does the user know what type of items they are? Are the icons used on the controls decipherable? Each interface element, as a single unit, presents the user with its own level of clarity as regards to what it does and how it can be used.
The relationship of every element to every other element refers to things like the grouping of elements in order to organize the content into meaningful units, or a variance in contrast and size in order to build visual hierarchy and manage the user’s attention. The headline must belong to the text or list of items next to it in order to make sense; the text must sit inside a button in order to be understood as its label; a group of related items must be clearly separated from unrelated items in order for the group to be understood as such; the most important controls and content must be treated in such a way as to stand out as primary elements on the page, and so on. By using color, contrast and space the designer is able to organize the interface into units that the user can easily process and make sense of.
Finally, we have the effect of the composition as a combined whole. This is the aesthetic impression that the interface creates on the user when viewed as a unified whole rather than its individual parts. As each element plays its individual role and the relationships between the elements tie them in meaningful ways, all the elements combined can also be experienced as a single unit, as a unified interface. An architect can decorate individual windows, doorways, walls and roofs, and he can organize the rooms in an intelligent manner, yet the passers by will also see and experience the building as a single unity of all its parts, and will judge it by that impression. The unity of the interface is a combination of the previous two parts, skillfully composed in a particular direction so that a desired aesthetic effect can be achieved.1
The above explains, for example, why many perfectly usable sites nevertheless seem ugly to us. A designer concerned with usability but not aesthetics may ensure every element is clear in its function; may avoid using icons, replacing them with clear text labels; may add additional descriptions to guide the less savvy user; may use enough contrast and large font sizes; may organize the page into meaningful groups and attract the eye towards the primary content; and yet fail utterly at achieving a sense of aesthetic unity, making the whole thing look like a capable combine harvester with useful parts sticking out the sides rather than an elegant consumer car defined by the sleek lines of its smooth shell. Clarity of individual elements does not ensure the beauty of the whole. To achieve beauty all the disparate elements on the page must be harmoniously brought together so that their total becomes another unit: the interface as a single whole.
Alternatively, there are many good looking sites that fail at usability. It is not difficult to ensure a harmonious unity of elements when all you are concerned with is the creation of an overall aesthetic impression. Many designers today like to use washed out, light gray colored fonts that are very difficult to read. The reason they use them is because they treat the text as a building block in the overall construction rather than a primary element which they must work around. They style their sites with large, beautiful headlines, with interesting hero images, with innovative menu bars that sit well as part of the whole composition, and finally, they drop in the text below, and they make it small and light as to ensure it does not fight for attention with the rest of their beautiful design, sacrificing usability for aesthetic effect in the process.
Another example of such form over function is the use of ambiguous icons. Icons are smaller and more elegant than text labels, but they are often a much less usable choice. Unless it’s a very widely used icon, people likely won’t be clear about what it does, and so will have to spend time hovering over the button to get the text tooltip. Icons, however, are a very good choice for composition because they are often designed to fit in a square of the same width and height, making them ideal building blocks for the visual designer. The designer will often fall for this visual benefit, avoiding text labels due to their unpredictable size and embracing the compactness and elegance of icons, achieving visual unity at the cost of usability.
The order the three parts are satisfied is important. A beautiful work that is not usable is worth less than an ugly one that does its function well (unless, of course, if its function is to be beautiful). Thus, we must first of all ensure that every element of the interface is clear, then ensure that their relationships are well defined, and then ensure the work has aesthetic unity. All of these processes happen simultaneously – i.e. you will be creating relationships as you style individual items, and you will have an idea of the final aesthetic effect you wish to achieve from the very start – but the order in which they are satisfied will affect the fitness of the final product.
Finally, when all three requirements are adequately met, when all the individual elements are clear, when their relationships are well defined and the overall structure arranged in such a manner as to create a vivid aesthetic impression, we arrive at an interface that is both usable and beautiful2; an interface that reveals its function and presents a strong unity of style and visual concept.
- It may appear that the second part naturally caters to the third – i.e. that once you resolve the relationships between every element that the harmonious whole would emerge by itself. Yes, some sense of harmony will be achieved, but this is not all we want. What is required at this last step is also a sense of aesthetic direction, a visual style that the designer wishes to achieve. For example, there are many news sites with exactly the same units of content on all of them (a list of latest headlines, links to sections, etc), which are also clearly defined as such, yet every news site need not look like every other news site – there is a choice in how you arrange the components you work with to achieve a desired look.
- I mean beautiful in the sense of elegant, or harmonious, the feeling we get from seeing a well organized design where every element works to support everything else and nothing looks out of place. Some work will benefit from added decoration and style, some will not and should be restricted to simpler forms.