Media: improve the UX of the image gallery sorting

[alisterscott]

This is a placeholder for improving the UX of media gallery sorting

Some ideas are to have a new 'Order' Select List with various options:

Manual (selected if drag/drop ordering is used) Initial (how they are selected) Random (random order) Reverse (reverse of initial) Chronological Reverse Chronological Upload Order Reverse Upload Order

This needs some design/UX research etc.

cc: @lancewillett

[lancewillett]

Discussed a bit today with Alister, there are various modes of how you'd want to order images in a gallery.

1. You want full control over the ordering. You'll start with a default, maybe. Or you'll start with the order in which you clicked images in the media library.
2. You want the gallery to have some kind of smart ordering, and you'll achieve that quickly using a set of actions to see how they look.
3. You want random ordering.

In that light, just one "Reverse" action isn't enough. It'd also be nice for the first manual mode to have a "Reset" so you can start over if you mess up.

My own anecdotal usage falls into two buckets:

1. Screenshots for vizrecs: I want them ordered as I upload — or else, as a fallback, in the alphanumeric ordering ascending (timestamped PNGs from macOS, oldest first). I'll go with mode 2 and pick "Upload Order" or "Chronological" and preview it to double check it's right.
2. Fun images for my personal blog: I usually use Tiled Galleries and don't care about ordering. So mode 3 (random) covers me there.

[designsimply]

Also see #339

[folletto]

You want full control over the ordering. You'll start with a default, maybe. Or you'll start with the order in which you clicked images in the media library.

Currently, the design implies the order the images were clicked, because they get a numbered index as they get selected. So yes, that order has to be retained, as it's explicit user choice.

You want the gallery to have some kind of smart ordering, and you'll achieve that quickly using a set of actions to see how they look. You want random ordering.

I'd make a step back here in terms of approach (also from the suggestion I gave in the other issue). The modifiers fall into three different kinds:

• Transformative actions — the images gets rearranged every time the modifier is applied
• Sorting actions — the gallery has different statuses, each one implying a different order
• Set property — random order shuffles that every time the page loads for the final user, so it's a flag for a live behaviour

The conflict of the three is what makes things tricky.

We can then assume "Random Order" kept as separate because none of the other ordering behaviours happens at "runtime", then we just need to chose if it's a sorting action or a trasformative one. Sorting implies that any change done, can be reverted, and assumes the existance of an initial status.

Ideally, I'd try to go toward a sorting approach due to its non-destructive nature. However that would play at odds with the ability to reorder manually inside the "Edit" tab, which is meant to change order. So even if I'd like to, I think that a simple approach can't be a sorting one, but a transformative one.

Also, note that the sidebar is entirely made of properties, not things that change the order, which are instead inside the Edit tab, which makes Edit the right context for transformative actions.

Thus, I'd add a toggle within that tab with the options:

• Restore initial order (which appears only if the order has changed from initial)
• Reverse order

And potentially in the future things like:

• Reorder randomly (which is different from the flag on the side since this order once set won't change every time a user sees the gallery)
• Reorder chronologically
• Reorder alphabetically

These are all transformative options, or in other words, once done, the order is changed, and can be edited manually further afterward.

Note that the wording is meant to convey the transformative nature of the actions vs a sorting status. For the same reason these can't be a dropdown, nor a pill control, nor a flag.

Here's a mock:

[alisterscott]

Currently, the design implies the order the images were clicked, because they get a numbered index as they get selected. So yes, that order has to be retained, as it's explicit user choice.

Not necessarily. See the video by @designsimply where the drag and drop upload designated the order which was not an explicit user choice. See p4k3M4-2bH-p2

That's the intention of the reverse button: to reverse the order that the drag and drop uploader determined for the user to be the order

[lancewillett]

That's the intention of the reverse button: to reverse the order that the drag and drop uploader determined for the user to be the order

This is exactly right — my experience also. The drag-drop uploader sometimes seems to put things in the reverse order I would like, so I click the button to correct it quickly.

[folletto]

Not necessarily. See the video by @designsimply where the drag and drop upload designated the order which was not an explicit user choice.

This is exactly right — my experience also. The drag-drop uploader sometimes seems to put things in the reverse order I would like, so I click the button to correct it quickly.

Wait, I need to take a step back. These are two things, let me separate them:

1. They are explicit user choice, even in the case above. Otherwise you wouldn't be able to fix them just by clicking reverse (which implies you picked an order, and they were in the opposite of it), right? ;)
2. If they are always in reverse order, then we should probably fix something in the drag'n'drop mechanism.

The fix there isn't about a button to invert it, but about the fact that using drag'n'drop they are in reverse!

Which means, the ⌗1 priority ticket isn't about a button, but about fixing the upload order when the files are drag'n'dropped. Can we do that? :)

---

Regarding the reverse order concept above instead (which I think could still make sense even after we fix the drag'n'drop upload bug), from the two comments I'm not sure if you're ok with that or not.

Does it work? :)

