What is the most pleasant and fast UX when logging in / registering for a private web-app?

Question

In my case, the openId login is out of the question. The application that I'm working on will only allow corporate users with a given specific email domain to register.

The login/register form needs to be simple and straightforward, allowing easy login, and easy registration.

I've made a few mocks, with various ways of achieving this, based on this answered question

Easy to spot the register button - doh, but the login kind feels neglected. Another alternative would be to have the register button to the left.
Fast to log in? Yes.
Fast to register? Maybe, but it's no intuitive what will happen when the user clicks the register button.

Fast to log in? Yes.
Fast to register? Yes, tabbed navigation is intuitive to users, however, since the lack of space, each extra field used for registering would require a bigger register window.

Fast to log in? Yes.
Fast to register? Maybe, same point as in the first case. And the way the buttons are placed seem inconsistent.

My question is, what is the fastest way to log in or register someone from the same panel, keeping into account the fact that the:

a. Users are corporate users with specific emails
b. No real data apart from email and maybe a name is required when registering.

Why do I want a login/register mechanism?

It's easier, faster and cheaper for the moment to log users in, because this will be a product that will be sold to other companies - which might or might not have the required capabilities to authenticate users internally.

Answer 1

There are MANY changes I would make.

1) Flow, left to right, top to bottom (latin based languages)
This implies that the 'Login' button be placed RIGHT aligned to fields

SIMPLIFY:

2) Remove titles
Remove the titles 'Login' and 'Register'. The buttons themselves should act as the title. Make them larger to match.

3) Remove labels
Incorporate the labels INTO the text fields themselves.

4) Combine Login and Register into a single page.
Each additional click a user has to make you lose potentially 20% of your clients. Eliminating clicks either tabs or web pages helps retain more clients.

5) Remove the additional re-type password field
This design element was driven by the engineers of operating systems. Usually an error meant that the user is LOCKED out of the system with no recourse to recover the password. In the web world, the standard way of retrieving your password is via the 'forgotten?' link by email. Also removes extra loops to jump over is always a positive for the user.

6) Move 'remember me' closer to field.
There was some debate whether 'remember me' should be next to the username/email or next to the login/signup. By the field provides it proper context, just after entering his email, he can choose to be 'remembered'. The reasons for placing it next to the 'sign in' button was to also inquire if they were logging in from a SECURE location. Made more sense to the engineers to be placed by the sign in. However it makes more sense from a user perspective that we are remembering his email address (maybe we will also remember his password, maybe not)

7) Missing 'forgotten?'
Again because of its context (next to the password field), its meaning is obvious. The issues of having maybe MIS-TYPED your password in the registration (sign up) panel becomes moot when you have an easy way to recover your passwords.

NAMES:

8) Login or Sign In
In the web world everyone has started to move to a common vernacular, Sign in as opposed to the login of OS based world.

9) Register or Sign Up
If we decide to go with Sign In, then it equally makes sense we would want to go with Sign Up

10) Email or Email address
email is the shorthand for email address, again no need for a more descriptive label

11) Missing Name?
Usually when you register someone you require at least a name. And instead of a first name and last name fields, its best to have a single field and request a full name. Again, note the pattern, we are offloading additional error checking to the programmer. Normally if the programmer designed this he insist on a first name and last name text field which he would directly map into his database.

12) Size and layout.
usually by size you can draw peoples eyes across the login screen. The question is WHERE do you want their eyes to get drawn to. The trick is NEW users are VALUABLE. Hence you make your design set up to sign up as many new users as possible. That means bigger type, bugger text field, more saturated colors for the REGISTER (or Sign Up) panel.

I quickly threw a mockup together, there is more tweaks, the sign up needs to be even larger, a better separation between signin and signup. Login should use smaller fonts. But the general idea is there.

MOCKUP:

13) Same fileds for Sign in / Sign Up? - No
Its confusing to have TWO buttons that does TWO different tasks for the user to pick up on. The best way to handle this is to have it managed BEHIND THE SCENES. If a currently registered user tries to sign up INSTEAD of signing in then the software behind the scenes detect that the email is already registered and the password matches, so the system should then AUTOMATICALLY sign in the user and NOT have him retype in all his information again in the sign in panel.

Answer 2

I think the first image presents what I normally expect, however, because more people login to an application than register ( one hopes - users shoudl only register once, and login regularly ), I would put the login to the left, and the register to the right.

If you need a separate registration details page, then maybe a link to the registration page, rahter than a button? However, the indication is that you only need the same details as when logging in. If this is the case ( is the name needed? ) then maybe just a login page, with two buttons - Login or Register Me?

The tabs are, IMO, too easy to miss - it is not immediatly clear how to register. And the login or register based on the same details, although I know it is popular, I find confusing, especially if I don't use a site often, and may not remember if I have already registered.

The focus should be on the login, not the register. But it is critical to show a clear route to registration form the login page.

Answer 3

I don't think anyone can state conclusively which of them is better. The me each has a benefit and a weakness. Of them, I personally like the second one with the tabs, but that is very subjective.

None of them are "bad" UX, but what really matters is which is most intuitive to the people using the application. You've already said that it is a closed group, so why not take a little time to do some usability testing on a few of the people in that group? It won't take you hours to do, and it will give you good insight into what works best for that group.

When doing it, remember to include one where the login and signup are not on the same form. It might not be neater that way, but if its clearer to the people using it, then it's worth considering.

Answer 4

Visually I like the second mockup, although I agree that it's not clear that you should click on the tabs to switch between signing in and registering. In the same mockup, I'd move the 'remember me' tickbox to the left of the button; this keeps the design clean and helps ensure that the user doesn't click on the button before noticing the tickbox. I'd also add the same tickbox to the Register tab.

If the user was to enter incorrect details when logging in, they should be presented with FRIENDLY text underneath the button, along the lines of: 'Sorry, we can't find your details; would you like to try again or register as a new customer/user/whatever?', with the word 'register' being a link to the registration tab.

As regards login names vs email addresses, I prefer to use email addresses due to the fact that different login scripts restrict the characters that can be entered in the field - I am variously known around the internet as Dorian Fabre, dorian_fabre, dorian.fabre and dorianfabre. This is obviously a pain when trying to remember which one I used to register, never mind matching it to a password.

Answer 5

This is a purely subjective answer: Out of the examples you provided I like the second one.

Personally I prefer seperating the login and register process. Instead of providing both at once provide a link on both to the other?

Have a look at some of the examples here: http://ui-patterns.com/explore/collections/login-forms

Answer 6

You should keep registration and login separate; otherwise, a user who accidentally tries to log in with the wrong credentials (e.g. misspelled username or wrong password) will unintentionally create an account with those credentials. Then they may become confused when all their data is "gone." You want to be able to tell someone logging in that their credentials are bad, whereas someone registering only needs to know if their username is already taken. Also, someone registering needs to confirm their password; someone logging in does not.

My opinion, then, is to keep Registration and Login as two separate pages. Below each form, have a link to the other page (e.g. "Already have an account? Log in!" and "Don't have an account? Register!").

Answer 7

None! Do you really need a login, can't you decide who's who based on other settings and simply log in the user based on the currently logged in user on the system?

If you really need a way to log in the user you might as well go for the no register option.

Simply let the user type in the login information and if its an unknown user name state that the user should create/register an account.