web form design patterns signup forms part 2

7/29/2019 Web Form Design Patterns SignUp Forms Part 2

1/14

By Vitaly Friedman

W ebForm DesignPatterns:Sign-Up

Form s,Part2

Published onJ uly 8th, 2008 inCaptcha, Forms, Studies with99 Comments

Last week we have presented first findings of our web forms survey . The main objective of the

survey was to provide designers and developers with some intuition of how effective web forms

are designed; we also presented some guidelines of how an effective and user-friendly web form

can be achieved.

We have focused on sign-up forms as we wanted to consider further crucial forms (e.g. checkout

forms) separately. Afterwards weve gone through each and every one sign-up form of the

selected sites and analyzed the design approaches implemented in these forms. Below we

present the second part of our findings the results of our survey among web-forms of 100

popular web-sites where web-forms (should) matter.

Please notice that this post is not about checkout forms thats a topic for another discussion,

we may consider them separately in one of the upcoming posts. We would like to thank Wufoo

for providing us with a framework to conduct our survey.

3. Functionality of the formsIn the first part of our research we have considered the placement of the sign-up links and sign-

up forms as well as on the visual appearance of forms. However, no matter how nice a design

looks like, if the form doesnt work properly, the completion rates will remain low. Let us now

consider the functionality of the sign-up forms as well as typical problems, patterns and solutions

used when it comes to the design of these forms.

1

2

Page 1 of 14Web Form Design Patterns: Sign-Up Forms, Part 2 | Smashing Magazine

11/7/2012http://www.smashingmagazine.com/2008/07/08/web-form-design-patterns-sign-up-forms-part-2/


2/14

3 .1 . HOVER, ACTIVE, FOCUS EFFECTS IN USE?

Apparently, to improve form completion rates designers try to avoid all kind of distractions and

offer a clear, unambiguous and simple web form. This is essentially the reason why any visual

effects are used very moderately if used at all.

84% of the web forms which weve reviewed didnt have any kind of hover, active or

focus-effects,

16% used very subtle hover-effects.

3.2 . HELP, SUPPORT, TOOLTIPS: STATIC OR DYNAMIC?

Sometimes the label of the input fields isnt concrete enough; however, users need to have a

sufficient understanding of the information they need to provide. Which characters are allowed inthe username? How many characters should a password have? Does a provided e-mail

automatically become login to use the service?

Hints and tooltips provide assistance helping users to minimize the number of times an input

should be reconsidered. Besides, there is nothing more annoying that some input field which

doesnt accept users input although it seems to be perfectly correct. To avoid it, designers make

use of (usually) unobtrusive and clear hints.




3/14

57% of the reviewed web forms provided static help tips which are supposed to explain what

is expected from the users input; these tips are obviously placed next to the input field. 10% of

the tooltips appear on demand usually after some help-icon is clicked or when the user is

typing the information in the input field.

3.3 . HELP, SUPPORT, TOOLTIPS: WHERE ARE THEY PLACED?

When providing users with assistance it is necessary to make sure not that the help is simply

provided, but that it can be easily found and understood by users. It is crucial to make sure that

users dont make mistakes associating a hint to an input field. To achieve it you need to know

where users expect hints to appear. So where are hints and help usually placed within the form?




4/14

If hints and help appear, they appear

below the field (57%)

on the right side of the field (26%)

above the field (13%)

on the left side of the field (4%)

We have observed a strong trend toward hints placed directly below the input field. Usually

such hints have a slightly different color, in most cases lighter than the main content.




5/14

3 .4 . INPUT VALIDATION: STATIC OR AJ AX?

Although Ajax seems to have literally flooded web sites with a rich user interaction over the last

years, it still hasnt managed to reach a critical mass among popular web-services. Surprisingly,

we werent able to identify a trend toward Ajax. The classic validation techniques which validateinput after the user has clicked on the submit-button are more popular than real-time-validation

with J avaScript.

According to our research,

30% of the forms displayed only an error-message at the top of the form (no input

fields were highlighted),

