move app navigation to top bar, much cleaner and more room for the app

[jancborchardt]

DO NOT MERGE THIS IN YET

Just a first draft of what moving the app navigation into the top bar might feel and work like. I think it’s a fundamental improvement over the current design because it

• combines the »global« stuff into one bar – it’s less important and shouldn’t take up so much space
• feels lighter because you don’t always have the 2 angle bars, only the top bar
• gives more room to app and content – very important because each app is a full-fledged program in itself. It should be given room.
• makes it much easier to distinguish what belongs to the app and what doesn’t – easier to focus on the work at hand.
• sensibly uses the space in the header
• also solves the strange color difference problem we had with the header and navigation ;)
• makes it easier for the apps to be displayed chromeless because there’s only top whitespace now

Try it out yourself! Or check out the screenshots. They are taken with my 12" 1280*800 Chromebook so you see it works very well even with smaller screens/resolutions, and lots of apps fit in there:

Files currently:

Files with the new design:

You see it allows much more room for the app itself. This is even more important as Files will/should also get a sidebar (#1936).

Now an example with an app which already has a sidebar. Currently that feels strange because there are 2 left hand navigation bars:

Now it’s much simpler:

Many apps already have this left-hand navigation (Contacts, News, Notes, Bookmarks, Tasks, Music, Mail) and we want to introduce it for some other apps too (Files, Calendar, …). We have default styles for that in core already which are used by Notes and News.

Funnily enough, even with the search bar and username there, the navigation overflows earlier with the left bar than it does with the new design. In case of overflow there will not be a horizontal scrollbar (hope you didn’t think I planned that ;) but rather a »more« entry with a dot-dot-dot icon which then opens a popover showing the remaining apps. This is similar to what Google+ does, or the Android top bar. Although, it’s very unlikely to overflow at all as you see from the above screenshots.

@karlitschek hope that sufficiently explains why I think it’s a necessary change, not just an opinion or redesigning for the sake of it. ;)

@MTRichards @Raydiation @raghunayyar @butonic: What do you think?

Check this out BUT PLEASE DO NOT MERGE IT IN YET!

[jancborchardt]

Oh and before someone suggests removing the app names, or only showing them on hover: Please check out Mystery Meat Navigation ;)

[jancborchardt]

Oh and yes, this breaks some apps which have some hardcoded left-space stuff in there (baad bad ;) – will of course be fixed. Works perfectly with every app which uses the new app styles from core though.

[jancborchardt]

Also @Raydiation @zimba12 the reason why the News app is not installed in the screenshots is because IT DID NOT WORK. No errors or so, will dig into it later. Sorry :) wanted to screenshot that instead of Notes.

[cosenal]

@jancborchardt: booooh, install the News app right now!!

I love the new layout! much better ;-) what happens when one installs too many apps? Also, I have always been confused by something: what's the order in which the apps are shown?

[cosenal]

one more thing Mister Mystery Meat: how about the possibility of hiding the navigation bar? /me hides

[jancborchardt]

@zimba12 read the whole post ;) »In case of overflow there will not be a horizontal scrollbar (hope you didn’t think I planned that ;) but rather a »more« entry with a dot-dot-dot icon which then opens a popover showing the remaining apps. This is similar to what Google+ does, or the Android top bar. Although, it’s very unlikely to overflow at all as you see from the above screenshots.«
Regarding order: yes, currently the app can set that, which is very very wrong (some order value in app.php or so). I’ll check that out as part of this too.
About hiding the navigation bar: Not as a core thing for now. Maybe the bar will be a bit lighter in the future, but no modes. If you want to hide it, install http://apps.owncloud.com/content/show.php/FluXX+Compensator+%28Y%29?content=157091

[cosenal]

@jancborchardt oh, sorry, I had missed that part. dot-dot-dot icon is a good idea!

[blizzz]

In case of overflow there will not be a horizontal scrollbar (hope you didn’t think I planned that ;) but rather a »more« entry with a dot-dot-dot icon which then opens a popover showing the remaining apps. This is similar to what Google+ does, or the Android top bar. Although, it’s very unlikely to overflow at all as you see from the above screenshots.

Which apps will then be shown and which hidden? Current order? Or personalized according to usage?

[blizzz]

Oh, forgot to say that I like the idea :) Looks great!

[Niduroki]

This obviously needs some testing, porting of apps, etc.

But once that's done this could be pretty nice.

[butonic]

really nice work. definitely the way to go.

[MorrisJobke]

Great decision! :)

[jancborchardt]

@blizzz

Which apps will then be shown and which hidden? Current order? Or personalized according to usage?

Good question. For now it will simply be the current order, and if there are too many then the last ones will be »hidden«.

I thought about personalized sorting according to usage in the past, but have come to the conclusion that this is somewhat overkill, and confusing if the apps change places. (Spatial memory and muscle memory is very strong.)

The current order is a problem (as mentioned above) especially because currently apps can define sort order themselves. We should to remove that option and dictate an order, according to what we deem essential, and also based on if the app is finished / usable. Proposal: Files, Pictures, Notes, Calendar, Contacts, Music, Bookmarks, News, Tasks, (Mail), …
Just an idea, and this order might change in the future, especially when Mail matures more.

