Wp-calypso: Media Section: Make action bar look pretty

[iamtakashi]

Raised by @folletto, Media Section currently uses the same header design as the media modal, and it's inconsistent with other sections in Calypso.

Smaller issues to make before completing this:

• https://github.com/Automattic/wp-calypso/pull/11560

Let's add the action bar shown (2nd row) in the mocks. See #11508 for the storage component.
Related #11056

• Drop down for Add New, also contains "Add Via URL"
• Clicking on "Add Via URL" update the action bar to this state:
  
• Selecting an item, makes the edit/delete button appear
• Clicking on edit takes us to the details view

https://github.com/Automattic/wp-calypso/issues/10805#issuecomment-276094743

Section (No-selection)

Section (Selected)

Section (When you scroll the page. StickyPanel component)

Modal (No-selection)

Modal (Selected)

Small Screens

[iamtakashi]

A small correction: The buttons "Add ~" should use ButtonGroup rather than two separate buttons. And "Add New" should come first.

[iamtakashi]

Mobile:

[folletto]

A small correction: The buttons "Add ~" should use ButtonGroup rather than two separate buttons. And "Add New" should come first.

Good solid suggestions.

I'd even say: can we use the "mobile" compact version on desktop too? I'm not sure if we have data, but I'd expect for "add with URL" to be less used, as well as generally troublesome for copyright reasons.

[iamtakashi]

I'd expect for "add with URL" to be less used, as well as generally troublesome for copyright reasons.

My expectation is the same. And a good point on the potential abuse. I'll see if there is any usage data to consider to retire.

[iamtakashi]

I'd expect for "add with URL" to be less used, as well as generally troublesome for copyright reasons.

I guess you only suggested to use the mobile version with a chevron, not to retire :facepalm:

Anyway, the usage of "add with URL" is 6% of all uploads which isn't large so it's safe to use the mobile version as default.

I've noticed we use icons in "add" buttons in both People and Plugins sections. Would you say we should follow the pattern here?

[folletto]

I've noticed we use icons in "add" buttons in both People and Plugins sections. Would you say we should follow the pattern here?

Yes. With two notes:

1. I'd try to use the same icon we use in the Editor to open the media panel, as even if it's in a different location, it has the same semantics of "Add Media".
2. I'd keep the label at least on desktop size, as icon+label is always the clearest.

[iamtakashi]

I've spent some time to explore other header designs for the section as well as the Media modal.

The focuses are:

• To have an action bar that allows you to (bulk) edit / delete at the top of the section.
• To display a plan storage.
• To have some consistencies in actions between the section and the modal.

Section (default, pre-select)

Section (Once some media is selected, the edit/delete buttons will be enabled)

Modal (default, pre-select)

Modal (Once some media is selected, the title and "Add New" button will be hidden, and action buttons appear)

Related discussion #9136

[melchoyce]

The floating filter bar/plan info feels really weird to me. What's the reason behind floating vs. combining into one solid background?

[davewhitley]

Nice, this is much better. I'll just comment on the original image in the issue.

I'd rather see the counter applied to the filter bar.

This would allow the add buttons to be relocated to that space. Traditional we have aligned buttons to the far right in the section headers, but I think in this case it should break that pattern, because the add buttons are so important.

[iamtakashi]

What's the reason behind floating vs. combining into one solid background?

@melchoyce, That would be cleaner, but I'm worried that that would make the PlanStorage less clickable and would devalue the purpose.

I'd rather see the counter applied to the filter bar. This would allow the add buttons to be relocated to that space.

@drw158, Yes that's precisely why I took this approach for the latest design. I kept "Add Media" buttons on the right though. It's tricky to coordinate the all action buttons' locations because the most important button would be different in the Section, the Modal, and its state.

[folletto]

Excellent exploration! I think it's heading in the right direction.

The only thing I think has to be reviewed for sure is what Mel pointed out above: the "detached" bar feels very outside Calypso patterns. I understand completely why you did that, let's find a way to balance off the two. :)

More granular feedback at a lower priority:

