improve topbar and use more free space for apps

[schiessle]

At the moment the top bar at my system looks like this:

In the '...' menu I have exactly two apps which would fit perfectly next to the other apps. Putting them in the '...' menu makes it unnecessarily hard to both access them and to discover them. I think a more intelligent way of using the empty space at the top bar, e.g. always use 60%-70% (we would probably have to experiment a little bit with the value) before adding the '...' menu would make sense.

Opinions? cc @nextcloud/designers

[jancborchardt]

With the new addition of the text below the apps we could do something like this. But we should still not show all apps regardless of how many there are. A maximum of 40% (better less) of the top bar width seems ok.

[violoncelloCH]

@jancborchardt why would you never show all apps? Doesn't it make sense to use the space we have as long as there is a big enough empty space to the right? I think hiding the apps in the '...' makes them unnecessarily more uncomfortable to access.

[jancborchardt]

@violoncelloCH we discussed that before, sorry I don't have the issue number on hand (mobile atm). The issue with showing all apps is that it creates information overload. We also don't show all the subentries of the settinfs menu on the top right all the time, or the actions of each file. If we did, the interface would be a total mess.

[skjnldsv]

@jancborchardt I've got you!
#5244
#5135 (comment)

[violoncelloCH]

Okay I see... Seams to be difficult to find a max width value that fits for every need and expectation.
Thank you for explaining @jancborchardt and for the references @skjnldsv.

[stevoh6]

What about bring up into settings some configuration ( accept % OR px, with default value)? It should be easy implementation right?

[skjnldsv]

@jancborchardt we could indeed add a setting like chrome did a few months ago?

[jancborchardt]

@skjnldsv imo it’s a horrible example and you should uninstall some of those. ;D But ok.

Wasn’t it @juliushaertl or you who suggested being able to drag the "More apps" icon to the left and right? We can do that if it’s so important – keeps it simple and it’s similar to what Chrome does. :)

[skjnldsv]

@jancborchardt actually I quite like it. The default can be set to what it currently is, but I would not mind having a few more apps in there as well :)
Though since it's going to be quite a js work, I don't see this coming any time soon 🙈

and you should uninstall some of those

😁 I actually use almost all of them (90% ?)

[juliusknorr]

Wasn’t it @juliushaertl or you who suggested being able to drag the "More apps" icon to the left and right? We can do that if it’s so important – keeps it simple and it’s similar to what Chrome does. :)

There is #4917 about that, but we haven't made any proper design how this should be done, with some icons hidden.

I would be all in for the chrome approach, it works with our default but gives users an easy method to access more apps if they need to.

[godfuture]

@juliushaertl
You mean with AppOrder the user might configure the order of apps and the drag feature would be part of nextcloud? Sounds good :)

[Brianetta]

I logged that issue, thanks @violoncelloCH. My wife never discovered the three-dot menu or the three apps that got hidden inside it. As I mentioned int he other issue, I deliberately increase the number of app icons up there using the External Links app, and shuffling them out of sight removes the convenience I'm trying to add. Not sure how information overload factors into this, but it's something I have yet to experience from a row of icons.

[doenietzomoeilijk]

For what it's worth, I'd love to see this being a configurable thing. I can understand the desire to keep information overload in check, but I'd prefer to decide myself how much information I think I'm able to handle. ;)

[jancborchardt]

Appreciate the enthusiasm from everyone, but we don’t need more comments agreeing and making this thread longer – please use the 👍 reaction function on the comments.

The design proposal we will go with is as mentioned above by @skjnldsv and @juliushaertl is to do it like Chrome, with the "More apps" icon being the draggable element.

Now we need someone to implement that. So if you want to help, you are welcome to dive into the code, or find someone who wants to do that. :)

[Brianetta]

@jancborchardt Will this "More apps" draggable icon have a configurable start position, or will it remain hard-coded at 0.33 of the window width? If the visual appearance doesn't change, my original problem remains.

[jancborchardt]

The default will remain as it is now to prevent information overload in the header. If you need a different default to set for others, it is possible to edit the code.

Let’s take it step by step. Also remember that everything, and every little option to set needs to be tested for it to work. And the really important options might then get lost in a sea of irrelevant ones. See »Choosing our Preferences«.

---

EDIT: We do limit by number of icons, and that number is 8.

