OpenID RP login UX
Live demo location: http://openidux.dotnetopenauth.net/
One high-level goal of all this work is to produce a set of HTML, CSS, and JS files that can work on any web platform, so that ruby, python, php, coldfusion, and (of course) ASP.NET RP web sites can benefit from a better UI for logging users in.
Interesting scenarios to experiment with and/or test
- Login by clicking on Members Only. This invokes the full page redirect login UI.
- Login by clicking Login in the upper-right corner of the page. This invokes the popup dialog UI.
- Visit the account management page and add additional OpenIDs or InfoCards to your account so you can log in with multiple identities yet be recognized as holding just one account.
- Login multiple times, using various OPs. Notice first that we highlight the button you chose the prior time. This helps the user not splinter his identity on a return visit in the event he has accounts with more than one displayed OP.
- Notice that in the login UI some OPs support checkid_immediate, and on a return visit, a green checkmark appears in the lower-right corner of an OP button when an immediate login is available. If a green checkmark is not visible on an OP button, a popup window will be used to guide the user through the initial login process. Some OPs (such as Verisign and Yahoo) do not support checkid_immediate, and will never display green checkmarks.
- When logging in, try using the OpenID button. Notice that as soon as you finish typing that discovery on that identifier begins and a login button appears within the text box. Next time you visit, the UX will remember what identifier you typed in and help you log in again.
- Try using the OpenID button with an identifier that delegates to multiple OPs. Notice how the Login button that appears to help you go through checkid_setup (if no checkid_immediate requests come back positive) is a split button, allowing you to actually pick which OP to log in with, and these OPs are in priority order (adjusted for OPs that are down or misbehaving, which are moved to the bottom).
- Use Internet Explorer, and log in with your InfoCard.
Special release notes
In this iteration, I’ve elected to go with the popup dialog approach to displaying the login UI rather than a popup browser window. This is still alterable, and your feedback and/or preferences on this decision is most welcome.
The current set of OP buttons displayed include 4 OPs: Google, Yahoo, Verisign and MyOpenID. The last two of these do not fit the qualifications given in the design document, but they are included here to assist in the feedback process, and because I don’t know how to make four buttons (Google, Yahoo, OpenID and InfoCard) look good, so I jumped up from three to six.
In the OpenID text box area, after authentication completes a green checkmark is displayed, but sometimes no login button appears to complete login. This is a UX issue I haven’t figured out how to solve yet. But the way to proceed with login is to click the original, large OpenID button again.
The browsers I’ve tested with are IE8, Chrome 3, FireFox 3.5 and Safari 4. If you test with other/older browsers, please leave feedback about how your experience was. But currently I’m not targeting older browsers, so any bug reports regarding backward compatibility may not be fixed.
How to leave feedback
Leave a comment.