Sharing buttons: Visual updates

[davemart-in]

Description

It was recently brought to Loop Team ’s attention that it’s high time we update the Sharing and Engagement button designs. The goal of this issue will be to outline this project and to track our progress.

Progress tracker

After a little bit of digging, it looks like there are a variety of things to update:

Sharing buttons

• [x] Jetpack primary PR - First, we'll need a JP PR to update the button styles and to make any necessary /theme-tools/compat/ theme specific updates
• [x] Update Twentynineteen and Twentysixteen - Both themes have manual override styles for the .sd-button class
• [x] wp-calypso PR - Next, we'll need a PR to update the screen shown on https://wordpress.com//marketing/sharing-buttons/ which allows you to update your sharing button settings.
• [x] Jetpack "Official buttons" - Update sharing styles when "official buttons option is used
• [x] #29090

Like / Reblog / Follow Comment / Reply / Todo buttons

• [x] Update widgets.wp.com likes API styles - Looks like the like / reblog buttons all come from wp.com D101354-code
• [x] Update O2 buttons - Reply / todo / follow conversation buttons shown in P2 need to be updated

Legacy

• [x] Older P2 theme - The older P2 theme is no longer officially supported, but there are still sites running it on WP.com I suspect. John Godly recommended just making any changes directly to the theme on WP.com, which I plan on doing. D105156-code
• [ ] Keyboard navigation - The current like and P2 buttons are pretty bad when it comes to keyboard accessibility.
• [ ] Remove old genericons code - The P2 buttons all have genericons code scattered throughout. I plan to go back through and clean this up, but I want to do it in a separate PR.
• [ ] Update a few social-logos - Line widths still feel too light for "Press this", "Reddit", and "WhatsApp". We should probably update the icons that we use for each of those within: https://github.com/Automattic/social-logos

Note: #28861 is also being discussed as a possible extension of this project.

Preview

Here is a preview of the updates we're proposing:

Here's a breakdown of the new styles:

Here's a preview with different color backgrounds:

And a visual comparison of old vs. new:

Big props to ollierozdarz for these designs.

[rfaile313]

@lessbloat -- suggestion to make the like button more clear if it's checked. Perhaps by inverting the colors.

Right now, in my experience, have to really take a second and look to see if you "liked" something when it used to feel like an unconscious read.

Example of suggestion:

current:

proposed (or similar):

I know this seems trivial but in our use case we use the "like" button to signal to other members of the team that we're working on something since reactions never really got shipped.

[davemart-in]

Thanks for the feedback @rfaile313! You're not the only one to share this feedback. There have been a couple of other folks asking for a change here: p7DVsv-gLZ-p2#comment-44924

I'd still like to keep the new design in place for at least one more week, then ask around to see how people are finding it.

[rfaile313]

Sounds good @lessbloat thanks for the consideration

[rfaile313]

Hey @lessbloat I am still on team more noticeable liked button :) just wanted to share

[davemart-in]

Thanks for sharing @rfaile313! @ollierozdarz and I are going to be revisiting all of the feedback we've received this coming Monday.

[annezazu]

Found this issue and wanted to +1 on making the liking action more visible.

[correliebre]

Adding another +1! I still have trouble with knowing whether I liked or didn't like something.

[jgcaruso]

@davemart-in Hi there, I stumbled on this while doing some searching to see if the Like button iframe was at all customizable. Looking at the code in D101354-code it doesn't seem like it is but have there been any discussions about making that possible if it isn't?

For example, passing query params to define styles like:

1. Make the the gravatar a circle instead of a square
2. change the color used for the the "liked" state

[davemart-in]

@jgcaruso it's not on our teams immediate radar, though I know the idea has come up a number of times. I do agree that it would be cool to be able to introduce some customization options.