5 ms·

Improve Sign-Up Forms with Off-White Text Fields

59 points by dojosensei 7y ago

grumpyops 7y ago
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.
- deleted 7y ago
  [deleted]
- Pxtl 7y ago
  I would say that specifically white means editable. Not just "same as background".
- happytoexplain 7y ago
  >Same color as the background means editable, different color means disabled. I disagree, and further, have never heard this.
kevinyun 7y ago
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 7y ago
  Also increased font size. That Amazon mockup is very dishonest.
Thorrez 7y ago
> 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.
LeoPanthera 7y ago
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-text-fields.png https://uxmovement.com/wp-content/uploads/2020/01/off-white-...
- yen223 7y ago
  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.
- robbrown451 7y ago
  That would be a weird assumption, they look normal to me. You're not exactly an Occam's Razor type?
  - recursive 7y ago
    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 7y ago
      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 7y ago
auston 7y ago
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 7y ago
  >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 7y ago
    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.
keltex 7y ago
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.
catalogia 7y ago
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.
- wavefunction 7y ago
  Hospitals or "clinics" are often painted white. Clinical in this usage refers to reminiscent of a clinic.
  - catalogia 7y ago
    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=hospital+room&iar=images https://duckduckgo.com/?q=doctors+office&iar=images https://duckduckgo.com/?q=doctors+office&iar=images
    - wavefunction 7y ago
      https://colorpsychologymeaning.com/color-white/ https://colorpsychologymeaning.com/color-white/ https://colorpsychologymeaning.com/color-beige/ 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."
      - catalogia 7y ago
        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/05/Shades-of-Color-White.jpg 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.
Pxtl 7y ago
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.
davidajackson 7y ago
Does anyone know any case studies/AB tests for this with numbers
mike_d 7y ago
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.
hizxy 7y ago
UX Movement fails to provide supporting evidence.

59 points by dojosensei 7y ago

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.

deleted 7y ago
[deleted]
Pxtl 7y ago
I would say that specifically white means editable. Not just "same as background".
happytoexplain 7y ago
>Same color as the background means editable, different color means disabled. I disagree, and further, have never heard this.

kevinyun 7y ago

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 7y ago
Also increased font size. That Amazon mockup is very dishonest.

Thorrez 7y ago

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

LeoPanthera 7y ago

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-text-fields.png https://uxmovement.com/wp-content/uploads/2020/01/off-white-...

yen223 7y ago
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.
robbrown451 7y ago
That would be a weird assumption, they look normal to me. You're not exactly an Occam's Razor type?
- recursive 7y ago
  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 7y ago
    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 7y ago

auston 7y ago

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

keltex 7y ago

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.

catalogia 7y ago

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.

wavefunction 7y ago
Hospitals or "clinics" are often painted white. Clinical in this usage refers to reminiscent of a clinic.
- catalogia 7y ago
  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=hospital+room&iar=images https://duckduckgo.com/?q=doctors+office&iar=images https://duckduckgo.com/?q=doctors+office&iar=images
  - wavefunction 7y ago
    https://colorpsychologymeaning.com/color-white/ https://colorpsychologymeaning.com/color-white/ https://colorpsychologymeaning.com/color-beige/ 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."
    - catalogia 7y ago
      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/05/Shades-of-Color-White.jpg 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.

Pxtl 7y ago

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.

davidajackson 7y ago

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

mike_d 7y ago

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.

hizxy 7y ago

UX Movement fails to provide supporting evidence.