Positioning considerations & improvements

[jancborchardt]

Currently the menu is aligned with the right edge of the app-navigation. This is nice, but it also feels a bit in the air especially with short app names. And you need to move your eyes and mouse around a lot.

Additionally the app name is on the left, while the app icon is somewhere in that list of apps, it feels strange.

What do you think if we change it from this:

To this:

• remove app name
• move the app icons to the left
• reduce width of each element to 44px so it’s nicely square (and as you notice, 4 apps fit perfectly in the width of the app-navigation)

This would simplify everything and make the responsiveness of the design much easier. We could simply start to cut off apps and put them in a dropdown menu (like now) as the space decreases until on mobile only two or so apps show (similar to the twitter.com header on mobile).

cc @juliushaertl @MorrisJobke @eppfel @skjnldsv

[skjnldsv]

Wasn't this like that at first @juliushaertl ? It feels familiar :)

Anyway, I like them both. But since we have a more visible current app icon, your suggestion seems more adequate! I'm in!

[MorrisJobke]

What about putting the app name right beside the current app icon? And what happens if an app is opened, that is usually in the drop down? Where to indicate that this app is used?

[skjnldsv]

I like that!

[juliushaertl]

What about putting the app name right beside the current app icon?

This was the case in an early version, but I never liked it much, as the position of the app name was changing for every app. And also the app icon position was changing of course.

Wasn't this like that at first @juliushaertl ?

I think so if i remember correctly :wink: It was moved to the right, so we could show the current app name without having the above mentioned problems.

And what happens if an app is opened, that is usually in the drop down? Where to indicate that this app is used?

I would keep the position as it is, so we always have a textual description of what app we currently are in.

[jancborchardt]

What about putting the app name right beside the current app icon?

This was the case in an early version, but I never liked it much, as the position of the app name was changing for every app. And also the app icon position was changing of course.

Exactly. Spatial navigation is very important so if the position of the icons changes depending on which app you are in this will be very confusing.

Actually showing the app name isn’t that important, so I’d just go without it. What we maybe could do if we really want it is show it below the icon in small (which we could also use as the hover name-display), but that might look strange.

[jancborchardt]

And what happens if an app is opened, that is usually in the drop down? Where to indicate that this app is used?

Is it important to indicate it anywhere, except highlighting the »more« 3 dots icon in full opacity white? Maybe for that case showing the app name below the icon isn’t that bad, as then we can show it below the 3-dots-icon.

In any case, I think it’s an improvement over the current approach where things belonging together (app name and icon) are not together.

[jancborchardt]

What I also just thought about is that we could show the triangle below the icon as additional indicator. Like, the triangle which shows as part of the popover menu, it kind of points inside the app content.

Then it’s even easier to see which app you are currently in, and also we can display it below the 3-dot-icon when you are in an app which is otherwise hidden in the menu.

[skjnldsv]

I don't like the idea of using the trhee dot icon. It always indicate a menu on nextcloud, it will confuse the user. Why not use the triangle indeed. But it should be light imho.

[juliushaertl]

@skjnldsv I like the idea with the triangle indicator.

See https://github.com/nextcloud/server/pull/3008 for the discussed server PR.

[jancborchardt]

@skjnldsv @juliushaertl that’s what I said, putting a triangle below it. ;) Nicely implemented by @juliushaertl in nextcloud/server#3008 !

[blackcrack]

i have get a patch, must only merge :) it make it more fit for skinning and move it 170px in right direction to be not over the heading . now fits also with the 1070px wide with 14 icons. It makes also more and better skinable :) best regards Blacky

[juliushaertl]

Let's close this and focus on nextcloud/server#3008