Design & UX
Article

UX Design for Passwords and Registration Forms

By Kerry Butters
Mike Licht: Cell Phones & Blood Pressure, after Adriaen Brouwer  Mike Licht, NotionsCapital.com

Image: Mike Licht

Forms are a crucial part of the web design in 2015 – particularly since the rise of mobile has forced us to concentrate that much harder on smoothing our small-screen user experiences.

They are central to driving conversions in ecommerce sites and good from design is often the difference between a successful user registration and losing them from the site permanently.

From a user perspective, forms need to clearly communicate to the user what is required from them. They should be effortless to click into and type in, regardless of the device that they're accessed on. And they should display with correctly aligned labels that indicate what the user needs to enter into a given field.

While it was once considered standard practice to ask for as much information as possible – on the off chance you may need this information later – that's not the case today. Forms should be not a character longer than is absolutely necessary.

Short forms

Image credit: Will Scully-Power

Research has shown that shorter forms can increase conversions by as much as 160%, so a poorly designed form, or one that demands too much data can directly impact revenue.

Users Don't Like Registering

Users are growing increasingly resistant to traditional registration processes, and studies have shown that up to 86% of people will change their behavior if they are forced to create a user account.

A study conducted by Blue Research further found that, when questioning users:

  • 54% stated they might leave the site
  • 26% said they would choose another site that didn't require registration
  • 6% said they would leave and avoided the site in the future
  • 14% stated that they would complete registration

Further to this, 88% said that they have given incorrect information on a form when registering on a site and 90% said that rather than retrieve account information from a site they had previously registered on, they simply left.

The consistent message from users is clear: they prefer to not register and will avoid it if at all possible. What's more, this resistance is also growing. Given the choice over account creation, many users would more happily use social logins for all of their accounts.

So, we know forms need to be short, simple and while it's sometimes handy to have a lot of information about customers from the business perspective, it's not valuable if it seriously impacts revenue.

Satisficing

In her article Satisficing: What Does it Mean for Web Forms, Jessica Enders explains that,

The term “satisficing” refers to the human tendency to expend only the minimum amount of energy required to successfully complete a task. This is a subconscious phenomenon: (most of the time) we don’t sit down to do something and think “I’m going to spend the bare minimum on this”.

So when crafting forms, it's necessary to design with satisficing in mind to help avoid user error. Jessica suggests that in particularly important when it comes to framing your question in the clearest possible way for the user.

To overcome this, you should:

Place frames of reference at the start of questions, rather than the end

This is because the user will stop reading the question as soon as they subconsciously feel that they have the answer.

Jessica states that rather than ask the following question,

Q: Have you lived anywhere else in the past 2 years? (Y/N)

You should instead frame it like this:

In the past 2 years, have you lived anywhere else? (y/n)

This "tells the user what subset of their experience that you're interested in." So you should "front load" form questions with the important information in order to ensure that it's picked up by the user.

Check out the full article for a more detailed explanation of satisficing and how to overcome it in your form design.

Duplicate Fields

It's not uncommon to see sites that duplicate fields for email addresses and passwords in different positions in their application. Not only does this encourage users to leave, but it can also cause headaches for any users who stores passwords using a password manager.

This is because password manager typically work by hooking into the submission form events and storing field names and values.

If these password fields are given different names when the form is designed, then the password manager will be unable to populate the form as the field name doesn't match.

This is a common problem and in order to overcome it, Mammal advises you to ensure that password fields (if you really have to include two) are named identically. For sites that don't request a user password on sign up, but do request a username, Mammal recommends that you use an invisible username field when the user then goes to the site to set a password, as shown below.

<!-- Set password -->

<form action="/signup" method="post">
  <input name="username" style="display:none;" type="text" value="{{ username }}"/> <input name="password" placeholder="Password" type="password"/> <input type="submit"/>
</form>

This means that when the form is submitted by the new user, the password manager will be able to see both the username and password field and as such, will be able to store both.

When it comes to duplicate email fields, the majority of sites now understand that these are not only often misused (e.g. copy and pasting what has been entered into the first field) but they also affect conversions detrimentally.

