Booklet

author

Hack University

Development

7 Ways to Design a Better Sign-up Page

7 Ways to Design a Better Sign-up Page

Remove all distractions and limit navigation.

Amazon directs customers to a new page that is clear of background noise. Navigation, menus, and photos all disappear. All that's left is for customers to enter their info and create their account.

Provide a value proposition to people.

Remind people what they're getting out of filling out all these input fields. Tell them why it's worth it. Instagram displays their logo and then why people should sign up.

Optimize for speed.

There is a barrier to entry with potential customers. It's crucial to make that barrier as small as possible. Only include the absolute needed fields during sign-up. Prompt for the other fields after registration. Netflix only asks for an email to get started.

Maintain vertical momentum.

The rule of thumb is to keep a one column layout of input fields with labels above the fields (not to the left). This provides a simpler flow and helps with both scanning and reading.

Call out primary actions and de-emphasize the rest.

The goal for registration is to get people to sign up. So it's crucial to emphasize the sign-up button. All the other links like Privacy, Help, Tool Tips, etc. should be smaller in hierarchy.

Be reassuring.

Let people know their information is secured. Let them know how strong their passwords are. Provide them with necessary feedback for their actions. Be as transparent as possible.

Be friendly.

People are taking the time and effort to visit the registration page. So be friendly and nice. This is an opportunity to win people over through tone, voice, personality, and a great value proposition. Have fun with it.

In summary...

1. Remove all distractions and limit navigation.

2. Provide a value proposition to people.

3. Optimize for speed.

4. Maintain vertical momentum.

5. Call out primary actions and de-emphasize the rest.

6. Be reassuring.

7. Be friendly.

Join our tech and design community! @hackuniversity

More booklets by Hack University

More Development booklets

Your recently viewed booklets

  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
See all booklets