Innovative Techniques To Simplify Sign-Ups and Log-Ins

Simplifying Sign-Ups

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

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.

Usernameafter in Innovative Techniques To Simplify Sign-Ups and Log-Ins

Require Users to Type Their Password Only Once

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.

Signup2 in Innovative Techniques To Simplify Sign-Ups and Log-Ins

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.

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

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.

Signup3 in Innovative Techniques To Simplify Sign-Ups and Log-Ins

Auto-Complete the Country Field

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.

Signup4 in Innovative Techniques To Simplify Sign-Ups and Log-Ins

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

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.

Signup5 in Innovative Techniques To Simplify Sign-Ups and Log-Ins

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

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.

Simplify6 in Innovative Techniques To Simplify Sign-Ups and Log-Ins

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

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 approach: 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.

Javascript-captcha in Innovative Techniques To Simplify Sign-Ups and Log-Ins

Simplifying Log-Ins

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

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.

Email Login in Innovative Techniques To Simplify Sign-Ups and Log-Ins

Log Users in Without Leaving the Page

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.

Dropdown Login in Innovative Techniques To Simplify Sign-Ups and Log-Ins

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.

Modal-login in Innovative Techniques To Simplify Sign-Ups and Log-Ins

Auto-Focus the First Text Field

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.

Picture-1 in Innovative Techniques To Simplify Sign-Ups and Log-Ins

Allow Users to Unmask Their Password

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.

Login4 in Innovative Techniques To Simplify Sign-Ups and Log-Ins

Use a Question Mark Icon for the Password Recovery Link

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.

Login5 in Innovative Techniques To Simplify Sign-Ups and Log-Ins

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

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.

Account Login in Innovative Techniques To Simplify Sign-Ups and Log-Ins

Allow Users to Log in Via Facebook, Twitter or OpenID

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.

Social Logins in Innovative Techniques To Simplify Sign-Ups and Log-Ins

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, 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.

Facebook-vitaly2 in Innovative Techniques To Simplify Sign-Ups and Log-Ins

10 Comments to “Innovative Techniques To Simplify Sign-Ups and Log-Ins”

  • Anuj June 4, 2011 at 12:38 pm

    nice innovative Blog post.

  • Ev dog August 19, 2013 at 11:57 am

    I’ve always done GET requests regardless, but I think I should probably look into it 😛 .

    The first question is if GET can be used for passwords. I know that it’s generally considered best practice to use POST for password forms, but isn’t this a bit different? Or am I wrong?

    Also, are GET requests more readily cached than regular HTTP requests? I know that POST requests are not cached whatsoever, but I’ve had no problems (thus far) with AJAX-GETs and caching.

  • gail C August 22, 2013 at 10:48 pm

    I live on Ajax. I was wondering which buses I should take because I never been their by a bus before.

  • evangldbrg September 3, 2013 at 4:45 pm

    We were looking at houses in the GTA and found a bungalow near Warden and Lawrence that costs roughly as much as a house 3x its size in Ajax (around $400,000).


  • che-che September 20, 2013 at 11:56 pm

    How does AJAX minimize the traffic between the server and client?

  • Anny October 8, 2013 at 12:44 pm

    My friends and I are planning to go to wonderland in June and we live in Ajax. We do not drive, and are wondering the best way to get there from Ajax using the buses or trains. The more detailed the better. Thanks for any help anyone can give us.

  • Caltel T October 13, 2013 at 2:17 am

    I noticed Ajax ingredients are calcium carbonate, and sodium carbonate (both raise PH balance) and I was wondering if this would be ok? thanks
    peat moss is decomposed sphagnum moss? how could it kill something that’s dead?

  • zigg3ns November 1, 2013 at 3:35 am

    Ajax would have probably still been knocked out but I just want to know his name.

    I wish Real all the best in the knock-out stages.

  • JDOGG1122 November 30, 2013 at 10:26 pm

    I have a simple email subscription form that uses Ajax to return a thank you message when someone enters their details. The thank you appears above the form but at the moment it effects the forms position and moves it downwards to make way for the thank you message.

    How can I stop this from happening (form moving downwards) keeping the form in a fixed position and the Thank you message still appearing above it?

  • Adam December 1, 2013 at 8:56 am

    Ajax Manufacturing repairs aircraft engines. The company’s purchasing department supports its two departments, Defense and Commercial. The Defense division has contracts with the Department of Defense and the Commercial division works primarily with domestic airlines and air freight companies. The cost of the purchasing department is $1,010,000 annually.
    Information on the activity of the purchasing department for the last year follows:

    Number of
    Purchase Orders Dollar Amount
    of Purchases
    Defense 4,900 $ 100,000,000
    Commercial 19,800 150,000,000

    What is the purchasing department cost charged to each division if Ajax allocates purchasing department costs based on the number of purchase orders?

    What is the purchasing department cost charged to each division if Ajax allocates purchasing department costs based on the dollar amount of the purchases?