Improve Admin menus (design, UX, submenus)

[robocoder]

I'll be resuming work on the plugin repository after 1.0.

Currently, the admin menus are organized as tabs. For "Plugins", I propose to add submenus:

• Installed (the current screen to activate/deactivate plugins)
• Available (plugins available from the repository; not visible if no Piwik_Http::getTransportMethod())
• Updates (installed plugins/core with updates available for download; not visible if no new updates)

[halfdan]

This should be quite easy to add from the code point of view as AdminMenu extends the basic menu. I also suggest to redesign the Admin Menu from scratch as it gets very bloated if you have many plugins that add entries to the admin menu.

WordPress is doing this quite nice - but it wouldn't work that way because of our horizontal menu.

[robocoder]

Something like this?

• My Piwik
  • User Settings
  • Users
  • Websites
  • General Settings
• Plugins
  • Installed
  • Available
  • Updates
• Diagnostic
  • Database Usage
  • Security
  • Visitor Generator
• Community
  • Translations
• Other
  • ...

Another thing to consider is that a plugin may not want an entire settings screen of its own. We could:

• provide hooks for plugins to add content to an existing screen. For example, let's say the AnonymizeIP plugin makes the number of octets to mask configurable via the UI. It would hook into the General Settings screen.
• or create a dashboard for admin widgets.

[anonymous-matomo-user]

Last minute idea - I'm developing a plugin that won't work unless its settings are properly configured. Maybe there is a good way to send a user to the plugin's admin page when they attempt to activate it and only commit the activation if the plugin settings are configured successfully. A framework for this type of activity may be helpful for other plugins that require some settings to function properly. Many examples can be found in WordPress.

[robocoder]

The client-side JavaScript changes to reuse the Superfish menus (from CoreHome) are more involved than I thought. Deferring to 1.2.

[halfdan]

I created a mockup for a new admin menu. It follows vipsofts vertical structure and uses a accordion plugin for jQuery. The plugin collapses/expands menu entries when you click or mouseover them.

Why a vertical menu?
The vertical menu gives us a lot more space for menu entries. Especially when plugins use an own menu entry the old admin menu tends to look crowded.

Why not the Superfish menu?
The superfish menu has the same limits as the old admin menu. Once there are a certain number of plugins the submenu will overflow and have impact on the design (consider small screens with 1024x768, they are still very common especially on subnotebooks).

Please let me know what you think. I can give you access to a dev-installation running the mockups if needed.

[halfdan]

Attachment: Mockups for a possible new AdminMenu
AdminMenu.zip

[mattab]

I like it! Currently selected menu could be highlighted for clarity.

Also all menus could be expanded by default, since only the super user will see all the menu entries and he can deal with few more displayed menus.

[robocoder]

Sounds good. I haven't had a chance to look at the mockups but since you mentioned jquery accordion plugin, I should respond that there's an accordion included with jqueryUi.

[halfdan]

matt: Thanks, we could of course consider expanding all the menus. Afaic common usability guideline say that you shouldn't show menus with more than about 5 elements at once (can't find a good source right now though). We can discuss this later.

vipsoft: Cool, haven't seen that one before. I rewrote my mockup to use the accordion from jQuery UI. This introduced a weird margin bug in IE8 (and probably earlier versions) but it should be fixable.

1. What main categories of plugins are available by default?
   The ones listed by vipsoft sound quite good (Community, Diagnostic, Other), but where would Goal or Custom Alerts appear?
2. Current implementation of all menus let the hook-receiver decide the order in which a menu entry is placed. I suggest that for the listings of plugins we disable/ignore the ordering and order them by name (in their respective categories).

[robocoder]

We're a couple of versions behind on jquery and jqueryUI. Hopefully, an update will fix positioning problems. (But I'm waiting on jquery 1.4.5 as it's critical for the Live mem leak fix.)

re: 1. Are you proposing changes to the CoreHome menu too? AFAIK Goals and Custom Alerts wouldn't appear in the admin menu.

re: 2. I would prefer we rename "order" to "weight", and then sort by weight+name.

