Form Design - Newsletter Sign Up

Research – Interaction Design – Wireframes – Prototype

The problem we were solving

Not so much a problem, but a question: “Can you design a good newsletter sign-up form for me?”

Let’s look at the different steps we went through:

  • Find examples of good sign up forms,
  • List best practices,
  • Generate ideas,
  • Wireframe & Prototype,
  • Validate through testing.
Example of Good Sign-up Form 1
What makes this a good sign-up form?
  • Simple styling,
  • Extra padding on the rows,
  • Clear indication of the active field.
What makes this a good sign-up form?
  • That big bold colored button,
  • The clear statement on the button.

 

  • On the downside: there is no need for the black copy, the red title says it all.
Good Example of Sign-up Form 2
Good Example of Sign -up Form 3
What makes this a good sign-up form?
  • The illustrated character holding the form brings a lot of, well, character to the page,
  • Identity matters.
What makes this a good sign-up form?
  • The tilted text fields work here,
  • Playful forms have their time and place,
  • Knowing your audience is vital.
Good Example of Sign -up Form 4
Form Design Best Practices 1
Sign-up form best practices

Multi-step forms out perform single step forms.

  • The first impression is less intimidating than a long form with lots of fields,
  • Ask for sensitive information in the last step; users have already invested energy in filling out the previous steps,
  • Seeing a progress bar motivates users to finish the task.
Sign-up form best practices

Remove all non-essential fields:

  • Every additional field will loose you leads,
  • Carefully consider the trade off between gaining information and less opt-ins, or gaining less information and more opt-ins.
Form Design Best Practices 2
Form Design Best Practices 3
Sign-up form best practices

Top-left aligned labels are best for readability and completion.

  • Research done by Google UX Researchers,
  • Less visual fixation means higher rate of completion.
Sign-up form best practices

Give people a reason to use your form.

  • Motivation is key for form completion rates,
  • A form that would take an hour to complete…
    – Nobody would fill that out, right?
    – Well, what if at the end you would get a Ferrari?
Form Design Best Practices 4
Generate Ideas
Raw Sketches of a sign-up form

The creative process to generate a well designed solution has as many roads as there are designers.

For me, I like to wonder into one direction, until things get uncomfortable, then return to a well known pattern and start over. In the end, review and combine.

For this sign-up form, the final design was based on:

  • Using a spacious design, where we can group labels and fields clearly,
  • An obvious CTA button with inviting micro copy,
  • An overall friendly tone and attitude worthy of a restaurant where you want to wine and dine,
  • A full page design; the sign-up form must be part of the atmospheric experience of the site.
Wireframes
Sign up form wireframes

When designing a responsive page I start with the extremes; a mobile version and a full desktop version.
Anything in between will come to me in breakpoints by itself.

Here my two main guidelines were:

  • The form dimensions stay the same, this ensures a constant user experience filling it out.
  • Positioning and background image change, but the feel should remain constant as well.
High Fidelity Prototypes
Sign up form prototypes

Question: “What am I signing up for?”
Remember that this sign-up form follows a click on a link somewhere, like “Sign up for our newsletter and receive seasonal updates once every three months!”

During testing we simulated this scenario, so there was no doubt what was happening, but you could consider including a sub-title repeating the link copy.

My Recent Works
latest projects working with amazing design teams