<?xml version='1.0' encoding='UTF-8'?><?xml-stylesheet href="http://www.blogger.com/styles/atom.css" type="text/css"?><feed xmlns='http://www.w3.org/2005/Atom' xmlns:openSearch='http://a9.com/-/spec/opensearchrss/1.0/' xmlns:georss='http://www.georss.org/georss' xmlns:gd='http://schemas.google.com/g/2005' xmlns:thr='http://purl.org/syndication/thread/1.0'><id>tag:blogger.com,1999:blog-1928098972202366644</id><updated>2011-04-21T18:21:43.126-07:00</updated><category term='OpenID'/><title type='text'>Andy's Web Development Blog</title><subtitle type='html'></subtitle><link rel='http://schemas.google.com/g/2005#feed' type='application/atom+xml' href='http://pigeonweb.blogspot.com/feeds/posts/default'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/1928098972202366644/posts/default?max-results=100'/><link rel='alternate' type='text/html' href='http://pigeonweb.blogspot.com/'/><link rel='hub' href='http://pubsubhubbub.appspot.com/'/><author><name>Andy</name><uri>http://www.blogger.com/profile/02959258325841414042</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><generator version='7.00' uri='http://www.blogger.com'>Blogger</generator><openSearch:totalResults>2</openSearch:totalResults><openSearch:startIndex>1</openSearch:startIndex><openSearch:itemsPerPage>100</openSearch:itemsPerPage><entry><id>tag:blogger.com,1999:blog-1928098972202366644.post-5227115421849204632</id><published>2008-11-28T10:34:00.000-08:00</published><updated>2008-11-28T11:16:58.764-08:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='OpenID'/><title type='text'>New OpenID Selector</title><content type='html'>After doing my own little &lt;a href="http://pigeonweb.blogspot.com/2008/11/openid-login-usability.html"&gt;usability study on two Javascript OpenID selectors&lt;/a&gt;, I decided I could come up with something better.&lt;br /&gt;&lt;br /&gt;I wanted something that was simple for users that had no knowledge of OpenID. Here is what I came up with:&lt;br /&gt;&lt;br /&gt;1.&lt;br /&gt;&lt;img src="http://lh4.ggpht.com/_IfEh7XYTTeE/STA1yGHn79I/AAAAAAAAADc/IXKrRpick4w/step1.png" alt="" border="0" /&gt;&lt;br /&gt;&lt;br /&gt;2. After user clicks on OpenID logo:&lt;br /&gt;&lt;br /&gt;&lt;img src="http://lh5.ggpht.com/_IfEh7XYTTeE/STA1yHtcWdI/AAAAAAAAADk/00m-OoTQmr0/step2.png" alt="" border="0" /&gt;&lt;br /&gt;&lt;br /&gt;... or if the user clicks on the AOL logo:&lt;br /&gt;&lt;img src="http://lh6.ggpht.com/_IfEh7XYTTeE/STA1yDGpI2I/AAAAAAAAADs/AmtP_X80Ndc/step2-2.png" alt="" border="0" /&gt;&lt;br /&gt;&lt;ul&gt;&lt;li&gt;&lt;a href="http://code.google.com/p/openid-selector/"&gt;Download it from the google project page&lt;/a&gt;.&lt;br /&gt;&lt;/li&gt;&lt;/ul&gt;&lt;br /&gt;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.&lt;br /&gt;&lt;br /&gt;Should we try and hide the fact that OpenID is being used to make it user friendly?&lt;br /&gt;Should we try and find a way to quickly explain OpenID to new users?&lt;br /&gt;Should we abandon URLs and&lt;a href="http://wiki.openid.net/Debating_Emails_as_OpenIds"&gt; use email addresses instead&lt;/a&gt;&lt;a href="http://wiki.openid.net/Debating_Emails_as_OpenIds"&gt;?&lt;/a&gt;&lt;div class="blogger-post-footer"&gt;&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/1928098972202366644-5227115421849204632?l=pigeonweb.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://pigeonweb.blogspot.com/feeds/5227115421849204632/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment.g?blogID=1928098972202366644&amp;postID=5227115421849204632' title='2 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/1928098972202366644/posts/default/5227115421849204632'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/1928098972202366644/posts/default/5227115421849204632'/><link rel='alternate' type='text/html' href='http://pigeonweb.blogspot.com/2008/11/new-openid-selector.html' title='New OpenID Selector'/><author><name>Andy</name><uri>http://www.blogger.com/profile/02959258325841414042</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media='http://search.yahoo.com/mrss/' url='http://lh4.ggpht.com/_IfEh7XYTTeE/STA1yGHn79I/AAAAAAAAADc/IXKrRpick4w/s72-c/step1.png' height='72' width='72'/><thr:total>2</thr:total></entry><entry><id>tag:blogger.com,1999:blog-1928098972202366644.post-7931407837072960715</id><published>2008-11-21T07:41:00.000-08:00</published><updated>2008-11-22T04:12:23.345-08:00</updated><category scheme='http://www.blogger.com/atom/ns#' term='OpenID'/><title type='text'>OpenID Login Usability</title><content type='html'>After reading both &lt;a href="http://sites.google.com/site/oauthgoog/UXFedLogin"&gt;&lt;span class="blsp-spelling-error" id="SPELLING_ERROR_0"&gt;Google's&lt;/span&gt; usability research on federated &lt;span class="blsp-spelling-error" id="SPELLING_ERROR_1"&gt;login&lt;/span&gt;&lt;/a&gt; and &lt;a href="http://developer.yahoo.com/openid/bestpractices.html"&gt;Yahoo's &lt;span class="blsp-spelling-error" id="SPELLING_ERROR_2"&gt;OpenID&lt;/span&gt; usability research&lt;/a&gt;, it is evident that there is still no best &lt;span class="blsp-spelling-corrected" id="SPELLING_ERROR_3"&gt;practice&lt;/span&gt; for a &lt;span class="blsp-spelling-error" id="SPELLING_ERROR_4"&gt;login&lt;/span&gt; and sign-up box.&lt;br /&gt;&lt;br /&gt;One of the most popular solutions to help users pick their &lt;span class="blsp-spelling-error" id="SPELLING_ERROR_5"&gt;OpenID&lt;/span&gt; provider is to use &lt;a href="https://www.idselector.com/"&gt;&lt;span class="blsp-spelling-error" id="SPELLING_ERROR_6"&gt;JanRain's&lt;/span&gt; &lt;span class="blsp-spelling-error" id="SPELLING_ERROR_7"&gt;OpenID&lt;/span&gt; Selector&lt;/a&gt;. Here is what it looks like:&lt;br /&gt;&lt;br /&gt;1. User types &lt;span class="blsp-spelling-error" id="SPELLING_ERROR_8"&gt;OpenID&lt;/span&gt; or uses a button to select their provider.&lt;br /&gt;&lt;br /&gt;&lt;a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://www.idselector.com/images/virgin-1.png"&gt;&lt;img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 402px; height: 33px;" src="https://www.idselector.com/images/virgin-1.png" alt="" border="0" /&gt;&lt;/a&gt;2. The following box is displayed when the user clicks on the &lt;span class="blsp-spelling-error" id="SPELLING_ERROR_9"&gt;drop-down&lt;/span&gt; button. User selects their &lt;span class="blsp-spelling-corrected" id="SPELLING_ERROR_10"&gt;provider&lt;/span&gt; and types their ID (if required).&lt;br /&gt;&lt;br /&gt;&lt;a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://www.idselector.com/images/virgin-3.png"&gt;&lt;img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 403px; height: 209px;" src="https://www.idselector.com/images/virgin-3.png" alt="" border="0" /&gt;&lt;/a&gt;3. User clicks sign-in button.&lt;br /&gt;&lt;br /&gt;What is wrong with this approach?&lt;br /&gt;&lt;ul&gt;&lt;li&gt;Most users don't know what &lt;span class="blsp-spelling-error" id="SPELLING_ERROR_11"&gt;OpenID&lt;/span&gt; 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.&lt;/li&gt;&lt;li&gt;Having a URL input box is confusing. Why should I use a website address to &lt;span class="blsp-spelling-error" id="SPELLING_ERROR_12"&gt;login&lt;/span&gt;?&lt;/li&gt;&lt;li&gt;I would rather not link to an external javascript file on another website.&lt;/li&gt;&lt;/ul&gt;&lt;span style="font-size:130%;"&gt;Open Selector&lt;/span&gt;&lt;br /&gt;&lt;br /&gt;I recently discovered &lt;a href="http://open-selector.com/"&gt;Open Selector&lt;/a&gt;, an alternative to &lt;span class="blsp-spelling-error" id="SPELLING_ERROR_13"&gt;JanRain's&lt;/span&gt; ID selector.&lt;br /&gt;&lt;br /&gt;1. User selects provider from a drop down list.&lt;br /&gt;&lt;br /&gt;&lt;a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2.bp.blogspot.com/_IfEh7XYTTeE/SSbgx_XaR5I/AAAAAAAAACY/dMj0mCDsBuM/s1600-h/open-selector1.png"&gt;&lt;img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 118px;" src="http://2.bp.blogspot.com/_IfEh7XYTTeE/SSbgx_XaR5I/AAAAAAAAACY/dMj0mCDsBuM/s400/open-selector1.png" alt="" id="BLOGGER_PHOTO_ID_5271147563311581074" border="0" /&gt;&lt;/a&gt;&lt;a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_IfEh7XYTTeE/SSbhLeDOO3I/AAAAAAAAACg/Fk1SVSZZNPI/s1600-h/open-selector2.png"&gt;&lt;img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 217px;" src="http://4.bp.blogspot.com/_IfEh7XYTTeE/SSbhLeDOO3I/AAAAAAAAACg/Fk1SVSZZNPI/s400/open-selector2.png" alt="" id="BLOGGER_PHOTO_ID_5271148001045134194" border="0" /&gt;&lt;/a&gt;2. User types &lt;span class="blsp-spelling-error" id="SPELLING_ERROR_14"&gt;username&lt;/span&gt;, URL or nothing at all depending on the provider selected.&lt;br /&gt;&lt;br /&gt;&lt;a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://3.bp.blogspot.com/_IfEh7XYTTeE/SSbjvdkNl3I/AAAAAAAAACo/ChCe6qcOnog/s1600-h/open-selector3.png"&gt;&lt;img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 179px;" src="http://3.bp.blogspot.com/_IfEh7XYTTeE/SSbjvdkNl3I/AAAAAAAAACo/ChCe6qcOnog/s400/open-selector3.png" alt="" id="BLOGGER_PHOTO_ID_5271150818413614962" border="0" /&gt;&lt;/a&gt;3. User clicks sign-in button.&lt;br /&gt;&lt;br /&gt;Why is this user experience better?&lt;br /&gt;&lt;ul&gt;&lt;li&gt;User knows that they must select a provider first. Works well for users unfamiliar to &lt;span class="blsp-spelling-error" id="SPELLING_ERROR_15"&gt;OpenID&lt;/span&gt;.&lt;br /&gt;&lt;/li&gt;&lt;li&gt;Only the &lt;span class="blsp-spelling-error" id="SPELLING_ERROR_16"&gt;OpenID&lt;/span&gt; URL input box is displayed if it is required.&lt;/li&gt;&lt;/ul&gt;The disadvantages?&lt;br /&gt;&lt;ul&gt;&lt;li&gt;Users familiar with &lt;span class="blsp-spelling-error" id="SPELLING_ERROR_17"&gt;OpenID&lt;/span&gt; will need to select "Other &lt;span class="blsp-spelling-error" id="SPELLING_ERROR_18"&gt;OpenID&lt;/span&gt; provider" which is an unnecessary extra step.&lt;/li&gt;&lt;li&gt;There is no "http://" when "Other &lt;span class="blsp-spelling-error" id="SPELLING_ERROR_19"&gt;OpenID&lt;/span&gt; provider" is selected. Do I need to add this or not?&lt;/li&gt;&lt;/ul&gt;&lt;span style="font-size:130%;"&gt;How can we improve the usability?&lt;br /&gt;&lt;br /&gt;&lt;/span&gt;&lt;a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_IfEh7XYTTeE/SSfxcvWINjI/AAAAAAAAAC4/3PofapwG3LI/s1600-h/open-selector4.png"&gt;&lt;img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 312px; height: 210px;" src="http://4.bp.blogspot.com/_IfEh7XYTTeE/SSfxcvWINjI/AAAAAAAAAC4/3PofapwG3LI/s400/open-selector4.png" alt="" id="BLOGGER_PHOTO_ID_5271447364908365362" border="0" /&gt;&lt;/a&gt;&lt;br /&gt;&lt;ol&gt;&lt;li&gt;No need to even mention &lt;span class="blsp-spelling-error" id="SPELLING_ERROR_20"&gt;OpenID&lt;/span&gt;.&lt;br /&gt;&lt;/li&gt;&lt;li&gt;Removing &lt;span class="blsp-spelling-corrected" id="SPELLING_ERROR_21"&gt;unnecessary&lt;/span&gt; words is always good usability. This text is already in the drop down. &lt;/li&gt;&lt;li&gt;I don't mind giving attribution in the HTML code, but I would rather not clutter up the &lt;span class="blsp-spelling-error" id="SPELLING_ERROR_22"&gt;login&lt;/span&gt; box with this text.&lt;/li&gt;&lt;li&gt;The OpenID input box has a yellow background. This should be white.&lt;br /&gt;&lt;/li&gt;&lt;/ol&gt;I'm still not convinced a &lt;span class="blsp-spelling-error" id="SPELLING_ERROR_23"&gt;dropdown&lt;/span&gt; is the best solution, but I do feel this user experience is better for those that do not understand &lt;span class="blsp-spelling-error" id="SPELLING_ERROR_24"&gt;OpenID&lt;/span&gt; -  according to&lt;a href="http://factoryjoe.com/blog/2008/11/12/independent-study-on-openid-awareness-using-mechanical-turk/"&gt; this study, 78% of participants have not heard of &lt;span class="blsp-spelling-error" id="SPELLING_ERROR_25"&gt;OpenID&lt;/span&gt;&lt;/a&gt;.&lt;div class="blogger-post-footer"&gt;&lt;img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/1928098972202366644-7931407837072960715?l=pigeonweb.blogspot.com' alt='' /&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://pigeonweb.blogspot.com/feeds/7931407837072960715/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment.g?blogID=1928098972202366644&amp;postID=7931407837072960715' title='2 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/1928098972202366644/posts/default/7931407837072960715'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/1928098972202366644/posts/default/7931407837072960715'/><link rel='alternate' type='text/html' href='http://pigeonweb.blogspot.com/2008/11/openid-login-usability.html' title='OpenID Login Usability'/><author><name>Andy</name><uri>http://www.blogger.com/profile/02959258325841414042</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='http://img2.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media='http://search.yahoo.com/mrss/' url='http://2.bp.blogspot.com/_IfEh7XYTTeE/SSbgx_XaR5I/AAAAAAAAACY/dMj0mCDsBuM/s72-c/open-selector1.png' height='72' width='72'/><thr:total>2</thr:total></entry></feed>
