Back to all posts

How to design a great UX for a signup form

How many people like filling out forms? I think, not many. It’s not what users want from the service — they just want to buy tickets, chat with friends and so forth. And signing up is somehow a unavoidable evil they have to deal with. So what’s the problem with submitting forms?

  1. It’s time consuming.
  2. Complicated forms can be hard to figure out.
  3. Forms may ask for the information users are afraid to share — credit card details, phone numbers, addresses.

Forms are crucial for business success and they may lead to low conversion and clients abandonment. But it’s also the place where users struggle the most. So how a designer can help in this case? How to design a really great form? Here are some advice.

Allow Sign Up and Log In via social services — Facebook, Google etc.

A social sign-in is an extremely powerful tool which facilitates the fields completion. Remember to assure people that their social data is secured and explain what information you need.

Image credit: New York Times

Save entered data

One of the most useful features in forms — remember input data a user has already fill in. In case something goes wrong, the user doesn’t need to re-enter all the information again. This function is specially useful for long forms. Garlic.js allows you to automatically persist your forms’ text field values locally, until the form is submitted.

Keep form as short as you can or split it into multiple steps

Add only essential fields in your form — it’ll save time and reduce errors. If a field is optional, it’s better not to show it at all. Limit the form to only 1 or 2 optional fields, and clearly mark them as optional. Also remove any confirmation fields but those you really need. If you can’t avoid a long form, split it into multiple steps and group the related fields.

Auto-focus the first input field in the form

Autofocusing guides users to the starting point of your form. Emphasize the first field with an accent border color, background color or both.

Image credit: Udacity

Avoid checkboxes for Privacy Police agreement confirmation

Instead of checkboxes use text with links about acceptance of the terms and policies. UPDATE: in some cases (in the EU for example) checkboxes are only allowed instead of auto-accept, so it’s better to check with legal (thanks Thomas Leitermann).

Image credit: Coursera

You can use one form for Sign Up and log In (but be careful)

It’s a good point to create one universal form for signing up and logging in. After entering email and password, the service checks if the email is already in it’s database. If yes, you will log in, if not — the service will create a new account for you. But take attention, that this approach has some issues — if you enter wrong but valid email, the service will create an account with this email.

Image credit: Bookmate

Present fields in a single column layout

Keep users in the flow by sticking to a single column to avoid reorientation.. (Exceptions: short and related fields such as City, State, and Zip Code).

Provide clear heading

A good design starts with a text, a good form starts with a title. Short and smart CTA shows users the benefits of completing this form and motivates them as well. For trustworthy, show that the user’s information is secured, provide security badges.

Image credit: New York Times

Setup the input

An input field is a basic element of any forms. A simple input consists of several parts — Input Field, Label, Placeholder.

Input Field

Generally, a textfield has 6 stated — Default, Hover, Focus, Error, Success and Disabled.

Textfield states


A good thumb of the rule is to use top aligned labels as they are quicker to read. In short forms it’s OK to use meaningful icons instead of labels. Another way is using floating labels like in Material Design. Labels should have a short and clear microcopy. A sentence case or a title case — it’s your choice, but keep consistency in the label naming. Group related labels and fields — place labels close to the fields they are related to.

Fields labels


Placeholders are hints that help users to understand what type and format of data can be entered. Avoid using placeholders as labels thus it makes the form compact. It works good for short forms with 2–3 fields, but not for longer forms. When the user enters information into the field, the placeholder disappears and the user may not be able to check if they enter the right type of data.

Avoid using placeholders as labels

Be careful with the password field

I pointed out the password field because it has its own constraints and tricks.

Let users see their passwords

It helps users to check their passwords before submission.

Show the password strength

Good passwords are hard to guess. Display the users how strong and secure their password is and if they need to make it more complicated.

Image credit: Dropbox

Show the password requirements before submission

If your service needs specific requirements for passwords, show them before submitting the form.

Image credit: MailChimp

Warn users that Caps Lock is ON

It helps to prevent such a common error as suddenly pressing Caps Lock key of Shift key.

Image credit: Privat24

Design a ‘Forgot Your Password?’ flow for log in forms

People often forget their password (and so do I), so make it easy to remind or recover the password.

Image credit: Bookmate

Create powerful buttons

Name buttons properly

Instead of using a general Submit label, a form button should describe exactly what the user is doing in their task — Create Account, Log In etc.

Make the button disabled until all the required inputs are completed

This is another way to visually validate inputs before submission.

Use primary and secondary buttons properly

If you have two buttons — primary and secondary, you should visually differentiate them to reduce potential errors. Being more important, the primary button should look more noticeable.

Avoid Reset and Clear buttons!

Think about error prevention

Error prevention is one of the most important parts of a good form. Think how the system can prevent and fix common errors, instead of just showing users error messages.

Input Automation

Automating the user’s input prevents their mistakes by cutting down the fields they need to fill out.

  1. Auto-fill city and state textfields based on ZIP code or geolocation data.
  2. Select the card type from the entered credit card number.

Format Your Fields with Input Masks

To fix input problems use input masks on formatted data fields. Input masks automatically insert the correct format in the field.

Field Constraints

Another technique to control user input is to add field constraints. Allow numbers only for phone & ZIP code fields, for examples.

And remember about the errors validation

1. Use inline validation

