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?
In my experience, using arrows or borders around UI elements in the screenshots is not a good practice. It adds to the cost without adding any real value. If the topic is well structured and if the instructions are clear enough including screenshots, we should expect users to understand the topic and follow the instructions. If a clear topic and a screenshot does not help, I doubt if labels for specific buttons or icons can help.
And labeling screenshots can be really costly. One, every time (if) the product is rebranded or some new features are introduced, there is an impact on the screenshots for existing documentation, which means rework on screenshots plus added efforts to label these. Two, if the documentation is translated to multiple languages, we need labelled screenshots for all versions. Too much task, without any real value.
PS: There is one school of thought who in fact vote against using screenshots at all. I prefer using screenshots because the help topics are often public now. We all love Google and when new customers use Google to learn about a product, the knowledgebase articles without a screenshot may be of little help, comparatively.
I’m one of those “non-screenshots” types – one of my doc projects leaves space for them, but never fills them in because the help is only accessible from within the software – so you’re already looking at the screen when you launch the help. Saves a pile of time not having to update them ;>)
If you want to highlight an area (which is mostly rectangular), squares often take up less space. So I typically prefer squares.