Join GitHub today
GitHub is home to over 28 million developers working together to host and review code, manage projects, and build software together.Sign up
Media: improve the UX of the image gallery sorting #8967
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)
This needs some design/UX research etc.
Discussed a bit today with Alister, there are various modes of how you'd want to order images in a gallery.
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:
referenced this issue
Oct 26, 2016
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.
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:
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:
And potentially in the future things like:
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:
Not necessarily. See the video by @designsimply where the drag and drop upload designated the order which was not an explicit user choice. See
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.
Wait, I need to take a step back. These are two things, let me separate them:
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? :)
referenced this issue
Oct 29, 2016
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
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?
Do we all agree on both?
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.
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.
Ok! If that's not a bug, then we can safely ignore it, and go back to the design discussion of this ticket. :)
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:
Wow, a lot to take in.
Just looking at it, I would think this is the best way to go:
@folletto, your reasoning here not to do that is logical:
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:
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.
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:
I think this is a clever idea, regardless of the comments above. :)
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.
Yes, the Sort Type dropdown would need to change to
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.
That's a solid proposal.
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).
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
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
Thanks @ockham :)
"Restore initial order" should only appear if the order was changed in the current session. So:
If a user edits:
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.