Edges, contrast and some dots

How do we perceive our environment? Think of our perception as a frame that moves in front of a background. It constantly scans for figures on a background that seem most relevant to us.

red circle around streets light

Interesting is that our perception leads this frame according to certain mechanisms. One of these mechanisms is that our attention is looking for edges. Edges with clear contrast are easier to grasp and separated from the background. Since we are in UX, let’s make a graphic example. A dot can be found in the following box.

Box with no dot inside of it

Do you see the dot? It is there. Promised. If you click on it, you will win a pot of gold that is waiting for you at the foot of a rainbow. Ok, I am not serious here. You cannot see the dot, because it has the same colour as the background. That means, yup, I inserted a 25x25 px dot in the upper right corner no one can actually see.

Sweating smiley face

Can you see the dot in the next box?

Box with one dot inside of it

This dot may be more visible to you, because it has a clear contrast in colour and therefore has a perceivable edge. Why should you keep on reading, you ask? Well, we can add more dots if you prefer. Let’s add more dots. By the way, without counting, how many dots do you see in the box below?

Box with five dots inside of it

Before you get the wrong idea, this is not a test. Our short term memory defines the amount of elements we can visually process at once. There are actually 5 dots inside the box above. What about the next example? How many dots are in the following box?

Box with six dots inside of it

Have you been able to tell right away or did you have to count? Though we can easily grasp 5 elements, most people cannot instantly distinct the number of dots to be 6. They have to count. But what happens when we order the elements like in the next example?

Box with six ordered dots inside of it

Now the number is quicker to scan. Why? Our mind groups together two rows of threes. Also we have learned this formation of dots to be a symbol.That way our mind refers to the information it perceives with information learned previously. Now this dice also displays some other parameters that make the difference whether we can perceive something easily or not. These parameters are: Proximity, Contiguity and Similarity. The more these elemets share those properties, the better they can be grouped.


Let’s move up to higher levels of the perception and memory. Elements can be grouped on all levels of the process. Elements at the beginning and at the end of a group stick better with the user. This is called ‘PRIMACY’ and ‘RECENCY’. Let’s move away from the dot examples to be more practical.

A sad smiley face

Imagine you want to get a message across. Let’s make the message to be 16 sentences long. 4 sentences of introduction, 8 sentences main section, 4 sentences conclusion, as boringly but efficiently illustrated below.

hierarchic table

To understand the effect, you have to know the following: Our brain is always wired to seek for orientation. The less ambiguous the information is, the better for information retrieval.

Primacy: The first sentence is not only the first of all other sentences, but also the first of the introduction and the first of the whole message. It is the first on all levels.

hierarchic table with markers

Therefore it shares 3 edges (purple). This is easy to process for our mind, due to the unambiguity of the location of information. The 5th sentence, however, has only 2 edges (orange) and has less properties for orientation. Remember, we are always seeking for orientation.

Recency: This is the same effect, only with the last element of a bulk of information. Studies have indeed shown that content in the middle of a group of information is most vulnerable for interferences and mistakes.

I don’t want to go into detail how powerfull this knowledge is for marketing purposes. But one hint. There is one really bad area for 'call to actions' (CTAs). Also, one should make sure that the whole group is easy to scan for orientation purposes.

Have you ever wondered why we see shapes in the clouds? This and more here.