Back to all posts

Best practice for Sign up form UX

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

UX for Sign Up Form
  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 completion of the fields. Remember to assure people that their social data is secured and explain what information you need.

UX for Sign Up FormImage credit: New York Times

Save entered data

One of the most useful features in forms — remember input data a user has already filled in. In case something goes wrong, the user doesn’t need to re-enter all the information again. This function is especially 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.

UX for Sign Up Form

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.

UX for Sign Up FormImage 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).

UX for Sign Up FormImage 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 its 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.

UX for Sign Up FormImage 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).

UX for Sign Up Form

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.

UX for Sign Up Form 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 text field has 6 stated — Default, Hover, Focus, Error, Success and Disabled.

UX for Sign Up FormTextfield states

Label

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.

UX for Sign Up FormFields labels

Placeholder

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 well 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.

UX for Sign Up FormAvoid 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.

UX for Sign Up Form

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.

UX for Sign Up FormImage credit: Dropbox

Show the password requirements before submission

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

UX for Sign Up FormImage 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.

UX for Sign Up FormImage 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.

UX for Sign Up FormImage 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.

UX for Sign Up Form

Make the button disabled until all the required inputs are completed

This is another way to visually validate inputs before submission.

UX for Sign Up Form

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.

UX for Sign Up Form

Avoid Reset and Clear buttons!

UX for Sign Up Form

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.
UX for Sign Up Form

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.

UX for Sign Up Form

Field Constraints

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

UX for Sign Up Form

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.

UX for Sign Up FormImage 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.

UX for Sign Up Form

3. Validate fields with multiple requirements before submission

UX for Sign Up Form

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.

UX for Sign Up Form

Conclusion

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:
http://heydesigner.com/blog/ux-design-sign-up-form/

Can we take you from stuck to unstuck?

We'd love to hear from you

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

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.

Personas

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.

Brainstorming

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.

Sitemap

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.

Prototype

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.

Wireframes

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.

Usability

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.