When to circle a symbol

Question

I was wondering, if you have any basic rule whether to use a symbol, e.g. +, just plain or in a circle, e.g. (+). One example is the star (★) to favorite this very question (on the left hand side), it is circled. Whereas the star in Chrome to favorite a website is not circled.

Is there a different meaning or perception behind it?

For myself, for example for arrows, I could think of circled means action (go, next, etc) and plain means navigation (scroll, move right, etc).

---

When do you use circled symbols?

Answer 1

The reasons for placing sign into shape (circle) are:

• Visibility, as @cyborg86pl pointed. As sign itself has small area, it's just bare visible and could be missed easilly. Shape has more large area, so a user notice it first, then sign inside it.
• Clickability, as the shape is responsive, too. And according to Fitts's Law, large targets are more easy to click.
• Aesthetics. In a case you have several symbols with different areas, they will look unbalanced, as one could be perceived much heavier than another. So placing these signs into equal-sized shape gives more ballanced view.

So if you use sign as separate control (without any label) and the area of the sign is small, it's better to enclose it into some shape, but then use this trick consistently.

Answer 2

I think there is no difference, when you use a shape symbols, like star, you mentioned. On Stack Overflow SE site fav button has no circle, just an outline, so it's just another set of icons here on UX with that circle.

BUT

It's about visibility, and making user sure, that a button is a button, when you use typographic symbols like +, ?, !, i (for info), etc. Especially when the buttons are little. They may just look like a part of a non-interactive text, so when you give them a background, it's more likely to be recognized as a button.