|
Many sites use Facebook Login, aka Facebook Connect, Connect with Facebook, Login with Facebook, and whole host of synonyms. Facebook gives an official button to use, yet I see many variations across sites, either older versions of the button or fully customized implementations. (See examples below.) Is there any quantitative evidence for the usability or effectiveness of one Facebook Login design over another?
|
|||||||||||||||
|
|
There are as far as I'm concerned two key issues to address when using a SSO (Single Sign On) -concept.
There is an A/B-test with the use of Facebook SSO conducted by Gameground. (Scroll down to "Social Media Click-Through") They conducted a test with the use of two different landing pages which also consisted of two different Facebook connect buttons. Landing Page A
The first example used the conventional Facebook-styled connect button, the same as in the OP but with a different text saying "Sign in with Facebook" instead of "Connect with Facebook". The button is quite small in comparison to the main sign in-button that says "GET STARTED" but should still be quite easy to spot. Landing Page B
The second landing page has discarded of any alternative sign in and now Facebook looks to be the only way. The button follows the look and feel of Facebook but in contrast to the previous button it lacks the Facebook logo. The page layout overall has also changed and there's more emphasize on what you can expect if you connect to Gameground.
So there we go, a blue button with no logo will raise your conversion rate! Or is it that simple...? I believe there are more aspects than merely the type of button that happened to be present at each version. Sure, in page B it's bigger and centred, clearly catching the attention of the visitor. But I'm sure there are more aspects than the type of button that made version B successful. I'm sure (within my own reasoning) that if version B had the same styling of the connect button as version A had, it would still have been successful. The success. in my mind, lies in clearly communicating to the visitor what perks they may gain by joining Gameground. Even though there was a difference in conversion rate in the examples above using different Facebook connect-buttons, I don't believe the type of button had too much to do with it. They both breathe the Facebook brand, the only distinction is that version A had a Facebook logo, and I'm not ready to suggest that the logo alone scared potential users off. So to summarize.
|
|||||||||||
|
|
The most common and accepted button has been "Log in" button. It's what you see the most and what most people will feel "comfortable" using. Facebook lists that button on their developer pages - http://developers.facebook.com/docs/reference/plugins/login/ http://developers.facebook.com/docs/guides/web/ I think from an aesthetics point of view, the "Connect with Facebook" button listed at the bottom is the most appealing button. This one has become more widely used and I think most people are familiar enough with it because it looks just like Facebook. It's just preference at that point. |
|||
|
|
|
Mapping is the key to get a user to recognize a service. The credibility and recognition of Facebook is lost if the web site uses different fonts and different colors for the Connect- or the Login-button. This doesn't mean that the web site using the correct Facebook style is more credible, but the user will feel more secure. Take an example from the dark side of internet. On online bank frauds, the original style of the bank is mimicked to perfection to get the user to feel that they are actually on its banks web site instead of the scoundrel web site. Using the original style is always the best. Edit: Here is a gallery of famous services who all uses facebook standard colors and fonts.
Windows Live
Pintrest
Foursquare
Stackexchange
|
||||
|
|
|
Everyone knows the design of Facebook, then the best way to recognize it for an user is to use the original. Not only that, a user may also be more psychologically involved recognizing something they already know. Many use their own design for the button and I think it is less effective than the original one. |
|||
|
|
|
I doubt there's real data available because the success of the button would be inherent to the success of the website using it. Anyway, when choosing this button I think there are 2 main things that should stand out: The Facebook "F" everyone knows so well, and the white font on a blue background. The 3d and 4th are not recommended in my point of view, because the logo everyone immediately recognises is not there, and the colors are not the same, even though the 4th is still blue, it's a totally different feel (this is important for peripheral vision). The second one is a set of pictures, which is not necessarily Facebook-related, and it could just be me, but that one has a very "ad-like" feeling to it. Something just repels me from investigating it further, the "F" logo is very small, and even then it's just not a very inviting link. So I think the first and last are best, with the first being closer to the original and compact, and the last having a modern feel, but is larger as well. Choosing between those is a matter of how much space you want to give it, which one just fits best, or which one has the background colour / feel to match your website. If you have a website with a lot of round corners and gradient colours, the last button will probably be better. Also, no matter how bad the colour clashes with your website, I wouldn't apply any custom colour to the facebook button. I'd like to mention that authenticity is most likely the most important factor. Things that look "fake" (like the 4th button) will immediately have a repellent effect, because they tend to cause the user to feel some suspicion, even if they won't be conscious about it. |
|||||||
|