[blizzz]

Or let the User change the order of apps. E.g. by drag-and-dropping them into place.

[MorrisJobke]

@blizzz 👍

[MorrisJobke]

@jancborchardt Long app names should get more space ;)

[raghunayyar]

@jancborchardt this looks really good, but won't it be a pain when you start implementing mobile layouts. I know its an entirely different issue, but the transition from navigation on the top to anything else will be a big change, on lower resolutions. I hope you have thought about that already. :)

[Niduroki]

what @raghunayyar says …

[MorrisJobke]

@jancborchardt and what about display the old owncloud logo until there is no space and then change the logo to the "minified" one?

[karlitschek]

I don't like this idea. I makes the header very crowded. and basically unusable if your have more 3rd party apps installed and a small screen. I think the classic sidenavigation is better and easer to understand for users. See Facebook and Google plus as examples. 👎

[tanghus]

@blizzz wrt d'n'd sort order 👍

[DeepDiver1975]

this is definitely an interesting approach - especially if you use apps which already have a left and right content area (like media, contacts, mail, notes)

Why do we need to decide on one of them?
Let the users choose.

[LukasReschke]

I actually like this approach very much and this is very similar how the navigation works in most of the Google Applications. @karlitschek

[kiranos]

I would rather want this new layout, like it alot and absolutely better when apps has a bar to the left of their own.

[dragotin]

I like the new approach 👍 . It makes the UI more clear and resolves the strange UI if the app comes with a side bar as well, as shown in a screenshot.

For small screens, take away the search box (rarely used anyway) and replace it by a icon, when clicking on it, open the entry field below in a balloon, for example.

[DeepDiver1975]

@jancborchardt rebase!

[kiranos]

no need to remove search just do as @LukasReschke showed that google does with a more dropdown if it goes to far to the left.

[blizzz]

Also for smaller screens, the apps could be made scrollable by swiping. Google does it on their mobile search page for search options, for example. Search as a Icon would make sense there as well.

[jancborchardt]

If I didn’t make it clear enough in the original post: THIS IS JUST EXPERIMENTAL, to try out how it will look and feel like. I did it in about 10 minutes simply moving some HTML and changing some CSS. It is neither tested nor optimized on mobile yet, but of course would be. And yes, the top bar grew a bit taller, but that’s easily changeable.

Addressing the concerns:

Top bar too crowded:
First off, from what metric? From the current top bar, which is just an empty blue pane? Yes, that’s true. But currently the left side is crowded, which also is a big problem (see arguments in original post).
2 improvements:

• hard limit of 7 apps displayed in the top bar, rest gets hidden behind the »more« button
• show app title only on hover (yes, after all …, we can always adjust)

Doesn’t work on mobile:
Of course this draft doesn’t work yet on mobile, it’s just a very early example. But look at the current ownCloud master on mobile – doesn’t fare any better.
I thought about making it work on mobile though, and this design change is an important base for that. The »hide additional apps behind "more"« scales down to even having only the ownCloud logo, and showing the apps popup when you click the logo.
Then, the search bar can also be narrower, and the name will be replaced by a to-come profile image (like the icons, and use a »user« icon as fallback when there’s no image) and the name is not needed anymore.
That leaves in the top bar: Logo, search button, menu button. Does work very well on mobile.
Then the content area is app-navigation and app-content, very easy to switch between. For an example how that can work, check out http://litewrite.net on mobile – just a simple menu button which moves the app-navigation in.

Google+ does the left bar:
Yes, but Google+ is just one part of Google. Google has a top bar, with Plus, Search, Images, Maps, Play, YouTube, Gmail, Drive, Calendar, … sounds similar to the app platform we develop? Also see what @LukasReschke said.

Facebook has the left bar:
True, and so has Unity (Ubuntu).

And while we are at comparisons:

• OS X does this too, albeit on the bottom rather than top, with the Dock.
• Twitter also has a top bar navigation. And then specific to that part a left-side list.

The problem is that we have two permanent bars. I can/will play around with putting all in the left bar, but I think the fundamental issue here is that two bars just make everything look crowded.

[Niduroki]

Throwing more stuff in:

Re: Userimage instead of username:
Where to click then for personal settings, admin, etc.?

Re: Bar at the top:
Also consider that many displays today have 16:9 or 8:5 resolutions, thus going on the width with a menu gives more available space, than going on the height – 1,6 or 1,7 times more – considering the search bar and the logo taking space we, in theory, have at least the same space on desktops.
In practice (1680x1050 resolution, Chromium without bookmark-bar → 990px height):

Re: Mobile desgins:
That should be another topic/design/theme to be honest …
A responsive design would be best there. If the phone is hold horizontally the top bar might work, but vertically we need another design.

[bartv2]

@jancborchardt can we close this PR? the experiment looks like a success 🌅

[jancborchardt]

Closing this experiment. Top bar is not necessarily good especially because monitor space is getting wider, not higher.

The original problem that we have 2 global bars still stands – it’s a lot of chrome which is largely useless when you are inside an app. Will think about better solutions.