Menu Search
Jump to the content X X
Smashing Conf New York

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Innovative Techniques To Simplify Sign-Ups And Log-Ins

There are many ways to design sign-up and log-in forms. Most designers are familiar with the conventional ways. But understanding and applying a few innovative techniques could make your forms simpler and more efficient to fill out. In this article, we’d like to present a couple of new ideas that might be useful for your next designs. Please notice that before using these techniques, you should make sure that they make sense in the context in which you are going to use them. We’d love to hear about your case-studies and usability tests that affirm or dismiss the suggestions proposed below.

Simplifying Sign-Ups Link

The purpose of every sign-up form is for users to complete it successfully and send it in. However, if the form is long and complicated, then the user’s excitement for your website could turn to displeasure. Here are a few innovative techniques that will make your forms faster and easier to fill out.

Ask for a User Name After The User Has Signed Up Link

Sign-up forms typically ask users to create a name that is unique to the website. However, coming up with a unique user name that’s not taken could take trial and error and, thus, time. Instead of hassling people for a user name when they sign up, you might want to consider asking afterwards. This way, you won’t lose sign-ups from frustrated users, and you’ll prevent users from creating random and forgettable names just to satisfy the form’s requirements.

 1

Require Users to Type Their Password Only Once Link

Many sign-up forms ask users to type their password in two different fields. The reason is understandable. Forms mask passwords for security reasons, so that snoopers can’t see them. And to cut down on typographical mistakes and increase the chances of correct input, two separate entries are required.

In reality, though, this allows for greater error, because it forces users to type more. They can’t see the characters they’re inputting, making it difficult to know whether they’re typing the right password each time.

2

A more efficient approach would be to ask users to type their password in once, but then include a box they can check to unmask the password, so that they can check it. This option could reduce the number of text fields and decrease the work that users have to do to sign up.

  • jQuery Plug-In for Masking Passwords

Auto-Fill City and State Fields Based on User’s ZIP Code Link

If you require the user’s home address, then consider auto-filling the city and state fields based on the ZIP code. The form will be faster to fill out because users won’t have to waste time and energy manually selecting their city and state from drop-down lists.

4

Auto-Complete the Country Field Link

The conventional way for users to specify their country is to select it from a drop-down list. A more efficient way would be to use an auto-complete text field. Instead of making users scroll through an alphabetical list of every country in the world, the text field would allow users to select their country from a small subset of countries that match the letters they type. The user needs only to type a few letters to see their country in the menu.

6

Allow Users to Auto-Fill Their Payment Address From the Shipping Address Link

If a user is buying a product, they’ll have to submit payment and shipping information. Most of the time, the addresses will be the same, so let them auto-fill one from the other. You could include a link saying “Same as shipping information” in the payment section, and when clicked, it would repeat the shipping data in the payment fields.

8

Don’t Check the Newsletter Option by Default. Offer a Preview Instead Link

Most website owners pre-check the newsletter box, hoping to get more subscribers. Chances are, it will work. But a subscription is meaningless if the user has done so only because they have overlooked or misunderstood the option. If they’re not interested, they’ll unsubscribe sooner or later. Forcing them to subscribe won’t help you in the long run. And receiving a newsletter without having explicitly asked for it can turn users off.

A more effective approach would be to make users want to subscribe by showing them a preview or excerpt of the newsletter. This way, they’ll know what they’re missing if they don’t subscribe. You’ll also sleep well knowing that users who subscribe have done so because they’re genuinely interested in your content.

9

Combat Spam by Hiding a Text Field With JavaScript, Instead of Using CAPTCHA Link

If you get a lot of spam, then putting a CAPTCHA on your form may be necessary. What’s not necessary is making the CAPTCHA an obstacle that turns users away. Traditional CAPTCHAs that ask users to retype distorted letters have been proven to hurt conversion rates. With the extra hassle they force on users, it’s no wonder.

A simpler approach that won’t lower your conversion rate is to use a hidden and required text field generated with client-side Javascript. Spambots can’t fill in the field because they can’t interact with objects in client-side JavaScript; only users can. This method is simpler and less intrusive and so will reduce spam without hurting your conversion rate. The only problem is that it relies on JavaScript to work which might be suboptimal in some cases. You could also use Honeypot Captcha approach12: you can create a honeypot form field that should be left blank and then use CSS to hide it from human users, but not bots. When the form is submitted, you check to make sure the value of that form field is blank. If it isn’t, then you can safely ignore the submission because it was submitted by a spam bot.

 13