[halfdan]

re: 1. No! CoreHome menu is fine. You're right, Goals and Custom Alerts are unlikely to appear in the admin menu.

re: 2. Thats a good idea. Do you propose to sort by weight and name or weight or name?

Update to new jQuery + jQuery UI didn't fix the positioning issue. I'll see how I can fix this issue and post a alpha-version patch.

Any other ideas?

[robocoder]

weight and name. I'd probably also add want a method to (re-)define the menu items weights (i.e.,for theming).

Hmmm... maybe I was thinking about positioning changes in jquery ui 1.9. scratch head It's up to you whether or not to fix the margin bug.

No other ideas at the moment (assuming you cleared the tmp/assets and browser cache after the update).

[halfdan]

Positioning Issue is described in the jQuery bug tracker (http://bugs.jqueryui.com/ticket/5421), the Ticket is targeted for 1.9. There is a workaround in the ticket that works for me.

I'll provide a seperate patch for the weight in the menus in the next days (once 1.1 is stable).

[mattab]

• menu order: maybe I don't understand, but I think we could do like other menus, adding top entry level or sub menus with an order parameter, so each plugin does whatever they want.
• Goals & Custom alerts: these will be available outside of Admin area, like Goals/Email reports currently

[robocoder]

Ok, I'll leave menu order as is, however, there is a bug where menu items with the same order may change position, depending on the current selection. The only fix is to sort by order+name, using either the translation ID (e.g., 'VisitorGenerator_VisitorGenerator') or the translated string ('Visitor Generator', 'Besuchergenerato', 'Kvijiden luonti', etc). Any preference? (The first is simpler, but after translation, may not appear to be sorted.)

jquery UI margin bug should be fixed in the latest jquery-ui.js in svn.

halfdan: I don't mind starting from scratch, but if you have a patch (even alpha), feel free to upload.

[robocoder]

Attachment: Alternate patch to sort translated menu items
1552_menu.patch

[robocoder]

(In [4160]) refs #1552

[mattab]

Once we have this menu in place, it would be useful to access the "system check" performed during Installation, under the Menu "Diagnostic". A few times users had issues that the server config changed, was updated incorrectly, resulting in Piwik appearing broken without reason. If users could access the Diagnostic page, they would sometimes find the error themselves.

[robocoder]

I see both #1028 and #1048 are closed. I still want to get rid of Superfish. Can we use the vertical, accordion menu on CoreHome as well? The impact to the Dashboard layout is it would probably need to switch to two (wider) columns (vs the current three columns).

[mattab]

Are you proposing to change current horizontal menu to vertical for the reports view? I would say no at this stage, but open to discuss... ;)

[robocoder]

It would solve the "many goals" issue. I'll postpone changing CoreHome perhaps in conjunction with #1559 (which would be nice-to-have since GA recently implemented it).

[mattab]

To solve "too many goals" it would be easier to have the submenu span cleanly on multiple lines, I think it would look OK and that would be enough since this is a low occurrence issue. I don't think GA implemented #1559 ? (and imo it is not so useful)

[mattab]

It would be quite useful to finalize the Admin UI Piwik design and menu is a big part of it. Also there are quite a few tickets around new Admin features (SMS, System check page, View archive.php logs, etc.) so a better menu will be necessary.

[halfdan]

This ticket has been hanging around here for quite some time now. Are you still interested in the changes I've made (see the AdminMenu.zip). I still got that stuff on my disk.

[mattab]

@halfdan, definitely let's do it! Would you mind submitting your final patch, for the new admin menu, with a nice CSS that give fresh and consistent look to the Piwik admin UI ? If you notice the UI looks quite good, except for the ugly menu. We are glad you are fixing it :-)

[mattab]

This enhancement was also requested, as the menu looks bad in Russian: see #3457

[mattab]

Also I was thinking that each Admin Setting page will match to a Help page on the site, so we could add Help URL on piwik.org as a metadata in the menu and display a Help icon somewhere to link to this page.

[halfdan]

Update! Hooray!

