Plugins (wpcom): Update design and text #4995

davewhitley · 2016-04-25T20:24:08Z

This addresses some feedback. fixes #4986

Make the plugins more active by making them green.
Update text.
Make it more obvious that the links are external.

@dmsnell For 3, can we change the plugin icon on hover, if the link is external? Currently this is all but the Google Analytics plugin. My idea is to change the plugin icon to the external one on hover.

Another solution would be to add a tooltip for each link.

Before:

After:

Hover state:

Previously, it was noted that there isn't much to distinguish external links on the WordPress.com plugins page. This patch adds the behavior that a plugin Gridicon will change when hovering over the plugin to show the external glyph if the plugin link is outside of Calypso. Currently this only impacts the Google Analytics plugin on the Business plugin panel. I haven only included the code changes, therefore, on the business plugin component. If we include external links in the future on the other classes of plugins, we can add the same changes there.

davewhitley · 2016-04-25T22:10:19Z

Thanks Dennis, the icon replacement is working well.

Previously we had three separate plugin components for the three plan levels: Free, Premium, and Bussiness in order to facilitate differences in the underlying representation of those features. The differences ended up being insignificant and this patch merges them into one generic plugin component to reduce code size and surface area for bugs to appear.

dmsnell · 2016-04-25T22:58:41Z

@drw158 I have merged the plugin components and now this PR has more red than green!

folletto · 2016-04-26T14:28:40Z

All looks good to me design wise.

The only doubt I have is this:

Make the plugins more active by making them green.

Can I ask why green instead of our medium blue which seems equally "highlighting" but at the same time more aligned with the overall page look?

davewhitley · 2016-04-26T14:33:10Z

First iteration was blue, but then it looked like "too much blue." Second iteration was gray as shown in the "before" screenshot.

We received feedback that the active plugins may not look very active, so I changed it to green. I also thought it was a good opportunity to introduce some color other than blue.

But, if the green does not look good, I'd be fine with going back to gray.

mtias · 2016-04-26T14:34:58Z

@drw158 wonder if this is a chance to try the color-code @adambbecker was exploring for plans (a color for each plan, basically).

davewhitley · 2016-04-26T14:41:10Z

Worth a shot! @adambbecker can I just pick the colors from the screenshot on your mega Plans post a few weeks ago?

Edit: Looking at it again, the Free plan would be yellow, and using yellow for the standard plugin icons might look strange — like something was wrong. It's a good idea for the future, but I'm not sure about for this PR.

folletto · 2016-04-26T14:55:52Z

First iteration was blue, but then it looked like "too much blue." Second iteration was gray as shown in the "before" screenshot.

Between "too much blue" and "too much green" I'd go for blue given the "not active enough" feedback, which is fair.
Just my take, it's ok if we decide to rather go green. :)

dmsnell · 2016-04-26T15:27:00Z

I'd go for blue given the "not active enough" feedback

yeah the whole idea of adding color here because it's "too blue" always seemed strange to me. blue is our entire app's color scheme…

gwwar · 2016-04-26T19:48:20Z

client/my-sites/plugins-wpcom/plugin.jsx

@@ -18,11 +28,29 @@ export const StandardPlugin = React.createClass( {
 			descriptionLink
 		} = this.props;

+		const { isUnderMouse } = this.state;
+
+		const isExternalLink = hasHttpProtocol( descriptionLink );


Can we add this as a prop, instead of testing for this?

@gwwar we deliberated on this point and I think it's best to keep the logic contained inside this component. it's only effect is visual and I don't think there's any need to couple that to the "outside world" I like being able to only care about adding the URL in the plugin data structure instead of having to think about how to represent that data.

gwwar · 2016-04-26T21:06:31Z

👍 Codewise this is good to ship, after we change back the analytics page slug to /plans/features/google-analytics/{siteSlug}

Are we okay with having a blue hover state vs a lighter green, like we do for our notice actions? This kind of stuck out to me:

davewhitley · 2016-04-26T21:38:36Z

Blue hover state was intentional, just to emulate a blue text link. I didn't think about doing a lighter green though. I'm not sure where I stand on the color in general. Not sure whether to do green, blue, or gray.

adambbecker · 2016-04-26T21:56:39Z

@mtias, @drw158: Ah, yeah I see what you mean about the plan colors. I think it could work, but I agree with Dave that the yellow might look a little like a warning. I'm also still playing around with trying those colors outside of the plans page & unfortunately the connection just isn't very strong between remembering those colors & associating them with plans (until you see all the plans on the page).

Seeing this action, I actually really dig the green because it enforces the active state, but I can also see what others have mentioned that it can be a little much once a lot of plugins are visible. I was playing around a bit here just to see what some other versions could look like and I settled on something like this:

Take that with a grain of salt mostly because I was just testing things out. But a few things that caught my eye were:

Active state: wanted to try the green idea, but visually scaled down a bit.
"Purchase" button: when I first saw it, I was a little afraid that clicking it would automatically send me down a checkout path, so I wanted to see what an informative nudge version would look like.

This is really great though. All of the above is totally up to your discretion, just throwing a few more ideas into the pot just in case you were still exploring.

Overall, I do like the green direction. I would also probably remove the blue bar underneath the section header and keep the hover color the same in that particular case. Or, keep the color bar beneath the section header, but make it dynamic so that active sections get green, purchasable sections get blue.

folletto · 2016-04-27T10:58:39Z

The green check marks I feel work really really well. We might get away also with the ✓ Active label in the bar with that. Feels clear enough already. :)