29% had highlighted input fields with corresponding messages next to the input field

(no error-messages were provided at the top of the page),

25% used both error-messages and input fields,

22% used real-time validation with Ajax,

14% used J avaScript-error warnings,

1% used a system-message with a go back-link.

3.5 . DESIGN OF ERROR MESSAGES

As you can see, we have identified six different types of error validation. It is remarkable that

14% of the forms still use J avascript-error-windows to communicate problems (e.g. YouSendIt ,

Mail.ru , Newsvine , Clipmarks , Yandex , see screenshot below) while only 22% had at least

partial Ajax-validation (usually for checking available user names). It is also remarkable that not a

single site had no validation whatsoever.

3

4 5 6 7




6/14

Newsvine uses JavaScript-error warnings to communicate problems.

Usually designers tend to report mistakes using a) error messages appearing after the submit-

button is clicked and / or b) highlighting incorrect input fields visually. In the first case errors are

usually bulleted and presented as a list at the top of the page, before the form. In the secondcase usually the color of the border of the wrong input field is highlighted together with the label

of the field (in most cases with a red text color and red background color).

Sometimes designers combine both techniques and use error message as well as the input field

highlighting. For instance, consider the sign-up form on Ning (see image below) which

combines both techniques.

8

9

10




7/14

Usually, red is used to indicate mistakes; however it is not necessarily the case. Tickspot ,

Mixx.com and Furl use yellow to communicate problems occurred during the form

completion.

However, if any color is used at all to communicate a successful registration, then it is green. It

was the case in 97% of web-sites where success was highlighted visually.

11

12

13 14

15




8/14

3.6 . IS IT NECESSARY TO CONFIRM THE E-MAIL?

Only in 18% of the cases it was necessary to confirm the e-mail (e.g. Odeo , Ning ). To be

honest, we dont really see any rationale in asking users to re-type the e-mail after all, users

can see what they input because the e-mail field is not starred out (updated). Do you?

3.7 . IS IT NECESSARY TO CONFIRM THE PA SSWORD?

It sounds reasonable to ask the user to confirm the input as the user doesnt see the information

typed in (he/she sees asterisks instead). However, many sited decide to remove one input field

to minimize the time required to complete the form.

16

17 18




9/14

In 72% of the cases it was necessary to confirm the password. However, many large sites such

as Facebook, Friendster, LinkedIn, Stumbleupon, Pownce and Twitter dont require password

confirmation.

3.8 . IS CAPTCHA IN USE?

While users would definitely be glad if captchas were gone, they are necessary in practice,

because web-sites need to make it impossible for spambots to create numerous accounts as

otherwise they would need to filter spam accounts in the database.

According to our research,

52% of the sites dont use captcha,

in 39% of the cases it was impossible to reload the captcha without reloading the

whole form. This is really dramatic from the usability point of view.

However, we couldnt identify a trend toward sign-up forms with or without captchas. In any case,

if you use a captcha, please make sure that it is either always easily readable or users can

reload the image in case it is not readable. Some sites havent offered the possibility to reload

the captcha, but Digg, AOL, Slashdot, Google and Last.fm have made it possible to the users to

listen to it in case it is hard to recognize.




10/14

3.9 . CANCEL-BUTTON IN USE?

When we were coming up with the design problems to consider when designing web forms, we

have expected sign-up forms to not have a cancel-button, as it doesnt really make much sense

for the users to abort the form completion after all fields have been typed in. Yet we were partlywrong.

The cancel-button was used only in 8% of the cases. In some of these cases the cancel-

button came right after the terms and conditions-section (e.g. Zoho Writer). Consequently, if

users do not want to agree to the service conditions, they could abort the process. On the other

side, some services offer a payment plan before the registration (e.g. Crazyegg ). In case users

have selected the wrong payment plan they can get back with the cancel-button and select

another plan they prefer.

Apart from that: we just dont understand why Dzone has a cancel-button placed on the left in its

sign-up form.

If the cancel-button is used, it is placed on the right side of the submit-button (4%). Among thesites reviewed in the post cancel and submit-buttons didnt have a strong visual difference and

