Improve the design and usability of Menus

[mattab]

The goal of this issue is to redesign the way the menus work in Piwik, to improve the overall usability of Piwik and discoverability of features.

Current design

There are several issues with this design:

• In general it is confusing that the Reporting menu (in green) is horizontal.
  • Clicking on a sub-menu can be counter-intuitive
  • To better use wide screens all modern apps are using left menu.
• Admin settings link is hard to find Fixes #6765 Moved the 'Settings' menu in the top menu #6892
• User menu is hard to discover Make User menu (and Settings link) easier to discover #6765

Goals

• Make Piwik easier to use
  • we need a one click access to:
    • Dashboard
    • All Websites
    • Admin settings
  • we need a one or two-click access to:
    • Sign out
    • User settings
• The Reporting menu (green) to be displayed on the left. Example of what it currently looks like (from New setting: enable Left Menu mode #5212)

• Note that there are two contexts for the app menus:

1. Reporting Dashboard
2. Administration interface

• Note that it would be OK to use icons for Sign out, Administration, etc. (such as the Github top menu on this page)

Proposed steps

• Prepare design mockups
• Discuss mockups, iterate
• Implement design mockups in Piwik

[mattab]

I need to update issue description after @tsteur finished improving user & admin menus!

[tsteur]

User & Admin menu is done...

Can't wait to have a nice left menu!

[mattab]

I leave this issue opened and move it to 2.12.0 so we can wait to hear (hopefully) from users feedback after the menu structure was improved in #6937 and #6989 (Administration link + new user menu).

Proposed next steps:

• discuss whether we can make further changes to the menu structure for better usability
• design a Mockup that makes the Left Reporting menu look nice
• Use the "Left Menu" as default menu for new Piwik users Use the "Left Menu" as default menu for all Piwik users #7169

[tsteur]

Who would make the mockups? And yes, we should make the left menu default for new Piwik users and probably for all users. Hopefully we won't have to maintain two versions as the top menu does not bring many (or any) advantages.

[mattab]

Waiting for mockups from Rafal, maybe in couple weeks we will have an update.

[tassoman]

Menus are different also by screen reader rendering. Looks like could be useful using real html5 navigation tags

[mattab]

In order to close this issue we need to first close the following issues:

• New Piwik design when main menu is on the left New Piwik design when main menu is on the left #7589
• Use the "Left Menu" as default menu for new Piwik users Use the "Left Menu" as default menu for all Piwik users #7169
• It is hard to see which menu item is currently selected It is hard to see which menu item is currently selected #7093 (should be fixed automatically with the new design)

[mattab]

FYI I've updated about 28 FAQs and 11 User guides to change the instructions after we have changed how menus work. eg. renamed "Settings" -> "Administration" and few other similar changes so the FAQs and user guides are up to date with our new menu structure.

[mattab]

see follow ups to this issue in #6917 (comment)