Friday 21 November 2008

OpenID Login Usability

After reading both Google's usability research on federated login and Yahoo's OpenID usability research, it is evident that there is still no best practice for a login and sign-up box.

One of the most popular solutions to help users pick their OpenID provider is to use JanRain's OpenID Selector. Here is what it looks like:

1. User types OpenID or uses a button to select their provider.

2. The following box is displayed when the user clicks on the drop-down button. User selects their provider and types their ID (if required).

3. User clicks sign-in button.

What is wrong with this approach?
  • Most users don't know what OpenID is. Do we even need to explain what it is? Most people will already have an account with Google, Yahoo, Microsoft or one of the other providers.
  • Having a URL input box is confusing. Why should I use a website address to login?
  • I would rather not link to an external javascript file on another website.
Open Selector

I recently discovered Open Selector, an alternative to JanRain's ID selector.

1. User selects provider from a drop down list.

2. User types username, URL or nothing at all depending on the provider selected.

3. User clicks sign-in button.

Why is this user experience better?
  • User knows that they must select a provider first. Works well for users unfamiliar to OpenID.
  • Only the OpenID URL input box is displayed if it is required.
The disadvantages?
  • Users familiar with OpenID will need to select "Other OpenID provider" which is an unnecessary extra step.
  • There is no "http://" when "Other OpenID provider" is selected. Do I need to add this or not?
How can we improve the usability?


  1. No need to even mention OpenID.
  2. Removing unnecessary words is always good usability. This text is already in the drop down.
  3. I don't mind giving attribution in the HTML code, but I would rather not clutter up the login box with this text.
  4. The OpenID input box has a yellow background. This should be white.
I'm still not convinced a dropdown is the best solution, but I do feel this user experience is better for those that do not understand OpenID - according to this study, 78% of participants have not heard of OpenID.

2 comments:

Anonymous said...

Thanks for posting about Open-selector!.

I appreciate your input, I'd like to point out a couple of things though :)

* Open-selector is a bit of code that will translate your regular OpenID textbox to the provider combo, so it will mantain the same style and text the page originally has. I mention this to clarify the "Sign in with OpenID" label on top of the login box in Open-selector, is because the page originally has that text, But you are right, it doesn't need to have that text, I'll see to remove it :).

* about the yellow background, that only because I'm not very good combining colors, but Open-selector is style independent, so it will look and feel according to your page :)

Thanks for the post and the input, I'm currently trying to improve Open-selector, all opinions are welcome.

I agree with you, I'm not positive that the dropdown combo is the ultimate solution, I am just trying out new things that might help OpenID :)

Anonymous said...

I'd like to point out a couple of things about Open-selector now.

I've added options to toggle whether to show or not the credits and label lines. So you can choose not to display them now! :) (thats svn version)

I've added a documentation page explaining how those options work.
http://open-selector.com/doc/