Server: Add labels to the header app navigation icons

[sunjam]

From AppOrder Issue #47. I'd love to be able to see Nextcloud apps by their text name (_Calendar_) instead of the icons. This is especially true for new users, who find the icons very confusing.

Steps to reproduce

1. Browse over the application menu as shown in this screen capture
   
2. Note how (...) apps listed both text names and icons, but those along the top bar do not.

Expected behaviour

Applications would fill the entire top bar of my browser before the (...)
Possible to display just application Icons OR Text Names OR Both OR some combination of both.

Actual behaviour

Only 7 app icons are currently displayed before (...) despite having plenty of browser real estate.
I'm often confused when I see an icon and have no idea what it pertains to until I mouse over it to see the text name pop up.
No option to customize.
No option to display application names and hide associated icons.

[nextcloud-bot]

GitMate.io thinks possibly related issues are https://github.com/nextcloud/server/issues/4784 (Apps icon are missing), https://github.com/nextcloud/server/issues/5201 (Feature Request: Show Shared Folder Name), https://github.com/nextcloud/server/issues/2632 (Apps are missing icons), https://github.com/nextcloud/server/issues/7616 (Feature request: Sync existing), and https://github.com/nextcloud/server/issues/6877 (Feature Request: Import Tasks).

[MorrisJobke]

cc @nextcloud/designers

[skjnldsv]

Seems too much for what it's worth and how many people will really use it :/

[pixelipo]

Names for the app icons popover on hover - I think that's enough help for new users or those unfamiliar with a freshly installed app.

[jancborchardt]

And exactly this is also the reason we _do_ limit the number of apps shown in the top bar. The most used ~7 ones you can kind of remember and identify, but for more than that we have the menu with text.

[sunjam]

Interesting. I myself do not find the 7 icons in the top bar easily
identifiable. Example is Notes icon doesn't mean anything to me visually,
even after years. When I do not access one of those apps for a few months
I forget what the icon means.

Also, I find new users will be frustrated that they cannot identify what
any of the icons mean across the top bar. Optionally displaying the app
name as text would be really helpful. For me, I'd rather see a text name
than an icon for even just 7 apps.

On Tue, Oct 2, 2018, 8:57 AM Jan-Christoph Borchardt <
[email protected]> wrote:

Closed #10952 https://github.com/nextcloud/server/issues/10952.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/nextcloud/server/issues/10952#event-1879732258, or mute
the thread
https://github.com/notifications/unsubscribe-auth/ABtFZgPMsPo98E5lasUzmi2ayEEpGMqwks5ug4zLgaJpZM4WVo96
.

[pixelipo]

@sunjam I suggest proposing a better icon for those apps that you find hard to identify.

[sunjam]

Perhaps, but Nextcloud has over 150 apps available. It makes the most
sense to allow the icons and/or names to displayed in the top bar.

On Wed, Oct 3, 2018 at 2:53 AM Marin Treselj [e-mail]
wrote:

@sunjam https://github.com/sunjam I suggest proposing a better icon for
those apps that you find hard to identify.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/nextcloud/server/issues/10952#issuecomment-426576868,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABtFZo3TDk7N6sb0O5gD-l0Daqs2SC54ks5uhIkkgaJpZM4WVo96
.

[jancborchardt]

The problem is that it creates a lot of permanent noise in the top bar.

Another thing I thought about is to show the names of _all_ apps, but only when hovering/focusing the header.

So normally it shows this:

And on hover/focus it animates to this (moving the icons slightly up and showing the text below):

(Just a quick mockup, we could adjust positioning, text size etc.)

What do you think @nextcloud/designers?

[sunjam]

I love having those names! Easy to read.

On Wed, Oct 3, 2018, 1:30 PM Jan-Christoph Borchardt <
[email protected]> wrote:

Reopened #10952 https://github.com/nextcloud/server/issues/10952.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/nextcloud/server/issues/10952#event-1882956262, or mute
the thread
https://github.com/notifications/unsubscribe-auth/ABtFZn0h_YUflkpfk1cGiHx_QgVJHAr7ks5uhR5kgaJpZM4WVo96
.

[juliushaertl]

@jancborchardt It looks pretty decent to me. The only thing I'm a bit concerned about is how it will look with longer app names like translated ones. We probably should not ellipsize the text here, since it will make it very hard to recognize an app name.

