When designing an app, most designers put all their effort into the content pages but overlook the sign-up form. What users end up getting is a form that’s visually unappealing, stale, and clinical. A white background, plain text fields, cluttered text, and harsh black outlines everywhere doesn’t motivate users to sign up. If your form looks like this, there’s room for improvement.
Some users who want to use your app are likely to sign up regardless of how your form looks. However, others who are undecided are likely to pass once they see your clinical sign-up form. You could be losing many potential users on the first impression. By making your sign-up more usable and appealing, you’ll push those undecided users over the edge.
Visual Appeal Motivates Users
A research study found that first impressions of interfaces are influenced by visual appeal. Users tend to judge interfaces with low visual appeal as uninteresting and hard to use. This finding infers that users are likely to perceive unappealing forms as difficult and time-consuming, which deters them from filling it out.
Making your form less clinical and more appealing can motivate users to take action on it. However, there’s a limit to how much visual appeal it should have. Making it too attractive can distract users from their task at hand. At the same time, the form needs to have high usability. Luckily, there’s a way you can achieve both by following a simple technique.
Off-White Text Fields
The technique that’ll make your sign-up form more usable and appealing is to make your text fields or their background an off-white color. Off-white is a shade of white mixed with a pale hue. When you apply it to your form, it’ll turn the stale, clinical appearance into a fresh, stimulating one. Not only that, but it’ll also strengthen the visual cues on your text fields and reduce the visual noise around them.
Off-white text fields draw attention to each field quickly so users can interact with them right away. They also provide a clearer focus on the input so users can type, check, and correct them easier. Clinical text fields, compared with off-white ones, produce more visual noise. Any text outside the fields will clash with the input text and make it harder to focus.
An off-white background also provides a clearer input focus. It does this by accentuating the white space in each field and diminishing the text outside them. The results are stronger text field cues and more clarity on the input.
It’s important to note that off-white does not equal gray. Avoid using solid gray text fields because users tend to perceive them as disabled or inactive. They can also make input and placeholder text harder to read.
Brand Theming Your Form
When choosing an off-white, you don’t want to use any random color. You want one that’s consistent with your brand so that your form looks professional. To get the right off-white, take your brand color, and adjust the brightness and saturation levels.
Increase the brightness close to 100% and decrease the saturation to around 5%. Lowering the brightness a few degrees below 100 will add a tinge of gray to the color. Reducing the saturation will lessen the hue in your off-white. You can also add a slightly darker off-white for the field border to give it more depth.
There are various off-white colors you can choose from. It all depends on the hue you want to use. The saturation and brightness levels should remain more or less in the same intervals. Pick the off-white color that works best for your brand. You don’t have to use your primary brand color. A complimentary one can work too. Below are examples of a few forms themed for the most popular brands.
Freshen Up Your Sign-Up
Sign-up forms don’t always have to look stale and clinical. A clinical appearance will turn most users off and away. Adding more visual appeal doesn’t require a lot of time or advanced design skills. And making it more usable doesn’t call for revamping your entire form. By enhancing your text fields with the right off-white color, you can freshen up your form and get more sign-ups than before.
Book
Affiliate
Great article. Though I do wonder how you would handle disabled fields with this approach, especially given that the off-white fields and greyed-out disabled fields could look similar to low-vision users.
I would just make it very transparent: https://uxmovement.com/buttons/why-you-shouldnt-gray-out-disabled-buttons/
Great article, and much more visually appealing but can see accessibility hasn’t been considered as a high priority. In particular contrast ratios. I’m on mobile so can’t check exactly but feel like it would just barely pass.
it passes…
The inputs need something (i.e., border or background color) to be at least 3:1 against the surrounding color to pass: https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html
Unfortunately the Amazon example is only 1.38: https://contrastify.app/?colors=%23ffffff%2B%23e6daca
The image example is for demonstrating the concept and principle. It’s not dictating that you should use the exact colors you see on it, so there’s no use in nitpicking at that. If you want to make it 3:1, darken the borders.
Your linked article refers to making disabled buttons transparent. Are you also saying that you should make disabled fields transparent? Thanks again.
yes…
We liked reading this article, it really is nice. I might have a suggestion though, but dont want to cause a quarrel 😀 Anyway, keep up the nice work, and see you! Regards, Teeninga Palmen
Interesting read.
But is this just the author’s opinion based on the “Visual Appeal vs. Usability” research (the article wasn’t really talking about input fields).
Or is this opinion based on evidence, i.e. was this tested and the coloured input fields performed better?
If so, might be a good idea to add that evidence to this article.
Based on experience and principles…
I’ve seen a few times now where you’ve put forward a visual design opinion and presented it as a factual way to improve usability, which is a bit irresponsible given that some look at you as an expert. “Experience and principles” may help your first hypotheses be a lot better than a junior UX designer, but it doesn’t mean you get to skip the testing phase.
Before you create an article like this, please run some usability and A/B tests to validate your hypothesis. That’s way more interesting content anyways and it gives your arguments some credibility.
I’ve noticed you often cite a single study that showed that better-looking interfaces are perceived as more usable. While there’s definitely some truth to glean from that study, it seems you often take that to justify anything that *you* think looks better will be more usable. Design is quite subjective, so that’s why we have to test it. For all you know, people might find that some of these designs are more ugly and less usable. ✌️
Most novices with less experience need testing to understand and justify design practices. But when you have experience and an understanding of the principles in a design, you don’t need testing to see which has better usability.
Apparently, you need testing to see usability improvements because you draw a false conclusion with this article: “anything that *you* think looks better will be more usable.” There’s a lot more going on than just the visual design, but you’re having trouble seeing it. It’s explained in the article, but somehow you fail to acknowledge it.
So, if you need testing to see it, you should go test it. Demanding me to do what you can do yourself because you need to be convinced is a bit irresponsible. There are plenty of design articles I’ve read where I’m not convinced, but I don’t demand them to do more for me. I go do my own research because that’s my responsibility if I’m not convinced. I encourage you to do the same.
There’s a whole movement aimed at the need to gather numbers to justify design decisions. There’s a lot that can wrong in constructing experiments that gives you false data, isn’t or misunderstands causality relationship. I like your comment that this probably stems from insecurity or inexperience. I’ve seen landing pages successfully designed for high conversion. But ultimately the user satisfaction be very low for that very same page (think click bait).
Nice article. In my opinion you shouldn’t use off-white text fields, because it can be intrepreted as inactive/disabled if you use some greyish or blueish tones, like in the examples above. But I really like the idea of off-white background! It gives a little touch of contrast in order to bring the inputs more into the foreground which could support the interaction with the text fields by a user, also in other scenarios than a sign-up form.
What about if those pages are in tabs? I also hate white input fields on white background and want to make a colored background. Should I just make the tab tops the same color, and the inactive tabs just a little darker?
I really like this approach. I’m just a little confused as it seems to contradict the article below or am I missing something?
https://uxmovement.com/forms/why-you-shouldnt-use-solid-or-underlined-text-fields/
I think the ideas here are interesting and seem logical. i used some of them on several conversion funnel before. However, i disagree with considering them as the right practice without testing. This article would be more credible if the recommendations it provided were completed with tests, statistically relevant tests. And those who wish to adopt these design tactics should also test them on their platforms and their users.
testing is not only there to validate or unvalidate, it is also there to provide indications/measures of change on performance. ok B is better than A, but what does this mean in terms of conversion rate, impact on revenu if all other criterias were constant ? perhaps you already have the answer to that, in that case. it would be interesting to include it.
This is the scientific and lean approach.
thank you for this work and for sha,ring it
Anthony,
I can’t tell you how many times I’ve gone googling away for some design tips on something, read a great article, get to the bottom and see it written by you haha.
Thought I’d let you know I’ve been finding quite a few of your articles helpful lately. Thanks!