Thursday, October 22, 2009

Feedback requested: New OpenID RP login UX prototype

OpenID RP login UX

Live demo location: http://openidux.dotnetopenauth.net/

Design considerations

The DNOA login UX design document contains the design spec, and some of the reasoning that went into that design.

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.

5 comments:

  1. Almost everything works good, but
    "JavaScript - http://openidux.dotnetopenauth.net/Members/scripts/LoginLink.js - Linked script not loaded" under Opera 10.
    And i have not clickable buttons under Chrome 2.0.172.28 =((

    ReplyDelete
  2. I have tested it. Good job.

    Thanks very much. I have read your post about OpenID and created one. I will show you when I put it on the internet.

    ReplyDelete
  3. Thanks, flashr. Opera isn't a browser I've tested (yet). I'll have to go do that.

    ReplyDelete
  4. great job, everything works great, tested with IE8 and FF 3.5.5.
    btw there was a green checkmark on Yahoo icon when I use it.

    ReplyDelete
  5. Hi, (i didn't really know where to post this so i do it here)

    I have been working on implementing this "New OpenID RP login UX prototype" and it works great expect for one problem. After the user has logged in into their openid account successfully you do a "Response.Redirect("~/")" but this will cause all controls (on the parent page) to lose their value (like textbox or ddl), wouldn't it be better if you did a sort of cross page postback? please let me know what you think, and if you have got a solution for this, because i am stuck :) ... keep up the good work

    ReplyDelete