Opened 4 years ago

Closed 15 months ago

Last modified 15 months ago

#1552 closed New feature (fixed)

Improve Admin menus (design, UX, submenus)

Reported by: vipsoft Owned by: halfdan
Priority: major Milestone: 1.11 - Piwik 1.11
Component: UI - UX (AngularJS, twig, less) Keywords:
Cc: Sensitive: no

Description

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)

Attachments (5)

AdminMenu.zip (381.7 KB) - added by halfdan 3 years ago.
Mockups for a possible new AdminMenu
1552_menu.patch (5.2 KB) - added by vipsoft 3 years ago.
Alternate patch to sort translated menu items
admin_menu1.diff (10.2 KB) - added by halfdan 15 months ago.
Admin menu patch 1
admin_menu1.2.diff (10.9 KB) - added by halfdan 15 months ago.
Admin menu patch 1
NewAdminMenu-with-gradient.png (131.5 KB) - added by halfdan 15 months ago.
New Admin Menu with Linear Gradient

Download all attachments as: .zip

Change History (43)

comment:1 Changed 4 years ago by vipsoft (robocoder)

  • Milestone set to Features requests - after Piwik 1.0
  • Type changed from Bug to New feature

comment:2 Changed 4 years ago by 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.

comment:3 Changed 4 years ago by vipsoft (robocoder)

  • Milestone changed from Features requests - after Piwik 1.0 to 5 - Piwik 1.1
  • Owner set to vipsoft

comment:4 Changed 4 years ago by vipsoft (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.

comment:5 Changed 4 years ago by kamermans

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.

comment:6 Changed 3 years ago by vipsoft (robocoder)

  • Milestone changed from 1.1 - Piwik 1.1 to 1.2 - Piwik 1.2

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

comment:7 Changed 3 years ago by 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.

Changed 3 years ago by halfdan

Mockups for a possible new AdminMenu

comment:8 Changed 3 years ago by matt (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.

comment:9 Changed 3 years ago by vipsoft (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.

comment:10 Changed 3 years ago by 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?

  1. 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).

comment:11 Changed 3 years ago by vipsoft (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.

comment:12 Changed 3 years ago by 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?

comment:13 Changed 3 years ago by vipsoft (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).

comment:14 Changed 3 years ago by 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).

comment:15 Changed 3 years ago by matt (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

comment:16 Changed 3 years ago by vipsoft (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', 'Kävijöiden 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.

Changed 3 years ago by vipsoft (robocoder)

Alternate patch to sort translated menu items

comment:18 Changed 3 years ago by matt (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.

comment:19 Changed 3 years ago by vipsoft (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).

comment:20 Changed 3 years ago by matt (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... ;)

comment:21 Changed 3 years ago by vipsoft (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).

comment:22 Changed 3 years ago by matt (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)

comment:23 Changed 3 years ago by vipsoft (robocoder)

  • Milestone changed from 1.6 Piwik 1.6 to 1.x - Piwik 1.x

comment:24 Changed 2 years ago by matt (mattab)

  • Component changed from Core to UI (templates, javascript)
  • Milestone changed from 1.x - Piwik 1.x to 1.8 Piwik 1.8
  • Summary changed from Admin submenus to Improve Admin menus (design, UX, submenus)

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.

comment:25 Changed 18 months ago by 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.

comment:26 Changed 18 months ago by matt (mattab)

  • Milestone changed from 1.10 Piwik 1.10 to 1.9.2 - Piwik 1.9.2

@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 :-)

comment:27 Changed 18 months ago by matt (mattab)

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

comment:28 Changed 18 months ago by matt (mattab)

  • Owner changed from vipsoft to halfdan

comment:29 Changed 16 months ago by matt (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.

comment:30 follow-up: Changed 15 months ago by 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.

Changed 15 months ago by halfdan

Admin menu patch 1

comment:31 Changed 15 months ago by 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.

Changed 15 months ago by halfdan

Admin menu patch 1

comment:32 Changed 15 months ago by 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.

Changed 15 months ago by halfdan

New Admin Menu with Linear Gradient

comment:33 Changed 15 months ago by 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)

Last edited 15 months ago by halfdan (previous) (diff)

comment:34 Changed 15 months ago by matt (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!

comment:35 in reply to: ↑ 30 Changed 15 months ago by matt (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

comment:36 Changed 15 months ago by halfdan

  • Resolution set to fixed
  • Status changed from new to closed

(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

comment:37 Changed 15 months ago by halfdan

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

refs #1552

comment:38 Changed 15 months ago by matt (mattab)

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

Note: See TracTickets for help on using tickets.