1. Yes to the counters on the filter bar. They can be very useful. I reckon we don't have the API yet for that, but it's something that has to be done as it's a Calypso pattern to show the counters there.
2. Yes to the add new with icon and dropdown. That feels both solid and scalable.
3. I think we can drop the "Media Library" title everywhere. It's really redundant as it's already obvious what's open.
4. The plan storage button afaik is used only there, and we can refactor it. If we for example remove the border and add an icon (for example (i)) it would provide the same functionality and linkage to Plans. Actually, with an icon, might even be more explicit. Can be even a small button stating "Add more" on the side. Regardless, I think we can refactor <PlanStorage> as it's unique.
5. Delete could be just the trash icon, as it's a relatively secondary action, the icon is fairly universal, and we don't want to click that by accident.
6. I'd rather hide the controls when unused than show them disabled. Making them appear will make also more evident they have appeared.
7. Calypso modals have all the "actions" to dismiss at the bottom. I'm not sure how to solve that.

Idea/Brainstorming building up from your mockups: it seems to me we have these "semantic" areas:

1. Media item controls (Add, Edit, Delete)
2. Size controls
3. Modal controls (Insert, Cancel)

We could do:

Page + No Selection:

[ Add | \/ ]                       [ –size slider– ]                             

Page + Selection:

[ Add | \/ ] [ Edit ] [ Del ]      [ –size slider– ]                             

Modal + No Selection:

[ Add | \/ ]                       [ –size slider– ]           [ cancel ] [ insert ]

Modal + Selection:

[ Add | \/ ] [ Edit ] [ Del ]      [ –size slider– ]           [ cancel ] [ insert ]

With something like this we show the controls only if something is selected together with the existing media item control add, and everything else is always in the same position.

[folletto]

_While writing I also had an idea to solve the modal pattern point 7 above:_

With this semantic split, then seems to me (if I haven't missed anything) that the modal controls (Cancel, Insert) show up only on Modal. Which is good, as it means we can show the bottom bar only on modal! :)

Page + No Selection:

[ Add | \/ ]                                                        [ –size slider– ]

Page + Selection:

[ Add | \/ ] [ Edit ] [ Del ]                                       [ –size slider– ]

Modal + No Selection:

[ Add | \/ ]                                                        [ –size slider– ]

                                                                [ cancel ] [ insert ]



md5-c691f28dc05a884d08e8af1d98903d00



[ Add | \/ ] [ Edit ] [ Del ]                                       [ –size slider– ]



md5-ee813e7f3afaeacf486db850e63413e0



                                                                [ cancel ] [ insert ]

This might be matching both page and modal patterns well. :)

[iamtakashi]

Excellent feedback as always. Thanks @folletto.

Good to know that we can refactor the PlanStorage style. Let’s do that. When we combine all at the top, the order would be like this, wouldn’t it?

[Filters] [planstorage] [Search]

Also removing the “Media Library” title is a great idea. This opens up more ideas for the buttons’ locations such as your suggestion, which I agree with.

We’re nearly there.

[folletto]

I'm glad it's helpful! 👯

When we combine all at the top, the order would be like this, wouldn’t it?

That seems a good approach, let's see how it works. :)

[iamtakashi]

Some ideas for PlanStorage. Any feedback at this point?

[folletto]

I like cog/arrow as they take less vertical space (i.e. I'm imagining fitting in our default height white bar).

However, "Manage" is far clearer imho. So I'd go with manage's design. :)
Have you thought changing "Manage" to "Upgrade", as that's in practice what it's about?

[iamtakashi]

You've described exactly the dilemma I had :) It's going to be tight but the third one is the most clear.

Yes, I've considered "Upgrade", but I thought we can use "Manage" universally across all the plans including the top, Business plan when you don't have something to upgrade.... We could just hide it in that case though. I'm open to any wording we think the best.

[folletto]

We could just hide it in that case though.

I agree here, I would hide it because the space is "Unlimited" so I wouldn't show the badge at all. Also because you can't really manage anything once you're at Business. :D

[iamtakashi]

I would hide it because the space is "Unlimited"

A good point. Let's go for "Upgrade", and hide it all together for Business plan.

[iamtakashi]

A or B?

[melchoyce]

B

[iamtakashi]

Here are the updated design.

Section (No selection)

Section (Selection)

Modal (No selection)

Modal (Selection)

