Forms

Improve Your Sign-Up Form with Off-White Text Fields

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.

clinical-form

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

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.

off-white-background

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.

brand-theming

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.

brand-themed-off-white-forms

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.


Books

design-vetting-card

Toolkits

wireframes-kit
site-flows-kit
user-personas-kit

Join Our Newsletter

Article written by anthony

Author and founder of UX Movement. Creating a better digital world for mankind by teaching and evangelizing best practices, standards, and techniques in user experience design.

This Post Has 11 Comments

  1. Terry Reply

    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.

  2. Nick Reply

    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.

  3. Terry Reply

    Your linked article refers to making disabled buttons transparent. Are you also saying that you should make disabled fields transparent? Thanks again.

  4. Teeninga Palmen Reply

    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

  5. Adrian Reply

    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.

Leave a Reply

Your email address will not be published. Required fields are marked *