New answers tagged

0

Agreed about threshold color coding, as that's the point of using color in these status type of visualizations. Consider ditching green and using neutral when there's no action. Then, for the ones where the user needs to take action on warnings or something bad, use yellow, orange, red to go from bad to worst repectively. This may vary internationally, ...


0

I find a dark on light works well, but not a white background. I find a muted light color or grey works better than pure white when using backlit LCD or LED monitors. I find black on #DBD2BF, #C5D3D6, #D6C7CB, #BDC7BD, or #C2C2C2 work as good examples.


2

You can also try playing with typography with some pictogram. That might help in this case. I had a similar issue in one of my project and it worked. Different kind of animations (shake, wobble, rubber band etc.) are also helpful. For example in case of a hard alert, a shaky animation will serve the issue. That will not only attract the eye, but also ...


3

Use a different shade or hue of red/green/yellow/neutral, and use it consistently for your positive/negative/warnings/neutral. Also use iconography along with the colors to enforce the message. For example, use a light red with 1px border along with an "!" icon on all error messages. Ensure that you do not use your primary website color in any messages or UI ...


2

Ok this answer doesn't answer the question, but it's longer than a comment and fun to mention, so I post it anyway. Blue is a new color It turns out that we cannot see the blue color, until we have the name for it. Or to put it as philosopher Wittgenstein, "the limits of my language mean the limits of my world" No one could see the color blue until modern ...


-4

Last week I was in China, in Xi'an. A lot of buildings there also have blue roofs. The local tour guide did not know the reason for it, but guessed "cheap paint". Basically any color could be used. Just a matter of taste and money. In user interfaces: Green is normally an 'ok' color. Red means often 'danger' or 'attention'. There is no real meaning related ...


20

The advantages of Blue include: Blue is beneficial to eye health: The 465 nm to 495 nm range (light blue) helps regulate our Circadian cycle. https://www.reviewofoptometry.com/ce/the-lowdown-on-blue-light-good-vs-bad-and-its-connection-to-amd-109744 Blue is the "best" international color: blue is considered to be the safest and most positive color globally....


-5

I think this is a common bias of programmers that I always want to avoid. Blue should probably the preferred color as a "default theme". For example on StackExchange, the developers are not supposed to know what the culture a new subsite would have. And blue is safe and understandable with this justification. It's much better than everything being red or ...


34

This very detailed discussion on Quora provides some suggestions for the popularity of blue in design. Some of the ideas: Blue is one of the only dark colors not associated with a specific meaning to the user (e.g. red = error). Traditional perceptions of colors in society. It doesn't stand out because the eye doesn't see it as well, so it is a good ...


113

There are a lot of reasons to use blue, I'll list a few of them: Give a sense of innovation. Often, companies will use blue because it feels calm and professional, this combined with a smart layout will give a sense of innovation and comfort. Sources: Psychological Properties Of Colours, The Psychology of Color in Marketing and Branding, Color psychology ...


7

Have you considered that blue on average is the worlds favorite colour? https://today.yougov.com/news/2015/05/12/why-blue-worlds-favorite-color/ The decision to use blue would be a subconscious decision for a lot of designers and even more worrying.. maybe the users colour preferences aren't being considered!


0

If you're using a charting library with your data, you could possibly set up a color rule on the queue series. So if it goes over a certain threshold, it could change color from green to yellow, or another "warning" type color. Here's an example where the bars change color depending on their value: https://www.zingchart.com/docs/json-attributes-syntax/...


0

A fun way to do this is with one sided borders with colors that indicate where a user might be on the page. I have used this with a slight transition to the border width increasing on click/transition. heres some code for ya: .active{ background-color: @activeGray; border-left: 4px solid @ghOrange; transition-property: border-left; transition-...


0

It's always a good idea to provide users with feedback and to indicate where they are/packages are in process. So the idea is right, the only issue I can see (maybe you didn't indicate it in your example) is that it will be hard to tell what has happened and what is happening. Basically what stage the package is in. I would suggest to use something like this:...


0

With pie charts, if you have a 500 item queue and 1 item is 'expired' then it simply won't show on the chart - it's just too small. I think we suggested that you use stacked bar charts instead of pies: Data visualization for queued items. The height of the stack can show the length of the queue without crushing the 'expired' items.


3

You might be good just switching arrow directions (pardon the ASCII art): Read: arrow points away from the icon []-> Write: arrow points towards the icon ->[] I'm basing the suggestion on the data flow direction (when reading, data "goes out", when writing data "goes in")


1

Cubase (digital audio workstation) uses red for writing and green for reading automation values (it also uses 'W' and 'R') BUT you should never rely on colour for indication of status - especially if you're using red and green! As has been pointed out in the comments, your icons are not clearly defined. Make sure they're easily readable in monochrome before ...


2

No, there are no standard colours used for "read from" or "write to". So other than choosing icons which are clear in the first place (those that you show are not), the important part is that you are consistent in your colours if you decide that you need to have different colours in the first place.


2

Short answer: it helps to reduce eye fatigue. There are three types of cones in the eye, each responsible for sensing a different range of wavelength. If you stare at one particular color for a while, those cones responsible for sensing that color will become fatigued, and your perception of color will become skewed (this is why if you stare at an inverted ...


1

Because it's a neutral color that doesn't strain the eye and allows for good legibility when using black or white fonts, and its neutrality aids to place the focus on the real content window. The shade of gray will vary depending on the software, of course, ranging from a light gray to a very dark gray. As for studies, here you can see why to use gray and ...


0

Any brightly coloured background is a bad UI, for physical and physiological reasons which I expanded on in this answer Should software for 8 to 14 year olds be colourful and "childish"? As for how to draw attention to an error message against a pink background: you need to increase the contrast between the red background and the pink background. ...


0

It's cool to care about colorblind people. I suggest to think a bit outside the box and to put a colorblind option in the app settings. This way you can switch to more adapted colors


0

How about simply a green circle for good, and a red circle for bad? I don't see how this portrays less information than your arrows - assuming that they universally agree with your assessment's that down in one category is bad, and up in another category is bad.


5

Perhaps instead of unprofessional emoticons, you can use a simpler symbol to indicate a good or bad result. In this case, I used a tick and a cross: But since the indication is probably more important than the direction, we can place greater emphasis on the ticks and crosses: Note how the arrows are now smaller and faded towards the background colour, ...



Top 50 recent answers are included