[lancewillett]

The fix there isn't about a button to invert it, but about the fact that using drag'n'drop they are in reverse!

This is correct. :) Fixing this deeper issue would be a big help to the broken flow.

[alisterscott]

The fix there isn't about a button to invert it, but about the fact that using drag'n'drop they are in reverse!

Not necessarily. The current order always aligns with my expectations when using drag and drop uploads but there are plenty of user reports where it doesn't. So reversing the current drag and drop upload would break the expectations of users like myself who currently don't have an issue

[folletto]

The current order always aligns with my expectations when using drag and drop uploads but there are plenty of user reports where it doesn't.

Yes. I think that the unpredictable ordering when drag'n'drop happens is a bug in OSes I've seen for more than 20 years now. :/

That said, let's move things forward. As I think it's important to go to the whys it's also important to push forward. Can I get nods on the two things mentioned above instead of just on the whys?

1. Fix the upload order when drag'n'drop happens @
2. Introduce the button to rearrange sorting quickly @

Do we all agree on both? Shall we keep this thread for (2) and open a new issue for (1)?

[designsimply]

If they are always in reverse order, then we should probably fix something in the drag'n'drop mechanism.

What happens is that the order the images are shown inside a user's file viewer is the order they will appear after dragndrop. The problem is that sometimes a user uploads a set of images and then realizes the order is opposite from what they expected (even though it does match the file viewer order), at which point they need an action to reverse the order. What we need is an "undo" in a sense. Simply having a way to set the order explicitly (i.e. using a dropdown for all sort ordering as @alisterscott suggested) would solve the problem and then some.

We can then assume "Random Order" kept as separate because none of the other ordering behaviours happens at "runtime", then we just need to chose if it's a sorting action or a trasformative one.

I wouldn't assume that. "Random Order" is one of several possible ordering options, and (as a user) it doesn't matter to me as a user whether the ordering happens at runtime or not.

Replacing the "Random Order" checkbox with a "Sort Order" dropdown selector in the options on the right would be ideal. If someone stage a prototype (horizon?), I can run some usability tests on it.

^{Seen at https://wordpress.com/post/design5279.wordpress.com using Chrome 54.0.2840.71 on Mac OS X 10.11.6}

[folletto]

The problem is that sometimes a user uploads a set of images and then realizes the order is opposite from what they expected (even though it does match the file viewer order), at which point they need an action to reverse the order.

Ok! If that's not a bug, then we can safely ignore it, and go back to the design discussion of this ticket. :)

I wouldn't assume that. "Random Order" is one of several possible ordering options, and (as a user) it doesn't matter to me as a user whether the ordering happens at runtime or not.

As I mentioned above, that's not the case. Random order done at runtime means that every page load the order changes, while random order done at creation time "fixes" the order in that specific new one and won't change. The two are very different behaviours, and it matters a lot for the user. I would even argue that it's currently not clear that the randomization is done at runtime and we should change the label to "Randomized order every page load" or something similar.

Please see the explanation above why then we can't do the dropdown, and we should use a separate control like this inside the Edit tab:

While I'm not necessarily pushing for this specific design, I think it's simple enough to be built and address the need expressed in this topic, within the right place in the information architecture.

Update: the component to do that it's one of our standard patterns, and readily available: <EllipsisMenu> (which however uses a different icon, but we can start there to get the feature in quickly).

[folletto]

Hey @alisterscott are you up to try to implement the dropdown above (with whichever set of items you feel comfortable starting with) so we can fix this issue? :)

[alisterscott]

I'll take a look at adding the new dropdown - I'll probably do this incrementally to keep the PRs small and testable.

[davewhitley]

Wow, a lot to take in.

Just looking at it, I would think this is the best way to go:

Replacing the "Random Order" checkbox with a "Sort Order" dropdown selector in the options on the right would be ideal.

@folletto, your reasoning here not to do that is logical:

Also, note that the sidebar is entirely made of properties, not things that change the order, which are instead inside the Edit tab, which makes Edit the right context for transformative actions.

but while I'm using the interface, that doesn't occur to me. In other words, if the sort order option was on the right, I wouldn't find that jarring. I just think of the right as a panel of group edit controls that change the appearance of the entire gallery. On the left is where I can fine tune the appearance by dragging/deleting individual images.

It's still going to be quite strange in terms of UX to have a Random Order setting in a separate panel than the other order settings (alphabetical, etc.), even if it makes logical sense to separate them. I argue that you are still "editing" the gallery with the dropdowns on the right

