nextcloud
Files app toolbar design adjustment
Buttons should be rearranged as shown in the following mockup:
Additionally, a dropdown menu should be added to the current item in the path bar. It should contain actions you can take on the folder, as well as a "Refresh" action which would do the same as single-clicking the item currently.
The standalone share button should be removed in favor of the share action in the menu.
Folder description, recent files, Search everywhere button, etc. should be below the toolbar.
Original issue
Currently, you can click the last item in the path bar:
This is quite confusing as doing so (presumably reloads the view and) presents a spinner that finishes and then in most cases, nothing happens. This can be especially confusing to new users as to them, it may not even be clear that this is a path bar. They just see a button labelled "All files" that (seemingly) does nothing when clicked.
It also causes a visual glitch with the New button as there is no padding between them.
This button should not do anything when hovered or clicked and should just act as a label.
cc @nextcloud/designers
Hi @kra-mo I'd like to contribute to the design issues, starting with this one
Hi @kra-mo , I’d like to contribute to this issue. I’ve gone through the description and understand that the goal is to make the current folder (last item in the path bar) behave as a label instead of a clickable button preventing unnecessary reloads and fixing the spacing issue next to the “New” button.
Will open a PR soon, please let me know if there are any specific design or behavior guidelines I should follow.
@CatherineKiiru and @soham04 thanks for your initiative, would you like to collaborate on it? Yes @soham04 you got that right. If you'd like a guest account on our Nextcloud instance please send me an email at [email protected] with your preferred email address for it. Thank you both :)
@marcoambrosini since @soham04 is opening a PR soon, he can proceed with the whole task, I'll pick up another issue.
This is intended behavior are you sure we want to remove it? The reason for it is to reload the current folder without having to navigate to parent and back to reload without having to reaload the full page which is much heavier.
The use case is updating the view after e.g. client changes etc. Its quite heavily used by users - at least as far as I know from support and my own instance. (I also personally use it quite regularly).
So I would ask to not remove without a replacement for this behavior.
This is quite confusing as doing so (presumably reloads the view and) presents a spinner that finishes and then in most cases, nothing happens.
As the title says it reloads the content of the current directory - usually nothing changed, but this is different when you e.g. use clients - upload something from your phone and then want to work with it on desktop.
It also causes a visual glitch with the New button as there is no padding between them.
This one we can of course fix.
As this is not a design change but removing a feature, also cc @skjnldsv and @sorbaugh
The reason for it is to reload the current folder without having to navigate to parent and back to reload without having to reaload the full page which is much heavier.
This is not expected behavior. OneDrive, Google Drive, and local file managers do not do this and there is nothing about the button that tells you what it does without hovering it.
As the title says it reloads the content of the current directory
Tooltips are not accessible. Also, most people do not look at them, especially not if the button already has text.
First, the page should automatically update. If it can't due to technical limitations (which I'm guessing is the case), users can already reload the full page in their browser and I'm guessing most do that anyway, even if it is heavier, because it is expected…
…but if this is really preferred and we can't do anything about it, we should add a dedicated button somewhere instead. I'm thinking of redesigning some of the top bar of Files in general, it could probably fit in somewhere.
But until then, since this is essentially a workaround, I'd be more in favor of assigning this to a single-key R keyboard shortcut or something instead of putting it in a place users might discover in 5 minutes of logging onto Nextcloud and get confused by it.
At the very least, make the button tertiary-no-background or something to make it appear less like other buttons and more informative.
This is not expected behavior. OneDrive, Google Drive, and local file managers do not do this and there is nothing about the button that tells you what it does without hovering it.
What Ferdinand meant is that Customers are reeaaaally using that feature, and so are we. While other competitors might not be doing so, I can tell you our users have been heavily trained towards doing so.
First, the page should automatically update.
That is an anti pattern. Users never fully trust an automated background update. This is why there's still the drag-down to refresh behaviour on all smartphones despite many apps having automated refreshes. We are trained and expected to be able to manually refresh a content without refreshing the entire page. This is heavily seen in many contexts. But I digress.
So I would ask to not remove without a replacement for this behavior.
Heavily seconded
First, the page should automatically update.
That would require us to first implement https://github.com/nextcloud/server/issues/2742
If it can't due to technical limitations (which I'm guessing is the case), users can already reload the full page in their browser and I'm guessing most do that anyway, even if it is heavier, because it is expected…
That can take ages - e.g. bad mobile network - and I would consider this an antipattern as we can and have this function. Also users are trained to our behavior already, I would even say this is a benefit of Nextcloud compared to other competitors.
Tooltips are not accessible. Also, most people do not look at them, especially not if the button already has text.
They do when they are aria-ed properly, which this button is :) Screen readers do properly catch and explain them
They do when they are aria-ed properly, which this button is :) Screen readers do properly catch and explain them
Screen readers are not the only part of a11y. Tooltips are not accessible via touch and there is no real resolution to this on the web.
But OK, I can see that we really do want this feature. How about this:
I was just quickly experimenting with how we could reshuffle the toolbar. The actual layout isn't all that important here and it's TDB, just that the current item in the path would open up a menu. One of the items could be "Refresh". @susnux @skjnldsv what do you think?
Looks all good to me! Like you said, if you think this is not discoverable enough, I'm all in to make things more visible :) Quick mockups looks great, a refresh button would definitely be a nice addition 👍
It could pair with the loader/refresh spinner so it's even more visible that the view is being updated (as a side note, when we'll have the background refresh, making sure the user knows some more data is being fetched is important too, we could easily use the same indicator when fetching is ongoing)
Thanks everyone for the detailed discussion, I really appreciate the clarification on why the current folder remains clickable for reload purposes.
Since my PR (#56040) removes that behavior, I wanted to confirm the best way forward before making any updates.
Would you prefer that I: 1️⃣ close the current PR and wait for the potential redesign that adds a dedicated “Refresh” button, or 2️⃣ update the PR to keep the reload behavior but focus on improving the spacing and visual clarity (e.g., padding fix near the “New” button or adjusting the button style)?
I’m happy to proceed in whichever direction aligns best with the team’s plans.
Hi @soham04
Thank you for the work that you have done. Apologies for the lack of clarity. For now, I think it is best to hold off on any changes in this direction until we agree on what to do next at least from a design POV. I will be opening a new issue then.
Awesome @kra-mo – only piece of feedback is that it would be nice to see this with recommended files, and folder description as well. But what I’m seeing looks amazing! :)
And also, the folder can get a menu which would have all the actions (favorite, share, rename etc) that it would have in the overview of its parent folder.
@kra-mo we discussed this in planning and wanna go ahead with your design proposal in https://github.com/nextcloud/server/issues/55988#issuecomment-3456635964 – I just adjusted the title to keep it simple, if you like you can adjust the original post with any follow-up mockups. :)
Just some feedback from a technical point: The "wide" version is not a problem and easily implementable. Both other versions need breaking changes and probably some smart new components on the files filters API.
And some personal feedback: I really love how it looks :)