Avoid error summaries, place error messages next to inputs. Show error messages one field at a time.

Image credit: LinkedIn, Asos

2. Use a clear microcopy for the error message

It should tell users why their information gets rejected and how to fix it. The tone of your error messages should feel polite and professional.

3. Validate fields with multiple requirements before submission

4. Highlight error fields with color, icons and text

Make the error message clearly visible, use different ways to emphasize it — color, text and icon.


As we can see, a good sign up form is a tricky thing, it isn’t just a nice UI design. To improve users experience, a designer needs to think about all the details of the process. A properly made form can increase conversion and decrease clients abandonment.


This article was originally posted at:

Can we take you from stuck to unstuck?

We'd love to hear from you

Product Design

The ‘Product’ is the website, service, application, interactive thing being worked on by the business. The practice of Product Design is similar in a lot of ways to UX Design. It involves the coming together of many specific design disciplines...

Call to action (CTA)

A call to action is a marketing term that refers to a prompt that invokes a response leading to a sale. When referring to a call to action (CTA) in the digital design world we usually mean the interactive element that leads to the next step in the experience - something that needs to be clicked or tapped.

User testing

User testing refers to a technique used in the design process to evaluate a product, feature or prototype with real users. There are several reasons why you might want to undergo usability testing, the most common is that it allows the design team to identify friction in a user experience they are designing, so that it can be addressed before being built or deployed.


WYSIWYG (pronounced WIZ-ee-wig) is an acronym for "What You See Is What You Get". It helps identify an an interface that allows user input resulting in an output that is rendered in a similar way. For example; a word processor application interface might resemble a piece of paper,so when printed the user can see how the output will appear.

Content Management System

A content management system (CMS) is an tool that allows a website editor/administrator to manage the content that is displayed. Websites are made of HTML and CSS to create pages. Pages can be hard-coded but would require technical development skills to make changes. A CMS usually allows a person without coding knowledge to amend existing and add new content to a website using a WYSIWYG interface.

Responsive Web Design

Responsive web design refers to a web page that dynamically adapts its layout to fit the size and orientation of the device on which it is viewed. A responsive design allows for a more optimised user experience across desktop and laptop computers as well as smartphones and tablets of varying sizes.

User Stories

User stories allow the functionality of a product or service to be expressed as written descriptions of an experience as seen from the users perspective. The writing of user stories creates a list of design and development tasks to complete in order to create any required functionality.

User Interface

A user interface (UI) is a conduit between human and computer interaction - the space where a user will interact with a computer or machine to complete tasks. The purpose of a UI is to enable a user to effectively control a computer or machine they are interacting with, and for feedback to be received in order to communicate effective completion of tasks.


A persona in UX Design is the characterisation of a user who represents a segment of your target audience. On a project you might create any number of personas to be representative of a range of user needs and desires. The solutions you design must answer these needs in order to deliver value to your target audience.

Card sorting

A great, reliable, inexpensive method for discovering patterns in how users would expect to find content or functionality. Card sorting is used to test the taxonomy of data with a group of subjects, usually to help inform the creation of the information architecture, user flow, or menu structure on a project.


A technique used to generate ideas around a specific topic. Often done in groups, but can be done individuals. The process usually involves writing down all ideas around a topic onto paper, a whiteboard or stickies often implying some kind of association.

Minimum Viable Product

An MVP is a product that has the minimum set of features to prove the most essential hypothesis for a product. Businesses building a new product can create a Minimum Viable Product to prove that an idea is viable and warrants further investment. A further benefit being that the next stage of development can be informed by feedback obtained from testing that MVP.


A sitemap is a diagrammatic representation of a hierarchical system. It usually depicts the parent-sibling relationship between pages in a website, showing how sub pages might be arranged underneath their parent groupings. This arrangement forms a map of the site.

User journey

A user journey represents a sequence of events or experiences a user might encounter while using a product or service. A user journey can be mapped or designed to show the steps and choices presented as interactions, and the resulting actions.


A prototype is draft representation built to test ideas for layout, behaviour and flow in a system. Prototypes are an indispensable tool for resolving a large number of potential issues in a concept or business before too many resources are deployed to put a design into production.


A Wireframe is a visual schematic that conveys a basic level of communication, structure and behaviour during the design of a system. Wireframes are low-fidelity designs that bypass including a detailed user interface or visual design, conveying just enough to get across the core idea.


To say something is usable is a qualitative statement about how easy that thing is to use. Usability is an assessment of how learnable a system is and how easy a user finds it to use. The usability of a system or product is a key factor in determining whether the user experience is a good one.

Information Architecture

Information architecture is the design and organisation of content, pages and data into a structure that aids users understanding of a system. A more organised system enables users to more easily find the information they require and complete the intended tasks.

UI Design

User Interface Design is the discipline of designing software interfaces for devices, ideally with a focus on maximising efficiency, responsiveness and aesthetics to foster a good user experience.

UX Design

The practice of User Experience (UX) Design is the coming together of many specific design related disciplines to improve the usability, responsiveness, uptake and aesthetics of a product or service.

User Experience

A general term that covers all aspects of a user's participation while engaging with something that has been designed. Usually when talking about User Experience in the digital design field it refers to the interactions, reactions, emotions and perceptions while using an app, service, website or product.