This link to the Laws of UX was shared in I300. The fourth entry (Jakob’s Law) states that users spend more time on other sites than on your site. If you site works like other sites, then users can use it. Conversely, other sites should work like yours. In other words, all sites should work the same! This really indicates that users value and benefit from consistency in user interfaces. The eight entry is the Law of Proximity; users perceive things that are close together as a group of related things. These two are singled out because of their relation to 4 graphic design principles we saw from The Non-designers Design Book.
- Proximity
- Alignment
- Repetition
- Contrast
Repetition is all about consistency in look-and-feel, which can strongly supplement the consistency in interaction mentioned above. Contrast is the opposite of consistency, and it’s membership in this list indicates its power. It’s good to be consistent, but it’s also good (even better?) to deliberately know when to not be consistent by introducing contrast. The odd person out in this list is alignment since it doesn’t have as direct a connection to the Laws of UX. It’s not much of a stretch to relate alignment to the Law of Uniform Connectedness, though, for alignment is a way of connecting elements. Although the line of alignment is invisible, the user can still be aware of its presence.
The basic way to apply these graphic design principles to the surface plane is to:
- Be consistent (repetition) with typefaces, colors, sizes
- Use strong vertical and horizontal alignment
- Use whitespace freely to separate groups of elements so that the members of a group can be in proximity
- Introduce contrast deliberately to make elements stand out
In addition to using these principles when dealing with the surface plane, use them in your description of your design decisions. Describe exactly which colors, sizes, and typefaces are consistently repeated in your design. Define and describe the groups that are in proximity. List the ways in your design aligns its elements, and describe which contrasts are deliberately introduced. Then recall that users will read your screens somewhat like a book( left to right, top to bottom in English) and note how contrast can be used to deliberately focus users’ attention to elements that deviate from this flow because of their contrast.
Other Graphic Design Principles
This page by John Lovett gives an alternative presentation of surface plane design principles in the context of graphic design. Like many designers, they are categorized as “Elements of Design” and “Principles of Design”. Each are given below.
| Element | Definition |
|---|---|
| Line | 1D Things: Strokes and boundaries between regions |
| Shape | |
| Direction | The orientation of a line |
| Size | |
| Texture | |
| Color | |
| Value | How light or dark the color is |
| Principle | Definition |
|---|---|
| Balance | Content is balanced when the eye is drawn to the center and unbalanced when drawn to the edge. |
| Gradation | Whether or not and how much an element changes. For example an object may be a solid color or use a gradient in value. |
| Repetition | |
| Contrast | |
| Harmony | A perception of similar elements being used |
| Dominance | A contrasting element is able to stand out, drawing the eye. |
| Unity | An effect resulting from sufficient connections between different elements of a design |
Looking at these two lists and comparing to the 4 simplified principles from the start of the page, we can see that the elements are lower-level things the designer has control over to achieve an effect identified by the principle. Color can be varied to create contrast, for instance. Size may not be varied in order to achieve repetition. The Principles given in this section are just more expansive than the simplified 4 we saw first. The elements are the things we have control over when dealing with the surface plane, and the principles can inform the effect we seek. At a minimum, we should be able to articulate which elements we are using and what the intended effect is. Do we seek to keep the user’s view in the center of the screen, or do we attempt to draw their view somewhere else. Do we strive to create balance or harmony, and if so, what are we doing to achieve that effect?
Gestalt Principles
Many of the Laws of UX that haven’t been covered already are known in other circles as Gestalt Principles. The definition of gestalt in this context means perceiving an organized whole, so the Gestalt principles relate to how users perceive multiple elements in a design as one. The Gestalt principles are
- Proximity – We’ve seen this one already.
- Similarity – We’ve seen this one already, but we called it repetition.
- Continuity – Relates to the Law of Connectedness and to Alignment although more about the principle of the line from the previous section.
- Closure – The viewer perceives a complete shape even with incomplete outline
A good description of their relevancy to web design is worth reading. We won’t emphasize them anymore in I441. If you’re aware of them or learn them, by all means use that knowledge in your designs and in your design rationales.