Improve Sign-Up Forms with Off-White Text Fields | Hacker News Reader

Improve Sign-Up Forms with Off-White Text Fields

uxmovement.com

59 pointsdojosensei33 comments

In the example given[1] the fields look like they are disabled. I probably wouldn't even try to type into them, I'd just assume that something was broken.

[1]: https://uxmovement.com/wp-content/uploads/2020/01/off-white-...

There are plenty of coloured text fields out in the real world that a lot of people don't seem to have a problem with though.

That would be a weird assumption, they look normal to me.

You're not exactly an Occam's Razor type?

Weird? It's pretty standard. Are you familiar with default styling rules?

https://codepen.io/recursive/pen/GRgwNdb

I'm familiar with them, sure. But to assume something like this is broken rather than simply a color choice would, to me, be a strange and usually wrong assumption. Given that we've all (well, most of us) been on the web for 20-some years now, and noticed that web designers, for better or worse, often stray from defaults and choose different colors.

More often than they put a form field with all the fields disabled.

I'd certainly try typing into it before I emailed customer support.

Incidently, on that codepen, the background colors of the disabled and non-disabled elements are identical, to my eyes. The only difference is in the border color. (and the behavior when clicked on)

Weird. It looks like this to me on Firefox. (and everything else) https://imgur.com/a/qCn0fiH

Yeah, both white backgrounds in chrome.

FWIW, on my uncustomized chrome, I'm seeing the same style as FF. If I recall correctly, these have been the default styles in every browser I've seen since Netscape Navigator. Not sure about Safari.

I've seen tons of disabled input fields that look like this (e.g. showing you your un-changeable email address), so yeah - that would be my first instinct as well.

The colored background container is totally fine tho, those are everywhere and they help draw attention.

Normally I'm of the opinion that, if even just one or two people have the same problem with a UI, it's probably worth considering a valid, addressable problem, no matter how much it seems like the user's "fault", but even I'm having trouble rationalizing this one. May I suggest that maybe you're having this thought because, intellectually, you know how disabled fields are frequently styled, however, in natural conditions, you probably wouldn't actually make that assumption unless not all of the fields were styled that way?

For me, it is the lack of internal shadow that gives that impression rather than the colour

> Avoid using solid gray text fields because users tend to perceive them as disabled or inactive.

Any darker color than the background could be perceived as disabled as well. All the given examples with a box darker than the background looked disabled to me. The ones with a darker background and white text boxes looked fine though.

No. A filled-in background means the field is disabled. Why are people hell-bent on trying to fix something that works? Everyone knows how text boxes work already; they don't need to be improved. Same color as the background means editable, different color means disabled.

I would say that specifically white means editable. Not just "same as background".

>Same color as the background means editable, different color means disabled.

I disagree, and further, have never heard this.

This really piqued my interest, and so I took a look closer into the examples used:

1. Website examples: Twitter.com, Etsy.com, and Spotify.com signup forms don't use any off-white.

2. The visual examples provided are apples to oranges. Removing an input field and adding more padding were the factors that made the 'right-side examples' more visually appealing

Also increased font size. That Amazon mockup is very dishonest.

My first thought is this really needs an A/B test. Instead of just asserting that off-white fields are better than white fields, try it out on a real website and see if the conversion is improved.

I actually think the assertion that the color of your text fields is going to be the determining factor for potential users is not a sturdy one. A lot of the time, what users are looking for is the thing that solves their problem and it doesn’t really matter how it looks as long as it’s usable / understandable.

Also, while this design approach is probably more aesthetically pleasing to people like us, it might not be for someone like my grandpa who may get confused.

>it doesn’t really matter how it looks as long as it’s usable / understandable

What if how it looks makes it more usable or understandable? That's the case here with colored form fields, and if it makes the user's experience better you may be able to increase the rate of users filling out the form. At a glance the brain can intuit a form from the repetition of colored form fields whereas white on white takes more effort to understand visually. With a high volume site that depends on making spending money as quick and easy as possible, the marginal usability over white on white could be millions of dollars in marginal revenue.

Absolutely agree that at scale this matters in a big way, but I’d argue most of us are not working at FAANG.

Most of us are probably working on a side project or some extremely targeted piece of software for construction workers or crypto or AI for self driving cars where the scale is x thousands at best.

While we are on UX design of sign up forms: Please do not put widgets (like show/hide buttons) inside the form fields for passwords. Third party password managers often use this spot for their interface elements because they can't predict safe spots on random pages.

And now I miss Windows Phone 7 with its hyper-consisten and unforgiving design language. A white box was text. A blue box is a button. Black background is just display. Those are all the colors. You don't get to reinvent any wheels.

I don't understand how the word 'clinical' is being used in this context. Wiktionary gives a few meanings for the word, the only one that seems potentially related being "Cool and emotionless."

But that doesn't really make sense here. The colors being used don't seem like 'warm' colors to me, and I don't see how these shades are meant to be more emotional than white. If anything, I associate these beige sorts of colors with reserved corporate blandness, which I'd call cool and emotionally distant by design. It's the color of office equipment.

Hospitals or "clinics" are often painted white. Clinical in this usage refers to reminiscent of a clinic.

Beige is a very common color in hospitals too. Hospital beds are very frequently beige, as well as various other equipment. If white is the most common color in hospitals, beige is surely a close second.

Loads of beige in both of these:

https://duckduckgo.com/?q=hospital+room&iar=images

https://duckduckgo.com/?q=doctors+office&iar=images

https://colorpsychologymeaning.com/color-white/ https://colorpsychologymeaning.com/color-beige/

This may seem like mumbo-jumbo but colors have a psychological effect on people. Beige also conceals stains from body fluids better than white. In any case I was explaining the usage of "clinical" and not "hospital beds."

I don't dispute that colors can have psychological impacts on people; it's obvious that they can. What I dispute is beige being less 'clinical' than white, insofar as white can be clinical the term seems to fit beige just as well.

Also the page you linked gives 'shades of white' that include beige-like colors: https://colorpsychologymeaning.com/wp-content/uploads/2019/0... Which I think reinforces my point that these are very similar colors used in similar (clinical) contexts. White gives you notions of purity or cleanliness while beige is neutral and relaxed, either has obvious value in a clinical setting.

Plain, white, and minimal (in a strictly unadorned sense, as opposed to filled with hip furniture). Clean lines, no frills. 'Sterile' would be a similar description within the same metaphor even, if that helps.

If he just said, 'white is clinical' I'd get that. But 'white is clinical while beige isn't' leaves me confused. It's like saying 'strawberries are sweet but plums aren't.' After hearing something like that, it leaves you wondering if the term means the same thing to the other person.

The colors used are absolutely warm colors, they are basically orangish. Warm vs. cool in colors is basically orange vs. blue.

I would describe the pure white forms as being rather harsh. They are harder to look at to me, because the text in the fields isn't differentiated from the text outside them.

I'm not claiming it is a major thing, it's like the difference between two fonts, some are more readable and attractive than others.

Does anyone know any case studies/AB tests for this with numbers

UX Movement fails to provide supporting evidence.

Reply on news.ycombinator.com