Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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?

enter image description here

share|improve this question
1  
I see the Facebook styled Connect with Facebook button the most so I'd assume it's most understood. –  Ben Brocka Apr 16 '12 at 19:10
1  
@BenBrocka It's certainly the most explicit. I read an appropriate quote today from 52 Weeks of UX: “Nothing says Send Message, like the words ‘Send Message’.” - Des Treynor 52weeksofux.com/post/21026021557/what-does-it-mean-to-be-simple –  tajmo Apr 16 '12 at 19:54
    
I remember a similar question, maybe the answer do provide some helpful info, too: ux.stackexchange.com/questions/13030/… –  greenforest Apr 16 '12 at 19:56
    
Yeah, I think that clears it up partially. Recognition is important. I just wonder if there's any quantitative data to show which, if any, is most recognizable or effective. –  tajmo Apr 16 '12 at 20:04
    
I guess A/B testing would be ideal –  greenforest Apr 16 '12 at 20:17
show 3 more comments

5 Answers 5

up vote 13 down vote accepted
+100

There are as far as I'm concerned two key issues to address when using a SSO (Single Sign On) -concept.

  • Accessability: The sign in/registration page should clearly show that the users may sign in using their Facebook account.
  • Credability: The button/link in addition to the overall page should convey credibility.

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

enter image description here

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

enter image description here

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.

This version (B) produced a 60% higher conversion rate over the full funnel conversion goal.

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.

  • Use a button that clearly breathes Facebook in style, blue background with white text in Klavika Bold -font (the closest us mortals get to the Facebook font which is developed by Joe Kral). This way you convey credibility since the visitor will associate your site with Facebook which he/she already confides in.
  • Make it so that the landing page clearly communicates all the perks the user can expect if they join.
  • Have the connect button show clearly, have version B in mind.
share|improve this answer
1  
The data doesn't really speak to Facebook buttons, per se, but more to landing page design. Nevertheless, it's great fodder for the larger registration flow I'm working on. –  tajmo Apr 19 '12 at 15:31
    
You get an A for effort. –  tajmo Apr 25 '12 at 15:39
    
hehe.. yea thanks. I wish you luck in your future research. unfortunately it doesn't look like you're going to get the information you requested in this forum. –  AndroidHustle Apr 25 '12 at 16:16
    
We'll do our own test some day, and publish the results. –  tajmo Apr 26 '12 at 16:27
    
just out of curiosity. Is it for a service you're developing or is it merely for the purpose of collecting the data? Eg. for an article or paper in the subject? –  AndroidHustle Apr 26 '12 at 17:04
show 2 more comments

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.


Twitter

twitter and facebook


Windows Live

windows live and facebook


Pintrest

pintrest and facebook


Foursquare

foursquare and facebook


Stackexchange

stackechange and facebook

share|improve this answer
add comment

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.

share|improve this answer
add comment

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.

share|improve this answer
    
Ironically, the second one is official from Facebook. It's what the F Login button changes too once your friends have already connected with the site (and you are logged in on Facebook). –  tajmo Apr 19 '12 at 15:33
    
@tajmo I know it is official, but in my opinion it doesn't look very good :) –  MDeSchaepmeester Apr 19 '12 at 15:50
    
No disagreement here. –  tajmo Apr 19 '12 at 15:54
add comment

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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.