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.

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.

from Hacker News https://ift.tt/2Ns0Q8h