were placed next to each other. From the usability point of view it makes more sense to use a

clear visual distinction between primary action buttons and secondary action buttons and

introduce a significant amount of space to clearly separate them.

3.10. ALIGNMENT OF THE SUBMIT-BUTTON

19

20




11/14

Depending on the form layout it may make sense to align the submit-button on the left, on the

right side or place it in the middle of the layout. Designers seem to have a strong preference

toward left-aligned submit-buttons (56%), followed by centered buttons (26%).

Right-aligned submit-button is still popular (17%), however it is often used when designers want

to indicate the next step of the registration. In such cases submit-buttons are often titledContinue or Next. Reason: in usual desktop-applications Next-button is also often right-

aligned.

3.11. THANK-YOU MESSAGE

While few years ago most services offered a simple, basic thank-you message after a successful

registration (usually with a link to the login-page), now most sites try to motivate users to explore

the service immediately.

45% of the forms asked just registered users to proceed with submitting further

information, finding friends in the networks, suggesting the site to friends or filling out

his or her profile.

33% of the forms presented places to go and functions to explore in an engaging,

user-friendly-tone,

4% offered a basic thank you-message,

2% had a redirect to the homepage.

FURTHER FINDINGS




12/14

tab index was used correctly in 99% of the cases (the only exception was Habrahabr

)

24% of forms used conversational talk, trying to address users needs by speaking

with them through labels. Informal phrases such as Whats your name?, Your e-

mail, please? or Id like to are common in this context.

38% of sites prefer to remain formal and use business talk, asking users the

required information user-friendly (e.g. Your name, Confirm password etc.),

38% of sites use system talk; here visitors are asked for their Login, User

password, Location etc.

Bottom line

Lets conclude with a brief overview of the findings presented above. Please keep in mind that

we have considered only sign-up forms.

sign-up forms dont have any hover, active or focus-effects (84%),

hints and help are either static (57%) or dynamic (33%) and appear below the input

field (57%) or on the right side of the field (26%),

static validation is as popular as dynamic validation no trend toward Ajax;

e-mail confirmation is not used (82%),

password confirmation is used (72%),

captcha can be used or not used (48% vs. 52%),

cancel button is not used (92%),

the submit-button is left-aligned (56%) or centered (26%),

thank-you message motivates users to proceed with exploring the services of the

site (45%).

21




13/14

FOOTNOTES:

first findings of our web forms survey - http://www.smashingmagazine.com/2008/07/04/web-

form-design-patterns-sign-up-forms/

Wufoo - http://www.wufoo.com

YouSendIt - http://www.yousendit.com/

Mail.ru - http://www.mail.ru

Newsvine - http://www.newsvine.com

Clipmarks - http://www.clipmarks.com

Yandex - http://passport.yandex.ru

https://www.newsvine.com/_tools/new/user

Newsvine - http://www.newsvine.com

Ning - http://www.ning.com

https://www.ning.com/main/profile/signUp?target=http%3A%2F%2Fwww.ning.com%

2Fhome%2Fapps%2Fcreate%3FappUrl%3Dsocialnetwork%26network_name%3D%

26network_url%3D&from=home

Tickspot - http://www.tickspot.com/

Mixx.com - http://www.mixx.com/

Furl - http://www.furl.net/

http://www.tickspot.com/

http://www.tickspot.com/

Odeo - http://www.odeo.com

Ning - http://www.ning.com

Crazyegg - http://www.crazyegg.com

http://www.dzone.com/links/users/register.html

Habrahabr - http://www.habrahabr.ru/

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21




14/14

Vitaly Friedman loves beautiful content and doesnt like to give in easily.

Vitaly is writer, speaker, author and editor-in-chief of Smashing Magazine, an

online magazine dedicated to designers and developers.

With a commitment to quality content for the design community.

Smashing Media. Made in Germany. 2006-2012. About / Impressum.

http://www.smashingmagazine.com


web form design patterns signup forms part 2

Documents