The reason why it is like this is based on human perception limits. Recommended reading: The Magical Number Seven, Plus or Minus Two

Also a helpful illustration from a nice presentation on UI/UX Tips & Tricks for developers by Ecaterina of our Open Source Design collective:

[Brianetta]

Yes, editing the code is an option, although as I said in #15014 this falls foul of the code signing feature. Nevertheless, I do edit the code, every single time there's an update to core/js/js.js, which is very frequent.

"Information overload" is not something I understand, especially in the context of a row of icons. I use the External Apps app to add more icons to the topbar, and these are unceremoniously hidden from my users. Your solution to a perceived problem is to conceal information that I'm attempting to provide.

[doenietzomoeilijk]

Personally, I disagree with the information overload argument; if you really want to be strict about that, limit to X icons, instead of a percentage of a screen width. Currently, someone with a 27" display sees more icons than someone on a laptop screen, without taking that person's actual "overload treshold" into account, which IMO is kinda weird. Also, this now changes the interface, hiding apps or showing them, depending on how wide a window is. This, to some users at least, is unexpected and unpredictable behaviour.

That being said, I'm not the project lead, so I'll respect the fact that A Decision was made - at least that defines a scope for the project.

As for circumventing the decision for the users that would want to do that - I'm not sure if this should be a setting by default, as per jancborchardt's comment. I'm not familiar with the NC code, but is this something that can be done in an app? That way, the users that want to change it can do so by installing the app and consciously adding the clutter that comes with extra settings and whatnot, and the base install stays clean and within a well-defined scope. I'm not sure if that's technically possible, though - I'd somewhat assume so, since it might be related to what the custom links and the app order apps do.

[Brianetta]

Since #15014 has been closed, I am going to have to re-iterate that the default of 33% of the size of the window is an arbitrary default that does not suit my needs.

My work-around is to pop this command in my cron configuration, just after the bit that runs cron.php:
sed -i '/usePercentualAppMenuLimit/s/0.33/0.99/' /var/www/nextcloud/core/js/js.js

This automatically changes the value of the variable should it be changed by any update. Frankly, it's ridiculous that I have to automate this. It's a variable, and having it initialised from config rather than a hard-coded value shouldn't be contentious.

[jancborchardt]

As said above:

Appreciate the enthusiasm from everyone, but we don’t need more comments agreeing and making this thread longer – please use the 👍 reaction function on the comments.

The design proposal we will go with is as mentioned above by @skjnldsv and @juliushaertl is to do it like Chrome, with the "More apps" icon being the draggable element.

Now we need someone to implement that. So if you want to help, you are welcome to dive into the code, or find someone who wants to do that. :)

[teotikalki]

Just came here from the old one (#5135) and the first thing I see is @jancborchardt stating

With the new addition of the text below the apps we could do something like this. But we should still not show all apps regardless of how many there are. A maximum of 40% (better less) of the top bar width seems ok.

No, it really doesn't! THREE YEARS of people requesting the ability to use more of the top space in 3 issues that I now know of seem to indicate otherwise!

Clearly there are two basic camps: one that wants a 'clean and empty' interface (fine, you should have that choice) and one that thinks the empty space is a total waste (and WE should have that choice TOO!) This honestly isn't something that would take DEVELOPMENT EFFORT because it's hard to code. This is something where one group of people are enforcing an arbitrary UI experience decision on another group. We get that you make this and we love you for it, but why do you think that all users want the same layout that you do? At what number will there be enough requests for this that you add a settings option 'percentage of top bar' and let the USER pick the percentage. I actually think that devs coming to the continuous threads reporting this issue to tell people they CAN'T use their screens effectively incurs a greater time penalty than the implementation of this feature would.

You can even keep your preferred choice as the default so YOUR experience will NEVER change and new users will all start out with your choice of UI experience so THEY can perceive NextCloud the way YOU want them to. You could ALSO make all of the people who want apps all the way across the top on their 4k monitor happy (they'll exist... someone will post screenshots like it's bragging rights... and that will harm NOBODY). It seems about as win/win as you can get.

My personal case is that there are only 2-3 apps more that would need to display on my 1080p screen form me to not have a dropdown at all. I find the way it is to be clunky and stupid and it makes the experience of using NC worse. Every time it takes two clicks instead of one while I'm staring at the wasted empty space that would make the action unnecessary I just get annoyed now that I know that people have been asking for the PROBLEM to be fixed since 2017 (at LEAST) and the devs attitude is essentially 'we like it how it already is and we don't think you should have the choice to like yours'.

Seriously... check this out: #5135
There was a change made in response that ENDED with the pictures at the bottom. Look at how absolutely stupid the difference is between the phone in portrait and landscape mode: ONE extra icon and 5X the empty space. Look at the percentages for the desktop view above and note that the poster indicated that they had chosen the LOWEST value as a FIXED PERCENTAGE.

[Brianetta]

It's such a dumb and simple change that I actually have a cron job that runs sed every fifteen minutes to change the value to 95% (which is my preference, since I've added a lot of apps and want my wife to see them). It usually makes no changes, but after every upgrade I only have to wait 15 minutes for my menu bar to show all my stuff.

