Webmasters Gallery

Those Facebook buttons that you just can’t live without because you’re always using them to engage with your friends and family, and the site’s content, have gotten a noticeable makeover. The new design signals a shift to more space-conscious design by the company, as well as a tendency to combine old design into something entirely new.

In a post on the company’s developer blog, Facebook reveals the reasons behind its decision to revamp how its social-sharing look.

For starters, the biggest design change affects perhaps the social network’s most prominent button: the Like button. Liking is so ingrained in the Facebook experience that one can’t imagine the site without it. This is perhaps why the most significant changes were made to this button.

The company performed copious qualitative and quantitative research to determine if their initial hypothesis was correct: They believed that more users would understand the straightforward thumbs up icon on the Like button, as opposed to the old design that featured the company’s lowercase “f” logo in the button.

When their testing told them that their hypothesis had some substance to it, they implemented these changes to the site.

In addition, the new Like button features a unification of two, separate icons. The old design separated the actual Like button from the number of likes that are registered beside the button. The new design seamlessly melds these two elements, combining the icon, the word “Like” and the overall number of likes into one, longer, rectangular blue button.

Besides the Like button, the Share, Save and Follow buttons get a different look, too, all based on Facebook’s new “cleaner design” approach.

Essentially, its suite of social buttons has been modernized. This means that each button receives an updated icon that can better represent the Facebook brand while at the same time offering a superior user experience to people on the network.

This dedication to better engagement includes the following design properties:

• A consistent color
• A flat button shape
• A refined visual style that integrates the Like and Share counts within the button

Never one to neglect mobile, Facebook is also thinking of mobile usability in its button redesign. More than 30% of the engagement from people clicking or tapping the Like button comes from mobile, so the company is addressing mobile friendliness, too.

In an acknowledgement that the original version of the Like button is now obsolete as it was designed in the infancy of mobile, Facebook has released a variety of different button sizes. This means more freedom for designers and developers who can now decide on the specific button size to use with their desktop or mobile site.

Interestingly, these new button designs are also going to appear on Facebook’s Instant Articles in the next few weeks. Look for the new buttons at the bottom of those pages. They’re going to count toward aggregate share, like and follow counts.

Facebook won’t roll out these new buttons everywhere at once. Instead, you’ll probably see a trickle of these new designs popping up here and there on its site and apps over the next few weeks.

Source