Facebook

5 Principles to Help You Achieve Visual Clarity In Your UI

Closeup of iris

Humans are allowed a finite amount of time each day, and with all the demands of post-postmodernist day life, a designer must come to realize that an application’s users only have small attention span to allocate for such things. That is what separates these tools from humans: they shouldn’t demand a long amount of attention as most humans normally do. Although, the fact that these tools still need to interface with humans, they still need to be designed around the ideas of how humans perceive things. These set of ideas called the Gestalt Principles—developed by German psychologists back in 1890—have long been used by designers to help them clearly communicate ideas properly through the effective management of shape density and whitespaces.

Similarity Icon

The eight rectangles above are normally grouped together by the viewer’s perception because they are of the same shape.

Proximity Icon

The four rectangles on the left side are grouped together by the viewer’s perception because they are closely positioned beside each other as opposed to the three rectangles on the right, which are positioned farther from each other in relation to the ones on the left.

Closure Icon

Humans always have the need to fill in the blanks of incomplete shapes. Instead of perceiving the two L’s above as two separate objects, one would normally group them together, and perceive them as a square.

Continuation Icon

Although, the whole idea of continuation, by itself, means that the eye travels through a line to another point in the space where that line leads to, one’s attention is naturally more drawn, and more likely to follow the line on the left—what a lot of designers would call a leading line—than the straight line on the right. This would probably support a study that humanist typefaces are a lot easier to read—ones that have more curve (ie Frutiger, Interstate, etc.)—than Grotesk typefaces (ie Helvetica, Aksidenz Grotesk, etc.)

Figure-Ground Icon

The human brain has a tendency to group objects as background and foreground. A rather crude example, but still gets the point across—in the two figures above, you’ll notice that because of the outline on the figure on the left, it is perceived differently from the figure on the right, since it has a complete background.

Humans normally like organization. It helps them process information faster when it exists to have visual clarity. It would greatly help your users to efficiently use your app if such thing dictates how your interface is designed.