Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I am currently designing a panel in my business application that shows a table of data to a user. The data in the table is the company's percentage (this is equated by many different values), whether or not the company has a serious violation, and whether or not the company has an overall alert related to this data.

I have currently designed the panel with a red checkmark showing that the company has a serious violation. However, recently one of my coworkers brought up that this does not make much sense since it is a checkmark and suggested to make it an "X". I am torn between the two and was wondering what people thought from a usability perspective.

Two mock ups showing current panel design with checkmark and suggested design with X

share|improve this question
10  
A checkmark implies "yes" and thus "this unit has a serious violation", while an "x" implies "no" and thus "this unit does not have a serious violation" –  Marjan Venema May 2 '13 at 20:46
    
Is there a significant difference in the response of the user based on whether it's a serious violation or an overall alert? –  norabora May 2 '13 at 22:53
1  
What is the logic that determines whether there is a serious violation or not? I think if it reflects a state/mode then labeling this information with different colours and/or icons is the best way to go. If it is a YES/NO property (and the users understand this to be so) then it doesn't matter how you represent it as long as the labeling allows the user to recognize whether it is present or absent. To me it looks like if the % value falls below a certain threshold then it has a serious violation, so perhaps a legend is more appropriate? –  Michael Lai May 3 '13 at 0:02
    
I would use an unhappy emoticon. –  Kaz May 3 '13 at 2:01
21  
How about a red exclamation mark? –  mplungjan May 3 '13 at 9:15
show 2 more comments

7 Answers 7

A checkmark represents something positive - usually 'good' or 'correct', so you shouldn't use it to represent something negative like 'serious violation'. I would focus on using either a X or a warning sign, with a preference for the warning sign.

Icon aside, I don't see any good reason to have columns for both 'serious violation' and 'Overall alert'. The 'Overall alert' is redundant and the table will become more usable without it.

In fact you probably don't even need to have a column for a warning, and can show a warning with just colour and a warning (or X icon).

Here are two rough examples. My preference is for the first one (but with better design):

enter image description here

enter image description here

share|improve this answer
3  
How is "overall alert" redundant when rows that are not serious violations also have alerts? –  zzzzBov May 2 '13 at 20:50
8  
+1 largely for the warning symbol. Use what people know. - Neither the check, nor the 'X', make sense here, because the OP is confirming a negative. –  Izkata May 3 '13 at 1:16
1  
@JohnGB The "Serious Violation" and "Overall Alert" appear to mean two different things so it doesn't make sense to combine them as you suggest. –  norabora May 3 '13 at 16:15
1  
I like your design. However, I would caution against asserting that a checkmark represents something positive — in some cultures it is in fact negative. en.wikipedia.org/wiki/Tick_(check_mark) –  200_success May 4 '13 at 4:40
1  
@200_success No symbol has a universal common meaning across cultures, but when we are dealing with the internet, we often have go with whatever is a majority trend in understanding. In Sweden and Finland, people have most likely had exposure to websites from other countries that use a checkmark as a select or positive statement, so it's unlikely to confuse them. Using a cross is however likely to confuse many people from other countries. –  JohnGB May 4 '13 at 13:41
show 4 more comments

On closer inspection of your question, I am revising my answer. What you're trying to convey is "Does this company have a failure (i.e. non-compliance to some standard)? Yes or No". In which case, color is irrelevant, it's not a failure, and a check mark is somewhat standard.

Consider a table where multiple types of the same thing, like a tablet computer, are being compared. The tablets are listed on the left side with the features they do or don't have listed along the top.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Checks are used to indicate the presence of the feature. In your case, the checks indicate whether the company is in violation of something or has an alert. Now, I think the confusion comes in because you have an alert icon for the "Overall Alert" column. If you had check marks for both columns, it would be more clear that you're conveying a "has this, doesn't have this" relationship instead of "alert! pay attention! failure! do some action!". If, however, you do want to encourage the user to act based on the data, then my original answer holds:

