Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

improve topbar and use more free space for apps #13079

Open
schiessle opened this issue Dec 14, 2018 · 38 comments
Open

improve topbar and use more free space for apps #13079

schiessle opened this issue Dec 14, 2018 · 38 comments

Comments

@schiessle
Copy link
Member

@schiessle schiessle commented Dec 14, 2018

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

image

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

This comment has been minimized.

Copy link
Member

@jancborchardt jancborchardt commented Dec 14, 2018

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

This comment has been minimized.

Copy link
Member

@violoncelloCH violoncelloCH commented Dec 16, 2018

@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

This comment has been minimized.

Copy link
Member

@jancborchardt jancborchardt commented Dec 17, 2018

@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

This comment has been minimized.

Copy link
Member

@skjnldsv skjnldsv commented Dec 17, 2018

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

@violoncelloCH

This comment has been minimized.

Copy link
Member

@violoncelloCH violoncelloCH commented Dec 19, 2018

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

This comment has been minimized.

Copy link

@stevoh6 stevoh6 commented Jan 25, 2019

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

@skjnldsv

This comment has been minimized.

Copy link
Member

@skjnldsv skjnldsv commented Jan 25, 2019

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

@jancborchardt

This comment has been minimized.

Copy link
Member

@jancborchardt jancborchardt commented Jan 25, 2019

@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

This comment has been minimized.

Copy link
Member

@skjnldsv skjnldsv commented Jan 25, 2019

@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% ?)

@juliushaertl

This comment has been minimized.

Copy link
Member

@juliushaertl juliushaertl commented Feb 1, 2019

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

This comment has been minimized.

Copy link

@godfuture godfuture commented Mar 22, 2019

@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

This comment has been minimized.

Copy link

@Brianetta Brianetta commented Apr 18, 2019

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

This comment has been minimized.

Copy link

@doenietzomoeilijk doenietzomoeilijk commented Apr 23, 2019

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

This comment has been minimized.

Copy link
Member

@jancborchardt jancborchardt commented Apr 23, 2019

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

This comment has been minimized.

Copy link

@Brianetta Brianetta commented Apr 23, 2019

@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

This comment has been minimized.

Copy link
Member

@jancborchardt jancborchardt commented Apr 25, 2019

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

This comment has been minimized.

Copy link

@Brianetta Brianetta commented Apr 25, 2019

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

This comment has been minimized.

Copy link

@doenietzomoeilijk doenietzomoeilijk commented Apr 25, 2019

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

This comment has been minimized.

Copy link

@Brianetta Brianetta commented Jun 4, 2019

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

This comment has been minimized.

Copy link
Member

@jancborchardt jancborchardt commented Jun 4, 2019

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. :)

@jancborchardt jancborchardt added this to the Nextcloud 18 milestone Jun 4, 2019
@mcnesium

This comment was marked as spam.

Copy link

@mcnesium mcnesium commented Sep 27, 2019

There is no js.js or init.js with any const usePercentualAppMenuLimit anymore in v17 anymore. So where is the limit set now?

@skjnldsv

This comment was marked as off-topic.

Copy link
Member

@skjnldsv skjnldsv commented Sep 27, 2019

@mcnesium Please do not spam issues with similar messages. We already said we will not waste time to provide informations for people to edit their own instances. If you want to work on this issue, we can help you figure things out, but we will not provide custom patches for every user out there. Sincerely, John.

@army1349

This comment was marked as off-topic.

Copy link
Contributor

@army1349 army1349 commented Oct 3, 2019

@mcnesium Please do not spam issues with similar messages. We already said we will not waste time to provide informations for people to edit their own instances. If you want to work on this issue, we can help you figure things out, but we will not provide custom patches for every user out there. Sincerely, John.

Are you sure about this?
I see this as valid attempt to deal with the bug until it is fixed.

@teotikalki

This comment has been minimized.

Copy link

@teotikalki teotikalki commented Jan 2, 2020

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

This comment has been minimized.

Copy link

@Brianetta Brianetta commented Jan 2, 2020

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

This comment has been minimized.

Copy link
Contributor

@kesselb kesselb commented Jan 2, 2020

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

This comment has been minimized.

Copy link
Contributor

@kesselb kesselb commented Jan 3, 2020

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

This comment has been minimized.

Copy link
Member

@jancborchardt jancborchardt commented Jan 3, 2020

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

This comment has been minimized.

Copy link

@Brianetta Brianetta commented Jan 3, 2020

@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

This comment has been minimized.

Copy link

@teotikalki teotikalki commented Jan 5, 2020

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

This comment has been minimized.

Copy link

@teotikalki teotikalki commented Jan 5, 2020

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

This comment has been minimized.

Copy link

@fengkaijia fengkaijia commented Jan 5, 2020

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

This comment has been minimized.

Copy link
Contributor

@kesselb kesselb commented Jan 5, 2020

@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

This comment has been minimized.

Copy link
Member

@jancborchardt jancborchardt commented Jan 5, 2020

@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. 🙂

@kesselb

This comment was marked as resolved.

Copy link
Contributor

@kesselb kesselb commented Jan 5, 2020

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

FYI: I hit the enter button to fast and added some more words.

@szaimen

This comment has been minimized.

Copy link
Contributor

@szaimen szaimen commented Jan 8, 2020

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?

@iguy0

This comment was marked as spam.

Copy link

@iguy0 iguy0 commented Feb 23, 2020

+1 for @szaimen

@znerol

This comment has been minimized.

Copy link

@znerol znerol commented Mar 31, 2020

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
You can’t perform that action at this time.