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
- A short copy about the product
- Three to Four bullet points about the features of the product
- 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
Keep the number of clicks as low as possible
Keep the overall layout uncluttered, especially because I will be adding social login buttons at a later time.
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
Has there been research comparing the above methods or a standard best practice among the four
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