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.<p>[1]: <a href="https://uxmovement.com/wp-content/uploads/2020/01/off-white-text-fields.png" rel="nofollow">https://uxmovement.com/wp-content/uploads/2020/01/off-white-...</a>
> Avoid using solid gray text fields because users tend to perceive them as disabled or inactive.<p>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.
This really piqued my interest, and so I took a look closer into the examples used:<p>1. Website examples: Twitter.com, Etsy.com, and Spotify.com signup forms don't use any off-white.<p>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
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.<p>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.
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 <i>"Cool and emotionless."</i><p>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.