Using a red checkmark would not translate for users with red-green colorblindness, as well as some other types of colorblindness. Checkmarks generally represent success and shouldn't be used when you're trying to convey a failure situation. The "X" is generally understood to mean failure (see form validation and other errors all over the web).

Twitter form validation with X used to indicate invalid email and check used to indicate valid entries

However, made clear by our answers and @Marjan Venema's comments, the column title is misleading in conjunction with either a check or X. An alert icon, or better yet, an icon plus text saying something like "X has failed" would be more correct.

share|improve this answer
    
How does this relate to a unit in OP's table having or not having serious violations? –  Marjan Venema May 2 '13 at 20:44
    
His question is about the icon used to indicate the serious violation, which is equivalent an icon used to indicate a failure in a form validation. It's just an icon to let the user know that a problem has occurred. –  norabora May 2 '13 at 20:48
    
Yes, I understand that you use a tick for success and an "x" for failure. Does that mean you are suggesting that OP should use the tick or the X for a unit that has serious violations? OP's use case has after all nothing to do with success or failure. Just with something being or not being the case. –  Marjan Venema May 2 '13 at 20:52
3  
I really like new mockup plus explanation. Great edit! Would upvote again if I could. –  Marjan Venema May 3 '13 at 7:49
1  
@norabora - I like the way you presented your answer, and I agree with your statement at the end about it being better to use '...An alert icon...'. But, when you say the "message" is 'Does this company have a failure'... I was thinking the message is (should be) 'Is this company in compliance'. In this case, I think the checkmark is definitely not appropriate, an X might be OK, but an icon is probably best. –  Kevin Fegan May 4 '13 at 1:17
show 2 more comments

A red tick mark seems ambiguous, "Is it acceptable but not good?", "It is completed but has some problems?" or something else? Since, check mark is something which represents completion or acceptance/approval.

For violation, you might use a X like John suggested or you can go for a circle with a backward slash (the symbol for prohibition).

share|improve this answer
    
In this case a red tick mark is actually spot on. It is "yes" and it is not good because we are talking about serious violations. A check mark does not necessarily imply something positive. Its most basic meaning is simply "yes, x is in fact the case". Check marks could also be used to tell/ask whether someone is a liar. The tick then just means (s)he is in fact a liar... and does not say anything about what value we place on someone being a liar. –  Marjan Venema May 2 '13 at 20:45
    
I think my quote misled you. I said that check mark represents completion or acceptance (yes). BUT, I disagree with your interpretation of the appropriateness of the the red tick. –  rk. May 2 '13 at 20:53
    
Fair enough. I just find it curious that something that just means "yes, done, the case" has come to be so deeply associated with "something positive" or "something good" –  Marjan Venema May 2 '13 at 20:56
    
@MarjanVenema Again, I am not associating it with those things. –  rk. May 2 '13 at 20:57
    
Huh? What about the "... acceptance/approval"? Never mind, it may just be that it is way past my bedtime after a headache filled day... –  Marjan Venema May 2 '13 at 21:02
show 2 more comments