[kesselb]

Thanks for sharing your thoughts 👍

@jancborchardt explained here #13079 (comment) why 8 is the current limit. That does not work for everyone. As per #13079 (comment) a pull request that makes the topbar dragable (and the value user defined) would be acceptable. This issue has now the "1. to develop" and "help wanted" label. Feel free to start coding. That would be constructive.

[kesselb]

Some of you probably don't know. Nextcloud is also at bountysource: https://www.bountysource.com/issues/67540299-improve-topbar-and-use-more-free-space-for-apps ;)

[jancborchardt]

Instead of screaming at the people who develop this software for free for everyone, why hasn't anyone taken it up to implement the slidable limit as defined by @juliushaertl above which I agreed with long ago?

Happy new year – please if you talk the talk (in CAPS as well) help us walk the walk together, as a community, in a friendly and respectful manner. Thanks

[Brianetta]

@jancborchardt, I pointed out at the time that that solution, as agreed, doesn't solve my problem. My problem is that your feelings on "information overload" don't mesh with my feelings on discoverability. It might be that this is why this same issue keeps cropping up.

[teotikalki]

Much like @Brianetta my problem isn't fundamentally the software. In my case I am offended by the overbearing attitude of @jancborchardt. Since beginning to explore this issue a few weeks ago I have found MANY examples of him dismissing contrary viewpoints simply for being contrary. I also happen to prioritize discoverability over 'information overload', and given the number of issues raised over the last three years I know that I am not alone.
@jancborchardt A friendly and respectful community is NOT in evidence when you dismiss every person who says 'wasted space is degrading my user experience' with a comment like 'we should definitely waste at least 60% of space because 'clutter' degrades MY user experience'. Even now the

I don't actually know who you are. Maybe you wrote almost all of NC by yourself and I owe you a great debt of gratitude? If so, you have my sincere gratitude for the CODE but I still call hypocrite on a person with your insensitive and dismissing attitude talking about friendly and respectful community.

Let's be friendly and respectful and assume that a user installs software that they intend to use to better their life and ALSO that said user is a competent judge of such:

@skjnldsv imo it’s a horrible example and you should uninstall some of those. ;D But ok.
Oh wait, no, let's not. ( ;D is likely intended to imply humor, but I find that intention lost in a sea of unwarranted criticism...)

Other user:

@jancborchardt why would you never show all apps? Doesn't it make sense to use the space we have as long as there is a big enough empty space to the right? I think hiding the apps in the '...' makes them unnecessarily more uncomfortable to access.

@jancborchardt

But we should still not show all apps regardless of how many there are. A maximum of 40% (better less) of the top bar width seems ok.

YOU seem to be some kind of minimalist. In a friendly and respectful community, people who like lots of icons would be OK with you and others who like few icons and you would return the courtesy. The software that resulted from such an environment would happily accommodate the spectrum of viewpoints/ UXs.

We can do that if it’s so important
I'm just going to end by pointing out that you come off as very grudgingly allowing for the possibility that someone could implement a change. People have been filing issues and saying that this is important to them since 2017.

[teotikalki]

To be clear, if the consensus of the NC core devs is a love of minimalist design I wouldn't expect any of you to lift a finger to code a feature like this... just please don't tell the rest of us that our opinions and ideas are 'wrong' or 'shouldn't ever exist'. An attitude like 'ah, you guys want that? I TOTALLY don't so I'm not going to touch it but if you do, then cool'. would be completely sufficient.
I think that a lot more people are interested in coding features than fighting developers for the right to code features.

