Provoke visual behaviour using Gestalt – the principle of Smallness / Area

I had started to describe the effects of Gestalt used by my team when they were developing screens.

Excuse me for having you wait so long before coming back on it, but the past year, I’ve had but very little time to write new posts.

So, here it is, at last: the rest of the series.

The idea is to position a zone above another one in order to create the perception that the smaller one, the one above, is in fact real content, whereas the bigger zone behind it works as a background.

It is one of the elements that increase the saliency of an element within a page.

It goes without saying that this principle in itself will not be enough but it complements the principles of similarity, proximity, good continuity, …

Just have a look at the two analysed screens.

Gestalt - Smallness area

On the central buttons of the Ethias site, the set of basic principles is strengthened by the principle of Smallness/Area. This gives the buttons added saliency.

Gestalt - Smallness area

Gestalt - Smallness area

One Comment

  • Marc, I follow your posts often and really enjoy your contributions. However, this one I am not getting. Could you explain a bit more, compare and contrast the two screens? Also, I understand gestalt principles, but wondering if any of these have been tested for conversion, etc. Would be interesting to know. Thanks, Christopher

Submit a Comment