Simplifying Log-Ins Link

The purpose of every log-in form is to get the user into their account. Some log-in forms do this better than others. Here are a few innovative techniques that will help your users log in more efficiently.

Allow Users to Log in With Their Email Address Link

Remembering an email address is easier than remembering a user name. User names can be unwieldy, and people remember their email address because they use email all the time. Give users the option to log in with their email address as well as a user name. The flexibility could save them the time and headache of recovering the user name if they forget it.

 14

Log Users in Without Leaving the Page Link

Logging in is a common task, and users will want to be able to log in from anywhere on your website. So, as soon as they do it, redirect them back to the current page. This will make logging in faster and allow users to get right back to their task.

There are a couple of ways to make this happen: a drop-down box or a modal window.

The drop-down box will open without taking users off the page. It takes up only a small part of the page, making it a fast and lightweight option.

 17

A modal window also keeps users on the current page, but it opens up at the center of the window, putting the focus entirely on the log-in form. This option gives you room to add supplemental information to the form.

20

Auto-Focus the First Text Field Link

Once the user sees the log-in form, they’ll be ready to log in. Make the process more efficient by automatically focusing on the first field. This saves them the time and effort of hovering and clicking. The user can keep their hands on the keyboard and start typing away. The auto-focus should also clearly highlight the text field so that the user knows they can start typing.

 21

Allow Users to Unmask Their Password Link

This option is almost as useful for logging in as it is for signing up. If users can’t see the characters in the field, they could easily mistype the password. If their input is rejected, they’ll know that they mistyped something and will have to re-enter their password until they get it right.

The problem is that users don’t know which character was mistyped and so can’t fix the mistake before submitting the form on the first attempt. This creates more work than necessary and makes users slow down their typing. Avoid this by adding a checkbox that allows users to unmask their password before submitting it.

 23

Users should have no trouble finding the password recovery link on your form. Instead of using a “Forgot your password” link, consider using a simple question mark button, which won’t take up a lot of room or get lost among other links. Because the question mark is a universal symbol for help, users will not wonder where to go when they’re having password trouble.

Make the “Submit” Button as Wide as the Text Fields Link

The log-in button isn’t just for taking action: it also lets users know what action they’re about to take. A small log-in button has weak affordance and can make users feel uncertain about logging in.

A wide button gives users more confidence and is hard to miss. The button’s label also becomes more visible, so that users are clearer about the action they’re taking.

 24

Allow Users to Log in Via Facebook, Twitter or OpenID Link

Nearly everyone has a Facebook, Twitter or OpenID account, and letting them log in with it brings big benefits. They can use your website almost instantly, without having to go through the sign-up process. Also, they won’t have to manage multiple user names and passwords across different websites.

25

Of course, you could even go further and use Facebook Connect to actually prefill data that your users might have to type; in the example below, on Friend.ly26, a Facebook application, the only thing that the user needs to do before starting using the service is just click on the “Register” button. The information about the user is loaded automatically which raises a huge privacy concern. You might not want to use this approach in practice.

 27

Conclusion Link

Your sign-up and log-in forms shouldn’t make the user’s life difficult. Spending time filling out a form is no one’s idea of a party. These innovative techniques will make your forms simple and efficient, so that users can sign up and log in quickly and start enjoying your content. For further ideas and examples, you might want to consider taking a look at Joshua Johnson’s article 20 Great Sign Up Form Examples to Learn From28.

(vf) (ik) (al)