[skjnldsv]

@jancborchardt pretty good!
SHould we add this into one of our accessibility option?
Make this the default?

[pixelipo]

This will not have an effect on accessibility, since 1) contrast is too low and 2) it's only on hover.

I'm not a fan of adding too much text where icons fill appropriate the role, but I have to admit @jancborchardt screenshot looks nice :blush:

Edit: regarding @juliushaertl concern, it might be very painful for us. Do we limit how long an app title can be? Do we ellipsise long ones? What about translations?

[MorrisJobke]

Do we limit how long an app title can be? Do we ellipsise long ones? What about translations?

We don't do anything yet :/

[jancborchardt]

We have to ellipsize, otherwise the clickable area will also change size. We could have the currently hovered/focused icon text take precedence though and overlap the ones to the left and right.

If we do it, it should be default. Does not really have anything to do with accessibility (more with usability) and I'd like to keep accessibility settings low, instead doing as much as possible in core directly.

I will look into it, and also think it's a good thing to fix since it's the last remaining part where we are guilty of using Mystery Meat Navigation. :wink:

[skjnldsv]

@pixelipo ah, I did not realized this was on hover only!
I would be totally fine with this being like that by default :)

Let's scroll the text with marquee :grin:

[jancborchardt]

Pull request at https://github.com/nextcloud/server/pull/12153 – please review! :)

[ArchI3Chris]

Ok, so now we have labels. And now, is there an option to disable them? Personally I think, it's not that hard to get used to the icons after clicking them like 3 times. Even for new users. And if NextCloud needs one thing, it's getting lighter and not getting more bloated. In fact, I find it confusing. So, how do I turn this thing off?

[jancborchardt]

See design reasoning and discussion on why we introduced this at: https://github.com/nextcloud/server/pull/12153

And reasoning on why we don’t have an option to disable them at https://github.com/nextcloud/server/issues/12778 (Short version: We need to test and maintain every setting which takes up a lot of resources.)

Personally I think, it's not that hard to get used to the icons after clicking them like 3 times. Even for new users.

After seeing many confused users and issue reports, it was very clear that people don’t "get used to the icons". Icons without text always tend to be confusing, as people don’t use only that system all the time.

So, how do I turn this thing off?

Take out the code that was introduced in https://github.com/nextcloud/server/pull/12153

[ArchI3Chris]

Let me say this: So, people are intelligent enough to set the whole thing up, but are too stupid to understand the icons? Maybe your icons are not ideal. Interesting though is, that people are not intelligent enough to understand the icons, but now have to become developers to disable the text or develop whole themes? Interesting idea. So, how does that make sense? If you want, I can list a number of problems that have far more severe consequences. For a while I had troule creating files, uploading files, downloading files, being slow, there are always some errors, about theming, file integrity, now about php intl,... upgrading 2 versions despite the one in the middle not being in the repos is not possible. Guessing and hoping gets it back up, but with more errors than ever and barely anything working, missing apps, settings missing, opening files not possible, creating files not possible,... THOSE are far more severe problems than this one. So, your "preferences" are WAY off anyway. So are people who don't get the icons after looking at them like three times. Here is another thing to consider: did you know that ads with images sell WAY higher than ads with just text? Do you know why that is? Because IMAGES are easier to understand than text. In fact, the mind thinks in IMAGES, not in text. Images are part of nature and the mind can actually process them. Unlike text, which, just as language, is made up by people. Images performing better than text is a FACT in nature AND marketing. Just not in UX. For some reason, in UX text is easier to understand than images. It's against all nature and marketing laws. You might have a point in terms of resources. You don't have a point in UX though. Because proven FACT is, just because 5 people of thousands complain, this doesn't make a better UX. And if you don't believe me, just read ANYTHING on marketing and ads and you will ALWAYS find the hint to use images to improve your sales! Nobody says, cut the images and write more text! That's ridiculous! Just so you know, I'm about to just can the whole NextCloud thing. Know why? Because I repair more than I use it. It's slow. It's unusable. It doesn't solve problems. It creates them! You might be tempted to tell me, I should do that. Here is a question for you: if everybody cans it and moves on, why are you wasting your time developing it? I'm serious! I'm wasting FAR more time maintaining this thing, than using it. No kidding! And that's not worth it. I'm not a coder. YOU are.