Note & Question: The "Add New" button changes to a secondary button once you select some media because "Edit" (or "Insert") is likely the action you'd take. Also it'd avoid two primary buttons sit next to each other. I haven't seen this kind of behaviour in Calypso yet. Should the button stay as a primary all the time?

[folletto]

I think that's a winner. Let's do this. 💯

---

The "Add New" button changes to a secondary button once you select some media because "Edit" (or "Insert") is likely the action you'd take. Also it'd avoid two primary buttons sit next to each other. I haven't seen this kind of behaviour in Calypso yet. Should the button stay as a primary all the time?

I agree. My first approach there would be:

On Section:

• "Add new" is never primary (white)
• "Edit" is primary (blue)

On Modal:

• "Add new" is never primary (white)
• "Edit" is never primary (white)
• "Insert" is primary (blue)

This is probably not perfect, but matches the idea of having only one single primary action on each page.

---

Aside: I know we have already sorted it out, but I was thinking how to solve the height problem in the PlanStorage block, and I realized we don't really need to say "Free Plan": showing the size and the "Upgrade" button is already a strong call to action. So we could take it out and put "size + Upgrade" on the same line.

What do you think?

[iamtakashi]

My first approach there would be: [...] but matches the idea of having only one single primary action on each page.

OK, this would avoid changing the rank of "Add New" button and enforce the idea of having one primary button on a page. Users have already clicked "+" to come to the modal anyway.

So we could take it [Plan's name] out and put "size + Upgrade" on the same line. What do you think?

Good idea!

So, here is what we have and it's likely to be ready to be built 🎉

I'll make a separate task for updating the modal.

Section (No-selection)

Section (Selected)

Modal (No-selection)

Modal (Selected)

[folletto]

Amazing. Works great for me. 💯 💘

---

Now: mobile? :D

[iamtakashi]

Now: mobile? :D

:) A quick mockup with questions.

• I'm slightly concerned the compact buttons on small screens because they might be too small for tap. We don't seem to change compact buttons to be larger on any other places but I was wondering if there were past discussions on the topic.

• We currently hide the Plan Storage on the modal for small screens. Should we continue to hide it? I'm having a hard time to find a reasonable spot where works for both the modal and the section.

[folletto]

I'm slightly concerned the compact buttons on small screens because they might be too small for tap.

Give it a try on _My Sites → People_. The combination of size+padding make the button big enough to work well even when it's just an icon. :)

We currently hide the Plan Storage on the modal for small screens.

I'm ok in keeping it hidden. Space is very important on mobile, and it won't be a regression either.

👍 👍 on all of the above then, let's go for it!

[iamtakashi]

W00t. Thanks a lot for your help!!

[iamtakashi]

I've realised I forgot to mention what would happen when you scroll the section.

The action bar will be sticky once it reaches the master bar. It's a StickyPanel component that we now see being used in Themes and Stats.

[rralian]

Do you think it would be helpful to retain the category selection when a user scrolls down? Right now we leave the action buttons, but the category selections scrolls out of view. Maybe we could show that as a dropdown in the action bar when it gets to that point?

[folletto]

It's a good point. I don't feel it's overly important as it's likely someone starts searching before triggering the selections, but it's surely something we can review once this is live. :)

[iamtakashi]

That's a good question. If we want to keep the categories visible all the time, we probably would want to keep the entire SectionNav with the search, so that keep "navigation" and "action" two separate things just like the modal. I initially concerned about the vertical space left for media since we would have 3 sticky elements including the master bar, but it might just be fine as the media modal does already.

[iamtakashi]

I wish I could see real time updates for comments here :)

[folletto]

I think two bars always visible while scrolling is a bit too much. The modal can do that because it's a modal, so it's a different pattern. Even if that wasn't the case, the modal isn't taller as it doesn't have the masterbar, so the vertical space is still equivalent of two bars (a little more on non-mobile screens).

[iamtakashi]

I was thinking to make the bars unstick smaller than 660px. For mid ~ large screens, one thing to note is that we don't have the bottom action bar in the section, and that would make the vertical space available roughly the same or even more.

However, I'm open to the idea of launching the section with one sticky (the action bar) and revisiting later to see if we need to make the section nav sticky.

[folletto]

That's true, good point. :+1:

[gwwar]

We might need to break this into smaller technical issues.