With that in mind, I came up with this:

Sort Type contains:

• Original (the order that was used when the gallery was first created. This acts as an undo if you choose the other following options)
• Chronological
• Alphabetical
• Random

Sort Order is pulled out as a separate reverse on/off action that can be applied to any of the sort types. This allows for users to select a chronological ordering, but reversed if they wanted to show the newest image first, for example.

This has worked for sorting notes in simplenote and I think it makes sense:

Another example is the finder on MacOS:

Each column header is a sorting type and you can toggle the header to reverse the ordering.

Edit: edited to include the random option.

[folletto]

but while I'm using the interface, that doesn't occur to me.

Yes. Which makes me think that's a larger issue of this UI, as the sidebar is disconnected from the tabs on top (Preview / Edit): the sidebar changes properties in Preview AND in Edit. I tried to solve that above avoiding to have Edit actions there, but yes, it's probably something bigger than that.

---

Please notice two things I mentioned above won't be properly dealt with that dropdown, which was my first proposal in the other thread but I switched away from:

1. Manual reordering, as it's done in "Edit", would get invalidated by the dropdown done in that way: what happens if you change to alphabetic and then switch to "Edit"? Is it still Alphabetic? And then if a photo is moved, would the dropdown add another "Manual" entry in the ordering (It's not "Original" anymore, nor "Alphabetic")?
2. "Random" as currently implemented is a runtime, dynamic property, not a change in the ordering here. One thing is "shuffling" things statically, another is to have them shuffled at every reload.

Sort order

I think this is a clever idea, regardless of the comments above. :)

[davewhitley]

Ah I finally see what you mean by runtime now. That is quite strange, I expected it to just randomize the order of the gallery once and not change every page load.

I'll take another stab at this.

[folletto]

That is quite strange, I expected it to just randomize the order of the gallery once and not change every page load.

Yeah it's massively confusing, also due to the label not being very accurate in what it does. I think regardless of any solution we come up here, that label has to be clarified somehow.

[davewhitley]

And then if a photo is moved, would the dropdown add another "Manual" entry in the ordering (It's not "Original" anymore, nor "Alphabetic")?

Yes, the Sort Type dropdown would need to change to Custom or Manual.

To help the greater Preview vs Edit dilemma, here is an alternative layout:

Preview is always shown. Settings and Edit are 2 different filters on the right, renamed "Images" and "Settings". I would think the Images filter (where you can drag to reorder) needs to always be synced up with the preview. Meaning if I changed the order to alphabetical, the images in the Image filter would reflect that. Maybe this isn't the best solution though. Like the original issue says, this definitely needs more design work and thought and research.

---

To solve the immediate gap problem we have with wp-admin, would it be enough just to add a "Sort Order Reverse" toggle in the right pane? Similar to #8959?

I think we need to define a smaller in-between step towards a total redesign.

[folletto]

here is an alternative layout:

That's a solid proposal. I think it can be explored further! :)

I think we need to define a smaller in-between step towards a total redesign.

If we want something simple that doesn't solve that too, I think we should at least separate/group the options in the sidebar and clarify them. It makes me a bit more uncomfortable, but I can acknowledge it's a stop gap:

That said... didn't seem to be too far in terms of additional complexity from the other, which had the additional benefit of being in the right place in the IA. But might be me then! :)

(note: the content of the dropdown can be any subset that works for a first iteration).

[ockham]

I think this proposal

is less plagued by state issues than the other, since every item is a one-time action; while the other proposal

has issues @folletto pointed out in https://github.com/Automattic/wp-calypso/issues/8967#issuecomment-256588414

Ideally, I'd try to go toward a sorting approach due to its non-destructive nature. However that would play at odds with the ability to reorder manually inside the "Edit" tab, which is meant to change order. So even if I'd like to, I think that a simple approach can't be a sorting one, but a transformative one.

It's still not entirely clear to me what "Restore initial order" would do once a user has modified the order, saved the post, left Calypso, and come back later -- I don't think there's any way to carry along the original upload order. So realistically, that option would more be like a reset -- the question is to what state :slightly_smiling_face:

[folletto]

Thanks @ockham :)

"Restore initial order" should only appear if the order was changed in the current session. So:

1. If a user just selected items, there's no "Restore"
2. If a user changes order, then "Restore" appears
3. Once "Restored" the entry disappears

If a user edits:

1. There's no "Restore"
2. If the order is changed, then "Restore" appears

Does it make sense?

Btw, I'd consider "restore" an extra that could be split from the initial PR. It's useful, but I wouldn't try to do it all together unless very simple to do.