New OpenID Selector

After doing my own little usability study on two Javascript OpenID selectors, I decided I could come up with something better.

I wanted something that was simple for users that had no knowledge of OpenID. Here is what I came up with:

1.


2. After user clicks on OpenID logo:



... or if the user clicks on the AOL logo:

• Download it from the google project page.
  

Although I do think this is an improvement for usability I don't think this offers a final, long term solution for OpenID. OpenID should be a neutral system and by showing company logos is a form of advertising for these companies. And that is not fair.

Should we try and hide the fact that OpenID is being used to make it user friendly?
Should we try and find a way to quickly explain OpenID to new users?
Should we abandon URLs and use email addresses instead?

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.