Hot answers tagged

571

This phenomenon is called banner blindness. Your labeling looks like a banner advertisement and is therefore subconsciously skipped. Users have been conditioned to ignore complete sections of content if their previous experience taught them that it always contains irrelevant stuff. The more attention the banner tries to pull, the more it's ignored. If you ...


260

The banner is beautiful but the style does not match the rest of the page. You know what is everywhere on the Internet with unmatching graphic styles? Ads. As others have said, the problem is that users are not considering it as part of the content. It appears to be an ad, so they skip it. I think the crucial action to be taken is to integrate it deeply ...


244

There has been a lot of research on this topic since the 1980s and a lot of it still holds true today. One study from the 1980s states this: However, most studies have shown that dark characters on a light background are superior to light characters on a dark background (when the refresh rate is fairly high). For example, Bauer and Cavonius (1980) found ...


121

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 ...


116

It's the design. Visually it's not part of the site or page. It's a square of content that doesn't belong to the site visually which indicates it's an advertisement to users. Design the banner to be part of the site visually. The most simple way is to design it out of its surrounding design. This makes it part of the site visually. Below is an example. ...


108

With your examples of Curtains, I would go with Black and White. Easy psychology and Cosmetic. Black: If it's too bright in the day, you'll happen to easily see the Black beads/string and it also means pulling it down will darken the room. White: If it's getting too dark, White will be easier to notice and will signify that pulling it will lighten the ...


103

There is no problem to work as a UX/UI designer, as choosing color is just a minor part of the usability process. There are lots of other activities that the UX-er should do, like usability testing, checking analytics, conducting A/B tests, writing reports. Choosing color is more like visual designers work. People often are confused between the two ...


94

High contrast such as black on white can cause eye strain. Also there is evidence that it is particularly bad for people with dyslexia. For further info read articles at UX Movement and The Bristol Dyslexia Centre. WCAG provide details on what is acceptable colour contrast, but dont state an upper limit. Personally, I like to use a different algorithm that ...


84

It hurts the eyes Certain colors and color relationships can be eye irritants, cause headaches, and wreak havoc with human vision. Yellow, pure bright lemon yellow is the most fatiguing color. Why? The answer comes from the physics of light and optics. More light is reflected by bright colors, resulting in excessive stimulation of the eyes. Therefore,...


79

I'd go with a color that'll always retain stark contrast. I'd also avoid venturing too far outside of the styles that that users are generally familiar with. Because you're working in an atypical style, if you deviate and use unfamiliar elements you may risk confusing a percentage of your users. Here's what i think i'd recommend.


71

I'm not exactly sure how your app works, but from what I understood, I would use a color like grey for the OFF buttons and a brighter color (the primary color of the application perhaps) for the ON buttons to avoid your problem. Also I'd make use of icons to serve as an indication for Hot/Cold.


69

I would go with something in the shade of the background, but have a more red text in the alert. You can add a border in the shade of the text to make it stand out as an error more, as well.


67

Just a guess: If they used black (minimum intensity for all three color channels) or white (maximum intensity for all color channels) you might think they are off, so instead they use only one of their base color channels (out of Red Green Blue). Red light may remind some people of an alarm and others of a district in Amsterdam. Green may seem like ...


62

Dark on light vs light on dark themes can have multiple effects, such as: Bringing attention to an application vs bringing attention to the application's contents People focus on brighter areas — darker background brings attention to the content, while lighter background bring attention to the window itself vs the desktop. Imagine if the box around ...


60

For me, a dark background in a dark room or a bright background in a bright room is ideal. Bright rooms causes the eye to let less light in, making dark backgrounds and the little bright letters even darker. As for the dark room: being able to see the rest of the room is important for me to be able to look away from the screen now and then. Have a look at ...


57

I've been doing front-end work for a decade, and I have deuteranopia or deuteranomaly (red-green color blindness). It has never been a problem. I largely rely on color codes and location/proximity on color picker UIs to identify colors. When doing a design from scratch, I will often look at pre-existing palettes for inspiration. I will also use an ...


57

As previously said, the banner is inducing banner blindness not despite but because it is so enormous, prominent, clear and contrasting purple. Also, its placement just above the content makes it easy to ignore. The reader starts reading at the headline. Anything above it is easily ignored. Possible solutions: Put all the "Homebrew" content into an own ...


53

Red can be used for ON, most sockets use this color when they are on : I would recommend BRIGHT RED for ON and DARK BLUE for OFF. The brightness difference between the bright red and dark blue will also indicate ON/OFF. Also use round shape because it resembles more with LED lights, used for power ON/OFF in many devices.


50

There is a better solution, at least in terms of legibility, perhaps not so much aesthetically. And I'm 99% sure you've already seen it. Black border, white letters. White letters are almost always brighter than the background, and the black outlines act as a sort of shadow, separating the text from the background. Of course, the best legibility is still ...


50

Color association is highly dependent on context, culture, personal background, industry, upbringing, generation, etc. I recommend you create some versions and run a simple preference test asking your users what version they associate AI with and why. As witnessed in the discussion from this answer, meanings and connotations will change depending who you ...


44

Just because your brand color is red doesn't make the use of red for errors obsolete, it's just a matter of extent. Take the Viaplay signup form for example: Viaplay has red as their main accent color, which is used throughout the website for actions buttons, icons, header, graphic elements etc.. however, in the form they do tone down the use. They don't ...


44

Do not use colors to indicate that the system is ON or OFF, use instead a linguistic code, while use an iconic code to comunicate the HOT/COLD state. Here I used a thermometer with different colors (i did not use the snowflake icon since it communicates more a sense of active cooling -like a freezer-, rather than a passive dispersion of heat -like some ...


43

The following screenshot is taken from the speech by Jon Wiley at UXweek 2011 (Original video). He explains the design decisions made by google in the past months. Look towards the end (after minute 27) of the video to see it by yourself: red is for "create something" green is for "share something" blue is for "do something" (e.g. submit a form) Keep in ...


43

A bright yellow background with black text would work well. Fits the colour scheme of a warning sign.


41

Any sentence or fragment which is styled should apply the same style to its punctuation. In this case, the exclamation mark is part of the sentence being styled, so it should carry the same style as any alphabetic characters or punctuation within the sentence: The brown fox (trailing the chicken's feathers) jumped over the hill! A contrasting situation ...


40

Is it true? No. Nor is it true that it's good UX. It's a visual design question that can only really be properly answered in context...and part of that would be how it works with the overall page design. In the particular context of the cited question... ...it is asking very specifically about Red on Pink That's a very specific combination and as ...


39

The correct terminology is Greyout. It indicates less importance, relevance or priority or a change of status such as something being disabled or inaccessible. Definition by Oxford Dictionary: noun Partial or incipient blackout experienced by a person subjected to strong accelerative forces, especially during flying; (more generally) momentary ...


38

From Wikipedia: [...] "artificial intelligence" is used to describe machines that mimic "cognitive" functions that humans associate with other human minds, such as "learning" and "problem solving". Artificial intelligence is relate to artificial brains. The brain is composed of gray matter. Grey matter is distributed at the surface of the cerebral ...


36

I think the blue goes back to the days of consumer-grade video cassette recorders with on-screen message displays. Superimposing an image on a video signal requires that one know which parts of the signal will be displayed where on the screen. If the video signal includes valid horizontal and vertical sync pulses, one can measure the time since the last ...


Only top voted, non community-wiki answers of a minimum length are eligible