Optimizing Menu Usability and save space for better integration in other apps

[anonymous-matomo-user]

Many users which evaluated piwik say "wow", but please change the menustructure. Especially the horinzontal menu confused many of my customers, we should use vertical menus (as they are standard on many systems).
An other problem in my opinion is that there is too much space used for logo and the message, that piwik needs help.
Please have a look on the prototype attached.
I talked to customers and the would find this change usefull.
Keywords: Menu

[anonymous-matomo-user]

Attachment: Preview
preview.png

[anonymous-matomo-user]

Attachment: ExtJS based prototype, needs to be converted to jQuery to work with piwik
menu.zip

[anonymous-matomo-user]

i added this as independet request, but said that before in #5597

[mattab]

Hey kaystrobach, can you please post a bigger screenshot? or even a URL with the demo if possible :) Thanks!

[robocoder]

Marking as a dupe of #1028.

The screenshot isn't clear but your proposal appears to also move the nav bar links into the menu, and at the same time, drop the breadcrumb feature in the current menu system. What happened to the site & language selectors?

[anonymous-matomo-user]

Please have a look into the menu.zip file, there is a complete extJS based prototype.
I will add a bigger screenshot, but i think the best is to download the zip and see it in action.

The language selector is a submenu of General.
I missed the site selector, because i use all my installations with EXT:piwinintegration for TYPO3 and idSite is set via TYPO3 ;).
But i think it could be an extra menu - like General which could be named sites.

[anonymous-matomo-user]

Attachment: Large preview as requested, but i think the prototype is better
preview_large.png

[mattab]

can you please post a public URL with the demo so we can have a look? thanks

[anonymous-matomo-user]

of course:
http://projects.kay-strobach.de/piwikMenuPrototype/

It's just a javascript prototype of the dashboard without any php. So you simply needed to extract the .zip archive. But please have a look on the above link.

Regards Kay

[anonymous-matomo-user]

here is a piwik, with an menu changing extension. the code is in #177

http://www.kay-strobach.de/typo3conf/piwik/piwik/index.php?module=CoreHome&action=index&idSite=1&period=day&date=yesterday#module=Dashboard&action=embeddedIndex&idSite=1&period=day&date=yesterday

[mattab]

This is interesting, but I think there's a big drawback: we lose the navigation feature that the current menu provides. The user needs to know, without clicking anywhere, which report > subreport he is currently looking at. I can think of two solutions

• have the menu on the left like many other tool
• have big breadbcrumb below the menu, eg. "Referers > Search Engines". Clicking on the Referers in the breadcrumb would open the first sub menu in the category, ie "Referers > Overview"

I like the compactness of this menu so I think it's worth trying the breadcrumb solution. thoughts?

[anonymous-matomo-user]

spelling

please do not put the menu to the left! I moved it to the top to make it easy to integrate piwik in other webapplikations like TYPO3 and be as slim as possible.

Possible Solutions:

1. Piwik is an Applikation not a classic webpage -> ignore
2. I think i can mark the selected menu like it was before (first level in Navigation). The second level is written as caption on the page. -> so it is fully ok. in my opinion

I've added highlighting of the last clicked element and it's parent to the prototype.

Best regards Kay

[mattab]

Kay, do you think you could try to add the breadcrumbs at the top too? I like the fact that the menu is highlighted but I'm curious how more usable it would be with the breadcrumbs. I would say they should be the size of the H2 title, and could read "Referers > Websites" with the referer being clickable to show the first submenu. Thoughts?

[anonymous-matomo-user]

being clickable to show the first submenu
-> this would cause to have a redundant menu? -> see updated prototype (please do not forget to clear the cache.)
http://www.kay-strobach.de/typo3conf/piwik/piwik/index.php

SVN to test on your local maschine:
http://forge.typo3.org/repositories/browse/extension-piwikintegration/trunk/piwik_patches/plugins

[anonymous-matomo-user]

the language selector is a bit scared in webkit browsers, i know this issue but it's ok in ie, opera and firefox.

[mattab]

kaystrobach, would you be able to provide a demo where only the new menu would be provided but all other elements (language selector, calendar, etc.) would be at the same position (in the top bar). This would help us decide on going forward with your code and keep one modification at a time.

One small bug report: when you click on the main menu Visitors, it should

• put the Visitors >> Overview submenu in bold
• the title should say Visitors > Overview (as it is the same page as if you click on Overview submenu)

Thanks

[anonymous-matomo-user]

hello matt,

my time is currently very limited. The code is commented very well (i think) and just modifies the standard html of piwik with some jQuery, please comment out the mod's you dislike to get an overview.