I would use a red exclamation point as the Icon in the column (similar to the Icon JohnGB used. My first thought was to rename the column so you could use a red X. For example if you renamed it to 'Conforming', 'In Good Standing', 'No Violations', or 'Playing By the Rules', then you could use a red X to indicate that the company is NOT conforming, or has a violation. A red X usually means that something is not in what ever state the column indicates, so a strict logician could argue that companies with a red X were not in violation.

Definitely stay away from the red check-mark, as that really sends a conflicting message.

A red or orange exclamation point would really be most clear, and easiest to understand.

I also like the Idea of combining the 'Serious Violation' and 'Overall Alert' Columns. Call it something like 'Health' or 'Standing'. Use Red Xs for serious Violations and orange exclamation points for alerts.

enter image description here

share|improve this answer
    
In general, I think this answer is really helpful. However, if the "Serious Violation" and "Overall Alert" columns were combined then there would need to be some kind of key or legend underneath the table (or somewhere nearby) to explain what each of the symbols meant. –  Squig May 8 '13 at 8:08
    
An unobtrustive key at the bottom could be helpful as long as it wasn't distracting or clutter, but what further information do the words "Serious Violation" and "Overall Alert" really convey over the icons. If a user is concerned about the company in question, he or she just needs to click on the company to further investigate. That said it could be helpful to replace the '!' in the orange triangle with an 'i' so that the two icons are not so similar. –  hhamilton May 8 '13 at 13:11
    
The OP doesn't say what information is conveyed by "Serious Violation" and "Overall Alert" but it's reasonable to deduce that the OP used these specific terms because they have specific meanings (otherwise, they could have used generic terms such as "Error" and "Warning"). Users will probably work out that a red exclamation mark is a generic error and an orange warning triangle is a generic warning. However, without headings or a key, they are unlikely to interpret these icons as "Serious Violation" and "Overall Alert". –  Squig May 9 '13 at 14:09
    
You are right. They probably do have specific meaning for the application. Too bad they have such vanilla names though. I might make the names more descriptive of the underlying conditions they denote. I mean, if for example "Serious Violation" means something like (for example) "Account Delinquent for over 90 Days" I would rather see the more descriptive heading. –  hhamilton May 9 '13 at 17:53
add comment

I had to make a similar choice today and this is what we decided:

  • Green check mark for correct
    Green generally describes a good thing and the check mark translates for Daltonian users (people with red-green colorblindness) too
  • Yellow triangle for warning
    Yellow is generally the color for warning signs (ex: road signs) and a triangular form for Daltonian users
  • Red, filled circle for alert
    Red is generally used for alert systems in real life (ex: red lamp for safety issue) and circle is generally used in road signs to specify an interdiction.

We wanted to use a red circle with backslash, but in order to see that well, it would need to be more than 32 x 32 px and we are limited to 16 by 16 px.

We aren't able to use a red check mark because there is a conflict between semantic color and semantic form.

Finally, we aren't able to use a red X because X's semantic use is for deletion, close in windows or close pop up button.

share|improve this answer
1  
A red circle seems unintuitive to me. I would be left looking for what it meant. A Red X is very clear. –  Austin French May 3 '13 at 1:06
    
To be sure the user dosen't think it is a delete action he knows in all other app and software, you can imagine to draw the X in an HEXAGONE like a STOP PANEL –  pierre lebailly May 3 '13 at 4:08
    
Oops : an OCTOGONAL Stop Panel –  pierre lebailly May 6 '13 at 4:51
add comment

This is actually cultural thing. In US and Germany, X is commonly used as check mark. In most of the countries it is . In Japan its O mark is used.

share|improve this answer
    
I have never seen an X used as a check mark in the US, they are two very, very different symbols. –  Austin French May 3 '13 at 1:08
    
Yes, in Germany we usually use X to mark a selection. In that case it's non-judgemental. But ✓ is always understood as something good. So I would recomend to use a X. –  Chris May 3 '13 at 7:12
4  
+1 for recognizing cultural influence on how the symbols are interpreted. –  Marjan Venema May 3 '13 at 7:47
5  
@AthomSfere I guess you don't remember older versions of MS Windows, then :) guidebookgallery.org/pics/gui/settings/appearance/win31-2-1.png –  scottishwildcat May 3 '13 at 10:19
    
I guess I had forgot about that, or become very unaccustomed to it as well. –  Austin French May 3 '13 at 11:09
add comment

I'd advise caution; a red X can be ambiguous. In a lot of systems, this symbol is associated with a deletion behaviour.

I work on a system with this symbolic meaning. In situations as you describe, we've used a white X in a red circle to indicate error/violation behaviour (like Visual Studio's Error symbol), and a sufficiently different white X in a red square to indicate a soft/slight error.

To fit in with your warning style, perhaps you could use a red X in a red circle. I feel the circle will sufficiently differentiate the symbol from being a deletion behaviour and help extend your visual design language.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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