7

I have a page that serve both login and register. I put the two form side by side (login form to the left, register form to the right). In menu header, there would normally be button that lead to login/register page.

In this case, how should I name the login/register page?

Here is the two options that I have thought of:

  • Login | Register: This would explain clearly what the button's function is. However, some guys said this make the button "long and kind of confusing".
  • Login: To make it short. The downside is unregistered users might overlook this button when look for register page.

Here is the mockup of the login/register panel:enter image description here

Improve this question
1

2 Answers 2

Reset to default
10

They should be two separate calls to action as people will have a certain term in mind when looking to login or register.

The two things are not identical in the mind of the user, even if they are very similar in terms of functionality. So label them Log in & Register, or Log in & Create Account, or Log in & Sign up, but beware Sign in & Sign up can be confusing side by side!.

Regarding the use of links versus buttons - links open pages and buttons make an action. Clicking something to open a login or register form should be a link not a button.

Having the login and register forms side by side is not the norm and I would say is being moved away from rather than towards. For example Huffington Post used to have a Log In and a Create Account link going to the same place (as below), but have now split the two into simpler cleaner looking forms dedicated to the task. This is what it used to look like (with current implementation also shown further down).

enter image description here

And this is what they have done now - making for a much more task oriented experience.

enter image description here enter image description here

flickr's approach meanwhile is to take you to the same place, whether you click Sign in or Sign up (but note they have two separate links for this). This is probably because the user may already have a Yahoo ID, and while not having an explicit account with flickr, the ownership of a Yahoo ID means that the login or signup process is identical.

Personally I think this confuses the issue as some users may well confuse signing up for a Yahoo ID with signing up to flickr and click the big bright attractive Create New Account button anyway. This is a good example of providing too much information and too many options in what should be as simple an environment as possible in order to maximise efficiency. And that's probably what drove HuffPost to split their combined form.

enter image description here

Regarding the comment below about concerns over emptiness of the form, here is one of my favourites - the signup form from Toggl. I have absolutely no qualms over the simplicity of this look. I love it.

enter image description here

Improve this answer
5
  • I have updated the question with the mockup for the login/register panel. As you can see, there is not much stuff in the login, register form. Separating them into 2 pages would make each page look pretty empty. Furthermore, I think let them side by side would save the user some effort of navigating between login form and register form (which might potentially not annoy a few percent of going-go-register-users). What do you think of this?
    – tiengtinh
    Commented Nov 23, 2012 at 12:21
  • @tiengtinh Irrespective of how simple the two halves are, the fact remains it could be made twice as simple by removing half the content. Such similarity between the two halves makes it look even more like half of the page is unnecessary. There's nothing wrong with looking as simple as possible. You don't have to design it with masses of white space so that it looks empty, just design it so that it looks 'oh so easy to do'. Feel free to add a discrete well labelled link that switches between the two. Label each of the forms clearly at the top, even though the buttons say different things.
    – Roger Attrill
    Commented Nov 23, 2012 at 12:29
  • @tiengtinh I added an example from Toggl as a demonstration that minimal and simple content can also look great.
    – Roger Attrill
    Commented Nov 23, 2012 at 13:08
  • 1
    Fascinating. Toggl loses cool points for aligning down the center. They should use a grid instead. Easier on the eyes.
    – Tyler Langan
    Commented Nov 23, 2012 at 13:16
  • 1
    @Roger Attrill Thanks a lot! That's real big help. I have decided to separate the two page.
    – tiengtinh
    Commented Nov 24, 2012 at 2:14
2

I'd go with link only and not a button. Also I would only show login option if the user clicked Login and only the register option if the user clicked Register. This can be done with the same page, but add some logic (form action get) to each of the links.

If you really need buttons, use two, since login and register are two completely different actions.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.