Before delving into the fundamentals of visual user interface design there is a critical concept to keep in mind:
The visual representation of content is most effective when it accurately reflects the intended underlying conceptual meaning of that content.
This means that a visual user interface is nothing more than a medium being used to communicate an idea, and that idea exists and can be understood without any visual representation. Therefore, it is most effective to thoroughly understand the idea first, and then design a visual user interface that accurately communicates that idea.
Now let's start building our VUI design toolkit and see how this works.
One principle of visual user interface design is grouping. Grouping is simply the process of creating visual relationships. When properly used, grouping helps to communicate meaning by giving users visual cues that mirror the content's conceptual relationships. These cues reduce the amount of mental effort used to figure out those relationships and understand the content.
Grouping can have a significant effect on how content is perceived. Let's take a look at a few examples.
Even spacing provides no clear visual relationships between letters. What is the intended meaning—four separate letters or some combination of words?
Tight horizontal spacing and loose vertical spacing creates clear relationships between letters. This visual representation works well if the words in and to are what is intended to be communicated.
Tight vertical spacing and loose horizontal spacing also creates relationships between letters. However, the words it and no have become the most obvious message.
These examples illustrate that grouping can be used to drastically manipulate the meaning of content, but most of the time the relationships created by grouping are more subtle.
Even subtle grouping aids in communicating ideas. When it is overlooked content relationships become either weak or misleading. Weak content relationships directly impact usability and cause users to expend more mental effort figuring out what is being communicated. Let's consider a simple form where a label such as First name is used to describe the empty form field, in this case a textbox, where the user will enter a name.
Is the visual representation of the relationship between the First name label and the form field misleading, weak, or strong? In this case it can be difficult to answer because there aren't any other visual elements to influence what's being communicated other than the encompassing box. Let's add some other elements and see what could happen.
Notice how the Age, Height, and Eye color labels are closer to the form fields above them than they are to the form fields they are intended to describe. It's quite possible a user may think the Age label is some sort of help text describing the First name form field. After all, Age looks like it could be related to the form field above it. Confusion and frustration arise when visual relationships do not match the underlying conceptual relationships.
In this example, the spacing is even between the labels and form fields. This spacing creates no visual relationships and requires users to expend additional mental effort deciding if the text is associated with the form field above or below it.
Clear grouping creates visual relationships that accurately reflect the underlying conceptual relationships. In this case the labels are visually related to the form fields via proximity, and our brains more easily put together that conceptual relationship. While not the only solution, this visual representation falls in the clear continuum.