Footnotes Link

  1. 1 https://www.smashingmagazine.com/wp-content/uploads/2011/03/usernameafter.png
  2. 2 https://www.smashingmagazine.com/wp-content/uploads/2011/03/signup2.png
  3. 3 http://forumsblogswikis.com/2007/08/15/using-ajax-to-get-city-and-state-from-zip-code/
  4. 4 https://www.smashingmagazine.com/wp-content/uploads/2011/03/signup3.png
  5. 5 http://www.devbridge.com/projects/autocomplete/jquery/
  6. 6 https://www.smashingmagazine.com/wp-content/uploads/2011/03/signup4.png
  7. 7 http://www.encaffeinated.com/articles/view/copying_billing_and_shipping_address_information_with_jquery/
  8. 8 https://www.smashingmagazine.com/wp-content/uploads/2011/03/signup5.png
  9. 9 https://www.smashingmagazine.com/wp-content/uploads/2011/03/simplify6.png
  10. 10 http://www.seomoz.org/blog/captchas-affect-on-conversion-rates
  11. 11 http://www.90percentofeverything.com/2011/03/25/fk-captcha/
  12. 12 http://haacked.com/archive/2007/09/11/honeypot-captcha.aspx
  13. 13 https://www.smashingmagazine.com/wp-content/uploads/2011/04/javascript-captcha.png
  14. 14 https://www.smashingmagazine.com/wp-content/uploads/2011/03/email_login.png
  15. 15 http://thefinishedbox.com/freebies/scripts/jquery-dropdown-login/
  16. 16 http://www.jqeasy.com/jquery-drop-down-ajax-sign-in-form/
  17. 17 http://www.wsj.com
  18. 18 http://www.bitrepository.com/ajax-login-modal-box.html
  19. 19 http://www.queness.com/post/77/simple-jquery-modal-window-tutorial
  20. 20 http://www.cnn.com
  21. 21 https://www.smashingmagazine.com/wp-content/uploads/2011/03/Picture-1.png
  22. 22 http://www.useit.com/alertbox/passwords.html
  23. 23 https://www.smashingmagazine.com/wp-content/uploads/2011/03/login4.png
  24. 24 https://www.smashingmagazine.com/wp-content/uploads/2011/03/account_login.png
  25. 25 https://www.smashingmagazine.com/wp-content/uploads/2011/03/social_logins.png
  26. 26 http://www.friend.ly/
  27. 27 http://www.friend.ly/
  28. 28 http://designshack.co.uk/articles/inspiration/20-great-sign-up-form-examples-to-learn-from
SmashingConf New York

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook

