
Improve Sign-Up Forms with Off-White Text Fields - dojosensei
https://uxmovement.com/forms/improve-your-sign-up-form-with-off-white-text-fields/
======
LeoPanthera
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-...](https://uxmovement.com/wp-content/uploads/2020/01/off-white-text-
fields.png)

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

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

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

[https://codepen.io/recursive/pen/GRgwNdb](https://codepen.io/recursive/pen/GRgwNdb)

~~~
robbrown451
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)

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

~~~
robbrown451
Yeah, both white backgrounds in chrome.

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

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

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

~~~
Pxtl
I would say that specifically _white_ means editable. Not just "same as
background".

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

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

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

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

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

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

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

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

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

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

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

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

------
hizxy
UX Movement fails to provide supporting evidence.