Some, such as Gerry Gaffney, go even further. Gerry says:

I find the requirement to repeat the email address patronising and unnecessary. If I really want something and I mis-enter my email address, I am likely to notice I haven't received the service I requested. I don't actually need the sort of hand-holding that a repeated email address implies.

I'm certainly of the view that users no longer need that kind of direction. We're all accustomed to using web forms now, so leave it out. Instead, consider ways that you can make it easier for users to see what they are typing.

  • Include plenty of white space so that type is clear
  • Use black type on a white background
  • Increase the size of the input field

You could also consider adding a message beneath the email field displaying the current email along

which displays the email address that has been entered, along with a dialogue that states that they should review this address as this is where registration details will be sent.

While the image shows the email address in red, this should be approached with caution as some users will assume they have made an error and this could lead to frustration. With this in mind, consider carrying out A/B testing on this particular element, presenting it in different colors.

Form Labels

Form labels and their positioning are one of the most common mistakes made on registration forms, and this has become even more the case since the onset of the mobile revolution.

It's not uncommon to see form labels that are a little out-of-sync with the form field too when viewing on a mobile device, although it looks completely fine on desktop (usually left-aligned labels, which should be avoided for this reason).

Labels are positioned in a few different ways with the most common options including either above or beside the field. Having labels above the field, whether inside or outside, makes the form twice as long than when labels are beside the field. A longer-looking form may trigger satisficing.

Back in April, Anthony from UX Movement posted that ‘infield top aligned form labels are quickest to scan’ though this is still certainly in contention as Jessica explained in her May follow-up post.

Again, for a comprehensive rundown of the pros and cons of different label positions, see our Definitive Guide.

Further Resources

Forms then are an incredibly important part of design and as such they should be given the attention they deserve. They should be kept as simple to use as possible, and as short as you can get away with. Social registration is desirable, but shouldn't be prioritized at the expense of slowing the site down and degrading the UX.