mtias · 2016-04-27T11:40:41Z

I would also probably remove the blue bar underneath the section header and keep the hover color the same in that particular case.

👍 to this. The notion of "primary SectionHeader" also didn't make much sense to me.

davewhitley · 2016-04-27T15:17:24Z

The blue bar underneath was to address feedback that the Premium and Business sections did not stand out as "headers", and visually got lost. Currently we don't have a standard way to do something like this. But, if you feel that the header stand out enough, then I'm fine with removing it.

davewhitley · 2016-04-27T15:21:51Z

I also like the green check marks. When I first saw the nudge component in the mockup, I thought that was a really interesting idea. It sort of makes sense in the Calypso context. After letting it sink it though, it does look strange in the context of what a "normal" website looks like.

# Conflicts: # client/my-sites/plugins-wpcom/plugin-types/business-plugin.jsx

davewhitley · 2016-04-27T15:46:27Z

Ok, I changed the active state to blue for now. I will explore the check marks in another PR.

I updated from master, so no more conflicts. Are we ok to merge now?

roundhill · 2016-04-27T19:34:51Z

I updated from master, so no more conflicts. Are we ok to merge now?

davewhitley added 2 commits April 25, 2016 15:18

Make the icons green to be more active

9e7c1d2

Update text

409af84

davewhitley added WPCOM Plugins [Status] In Progress labels Apr 25, 2016

davewhitley added this to the WPCOM Plugins: v1 release milestone Apr 25, 2016

dmsnell and others added 2 commits April 25, 2016 15:00

Making sure truncation doesn't happen

3cedf0d

davewhitley assigned dmsnell Apr 25, 2016

davewhitley unassigned dmsnell Apr 26, 2016

gwwar reviewed Apr 26, 2016
View reviewed changes

davewhitley added 2 commits April 27, 2016 10:29

Merge branch 'master' into fix/wpcom-plugins-ux

9879435

# Conflicts: # client/my-sites/plugins-wpcom/plugin-types/business-plugin.jsx

Active plugins will be blue for now

7c865ff

davewhitley merged commit 6de008b into master Apr 27, 2016

davewhitley deleted the fix/wpcom-plugins-ux branch April 27, 2016 19:39

scruffian removed the [Status] Ready to Merge label Apr 27, 2016

This was referenced Apr 28, 2016

Plugins: fix google-analytics link #5085

Merged

WPCOM Plugins: add green checkmarks to the plugin icons #5133

Closed

WPCOM Plugins: move purchase buttons to card footer #5134

Closed

lancewillett removed the [Feature] Plans & Upgrades All of the plans on WordPress.com and flow for upgrading plans. label Sep 5, 2016

lancewillett modified the milestones: WPCOM Plugins: v1 release, Plans: WP.com Plugins Sep 5, 2016

lancewillett added the [Feature] Plugins Features related to plugins on WordPress.com, including search, management, and installation. label Oct 5, 2016

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Plugins (wpcom): Update design and text #4995

Plugins (wpcom): Update design and text #4995

davewhitley commented Apr 25, 2016 •

edited

Loading

davewhitley commented Apr 25, 2016

dmsnell commented Apr 25, 2016

folletto commented Apr 26, 2016

davewhitley commented Apr 26, 2016

mtias commented Apr 26, 2016

davewhitley commented Apr 26, 2016 •

edited

Loading

folletto commented Apr 26, 2016

dmsnell commented Apr 26, 2016

gwwar Apr 26, 2016

dmsnell Apr 26, 2016

gwwar commented Apr 26, 2016 •

edited

Loading

davewhitley commented Apr 26, 2016

adambbecker commented Apr 26, 2016

folletto commented Apr 27, 2016

mtias commented Apr 27, 2016

davewhitley commented Apr 27, 2016

davewhitley commented Apr 27, 2016

davewhitley commented Apr 27, 2016

roundhill commented Apr 27, 2016

Plugins (wpcom): Update design and text #4995

Plugins (wpcom): Update design and text #4995

Conversation

davewhitley commented Apr 25, 2016 • edited Loading

Before:

After:

davewhitley commented Apr 25, 2016

dmsnell commented Apr 25, 2016

folletto commented Apr 26, 2016

davewhitley commented Apr 26, 2016

mtias commented Apr 26, 2016

davewhitley commented Apr 26, 2016 • edited Loading

folletto commented Apr 26, 2016

dmsnell commented Apr 26, 2016

gwwar Apr 26, 2016

Choose a reason for hiding this comment

dmsnell Apr 26, 2016

Choose a reason for hiding this comment

gwwar commented Apr 26, 2016 • edited Loading

davewhitley commented Apr 26, 2016

adambbecker commented Apr 26, 2016

folletto commented Apr 27, 2016

mtias commented Apr 27, 2016

davewhitley commented Apr 27, 2016

davewhitley commented Apr 27, 2016

davewhitley commented Apr 27, 2016

roundhill commented Apr 27, 2016

davewhitley commented Apr 25, 2016 •

edited

Loading

davewhitley commented Apr 26, 2016 •

edited

Loading

gwwar commented Apr 26, 2016 •

edited

Loading