Is a slight icon inconsistency ok if the icons are clear?

Question

So I am designing something that will tell the user whether something is online or offline. The problem is, I cant decide on a final design for my icons. The various designs look better on different pages. For example, on this page, I think the icon on top looks better because it is easier to read (the numbers are a small font size on a large screen.)

On the other hand, when there is a vertical list, I think its easier to read the other design (one on the right) mainly because I can make it larger on the vertical list so users can easily distinguish whether the arrow is up or down. When this design is too small, it can be difficult to see the arrow shape. The one on the left seems like it can work for vertical lists, but I think the circle provides a cleaner UI when there is a large amount of items. Would it be a problem if I used these icons interchangeably or should I just pick one and stick to it?

Answer 1

The inconsistency is not so serious in the shape, but in the size. In the first example, both icons have the same height:

On the second option, the right icon is almost twice as tall. This causes a clear tendency to choose it as the preferred one, but it's not an objective comparison.

If the question is only: is it valid to use a figure/ground change in icons of the same meaning? the graphic content should be consistent. Otherwise, the answer will always be: of course, use the larger one.

Putting the left and right icons at the same height, the answer is not so obvious:

---

Consequently, the first example with the numbers is preferable only the arrow because it offers a better shape contrast, the numbers have mostly curved strokes and the small circular icons do not offer enough contrast. In the second example, the right icon preference is not for shape, but for size.

Answering the question, there are several graphic resources to avoid the figure/ground effect change in the same icons, I would keep it for extreme cases. A good contrast of direction and color is sufficient, and allows to maintain a graphic coherence, even though the size varies from one group to another:

Answer 2

As Izquierdo told you, arrows have a meaning. They convey trending, movement, transfer. If you're using an arrow pointing downwards to tell me something is offline, I'm actually going to presume that I'm downloading something, even if the color is red.

That said, as a rule of thumb, I understand that if I'm second guessing my work it's because there is a better solution and the one I'm working on should go straight to the trash. Especially in this case, where the workaround would be to confuse the user with even more symbols. You shouldn't allow yourself to overwhelm the user with symbols because you couldn't find a solution to a problem.

Instead, this looks like a problem that should be solved with some research and by drawing some options and doing A/B testing. For example, you could visit icons8 and search for "Connection", make a list of the symbols that could properly convey what you want and make a variant out of them for on/off states.

Also, don't rely too much on colors. Some people have trouble seeing them, and some people have faulty hardware, and some people just use less colors on their screens. So your icons should be designed with contour contrast in mind before you get to color contrast, if you do.

Answer 3

Consistency is more important than one might initially think. Users are surprisingly perceptive and may (subconsciously or otherwise) ask themselves what is being conveyed by the change in appearance in a given context.

For instance, users may reasonably suppose that the enclosure is a deliberate choice on your part to indicate that in this specific context those icons are interactive, and that you're indicating the effective hit area of the button.