App Navigation Redesign

[kra-mo]

Supersedes #53044

The current design for app navigation is unfamiliar to users coming from Microsoft's or Google's solutions. Customizations to get the interface closer to the tools people are switching from are popular. It is additionally laid out more like a view switcher, but Nextcloud is not a single page app, so the semantics are mixed.

App Menu

We want a menu, similar to competitors, positioned at the left side of the top bar:

• The top bar itself would be slightly shrunk to a height of ~40px, enough to accommodate an input field with some padding. Other elements (the logo and profile picture) would shrink slightly as a result to fit.

• Unified search would be placed at the center, as a bar with custom styling and wording like in the mockup. Assistant would be moved next to it.

  • The unified search dialog would receive some small adjustments. It would be vertically positioned directly at the top of the app container and be wider than the input field by 4x its border radius. We'd like to revisit this dialog – and unified search in general – and tweak it even further in the future.

• The people menu now has more space and could show the 3 most recently active people on the currently selected team, but this can be a follow-up.

• The icon for the app menu would be placed after the logo. The icon and name of the current app would be placed after. Clicking these would also pop up the app menu.

The menu itself would be laid out the following way:

• Its maximum width would be the sidebar width - 2x baseline.

• Its maximum height would be tall enough to accommodate 3 rows of apps before scrolling.

• It would be divided into two sections: apps and files. The bottom (files) section would be sticky, only the top section (apps) would scroll.

  • Each app icon would be placed within a colored circle. The circle would have a darkened bottom edge, a lightened top edge, a gradient background, and a shadow. The icons within the circle would also have a subtle shadow and have an opacity gradient foreground, the same as for the current navigation. Try to copy the look from the mockup, mixing colors from the existing variables and ensuring contrast.
  • Clicking on apps should open them in a new tab.
  • There is an additional "More apps" button which takes the user to the app store. Whether this should show up for admins only is unclear. We could try all users for the time being.
  • The metrics (size, letter spacing) of the labels should match those of the current navigation, but they should not become bold on hover, and they should wrap (center-aligned) instead of ellipsizing.
  • The files section would allow users to quickly create office documents and should work with all office integrations we have. I can provide assets for the file icons with the + badges, but we want to change the actual MIME type icons as well to match, it will need some coordination with office.
  • If there is no office suite installed on the instance, it can instead just show the first 3 items from the create menu.
  • Clicking on "All types" would open a menu containing only the "Create new" section of Files' "New" menu.

Dashboard

The dashboard should show the first 10 apps for discoverability and ergonomics, and an "All apps" button (even if all apps are visible, because the menu also includes file creation) which would just open the top-left app menu:

Clicking on apps on the Dashboard should open them on the same tab.

The metrics and appearance for all of this should more-or-less match those of the mockup, please ask questions and raise if something looks difficult to implement :)

@jancborchardt @AndyScherzinger @sorbaugh @karlitschek

[karlitschek]

I think this all looks very good. As mentioned earlier I would make the menu bigger to be able to show more apps. Modern Nextclouds have a lot apps enabled. In our case 24 apps. So to only show 8 apps is not enough. The rest is great.

[kra-mo]

The max height according to the spec would be 3 rows of apps, so 12 in total. It could be 6 or more rows, but I'm not sure how ergonomic that would be vs. scrolling considering the file types on the bottom. But it should be easy enough to tweak once implemented, so we could fine-tune it then if 12 is too little :)

[sorbaugh]

@artonge @pringelmann in the context of dividing this into subtasks:

• Step 1: Put all menu items (apps) in a waffle menu
• Step 2: Add the Search Bar in the middle (positioning)
• Step 3: Re-style the search-bar according to the mockups (look & feel)
• Step 4: Adding the file actions in the waffle menu (create Dokument/Spreadsheet, etc.)

If I understood correctly, estimation for all 3 points were about 3 weeks.

What would be the estimation for "Step 1" only? And for Step 2?

What do other apps need to do if we were talking about Step 1 only? And for Step 2?

cc @kra-mo @jancborchardt