Having the register and login options on same page - Best practices

Question

Sorry for the making this a lengthy question, but I needed to make all info available.

So I'm trying to design the home page of a web application.

The home page will have the following elements

1. Logo
2. A short copy about the product
3. Three to Four bullet points about the features of the product
4. Options to login / register

i have figured out placement of all most all the elements except for "Options for login / signup".

I wish to address the following concerns

1. Keep the number of clicks as low as possible

2. Keep the overall layout uncluttered, especially because I will be adding social login buttons at a later time.

3. Make it clear that all I need for registration is an Email ID and password

Here are some of the options that initially came to mind

1. Provide two buttons - "Login" & "Resigter"

Example - Twitter

While this makes the layout very clean, it forces the user to necessarily click on one of the button before doing anything. For existing users it can get annoying as they need to click login and then enter credentials every time they wish to login while for new users it adds a step to the process and also hides what info will be needed for registration.

2. Focus on one - Login form with [submit] to login & separate [link] to sign up or vice versa

Example - Evernote

While this sounds comparatively better, I can't help but think of it as some sort of trade off. I either force users to click on the "login" link before logging in or add a step and hide required fields for registration.

3. Provide two forms - Seperate forms for each

Example - Facebook

As stated before, I fear this will make the layout too cluttered and confusing. Even more so when I add the social login buttons.

4. Merge both forms

Given I wasn't entirely satisfied with any of the options above. I was thinking of merging the two forms. Something like this

Basically, the user sees a version of the first form with "Register / Login" along with some cue to clear the confusion, something like "Existing IDs will be logged in, new ones will be registered". Then based on where the entered ID is new or existing, the form will change to the appropriate one.

I have only noticed something similar only on Amazon, thanks to this similar question, however I have my apprehensions about this method as it might make users a little skeptical before entering any field.

So the question is

1. Has there been research comparing the above methods or a standard best practice among the four

2. Is there a reason the fourth option is not as popular as compared to the first three (Like failure case studies etc)

I have gone through the following options, but they didn't seem as contextual to my circumstance

1. Best way to register and login within the same form
2. Best way to combine sign in and sign up in the same form?
3. Pros and Cons for having same form for login, register and forgotten password

Answer 1

Great to include those options, because I think you'll notice why each site uses a particular choice. Let's break it down.

Twitter is notoriously up against a "What is twitter? How do I use it? Why should I use it?" problem. You'll notice that their design pretty much represents this. Your screenshot didn't include it, but I know below that header they have a bunch of grid-like stories laid out to try to communicate what Twitter is all about. That's great for them, and they're using their real estate most likely in the best way possible. I think you're right though, still requiring a click for either sign up or log in is harsh. They might have laid out the login fields for users who already have accounts and save them the grief.

Evernote. Chances are that if a user made it to this page, they have heard about evernote somehow and what Evernote needs to do is sign users up. They are in total "grow the base" mode and would love your email more than anything so they can continue to send you email campaigns and explain the power of Evernote to you. Defaulting to "Sign up" is a business reason, but they are going to annoy their users who have accounts, which is why I understand your desire to the merged form.

Facebook. Such a good example. Most of the online world has an account these days, so they cannot play any games with making it hard for their users to login. That all makes sense, users can use the top login fields without any extra clicks. If not, new users can create an account in the prominent and very visually different UI.

I would recommend something like this for your case. Use Facebook's template and the room on the left-hand side as a way to include your product highlights/features. There have actually been studies to indicate that following Facebook's design, overwhelmingly, because it is just so familiar to people actually makes for better usability.