Helpful reading:

  • http://www.odysseyforge.com/ Matt

    Awesome article! These suggestions will no doubt improve my forms going forward. :-)

  • Tatsh

    On repeating fields, I agree on the hand-holding-ness of it all. It is bad UI/UX. But, the password manager is an edge case. Most users are not using one. I still know far too many people who admit to using 1 to 4 passwords for all sites (yes that is bad, but just like Atwood said, there is no good solution http://blog.codinghorror.com/openid-does-the-world-really-need-yet-another-username-and-password/ )

    • Formulate

      Do you have any data showing that password managers are the edge case? Anecdotally, at least, their popularity is rising because of recent breaches. Not to mention use of browser autofill.

      That article from Atwood is 7 years old now. OpenID hasn’t been successful, and now the focus is on alternative methods like biometrics. We all acknowledge passwords are broken, but in the interim, we need to think about the totality of user experience and security. On balance, the best option is single fields, good recovery, consider providing the user with the option to see password. For more reading, see: http://www.troyhunt.com/2014/05/the-cobra-effect-that-is-disabling.html

    • http://www.markitwrite.com/ Kerry Butters

      It’s irritating and unnessary these days, we all know what forms are for and being forced to double type, especially on mobile, is always going to send some users (myself included, often) to the hills.

  • M S i N Lund

    I really dislike the flat-design trend, where more and more details that differentiate elements on a page is removed.

    For example, I’m starting to see many pages where text-fields don’t have
    any borders at all, and your just supposed to find a bit of white-space
    to click in and start typing.

    If you’re lucky, there is something
    like a label floating nearby, bur there is no way to see if its inside
    the field, or over/under/beside it, even after you click it.

    How can such a thing even happen?
    Its like there never was any usability research, or even common sense in the world.

    It takes a special kind of talent to mess up something like a text-field,
    or a button, in web-design, where pretty much all work is already done
    for you if you just leave it alone.

    And I’m not sure I like the example above either.
    It looks like function is sacrificed to fit the whole thing into a nice square.
    Why would there for example be such limited room for first- and last names, but twice as much for the user name?

    Normally you don’t get to choose your names, which can be quite long.
    But you almost always choose your username, which are mostly as short a s possible, to save on typing.

    But then it wouldn’t fit in that nice square…

    And emulating printed forms is just plain stupid.
    They suck, to fill out, because you always run out of space.
    And those who have the labels inside the fields, seem to be especially cramped.

    No such limitations on webpage,
    and there should never be any created …in the name of design.

    And why on earth would you use tinyer text for labels, just to fit them inside the fields?

    On pages that uses tiny-text to differentiate like that, you have to zoom
    in the whole page to read it, and then every other piece of text
    becomes morbidly obese.

    Exhibit A; wired.

    • Formulate

      You make some very valid points; I think you’d like my site, where I have articles that go into detail about much of what you say: http://www.formulate.com.au/blog/.

      I also wrote an article on A List Apart about how to do flat forms well: http://alistapart.com/article/flat-ui-and-forms

    • http://www.markitwrite.com/ Kerry Butters

      There are a lot of examples out there when it comes to how much forms and labels can be messed up – many of them by large brands with the budget to do better. I suppose the best way (as with most things) is to keep it simple and remember mobile as that seems to be where form labels mess up the most.

      Flat design is a trend I think many of us have a problem with as it does take away many of the signals for users if not done well.

  • Flimper

    Really liked the satisficing part! great article

    • http://www.markitwrite.com/ Kerry Butters

      I think that Jessica deserves the praise for that particular part Flimper :)

  • Formulate

    Thanks for some good tips, Kerry.

    Like Gerry, I strongly recommend against double fields for email or password: http://www.formulate.com.au/blog/double-entry-form-fields.

    I also strongly urge caution with top-aligned infield labels: http://www.formulate.com.au/blog/infield-top-aligned-labels. There are many problems with what UX Movement is suggesting, not the least being Anthony hasn’t done appropriate research on his recommendations. Your readers would be wise to read my cautionary post, and consider also this piece about form label positioning I wrote for Sitepoint: http://www.sitepoint.com/definitive-guide-form-label-positioning/.

    • M S i N Lund

      Thanks, but I rarely bother reading anything on low-contrast sites.

      Rule of thumb; anyone using low-contrast design, has zero useful to say about usability or design.

      Saves a lot of time, and eye-pain.

      • Formulate

        Hi Mats

        I’m sorry you found the contrast on my website too low. I have responded to your comment there, but in short, I did check the contrast ratios when deciding on my typeface, font size and colour (accessibility is just as important to me as usability). The body text passes at WCAG2.0 AAA level. But I’ve just changed it to a slightly heavier weight – hopefully that helps.

        Cheers
        Jessica

        • M S i N Lund

          There doesn’t seem to be any way to find where i commented on that site which kinda makes it even more pointless that I had to get an account to comment there.

          So i don’t know what you wrote.

          But I’m curios how things like this happens.

          What exactly is the practical reason that you dial down contrast at all on the text?
          Why not just keep it at the default level?

          And what made you choose the current level, and not a tiny bit lower or higher?

          People only have a limited contrast range on any give screen,
          and those who has their set too high can easily dial it down, but those who are already at max can never get back that bit you for some reason deiced to take away.

          So how did you go about when you decided that exact level of contrast to take away?

          Did you do a survey and found out that, for example 80 people out of 100 can read the text when outside on a sunny day, and then thought “nah, id like that make that 67 out of 100 instead”, and then found the perfect shade of gray to do just that?

  • http://adventedesigns.com/ adventvk

    Thanks for the Great Article. i will focus this for my website Advent Designs

  • coolmilo

    Thanks for the info, this will back me up when I need to convince people to keep it simple when it comes to forms.

  • Najort Esroh

    it really helpful. thank you :)

  • Natalie Green

    Some great advice in here Kerry. It’s true no one enjoys filling in forms, so for me, tools like autocomplete that can speed up the process, get my vote!

Recommended

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Get the latest in Design, once a week, for free.