digg

Join DiggAbout

Discover the best of the web!
Learn more about Digg by taking the tour.

See the original image at smashingmagazine.com

Web Form Design Patterns: Sign-Up Forms

smashingmagazine.com — If you want to maximize the revenue of your service you need to maximize completion rates of your web forms. Unless you have some revolutionary ideas to impress your visitors at first glance, it is not enough to simply enable users to sign up on your site.

Bury
show profanity settings
expand all
  • colorjam, on 07/08/2008, -1/+19Excellent article.. Love all the stats about web forms..
  • ironeus, on 08/01/2008, -2/+2Forms are better without visual effects so I'm happy to see they are only moderately used.
  • digits12, on 07/08/2008, -2/+6interesting post.
  • jggube, on 07/08/2008, -0/+4This is a thorough discussion of web forms, but I would have to say that just because it's the majority doesn't make it the ultimate solution. It is, however, good to bring together what popular sites use just for reference, but things like "the submit-button is left-aligned" - to me - isn't a hard and fast rule unless some usability expert (like Nielsen) runs a study on it (someone probably has) and has confirmed that it's an optimal placement.
  • michaels73, on 07/08/2008, -1/+1I agree, very good and well written post. An education ;-)
  • webkami, on 07/09/2008, -2/+7Very interesting article, one page. Dugg!
  • paradisetonight, on 07/09/2008, -1/+1Great job but one thing missing though:

    I always wanted to know how many websites require email verification, in which they sent you an email and you have to click the link to verify that it is actually your email.
  • bxblox, on 07/09/2008, -0/+5FTA: "To be honest, we don’t really see any rationale in asking users to re-type the e-mail. Do you?"

    People often make mistakes typing their email addresses and if the email address is wrong they will never receive the confirmation message. I always end up copying and pasting it the second time, but I can see why they would request it.
    • RyeBrye, on 07/10/2008, -2/+1I'd rather exclude the idiots who can't type their email address than piss off the 99% who can. Especially considering the fact that most browsers will auto-complete the email, there is no excuse for requiring people to type it twice.
    • hokie47, on 07/10/2008, -0/+1One of the things I do is manage a learning management system (moodle) and we have around 5000 users so far. Moodle requires typing the address in twice and I still have people who can't put their email address in correctly. I don't even want to know what would happen if there were no checks.
      • toomuchpete, on 07/10/2008, -0/+1...the same people who can't do it twice would fail to do it once.

        Everyone else would do it right the first time and not hate you for it.
  • stutimandal, on 07/09/2008, -0/+2I think re-typing the password is important since it is starred out. Even though the article hints otherwise.
  • nicksource, on 07/09/2008, -1/+2Really well presented, would be good to see this sort of standard for more articles on Digg.
  • bitt3n, on 07/09/2008, -0/+1also what % puts the signup form on the home page?
  • ThetaDot, on 07/09/2008, -0/+1I did a slew of forms recently and I found myself using subtle hover / focus effects. I'm quite surprised to see that most don't care for them. To me it's an easy way to spruce up the appearance a bit... hmmm
    • RyeBrye, on 07/10/2008, -0/+1This "study" has nothing to do with user preferences. They just looked at a bunch of websites and documented what is already in place.
  • abbymats, on 07/10/2008, -0/+1Awesome article. I think an standard for such kind of forms must be developed. That would make process more easy and less annoying.
  • mediaspree, on 07/10/2008, -1/+2overly positive comments. "Hey low level employee of smashingmagazine..comment positively on this NOW"
    • RyeBrye, on 07/10/2008, -0/+1Considering how bad that article sucked - these people are either the biggest idiots on the planet or your suspicion of astroturfing is right on.
  • jdelator, on 07/10/2008, -2/+2With the recommendation engine I able to digg stuff I like before they hit the front page like way before hand. When I saw this on the front page, I was like OLD!!
  • Tribunis, on 07/10/2008, -0/+3I love when web designers high-light fields. Or better yet, make it simple enough to where I can just tab through and fill it out.
  • JM0ney, on 07/10/2008, -0/+3I think the point that was made about the captcha not being refreshed without the whole form being loaded again is an excellent one. I hate having to fill out the same damn form again because I couldn't figure out what the captcha image was supposed to be...
  • swaters210, on 07/10/2008, -2/+0As a young person who is working his first job as a web developer, I like to keep my forms simple(no hover, focus effects etc) and use red asterisks to mark required fields; which would be generated after the form is checked for validation. If it's a short form and only a few input fields have to be checked for validation, then I would indicate required fields with a red asterisks which would be generated before the form is checked for validation.

    I ran into this problem the other day, "should I indicate what is required with a red asterisk to mark required fields..it would only clutter the design? now that I look back at it, I should have colored the associated labels with a different color (perhaps red) and put a disclaimer at the top , then use the asterisk after the form is checked for validation .

    There's a lot to consider when it comes to designing a web form, because it has to be simple and as intuitive as possible for the vistor. Also , things like friendly validation error messages have to be taken in account as well. I haven't begun to tackle spam prevention yet and I think methods like captcha text are stupid/obtrusive/ugly yet necessary when you design web forms - there should be a better way.

    I bet someone could write a whole book on this subject!

    • megaton, on 07/10/2008, -0/+1By golly, they have!

      Such gems as The Design of Everyday Things, and Emotional Design are two easy readers on the subject...
  • RyeBrye, on 07/10/2008, -2/+3Is this article some kind of joke? I was expecting to see a well-laid out set of design patterns with useages and explanation.

    INSTEAD - I get some lame article that just has a bunch of pie charts showing me useless stuff. The entire premise of the article is that "If everyone does it, it has to be right".

    If you haven't read the article yet - don't waste your time. If you want to get a decent education on web design patterns - check out Yahoo's Design Patterns - http://developer.yahoo.com/ypatterns/ - it has actual CONTENT and not just a bunch of ***** statistics.
    • blaze03, on 07/10/2008, -0/+1From the author:

      "@all: please keep in mind that the results presented above are not our suggestions: this is how it is done in practice, not necessarily how one should do it in practice."

      In other words, these are not "***** statistics", they are just statistics. Which by themselves are at least interesting if not useful.

      And you're wrong, if everyone does it there is -some- benefit to doing the same because that's what the user expects (read: intuitiveness). For example, 99% of the time, the Submit button goes on the left and Cancel on the right. Following this rule has less to do with what is "right or wrong" and more to do with the fact that everyone uses this including Windows prompts, and so that's what the user expects.
      • RyeBrye, on 07/10/2008, -0/+1Unless he used a scientific method to take a random sampling of all websites on the internet - his stats suffer from a severe selection bias.
    • GoatMonkey2112, on 07/10/2008, -0/+1You guys are expecting Design Patterns in the sense of the programming books about design patterns as used in object oriented programming. Those are logical patterns that have some foundation in facts based on thought out experiences.

      This article is referring to patterns more in the sense of trends, which may not be an extremely accurate use of the word "pattern". The article is OK, it's just not named well.
  • justo, on 07/10/2008, -0/+2seems pointless without metrics on the drop-off rates
  • xbunsenx, on 07/10/2008, -0/+1Here is a great example of a form design pattern for validation (submit it without name or something):

    http://leadlogsys.com/
  • d1ckinabox, on 07/10/2008, -0/+0i hate having to retype my email...
    just thinking about it makes me cringe

    *cringe*
  • crfsrg, on 07/10/2008, -0/+0Nice article,but a bit over my head!
  • tmart, on 07/10/2008, -0/+1I am very impressed with this article. Very well researched, or at least it seems to be.
  • stygiansonic, on 07/10/2008, -0/+1Thanks, I've been debating some of the issues presented in this article and it's definitely helpful to see statistics showing what's "most popular", even if that doesn't necessarily mean that it's the best way.
  • dalsonado, on 07/10/2008, -0/+0A great article - a heads-up for Sign-Up Forms design and development.
  •  

    Login or register to add a comment

    Create a new account or login to join in the conversation on Digg. You'll also be able to Digg stories to help promote things you like.


© Digg Inc. 2008 — Content posted by Digg users is dedicated to the public domain.
DIGG, DIGG IT, DUGG, DIGG THIS, Digg graphics, logos, designs, page headers, button icons, scripts, and other service names are the trademarks of Digg Inc.