The State of Sign-up Form Design

It is easy to publish a post, from your personal viewpoint, on what you think is the right design, in our case a sign-up form. Though, it is harder to prove that, what you think is the right way, is actually the right way. General guidelines are obviously a good starting point, but those are likely to only help up until a certain point in regard to digital service design as product feature sets and more importantly also target/user groups are likely to be different.

The following post seeks to find out whether there is a general consensus on how to design and architect a sign-up form based on real-world examples, namely the sign-up forms of Twitter, Instagram and Airbnb.

The short answer is: it depends. Looking at the overall sign-up picture, the experience is quite different between companies but also, interestingly, between the platform applications of a single company, in our case Airbnb and Instagram. Looking at input fields related to sign-up, the behaviour is fairly similar though with it differences. But let’s see.

I am currently not working at neither company that I have picked for this article, therefore, I will basically explain and interpret what seems to be working for those companies. I picked Twitter, Instagram and Airbnb because they now have been on the market for years and have hundreds of millions of users. A another reason is that they mainly have B2C customers. As you may know getting a UI right in a B2C market is harder than in a B2B market as business customers have a different incentive towards using a certain product.

Observations and Testing

In terms of platforms, I looked at the website first and then examined the forms on iOS and Android separately. The procedure on each platform was as followed: I opened the plain sign-up page and before making any input jotted down simple observations in order to validate the overall visual and structural approach. Furthermore on the functional side, I reviewed the interaction design from start to finish and tested the element behaviour (ie. buttons and input fields) in regard to what they would allow and return in case of incorrect input.

As any senior designer can attest adding an input field to a page is simple but making potential user interactions work in relationship to all other elements while supporting possible use and edge cases is hard work.

Making a difference

Comparing the three sites it is interesting indeed. Not only do they exhibit differences between sites but also between the platform implementation of a single company, ie. Airbnb. The biggest differences the sign-up flows exhibit are obviously on the visual design side. Each company has its unique look and feel and brand appearance which is clearly noticeable in either case. The most consistent appearance across desktop and mobile (as of mid-August 2016) has Twitter.

Furthermore, the low-hanging fruits for good form design have been taken, i.e. grouping and proximity of elements that relate, keyboard layout depending on input type, one-column layout instead of multi-column and descriptive CTAs. However, according to some authors here, here Airbnb, Twitter and Instagram do seem to make a mistake by not placing proper input labels above the corresponding field, though Airbnb uses labels but no placeholders text in their current mobile apps.

After Google published their Material Design guidelines many designers made their fellow engineers replicate what Google defined for input fields (web), namely, a placeholder text would turn into a label once the user clicks into a field. Although it is a neat UI effect, it does not seem to make a big enough difference for Twitter, Instagram or Airbnb. Please mind that I do not have any inside knowledge on what has been explored internally or has been A/B-tested in certain countries.

Speaking of visual and interaction design iOS is well aligned with Android across the companies’ mobile apps. Neither company designs specifically for either platform in terms of their respective Android and iOS guidelines. Therefore, the company values brand consistency, team productivity and UX alignment (as interaction flows can be aligned and visual assets shared) higher as platform conformity.

The only outlier of sorts is Instagram as their current web sign-up form is very different to their newly launched form on their mobile apps. I assume that the team is currently redesigning the web landing page. While speaking about Android, each company makes extensive use of the ability to pull in Google accounts and phone numbers (if possible).

The desktop experience

The desktop forms are somewhat similar on first glance, however, each site has differences in terms of features being used as well as how one gets in and out of the form. This is mainly due to the nature of their services as well as the way each company on-boards users. But leaving service or product related features aside the mobile sign-up flows are actually more complex than any desktop form. I do not have the right data at hand (for those companies in question) but for example the current Instagram sign-up form on the web feels the simplest, interestingly.

On the web, Airbnb uses a modal while Twitter and Instagram dedicate a full page for the form. The interaction design flows that Twitter has built in is also the most consistent although, of course, there are platform differences.

Twitter does heavily encourage users on desktop to enter their mobile phone number during step two, something Instagram does not do as of today. On mobile, however, a user is asked to enter her phone number (email can also be used). Even if she changes to email, she will be encourage right after to add her mobile number.

Instagram on mobile exposes the user to 5 (iOS) or 6 (Android) steps/screens before one is officially signed up which is the norm across those three companies whereby the flow on desktop can usually be completed in one step and on one page (except Twitter). This is one of the biggest differences. As users have to move between screens on mobile each company uses inline validation while the user types and once a valid input is detected the button ‘Next’ is activated.

On desktop the fields are validated once the user clicks ‘Next’ (button is always active). However, Twitter uses inline validation (in contrast to input validation on click) for the username while the user types and then either shows a check or error message. The form on Airbnb.com uses inline validation only for the password field and all other entries are validated once the user clicks ‘Sign up’.

Interestingly, Airbnb then uses conventional label copy and positioning for error messages (per field) if fields contained the wrong input. Only then input validation per field is done once a user moves to the next field. This behaviour is very unique to Airbnb as I have not seen it across many pages and apps in recent months. I wonder whether their data shows the benefit of doing this. On mobile, error messages for wrong inputs are usually field specific (as asked for per screen). Instagram on the web will show one error message on click even if more field inputs are wrong in stark contrast to Airbnb where each field will expose a user’s mistakes all at once.

Interestingly, Airbnb then uses conventional label copy and positioning for error messages (per field) if fields contained the wrong input.

In regard to what input is allowed and accepted, Twitter does actually suggest weird usernames. For example, it suggests "Andree342349", "Andree923122", "Andree242344". I do wonder which user would chose one of those usernames but, of course, if a user has not entered much data yet it can be quite tough to make reasonable suggestions. But then, why do even deploy such a feature? Instagram does not provide any helper text when choosing a password, neither on the web (though error message will advise the user what goes and what does not) nor on mobile, whereby Airbnb does but only on mobile.

What I found very interesting is the security aspect when choosing passwords. Instagram for example allows the password "121212" only on iOS but not Android, nor the web. "121212" is also a valid password on Twitter. On Airbnb the password "111111111111111111" is considered more secure than "123123123123123123123123123" and as long as the string contains one symbol "?1111111" allows the user to sign up. My personal guess for why those passwords are accepted is a fairly pragmatic one: the bigger the company gets the tougher it will be to sustain growth rates, therefore, the simpler the password, the easier a company wins a new user.