The Feedback from the users of the TYPO3 Extension EXT:piwikintegration is very positive on the complete menu change. (I've send a mail to [email protected] with a small description and the request of getting a consultant but got no answer ...)

Interesting JS File:
http://forge.typo3.org/repositories/browse/extension-piwikintegration/trunk/piwik_patches/plugins/TYPO3Menu/js

General SVN:
http://forge.typo3.org/repositories/browse/extension-piwikintegration/trunk/piwik_patches/plugins/

Best regards

Kay

[mattab]

kaystrobach, I understand your time is limited. When you have more time to submit a patch, please do so. In the meantime, I decrease priority of the ticket. Thanks! (Also, I have replied to your email, sorry for the delay)

[anonymous-matomo-user]

ok, just the menu - i will do that this evening.
i will send the rest via mail.

Best regards
Kay

[anonymous-matomo-user]

current state:
http://www.kay-strobach.de/typo3conf/piwik/piwik/index.php

Problem:
I assumed, that any toolbar needs to be in the topbars div, that's why i transformed the #topLeftBar div into a expandable menu in my first version.
The same problem comes up with the language selector, for usability reasons there should be only one type of menu, so one solution would be a language menu near the username.

[mattab]

kaystrobach, I meant: do you think you can provide a standard Piwik install with only the new menu in it? all the colors would be the std piwik colors, the top bar would be the same, etc. just the menu would be updated (below the Piwik logo).
This would help us see if we can just change the main menu with your proposal. Thanks!

[anonymous-matomo-user]

like that?
http://projects.kay-strobach.de/piwik/

How do you wanna get the code?

Problems: User can get confused where he is, a solution (other menu style) can be provided with a simple header:
http://www.kay-strobach.de/typo3conf/piwik/piwik/index.php

The Code is as comment in the following example:

$(document).ready(function(){
    //make menu working
        //unbind old menu
            $('ul.nav').addClass('horizontalmenu');
            $('ul.horizontalmenu').removeClass('nav');
            $('ul.horizontalmenu li').unbind('mouseenter');
            $('ul.horizontalmenu li').unbind('mouseleave');

        //open event
            $('ul.horizontalmenu li').bind('mouseenter',function(e) {
                pos = $(this).offset();
                $(this).children('ul').css('left'       ,pos['left'])
                $(this).children('ul').css('top'        ,pos['top']+$(this).height());
                $(this).children('ul').css('visibility' ,'visible');
                $(this).children('ul').slideDown(120);
            });
        //close event
            $('ul.horizontalmenu li').bind('mouseleave',function(e) {
                $(this).children('ul').slideUp(120);
            });
            $('ul.horizontalmenu li').bind('click',function(e) {
                $('ul.horizontalmenu li').removeClass('sfHover');
                $(this).addClass('sfHover');
                $('ul.horizontalmenu li:has(.sfHover)').addClass('sfHover');
                //modifyHeader();
            });
        //hide items
            $('ul.horizontalmenu li ul').hide();

    //remove now senseless elements
        $('#topRightBar a:first-child').width(80);
        $('.sf-sub-indicator').remove();
    //add header information
        //modifyHeader();
});

[anonymous-matomo-user]

do you have any feedback?

[mattab]

kaystrobach, I quite like the concept...

Here are a few bug reports

• when I hover Refers>Evolution the menu keeps toggling until I move the mouse again (using FF 3.5.8 on xp)
• when hover over another menu, the currently expanded menu should hide
• maybe it would look a bit better with curves or at least some sort of border between each item. also maybe using a different color for submenu would help? Or maybe something similar to digg.com (ie. hover shows a curved hover).
• I think that because we are not always showing the submenu (as opposed to the current menu), navigation is not as clear. When I clicked on Visitors>settings for example, it then loads the page... but how do I know that I am looking at Visitor> Settings? maybe you could put the title feature of your previous mockups in place, which would help finding out where we currently are.

what do others think of this new menu? Is it better than current menu?

[anonymous-matomo-user]

1. Thats a problem with Firefox 3.5, works in 3.6, seems to be a problem with the event handlers
2. works for me
3. http://projects.kay-strobach.de/piwik/
4. see my last post: Problems: User can get confused where he is, a solution (other menu style) can be provided with a simple header: http://www.kay-strobach.de/typo3conf/piwik/piwik/index.php
   Please tell me if that would solve the problem in your opinion, if yes i will add this

[anonymous-matomo-user]

after working a while on the concept, i found out that there is an entry on the jQuery Changelog, that they fixed quite a lot around the events, perhaps it's working with the new release.

@matt: do you have any replies to the last message

@matt: i added the h2 to represent the current menu state.

@matt: i dropped the slidedown effect and use show() and hide() to avoid the toogling, the other way would be to add a delay, but it's a concept ;)

http://projects.kay-strobach.de/piwik/

[mattab]

I don't think it helps with vertical space though... Also, we are probably going to work very soon on the re-design of the UI: see screenshots in #1154 and they show the same horizontal menu. I agree this is not ideal though, but I can't think of a good solution. What do you think about these mockups?

[anonymous-matomo-user]

Replying to matt:

I don't think it helps with vertical space though... Also, we are probably going to work very soon on the re-design of the UI: see screenshots in #1154 and they show the same horizontal menu. I agree this is not ideal though, but I can't think of a good solution. What do you think about these mockups?

I like the version of Kay very much, it would be great it his work could go into piwik! I think this is a very important point...

[anonymous-matomo-user]

Take a look on the following screens:
http://typo3.org/documentation/document-library/extension-manuals/piwikintegration/2.3.2/view/1/1/#id2513224

This is a part of EXT:piwikintegration for TYPO3.

With some changes Piwik can be really great.
The greatest part would be to change the UI lib to ExtJS.
Then we can have really sortable grids HTML Bars and can go away from the anoying buggy flash.

Best regards
Kay

[anonymous-matomo-user]

Replying to kaystrobach:

Take a look on the following screens:
http://typo3.org/documentation/document-library/extension-manuals/piwikintegration/2.3.2/view/1/1/#id2513224

Those patches are realy great, if you use this piwik version within a big projects and TYPO3 it just feels much better with those changes than stand-alone how it is in the official version.

[anonymous-matomo-user]

have you used it already -> i would like to get some detailed feedback

[mattab]

is this something we could do with regards to new design? If so please comment here with suggestion :-)

[mattab]

see #6917