Here's a quick snapshot of the revamped Admin Menus.

Changes:

• AdminMenu is now a vertical menu
• Items are subcategorized
• Piwik_AddAdminMenu defaults to the "Other" submenu
• Piwik_AddAdminSubMenu allows you to create or add items to new submenus

The menu doesn't have much styling right now - I am currently trying different approaches to colorize the items (e.g. a linear gradient of the Piwik Logo colorset).

Problems:

• Clicking on Geolocation/Privacy changes the order of the items regardless of their language (@vipsoft you provided a solution for translated items - not sure if it applies here)

Comments:

• @matt I like the idea of help pages, but I am not sure how to integrate them into the menu. I thought of tiny super scripted "[?]"-symbols, but adding them to each item doesn't look good.
• @vipsoft, I didn't add hooks to allow plugins to add content to another page and I am not sure if that is a good idea. A normal Piwik setup won't have that many plugins installed and I think we can safely just add them to the menu.
• I only added a single "Plugin > Installed" page under the Plugins menu since the PluginsManager plugin currently doesn't provide seperate pages. I however like the idea from @vipsoft to split them up into Installed, Available and Updates. This should be considered in a follow-up ticket.

Note: This is just a snapshot. Visual appearance will improve. Just wanted to give an update since the ticket has been hanging around forever.

Please provide feedback and I'll finish it up until tomorrow.

[halfdan]

Attachment: Admin menu patch 1
admin_menu1.diff

[halfdan]

Another Note: Previously I suggested to use the accordion plugin which I didn't use now. I think the accordion plugin won't improve the user experience and we should just display the expanded menu as it is.

[halfdan]

Attachment: Admin menu patch 1
admin_menu1.2.diff

[halfdan]

admin_menu1.2.diff makes the content part auto-expand to full width. I personally find this more consistent and visually appealing. Also added some styling similar to the main menu.

[halfdan]

Attachment: New Admin Menu with Linear Gradient
NewAdminMenu-with-gradient.png

[halfdan]

Added 5px linear gradient to the admin menu. I think it looks pretty awesome that way. I also locally splitted the Plugin listing into Installed (activated=true) and Available (activated=false).

Any comments? Suggestions?

(Ordering is still an issue)

[mattab]

Excellent! Feedback:

• agreed that accordion won't help, expanding all by default is better
• the gradient coloring looks interesting, ok for V1, but I suspect it might change
• Note: Such vertical menu, might later be reused to provide a vertical menu for Piwik, which many users have request over the years. For example we could have an alternative theme that would have a vertical menu.
• I would rename "My Piwik" -> "Manage". Move "websites" under "manage". Rename "Others" to "Settings". Move "General settings" under "Settings". Move "Plugins" category below "Settings" category.
• looks ready to commit!

[mattab]

• Clicking on Geolocation/Privacy changes the order of the items regardless of their language (@vipsoft you provided a solution for translated items - not sure if it applies here)

What is the problem exactly? it's important that items are always in consistent orders across languages.

• @matt I like the idea of help pages, but I am not sure how to integrate them into the menu. I thought of tiny super scripted "[?]"-symbols, but adding them to each item doesn't look good.

I dont think they should be in the menu. The help box:

• could be below the vertical menu,
• or could be moved to the right of the first H1/h2 title on the page

But we can do it in V2 (maybe you create a follow up ticket for this improvement)

• @vipsoft, I didn't add hooks to allow plugins to add content to another page and I am not sure if that is a good idea. A normal Piwik setup won't have that many plugins installed and I think we can safely just add them to the menu.

Sounds good! KISS

[halfdan]

(In [7815]) New admin menus, hooray!

New vertical admin menus are organized as follow:

• Predefined menus are Manage, Settings, Diagnostics, Plugins, Community
• New submenus can be defined via Piwik_AddAdminSubMenu()
• Piwik_AddAdminMenu defaults to "Settings"

fixed #1552

[halfdan]

(In [7816]) That wasn't supposed to be in there.

refs #1552

[mattab]

The design is excellent & clever: Well done! :)