5 Principles to Help You Achieve Visual Clarity In Your UI

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 Principlesdeveloped 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

 

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

proximity

 

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

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

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-groundThe 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.

  • Billy Nicart

    A minor thing, this confuses me: “you’ll notice that because of the outline on the figure on the right, it is perceived differently from the figure on the left, since it has a complete background.”

    It is the figure on the left that has outline right? Or I’m just confused o.O

    Overall, nice article. (Y)

    • samuelbacay

      That was a mistake. I had them reversed. I was referring to the figure on the right when I wrote ‘left’.

      Good thing you brought it up. Thanks!

  • Ardee Aram

    Wonderful thing, when human physiology and psychology is applied and used to everyday tasks.