@anonymous-piwik-user opened this Issue on November 26th 2009

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-piwik-user commented on November 26th 2009

Attachment: Preview
preview.png

@anonymous-piwik-user commented on November 26th 2009

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

@anonymous-piwik-user commented on November 26th 2009

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

@anonymous-piwik-user commented on November 26th 2009

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

@mattab commented on November 26th 2009 Owner

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

@robocoder commented on November 26th 2009 Contributor

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-piwik-user commented on November 26th 2009

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.

@mattab commented on November 26th 2009 Owner

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

@anonymous-piwik-user commented on November 29th 2009

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-piwik-user commented on December 7th 2009
@mattab commented on December 8th 2009 Owner

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-piwik-user commented on December 9th 2009

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 commented on December 9th 2009 Owner

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-piwik-user commented on December 9th 2009

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-piwik-user commented on December 9th 2009

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

@mattab commented on February 19th 2010 Owner

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-piwik-user commented on February 19th 2010

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 hello@piwik.org 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 commented on February 22nd 2010 Owner

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-piwik-user commented on February 22nd 2010

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

Best regards
Kay

@anonymous-piwik-user commented on February 22nd 2010

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 commented on February 24th 2010 Owner

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-piwik-user commented on February 25th 2010

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-piwik-user commented on March 4th 2010

do you have any feedback?

@mattab commented on March 5th 2010 Owner

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-piwik-user commented on March 5th 2010
  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-piwik-user commented on March 12th 2010

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 commented on March 30th 2010 Owner

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-piwik-user commented on July 7th 2010

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-piwik-user commented on July 7th 2010

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-piwik-user commented on July 7th 2010

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-piwik-user commented on July 7th 2010

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

@mattab commented on July 29th 2010 Owner

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

@mattab commented on January 5th 2015 Owner

see #6917

This Issue was closed on July 29th 2010
Powered by GitHub Issue Mirror