We were asked:
“Do you know whether it is better to use squares or circles to indicate something on a screen shot? I use circles with thin border & compliment with an arrow. My colleague uses squares & the Subject Matter Expert prefers circles. I was just wondering whether there is a best practice for this or not.”
It’s a good question.
Gestalt theory states:
“Elements with a point of interest, emphasis or difference will capture and hold the viewer’s attention.”
This indicates the reader’s attention will be drawn towards contrast, which means the element that is different from others in some way. So there is an argument for having a different shape if that element doesn’t stand out. However, shadows, colour and thick borders can also create contrast effectively.
We would say if you are highlighting a button, or some area that is roughly square or rectangular (such as a window or a field), use a square or rectangle. You can add emphasis by making the surrounding area darker (so the key area is in a spotlight) or perhaps an arrow.
You could use a circle if you wanted to point to a spot or an area that is small in size. Circles require less space, so they are good where you need to have a number of elements highlighted within the same screenshot.
Arrows are often affordances, something that affords the opportunity for that object to perform an action. They are good for highlighting an action. They can also work to help the user focus on an area of a screen, and are often used for that purpose.
It also depends on the graphics tool you are using. If it’s easier to create circles than squares, you’re more likely to use circles. If it’s easy to add an arrow, you’re more likely to use arrows.
What do you prefer: squares or circles? Do you have standards for which to use, and when?