Founder of UX Movement, an online magazine for learning user experience design. Creator of Wireframe Patterns, a pro wireframing toolkit & Flow Patterns, a toolkit for making visual site/user flows

  1. 1

    Matt Rittman

    May 5, 2011 5:34 am

    Thank you, this was some very useful information!

    6
  2. 2

    Nice read ;) Thx for sharing!

    1
  3. 3

    Excellent article. Also adding to this, account activation via email is also one more thing which affects users interest on the website

    The hassle of going thru email and switching back to website has often let me ignore many websites.

    2
    • 4

      But if you don’t send an activation e-mail with the goal to validate the e-mail address how do you know the e-mail address is valid?

      6
      • 5

        Blaise Kal

        May 6, 2011 1:17 am

        In many cases it’s not important to know if the e-mail address actually exists. It may prevent some spam and unmotivated users because you’re adding s small hurdle.

        As a user, I hate having to confirm my e-mail address. It’s even worse when an activation e-mail doesn’t immediately arrive because some mail server is slow.

        3
        • 6

          The activation mail is a good thing not only to filter out bad email addresses but more importantly to make people use their OWN address. Otherwise they could just login with someone elses and that person would not be the wiser.

          9
          • 7

            As a user, I love to get my confirmation emails…and I somehow feel uneasy, if I don’t get any.
            IMO, that’s a huge step towards trust between a site and users.

            5
  4. 8

    cancel bubble

    May 5, 2011 6:14 am

    “Use a Question Mark Icon for the Password Recovery Link…Because the question mark is a universal symbol for help, users will not wonder where to go when they’re having password trouble.”

    I disagree with this (a ? icon alone). We’ve done pretty extensive user testing where I work with many different people (I’m talking a wide range from the general public in different cities) and most just don’t get ? icons. It actually constantly amazes me what most people just don’t get and I’m often left wondering how the hell they even use the web.

    You are far better off, IMO, using the traditional text link, i.e., exposing what’s behind the ? icon.

    If you combine the ? icon with text, that’s different because people aren’t left wondering.

    “Allow Users to Unmask Their Password”

    I’ve so far, only implemented this once for a Cisco project back in ’08 – and it was by their request. I’ve tried on other projects but it is a tough sell, IMO.

    The bigger problem with this I see is if someone enters a typo in their password and doesn’t unmask it to check it’s spelled correctly. Then they’ve registered with a misspelled password.

    Another option, and granted I can’t say this is very good, either, is to have the password revealed in plain text as the user enters it and when they blur the field, it changes to a password field? So when it’s focused it’s a plain text field, when not focused it’s ********

    28
    • 9

      James Young

      May 5, 2011 6:49 am

      The question mark icon was the only thing that left me wondering as well. To me that doesn’t make any sense and I think if someone needs a reminder of their password, make it very clear – I’ve left sites where I’ve been unable to remember an old password and it’s not been made easy to request a new one and I’m sure I’m not alone there.

      Otherwise a very enjoyable and informative article with some good tips :)

      J.

      5
      • 10

        Jennifer Fleming

        May 5, 2011 12:27 pm

        I agree, why would a small icon be more desirable than a readable blue link right near the form field that says “Forgot Password?”

        Also, the Check Password seems misleading. It sounds like it will check the validity of the entered password.

        3
        • 11

          Rob Whelan

          May 6, 2011 3:37 am

          Agreed — I’d phrase it “display password”, or perhaps “hide password” and check it by default.

          3
          • 12

            I think ‘check password’ is very task driven. It gives users a reason to do so. If its rephrased to ‘display password’ or ‘show password’, people may not see a reason to do that.

            Just a note, a way round the confirm e-mail field is to have the call to action at the bottom of the page to say ‘Confirm with rico@ricochow.com‘. I haven’t user tested this but it seems like a good way to make sure they check the e-mail before they submit. I guess it wouldn’t work the same way with passwords though…

            0
      • 13

        Koen Hachmang

        May 9, 2011 4:24 am

        Yes, I agree. I believe the main issue with this, is the context of the question mark. When placed behind text, people will read it as “what is this?” and expect an explanation of the term (password in this case)

        6
      • 15

        I totally agree.

        -1
    • 16

      You make some interesting points. Instead of your second option where the password is revealed then changed on blur, why not go the mobile route? Have the latest letter you enter revealed and all previous ones masked. That, coupled with the unmask checkbox could definitely work IMO.

      5
      • 17

        you're not thinking like a user

        May 5, 2011 7:24 pm

        You’re not thinking like the normal user who is going to look at the keyboard while typing in their password, defeating the purpose of the latest letter being revealed. It’s a good idea, just not necessarily useful for the majority of users.

        3
        • 18

          Ah, that’s a good point. I suppose it’s in our best interest to keep the end user in mind while designing ;)

          0
          • 19

            I don’t see the point of masking passwords in the first place. I’ve always hated it, as a user.

            It seems to assume there is somebody looking over the user’s shoulder, somebody sinister. Does it protect the user from spyware or something?

            If not, then I’d ditch it – or maybe I would ditch it anyway as users’ computers should be protected from spyware and users should, IMO, be treated like adults if they’re not.

            Or – offer ‘Mask your password’ as an option, rather than *unmask*!

            2
    • 20

      I agree with you comment about the question mark icon. While it’s visually more pleasing. I think this would affect usability. I agree, we (as web experts) would easily understand this icon, however many people aren’t as tech savvy and really need things spelled out for them. An icon (as a visual cue) and a forgot password text link seems like it would be the most usable option for all audiences.

      1
    • 21

      I agree with the “?” issue. But I don’t agree with the “password” issue. I think we should focus on the normal users. They will look on the keyboard while typing their password in the password field. Typing experts are good enough to type what they want without a mistake.

      Regards,
      Ramzy

      0
    • 22

      Masking the password is preferred upon logins ’cause there is more chance someone is watching over your shoulder.
      But when registering I would consider to show the plain text by default. The option to show the password textfield would be checked and could be unchecked if user wants it.

      In general, I believe email registration is the way to go.
      With email validation, you can let the user register with only requesting an email. Upon validation, the user is asked to fill in an username and password.

      For completeness you can send an ‘account details’ email to the user for reference.

      0
    • 23

      Well for password we can show actual character for few seconds and then convert that in to “*”. If we do this user will know what he/she has entered.

      0
    • 24

      Todd Zaki Warfel

      December 2, 2011 5:21 am

      We only use a single password entry field during registration for most of the apps we’ve designed lately and haven’t found any issues with it. In fact, since the password recovery link is right at the bottom of the sign in form, that handles the case were a user mistypes their password.

      So, we’re making a more elegant signup process for everyone and giving the less than 1% who mistype their password an easy way to fix it. It’s a much better approach.

      0
    • 25

      IMO, the main thing is verifying the accuracy of the password:

      – Removing the retype of the password assumes that all your keypress are correct. But its not foolproof, what if you have a failing keypress. Not all have the same keypress sensitivity.

      – Show password check box may not enforce true correctness for verification. What if the letters used are closely similar like the letter i, l or 1. Not all have 20/20 vision. And its seems awkward to show the password in big sizes just to verify them.

      Re-typing allows the user to:
      – test if the new chosen letters/symbols are correct.
      – verify their confidence that their entered password is correct

      Maybe, a combination of both is good: re-typing and optional show password for double checking.

      What is more important: Accuracy or convenience ?

      0
  5. 26

    Pretty good article, except the check-box that says “Check Password” is meaningless to me.

    Maybe it’d be better to call it “Unmask Password” or “Show me what I typed in the password field” or something a little more clear.

    The issue with a box to “Check Password” is that it seems to imply that the SERVICE or WEBPAGE will check the password, not the user. (Like you are instructing the system to check or verify the password). Check boxes are usually instructions from the user to the system. For example, on this same page, you have a check box that says “Remember Me”. Surely this is not an instruction to the user saying to remember himself!

    You also have a check box to Subscribe, and link to a site that talks about a check box to Copy Shipping Address to Billing Address. These, also, are instructions to the system, not to the user.

    8
    • 27

      I think you’re right. “Show Password” is a lot clearer. I was subliminally influenced by the checkbox and checkmark in the graphic and went check crazy.

      -1
    • 28

      I understand that it is a good idea to let the user verify his password, but making it visible is in my opinion a very bad idea. There is a reason why passwords are hidden, if you don’t care about your users security you can add this functionality but else its probably a very bad idea.

      -2
      • 29

        Todd Zaki Warfel

        December 2, 2011 5:23 am

        The only reason this is done is to thwart someone from snagging your password while they watch over your should while you register. How often does that really happen?

        Since it’s a user controlled action, it’s really not an issue. Additionally, the model used in iOS, which shows a letter and then masks it as subsequent letters are typed, or based on a timeout function is very effective and still secure enough.

        0
      • 30

        Todd Zaki Warfel

        December 2, 2011 5:31 am

        The only reason this is done is to thwart someone from snagging your password while they watch over your should while you register. How often does that really happen?

        Since it’s a user controlled action, it’s really not an issue. Additionally, the model used in iOS, which shows a letter and then masks it as subsequent letters are typed, or based on a timeout function is very effective and still secure enough.

        2
    • 31

      “Reveal Password” ?

      -1
    • 32

      Yes, I totally agree. It’s too ambiguous.

      0
    • 33

      Michael Phan

      June 9, 2011 2:08 pm

      I’d go with “Review Password”

      0
  6. 34

    Alan Vitek

    May 5, 2011 6:35 am

    Just a fair warning to a situation thank I dont think has been addressed yet:

    Facebook instant logins or “connects” can be a little dangerous. For instance, I was logged into a Facebook Page account for my work, and then tried to register with MacWorld.com via the Facebook Connect option. I think that because I was an account as a Page, and not a User, it ended up looping me into this weird 404 error, that would automatically pop up even when I tried to revisit the homepage, logout, or re-sign in with a different account.

    I had to clear my cache in order to fix the issue, however, I also had to be completed logged out of Facebook as well, or else it would automatically try to reconnect again.

    It was a pain. Other than issues like that, I typically enjoy not having to create tons of new accounts with websites now, if I can simply login via Facebook.

    Just my two cents. :D

    0
    • 35

      Rob Whelan

      May 6, 2011 3:53 am

      The one problem I’ve run into as more and more sites support “sign in as” using FB, Twitter, OpenID, etc.., is that I lose track of what I used to register. I have all of these accounts, sometimes more than one (for work vs. personal), so for stackoverflow (for example) I went a few months unable to sign in because I couldn’t remember which of the dozen or so options was the one I picked originally.

      It’s no longer a question of knowing the email address you would have used — now I also have to remember what login service, and which account with that service.

      Since the poor experience with stackoverflow I’ve simply been avoiding these options entirely, and sometimes avoiding webapps that don’t have the standard email/password option.

      5
      • 36

        Rob,

        You make a good point. I have only been part of a few websites that have required Facebook login, and so far it hasn’t been to confusing, but I can understand that after continued use, it could get a little overwhelming to remember all of the details! I understand what you mean when you say you can’t remember which account you may have used; I have a similar issue with email. I have a personal email (one from back in highschool, with a username I don’t personally like anymore, but has the bulk of my accounts associated with it), one for freelance work, and one for my job. It gets annoying! I’ve had to create a Google doc just to store basic login information for all of these accounts.

        Typically I use the Facebook login for websites that I may never, or may hardly ever visit again. For instance, if I wanted to grab a coupon for an event I may be going to, I would use a Facebook login, and then probably forget about it afterwards.

        Sometimes I just wish my google account would do EVERYTHING. But on the other hand, that could be dangerous if it got into the wrong hands…

        0
  7. 37

    “Auto-Focus the First Text Field”
    Only if you want to annoy keyboard users like me. We need to be able to choose focus for ourselves in a logical order; not in the order that a designer thinks is right.

    “Combat Spam by Hiding a Text Field With JavaScript”
    It’s excellent that you should support the avoidance of the hell that is squiggly symbols, but why this? If you want a human to use it, why hide it? Secondly, if you rely on JS to sort humans from bots, I might be picked out as a bot just because I have to use a text browser. Thanks.

    Remember that every form must degrade to a basically functional state if JS is not supported.

    “Use a Question Mark Icon for the Password Recovery Link”
    If I was able to see such a symbol in my browser, I would not expect it to be a link. What is wrong with anchor text?

    “Ask for a User Name After The User Has Signed Up”
    Excellent suggestion.

    “Auto-Fill City and State Fields Based on User’s ZIP Code”
    That would be OK if it ever worked, but I know folk who would happily tell you that it never works for them.

    By the way: I had to copy/paste this comment because your textarea is virtually unusable: its HTML column value is set at 0, which is just plain dumb.

    -1
    • 38

      Todd Zaki Warfel

      December 2, 2011 5:28 am

      If you’re using a text browser, you’re an edge case and probably used to subpar experiences anyway. Design for the 80%.

      The scenario that someone is coming to your site w/JavaScript turned off is also an edge case. Critical features should work w/o JavaScript, but realistically, it’s perfectly okay to design expecting JavaScript to work. That’s the real world, not some theoretical lab setting, or edge case design.

      Design for reality, not edge cases.

      4
  8. 39

    Egg Zuh Lend!

    I hope a lot of designers and developers read this article and have that lightbulb moment finally and implement signing up and logging in the way it should be.

    -1
  9. 40

    Luca Matteis

    May 5, 2011 6:58 am

    “Combat Spam by Hiding a Text Field With JavaScript”. Great article but hiding a text field with JavaScript will not combat spam at all… the spammer will still be able to access the URL where the request is being made, giving him open access to spamming capabilities.

    1
  10. 41

    Fantastic post on some really great techniques! I’ll definitely be using this soon. Thank you.

    0
  11. 42

    oAuth is the way forward. 5 second sign-up and it would stop people from being able to passwords too! I just with that facebook, twitter, etc. would become OpenID consumers as well as providers.

    Note lastpass today http://blog.lastpass.com/2011/05/lastpass-security-notification.html

    2
  12. 43

    We have been using the Facebook registation for a few months, one big plus is that you can ask for extra data. You don’t get complete access to the persons information, just there name and e-mail adress. Anything else requires the user to request further permissions from facebook.

    You can see it in action here.. http://www.rightrental.com and an overview of it on slideshare. http://www.slideshare.net/rightrental/the-facebook-experience

    -4
  13. 44

    Thanks for sharing!
    Just wondering “…in Via Facebook, Twitter or OpenID….Nearly everyone has a Facebook, Twitter or OpenID account…”

    But the social login graphic that shows below does not follow the order but rather Twitter, Facebook, OpenID. Regardless its clear enough.

    Thanks

    -1
  14. 46

    @Luca Yes it will. Most Spambots fill out all fields of a form with their gibberish. So if a field that is not visible to the visitor (either hidden by CSS or JS) contains any data, you can almost certainly throw that submit away. (because only bots – not humans) see the field.

    @Smashers nice read! bookmarked.

    -1
    • 47

      Personally I really don’t like the hiding box by JS idea and that’s simply because you CANNOT assume that just because it has data a spammer did it.

      I know I filled out a form once and used Google Chrome’s autofill feature, tried submitting and the site kicked me out with a message that their system detected I was a bot. I went back in and hand-typed everything and it worked fine… I’m sure the autofill filled in the spam-catcher box. If I didn’t have any idea what was happening (ie: if I wasn’t aware of this Captcha alternative) I wouldn’t have had any idea how to fix it and probably would have left.

      4
      • 48

        Good point. I think to make use of that technique one needs to completely understand these annoying pre-filling mechanisms (are they based on field names? then that’s not too hard to fix using some generate-id() mehod. or do they simply fill previous selections, than that can be fixed the same way). Actually, the proposed technique in the above article is a bit different that what I assumed it to be (without properly reading the article). A required field that simply doesn’t exist in the non-JS version.

        0
        • 49

          Steve Fenton

          May 6, 2011 12:00 am

          Hi Erik,

          A field that only gets added by JavaScript… I know some users with accessibility needs who don’t have JavaScript enabled. What will happen to them? I hope they won’t get detected as spam-bots!

          Steve

          2
          • 50

            Rob Whelan

            May 6, 2011 3:46 am

            Right, both of those suggestions to avoid captchas are seriously flawed, particularly if you assume that failing the test means you have a bot (and you can ignore the submission).

            For one thing, it’s trivial for a bot to work around if it is targeting your site specifically — it takes two minutes for a human being to check what a real request looks like (including the JavaScript secret field, or with the honeypot field empty…), and tweak the bot based on that.

            Second, there will be a not-insignificant percentage of your users that will be caught — some people have JavaScript off intentionally, some corporate firewalls strip out scripts, some have older mobile devices with poor or no JavaScript implementations. The honeypot fields will be filled out by auto-form fillers… I have a honeypot field that worked perfectly for many years, then Chrome went up a version and started filling in the botsOnly field with email addresses.

            Fortunately, if the honeypot trap is tripped, I give the user’s other options to prove they are real… do not ever put in this kind of check and simply discard the request (or give some other opaque response) to what you think is a bot! If it’s a user, they won’t be happy.

            2
  15. 51

    Entering the password once, without a mask (or with the option to remove the mask), compromises users security for usability. Users tend to reuse the same password (with the same username) in several sites, so with a sneak peak of the password you’ll make possible for a ill intentioned person to access every account.

    I can also see the upside of having to enter the password once – not having to rerun the registration if the user makes a mistake can increase conversion – but designers should take users security into account also.

    1
    • 52

      > Entering the password once, without a mask (or with the option to remove the mask), compromises users security for usability. Users tend to reuse the same password (with the same username) in several sites, so with a sneak peak of the password you’ll make possible for a ill intentioned person to access every account.

      Who do think is taking these ‘sneak peeks’? I think the assumption that users have miscreants looking over their shoulder all the time is crazy. It’s nought to do with security. It’s paranoia at best and patronising nonsense at worst. Usability trumps both:
      http://www.useit.com/alertbox/passwords.html

      I don’t see any point to masking passwords.

      0
    • 53

      Todd Zaki Warfel

      December 2, 2011 5:33 am

      How often is someone sitting over your shoulder snooping? Make it possible? Sure. Likely? Hardly.

      Security shouldn’t be ignored, but usability shouldn’t be abandoned for security.

      1
  16. 54

    This is great. Keeps these types of informative posts coming. We’re currently developing a new ecommerce store and the smashingmagazine articles are invaluable.

    0
  17. 55

    Merennulli

    May 5, 2011 7:26 am

    Something important I’ve noticed with the “Log in with Facebook, Twitter, Google, etc” sites is that a lot of websites absolutely miss the point. Major news outlets, for example, have the “Log in with…” buttons, but then when you try to use them, all you’ve done is ADD a step to the signup process to associate your Facebook/Twitter account with the new account they want you to create. It doesn’t shorten the signup process at all. Presumably it would change the login process from username/password to the signon model of whatever site you used, but that doesn’t help me any.

    Principle of Least Surprise applies here equally with limiting what’s required of the user. “Sign in with” should be exactly that, not a step to account creation.

    0
    • 56

      Bill Addison

      May 5, 2011 7:56 am

      Totally agree. Also, I’ve found that by logging in with Facebook or Twitter these websites then have access to all your info and sometimes, quite annoyingly, end up auto-posting stuff to your feed.

      1
      • 57

        This is not possible, a website can’t post stuff on your facebook wall if you don’t approve. You have to give the website the right to do so. You can also remove those rights for any website in your facebook privacy policy settings.

        2
  18. 58

    interesting article.

    The only thing I really don’t like is the Login via external services like Facebook because your site login is service dependent.

    1
  19. 59

    “Ask for a User Name After The User Has Signed Up”
    This is actually a good suggestion, but what if the user has to enter username first to sign up? Just like when you sign up your first email account? So, in my advice, use this suggestion appropriately.

    “Require Users to Type Their Password Only Once”
    I think I kinda disagree with this. Hey, your friend could peek on you if you unmask the password… I think trying to make your users typing password twice helps the user thinks twice before confirming their password. By inputting the password twice, we make sure the user is inputting the password properly. Personally, I think typing password twice is actually a good design.

    “Use a Question Mark Icon for the Password Recovery Link”
    Err… I think they will click it because they were curious about it, not because they want to recover their password. You could add a tooltip when you hover the icon to explain to the users. But, personally i prefer displaying anchor text instead. It’s just simple, informative, and elegant.

    “Make the “Submit” Button as Wide as the Text Fields”
    This is good. I think everybody agrees…

    “Auto-Fill City and State Fields Based on User’s ZIP Code”
    I think most casual people prefer to use the dropdown instead having to remember undescriptive ZIPcode. But it is a good idea. Another approach is to use a searchable dropdown, or autocomplete text field.

    “Log Users in Without Leaving the Page”
    Yeah, this is great!

    “Auto-Focus the First Text Field”
    @Adam32
    Actually, I’m a keyboard user too…

    Anyway, i agree that your article is very innovative…
    Thank you for sharing…

    2
    • 60

      Steve Fenton

      May 6, 2011 12:04 am

      Hi Maul

      RE: “This is actually a good suggestion, but what if the user has to enter username first to sign up? Just like when you sign up your first email account? So, in my advice, use this suggestion appropriately.”

      Have you noticed though that if you try and register for a service and your selected user name is already taken, it kinda makes you give up – especially if you try a couple of variations and they aren’t available too. This means you could lose a lot of conversions. By moving the step to AFTER sign up, they are already joined and just need to choose a user name as a post-sign-up process. It does depend on the circumstances.

      Everything else you mention, especially the password stuff, I agree with!

      0
    • 61

      Blaise Kal

      May 6, 2011 1:20 am

      You could also do username == email address, and a person can choose any display name he/she likes.

      2
    • 62

      > …your friend could peek on you if you unmask the password…

      I think this fear is over-rated. How often do users have someone looking over their shoulder when they’re online, much less when they’re signing up to a site for the first time (not something most people do every *week*), being snooped on by some “friend” they can’t trust?

      If this is the only reason for the nearly ubiquitous practice of masking passwords, it’s all pain and no gain for site visitors.

      -2
      • 63

        I absolutely agree. Not so many people have such rude and dumb friends for masking and entering passwords twice to be justified. On the other hand, 99% of people who are typing passwords without idiot friends staring over their shoulders (including myself) find that solution to be totally counterintuitive.

        0
    • 64

      Todd Zaki Warfel

      December 2, 2011 5:37 am

      @maul “Require Users to Type Their Password Only Once… I think I kinda disagree with this. Hey, your friend could peek on you if you unmask the password… I think trying to make your users typing password twice helps the user thinks twice before confirming their password. By inputting the password twice, we make sure the user is inputting the password properly. Personally, I think typing password twice is actually a good design.”

      Then he’s probably not a very good friend. And if he’s sitting next to you, simply ask him to look away.

      A better model is to either show each letter, then mask it on a timeout, or next character is typed, or to have one password field and make it easy to reset by sending a reset link to the email address on account.

      2
  20. 65

    “Combat Spam by Hiding a Text Field With JavaScript, Instead of Using CAPTCHA”
    I understand CAPTCHA can be an obstacle but the solution you propose is less secure as a CAPTCHA.

    “Spambots can’t fill in the field because they can’t interact with objects in client-side JavaScript”.
    If spambots don’t have the capability to do this today, it is not technically challenging to add such feature.

    1

↑ Back to top