[fengkaijia]

For anyone using the prebuilt package (zip/tar from the website), the cron command should be sed -i 's/*=\.33/*=\.9/g' /var/www/nextcloud/core/js/dist/main.js

[kesselb]

@Brianetta I would assume that the position is remembered. Keeping this setting as user value is possible. So you have to drag the more apps button once. @juliushaertl / @jancborchardt could you clarify the spec and probably update it?

@teotikalki Where is this heading? Is this still about the issue or is this a personal vendetta?

Please read the Community Code of Conduct. I see your point but what you are doing is rude. You are speaking about friendly and respectful community. Are you friendly and respectful? You know that using CAPS is considered as SCREAMING. He explained the decision. It's based on scientific facts. These facts are the reason for this default. Fair enough that do not work for everyone. So a compromise was found to make this configurable.

An attitude like 'ah, you guys want that? I TOTALLY don't so I'm not going to touch it but if you do, then cool'. would be completely sufficient.

Here it is: #13079 (comment)

[jancborchardt]

@Brianetta I would assume that the position is remembered. Keeping this setting as user value is possible. So you have to drag the more apps button once. @juliushaertl / @jancborchardt could you clarify the spec and probably update it?

Of course it would be remembered.

---

For anyone confused about the design guidelines of Nextcloud, we have a clear page on that: https://nextcloud.com/design/

EDIT: Also here again is a related article on the cognitive science behind the decision here:
[https://www.nngroup.com/articles/chunking/](How Chunking Helps Content Processing). (It doesn’t help shooting the messenger, I’m merely citing studies and it’s not my opinion.)

---

If agreeing on a design proposal and pointing out that people should use +1 instead of adding long comments to this already long thread is considered overbearing on my part, then I’m of no use in this thread and will hence unsubscribe.

Just keep in mind that being friendly in online communication is especially important, doubly so when you request something. I’m not the person who will implement this, but people who could implement this will also turn away from a thread full of demanding and long-winded comments.

---

Thanks you @kesselb for attempting to resolve the situation and also pointing out our Code of Conduct. 🙂

[szaimen]

Maybe this problem could also get solved by the following idea, which should satisfy everyone:

I propose a hybrid solution consisting of:

1. A config.php parameter, where you can set the default percentage of space that is used for apps for all users. If no parameter is configured, the default percentage that the Nextcloud-Team prefers is used.
2. The version, that the Nextcloud Team currently prefers, where the user can choose the space that is used by apps, through pulling the "more apps button". If this gets changed by a user, it should be consistant on all of his browser sessions.

Of course both solutions could get developed seperately and addded one for one. So maybe you could start with the config-php parameter, which should be easier to develop imo.

What do you think?

[znerol]

Submitted a PR #20250 which addresses this problem using custom CSS properties. Those can be overridden using a custom theme server.css.

[150d]

Of course, if you strive for the most complex solution possible, I guess the CSS method would be excellent.

So what were the arguments against a simple config.php statement again? I don't know how to activate a custom CSS. I sure don't know enough about it to ensure it stays there during updates. And I guarantee you I don't know what else can break by using additional CSS.

But I do know how to insert a statement into the config file. So where's the problem with that?

[BP-Santo]

As it stands, just this trivial, recurring issue calls for users to maintain a test environment for new releases; possibly some automated browser tests; filesystem snapshots due to lack of downgrade path; automating the change itself and backup of the file being changed - all just to keep track of a single poorly hardcoded value.

The proposed sliding bar idea seems offpattern for nextcloud UX and is the most dev intensive one too when the already mention direct solution to this problem is to simply turn that hardcoded 33% width value to be instead pulled from a user accessible place. To this end it is unlikely anybody will spend time making a pull request for that unique UX feature when given the circumstances it makes more sense to work out a regex to fix the underlying problem and post it for others to share around.

Even just adding possibly outdated instructions to the wiki or somewhere easily searchable and visible on how to sed it out would save hundreds of users a lot of time and frustration searching around the ui and then config files for what according to all accepted principles of UX design should be either user adjustable or displayed in full, the ... overflow solution only comming into play when there is an actual lack of space in the element.

[juliusknorr]

Implemented with with https://github.com/nextcloud/server/pull/21730/files