4

Let me know if this is TOO vague, but I'm looking for a alternative to the "!" icon on a website. Not only do I dislike the way exclamation points make me feel (jittery, nervous, like I should be watching out for falling rocks).

What I want the icon to say is, "Hey, what you just did is going to cause a business problem later on.", but I think the exclamation is a universal sign of a system error or critical situation (which this is NOT).

Improve this question
2
  • 1
    I voted to close this as off topic because I believe it falls under "icon suggestions", but off the top of my head I'd say you could try a red circle with a line through it, a hand help up in a stop motion, or a red X if it will cause serious problems. – DasBeasto May 10 '16 at 18:53
  • 1
    @DasBeasto, while you're correct, I think the OP also asks for an alternative. Also, I think this is a very interesting question since the OP mentions a psychological aspect for himself, and this specific sign is known to be a very ambiguous one due to its implicancies in psychological aspects, not to mention low readability. As a matter of fact, your comment could make for a very good answer! – Devin May 10 '16 at 19:34
9

The next alternative to ! would be an informative i. It's not so loud. Give it a red circle as background and it says what you want.

Also a yellow triangle (like the background of some exclamation points) but with another character in it would be a great alternative.

That said, I think an exclamation point is the sign you are looking for. An information has an i, a (critical) exception gots the X and a warning has the !.

Depending on your application (and its colorfulness) green, yellow, and red balls would also do a great job.

Improve this answer
3
  • 2
    green and red balls would be no use to quite a few people with colour blindness – Toni Leigh May 10 '16 at 19:34
  • Good point. But the traffic light pattern is very popular and a possible alternative to an Exclamation point – Clijsters May 10 '16 at 19:46
  • 2
    popular doesn't equal inclusive UX - I'd advise the combination of colour and symbol in order to cover a greater amount of potential users - even real traffic lights don't just rely on colour, they rely also on position and sequence – Toni Leigh May 10 '16 at 20:05
2

First off, the circle with exclamation point does have compelling advantages:

  • does not take up much real estate
  • universally understood
  • draws attention (which is the point in general)

An analogy of traffic signs comes to mind.
Commonly understood, and most of them would also work pretty well in black and white or greyscale. Interestingly, the most prevalent sign in my google search for "danger ahead" (which is intended message here) is:
enter image description here

To offer some alternative icons (from the same analogy):
enter image description here enter image description here These may only be familiar in Anglo-Saxon countries (less familiar in Europe)

enter image description here enter image description here Similar but less clear IMHO

enter image description here enter image description here Communicate "Do not enter" which is not quite intention.

Improve this answer
0

People are very opinionated on exclamation points. Some don't mind them, while others are harassed by them, similar to you. However, iconography is all about familiarity. The idea is to convey a idea with a simple image, so part of that means relying on convention and what people are used to. In this case, you're basically talking about "caution" and the near universal symbol for that is a yellow triangle with an exclamation mark inside. That means you need to play off that at least a little. Yellow conveys the idea pretty well on its own, but only on its own. Combined with non-standard symbology, you're likely to confuse. You can probably get away with a yellow triangle, sans-exclamation point, since that conveys most of the standard iconography people are used to.

Other than that, I would say embrace the exclamation point. While it may convey rocks about to fall on your head to you, it doesn't to everyone, and in situations where there is real danger, the symbolism is red and skull-and-crossbones. Exclamation points are not actually used here. Even when the word, "DANGER" is presented in signs, it is not usually followed by an exclamation point. In truth, this reveals a subtlety of the language as an exclamation point only implies emphasis, not yelling. For yelling or excited utterances, all-caps is almost universally employed, instead.

Improve this answer
0

First of all the (i) icon suggestion is a great alternative and the one I usually reach for.

However, I think a lot of this depends on the context of the design. Often you may not need an explicit icon and you can call out this type of information by offsetting it from the page in some other way (space, shading, typography, etc.)

Another convention that could work is to use something to surround the warning text, like a chat bubble that suggests that the user is being spoken to. Again, this really depends on your design and the tone of the overall page/brand.

You could also look to the traditional publishing world for some conventions used in books as ideas. For example, a lot of coding books have a section at the beginning that highlights "conventions used this in this book" and there are often some interesting treatments that could work for your application.

Book example 1

Book example 2

Ultimately the best design will be the one that conveys your brand and tests well with users!

Improve this answer
0

It seems like you are looking for an 'attention' icon, which if you do a google image search you'll find that the hazard symbol is generally used for this type of message type. I think the exclamation mark is softened by the fact that it is wrapped inside a triangle.

If you could have some animation for the icon, a hand being waved about would be an interesting idea (as someone trying to get attention).

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.