The color palette for the site and the psychology of color

The color palette for the site and the psychology of color

The most detailed study on how the color palette of a site affects its effectiveness
alt
Michael CEO&Founder


Printed 2025-02-20
alt

If you are a business owner or a marketer, then one of the mistakes you might have made on your site is too many fields in the lead form. 

Often with turnkey website development (or when creating a mobile application) overload their registration forms or applications, trying to get as much data as possible about their users, especially in the interests of future marketing campaigns. This usually leads to frustration and annoyance of the user. 



Even before requesting any information from your visitors, it is very important to explain to them the reason why they should register. In other words, summarize the benefits of registering (or leaving an application) in no more than 1 or 2 sentences. These offers should be visible on the registration page (ideally, close to the registration form itself). Benefits may be in the form of receiving free lead magnets (such as discount coupons or a free e-book) or in the form of access to exclusive content that is otherwise not available to unregistered users. If users don't see that the benefits of registration outweigh the “tedious” task of filling out the registration form, they will just continue browsing your site (at best). 

1. Form Size

Today, there are many ways to get information about your customer. This makes it unnecessary to force them to fill out form fields. 

Delete unnecessary fields by restricting the form to 2-3 fields. Name, email address - this is usually enough. It also means that there is no need to ask the user to re-enter their email address or password! If additional information is required, it can always be obtained after registration. 

Twitter is a great example of a site that allows you to register in an extremely simple way, requiring only three fields to be filled out. One of these fields even allows the user to enter an email address or phone number:




Twitter registration form (Image source: Twitter)


On the other hand, some sites, like Yahoo, request almost twice as much information. 




< small class = "img_inf"> Yahoo registration form (Image source: Yahoo)


Studies have shown that fewer form fields can lead to a greater number of registrations that will lead to an increase in income. When Expedia removed one extra form field, their sales skyrocketed: that field cost them $ 12 million a year. 

According to marketingtechblog.com, the conversion rate can be 50% higher if you are limited to 2-3 form fields. Ultimately, this means that you lose half of your potential sales just because your form is too long. Can you afford to lose 50% of your annual income? Most likely not. 

2. Change the appearance of fields

A variety of text hints are quite common on sites - especially for registration forms. In this case, it is important that the default text (which describes what exactly needs to be entered in the field) does not disappear after the text is entered. For example, after an input field is touched or clicked, placeholder text may move up in the upper left corner of the field. Takat animation is simple, elegant and looks clean. One of the main advantages of using such "floating" hints is that they maintain the context of the form after the user has already entered something. 

However, usability experts have long argued that that the label disappears, creates problems with short-term user memory and makes it difficult for the user to verify the form before sending it (input fields for the first and last name in the registration form). On the other hand, some experts consider entry forms as an exception because such forms essentially have two fields. Thus, if your registration form is simple, you can still use disappearing hints. 

A recent improvement is the adaptive input fields. They are very similar, but when the user clicks on the field, a label appears a little above it. A real-life example can be seen on the Walmart account registration form. Katie Sherwin of the Nielsen Norman Group says adaptive input fields can solve most problems with the convenience of using prompts while saving space (which is ideal for mobile devices). 




< small class = "img_inf"> An example of a registration form that uses adaptive placeholders (Image source: neural prediction model)


3. One- click registration

Nowadays, when many users have several logins, they can forget what combination of email address and password they used to register. The only exception is if they regularly visit the site or application (or store a combination of username and password in their browser). 

A simple solution to this problem is to allow your user to register and log in through the social network. According to the Washington Post, 1.35 billion people are registered on Facebook, and 20% of people worldwide go to Facebook at least once a month. 

From the point of view of UX, the introduction of the “Register via Facebook” button will increase the usability of your site, since there is nothing easier than logging in with one click. 

In addition, social network analytics will allow you to receive data about customers that you may not have been able to get earlier. As we have already said, fewer form fields mean higher conversion. By adhering to only one registration button, you can do wonders! 

One of the drawbacks of registering through social networks is that connecting to third-party authentication can take longer, thereby increasing the failure rate. Another disadvantage is that some users may not want to share all their information with your site, not trusting it. Give the user the opportunity to fill out a short 2-3 registration form, OR register through social networks. See how it works on Spotify:




Spotify registration form (Image source: Spotify)


4. Use color theory < / h2>

Color is one of the best tools for highlighting lead form states when developing a website design . The registration form can display field validation statuses in three simple colors. Red, green, and yellow are instinctively perceived colors. Their use provides a simple solution to prevent confusion. 

Users know that red is a problem and an error message, yellow is a warning, and green almost always shows confirmation and success, therefore, for better usability, first of all you should stick to these three colors. 

Many usability experts sometimes advise never to use red, because it is too “alarmist" and can scare users away. However, a yellow message will sometimes not be identified as an error and may mislead the user. < / p>

Along with this color theory, using informational messages and icons is a great way to display validation in a lead form. 

5. Grant access

This is sometimes overlooked. After filling out the form, do not force people to verify their email address before they can log in. Give them access immediately, and then indicate that they need to confirm their email address within a certain period of time.

In addition, as soon as a person is registered, sign in immediately. Redirecting users who have just registered back to the login form, where they need to re-enter a combination of username and password, simply does not make any sense . 


Latest works:

«We started with the usual Landing + Yandex.Direct set, but in the end we switched to the format of a large site. Contextual advertising began to work better! »
Alex (AppCafe, CEO).
«There are many leads, the sales department is barely in time »
Julia Chebotareva (Marketing Manager (EUROKAPPA), Marketing Director (Eastetica)).