New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

New Piwik design when main menu is on the left #7589

Closed
mattab opened this Issue Mar 31, 2015 · 42 comments

Comments

Projects
None yet
@mattab
Member

mattab commented Mar 31, 2015

The goal of this issue is to propose and discuss a new design for Piwik when the main reporting menu is on the left of the screen.

Overall we've been working on making all menus in Piwik easy to use and find out what you're looking for (see discussion and issues linked in #6917). Putting the main menu to the left will be an important improvement, and we want to set it as default for all users (#7169).

Current left menu design

piwik org demo2 - web analytics reports

There are some issues like the margins are not right and the Calendar / Website Selector / Segment selector seem to be being randomly put there.

Proposed left menu design

The goal is to make Piwik design shine and find the alchemy to display the following UI elements: left menu + top menu + Selectors (website, segment, calendar)

Coming soon!

@Globulopolis

This comment has been minimized.

Show comment
Hide comment
@Globulopolis

Globulopolis Apr 13, 2015

Contributor

Looks good, but... It's very good idea to add an icon in this menu for Hide/Show menu. And I think we must improve this for mobile. So for users from mobile devices menu should be hidden by default.

Something like this(from Joomla):
untitled-1
untitled-2

Contributor

Globulopolis commented Apr 13, 2015

Looks good, but... It's very good idea to add an icon in this menu for Hide/Show menu. And I think we must improve this for mobile. So for users from mobile devices menu should be hidden by default.

Something like this(from Joomla):
untitled-1
untitled-2

@mattab

This comment has been minimized.

Show comment
Hide comment
@mattab

mattab Apr 17, 2015

Member

Here is note about Q/A:

  • test to create a custom dashboard with name <img src=1 onerror=alert(document.domain)> -> check that the left menu is not too wide and the text is wrapped as expected
Member

mattab commented Apr 17, 2015

Here is note about Q/A:

  • test to create a custom dashboard with name <img src=1 onerror=alert(document.domain)> -> check that the left menu is not too wide and the text is wrapped as expected
@mattab

This comment has been minimized.

Show comment
Hide comment
@mattab

mattab Apr 24, 2015

Member

Here are four version of the proposed left menu designs:

Version 1

left

Version 2

left1

Version 3

left2

Version 4

left3

Summary

which one do you prefer?

Do you maybe have any other suggestion?

Member

mattab commented Apr 24, 2015

Here are four version of the proposed left menu designs:

Version 1

left

Version 2

left1

Version 3

left2

Version 4

left3

Summary

which one do you prefer?

Do you maybe have any other suggestion?

@mnapoli

This comment has been minimized.

Show comment
Hide comment
@mnapoli

mnapoli Apr 24, 2015

Contributor

They are nice, version 1 is my favorite.

Contributor

mnapoli commented Apr 24, 2015

They are nice, version 1 is my favorite.

@RMastop

This comment has been minimized.

Show comment
Hide comment
@RMastop

RMastop Apr 24, 2015

Contributor

+1 for version 1

Contributor

RMastop commented Apr 24, 2015

+1 for version 1

@quba

This comment has been minimized.

Show comment
Hide comment
@quba

quba Apr 27, 2015

Contributor

version 1

Contributor

quba commented Apr 27, 2015

version 1

@mattab mattab modified the milestones: 2.15.0, 2.14.0 Jun 9, 2015

@mattab

This comment has been minimized.

Show comment
Hide comment
@mattab

mattab Jun 9, 2015

Member

fyi: moved to 2.15.0 milestone

Member

mattab commented Jun 9, 2015

fyi: moved to 2.15.0 milestone

@mattab

This comment has been minimized.

Show comment
Hide comment
@mattab

mattab Jun 9, 2015

Member

Note: requirement: for accessibility purpose, contrast between foreground and background colors should be high enough. (from #7093)

Member

mattab commented Jun 9, 2015

Note: requirement: for accessibility purpose, contrast between foreground and background colors should be high enough. (from #7093)

@tassoman

This comment has been minimized.

Show comment
Hide comment
@tassoman

tassoman Jun 9, 2015

Contributor

Version 1 👍

Version 3 header looks cool. My ideal version would be a v.1 with header from v.3

Contributor

tassoman commented Jun 9, 2015

Version 1 👍

Version 3 header looks cool. My ideal version would be a v.1 with header from v.3

@tsteur

This comment has been minimized.

Show comment
Hide comment
@tsteur

tsteur Jun 23, 2015

Member

Once we have the left menu we should remove ZenMode I think. The left menu would be ideally "collapsible" / "minimizable" meaning it would maybe take only a width of 40px instead of 260px by showing only little icons or little letters.

Member

tsteur commented Jun 23, 2015

Once we have the left menu we should remove ZenMode I think. The left menu would be ideally "collapsible" / "minimizable" meaning it would maybe take only a width of 40px instead of 260px by showing only little icons or little letters.

@mattab

This comment has been minimized.

Show comment
Hide comment
@mattab

mattab Sep 9, 2015

Member

Tentatively moving to 2.15.0 as it would be awesome++ to have left menu in our LTS version 💯

Member

mattab commented Sep 9, 2015

Tentatively moving to 2.15.0 as it would be awesome++ to have left menu in our LTS version 💯

@Glisse1

This comment has been minimized.

Show comment
Hide comment
@Glisse1

Glisse1 Oct 7, 2015

design no2 is "sexier" but i also consider it needs a more obvious background for current selection

Glisse1 commented Oct 7, 2015

design no2 is "sexier" but i also consider it needs a more obvious background for current selection

@tsteur tsteur referenced this issue Oct 7, 2015

Merged

Left menu #8936

@tsteur tsteur self-assigned this Oct 7, 2015

@mattab mattab closed this in #8936 Oct 7, 2015

@mattab

This comment has been minimized.

Show comment
Hide comment
@mattab

mattab Oct 7, 2015

Member

Everyone, the left menu is available in latest Piwik beta 16 ❤️

if you have any comment Re: accessibility or other feedback, please post here or create a new issue.

Member

mattab commented Oct 7, 2015

Everyone, the left menu is available in latest Piwik beta 16 ❤️

if you have any comment Re: accessibility or other feedback, please post here or create a new issue.

@gaumondp

This comment has been minimized.

Show comment
Hide comment
@gaumondp

gaumondp Oct 8, 2015

Just wanna add that Piwik Demo has it already (2.15.0-b16) for you to try...

http://demo.piwik.org/

gaumondp commented Oct 8, 2015

Just wanna add that Piwik Demo has it already (2.15.0-b16) for you to try...

http://demo.piwik.org/

@tassoman

This comment has been minimized.

Show comment
Hide comment
@tassoman

tassoman Oct 23, 2015

Contributor

Mr @jdeyla and I we did already an a11y report on menu in the past. Does anyone gave an eye on it?

It's a wiki page https://github.com/piwik/piwik/wiki/Piwik-Accessibility-Analysis#menu

Contributor

tassoman commented Oct 23, 2015

Mr @jdeyla and I we did already an a11y report on menu in the past. Does anyone gave an eye on it?

It's a wiki page https://github.com/piwik/piwik/wiki/Piwik-Accessibility-Analysis#menu

@tassoman

This comment has been minimized.

Show comment
Hide comment
@tassoman

tassoman Nov 2, 2015

Contributor

I've updated the a11y analisys wiki page removing already fixed paragraphs. There still some mess in the areas still mentioned in the document.

Talking about the left side menu, the main problems are:

  • menu is not focusable browsing by keyboard
  • menu should be WAI-ARIA

I'm trying to figure out how to help by a pull request, I'll keep you informed.

Contributor

tassoman commented Nov 2, 2015

I've updated the a11y analisys wiki page removing already fixed paragraphs. There still some mess in the areas still mentioned in the document.

Talking about the left side menu, the main problems are:

  • menu is not focusable browsing by keyboard
  • menu should be WAI-ARIA

I'm trying to figure out how to help by a pull request, I'll keep you informed.

@mattab

This comment has been minimized.

Show comment
Hide comment
@mattab

mattab Nov 2, 2015

Member

I'm trying to figure out how to help by a pull request, I'll keep you informed.

Let's continue discussion in:

Member

mattab commented Nov 2, 2015

I'm trying to figure out how to help by a pull request, I'll keep you informed.

Let's continue discussion in:

@Amenel

This comment has been minimized.

Show comment
Hide comment
@Amenel

Amenel Nov 23, 2015

I've updated to 2.15.0 and I'm wondering what became of two valid (in my eyes) suggestions made by @jdeyla about the highlighting color and @Globulopolis about the "Hide sidebar" icon. I haven't seen any of the two points in the links posted by @mattab to issues #9148 and #4167.

The current design does not stand the comparison to the mock-up by @jdeyla in terms of clarity. Nor does it remind of the 4 designs initially suggested: the markers of currently selected items are no longer there in 2.15.0...

As to the hide sidebar feature, it makes total sense for some users like me who only use the dashboard entry of the menu: in 3 years, I've never needed any of the now top-level entries other than Dashboard... Such rare use cases are out there.

I'm not disabled in any way but I still think both suggestions were valuable. Are they implicitly dismissed? Or were they taken into account some place that I didn't find?

Amenel commented Nov 23, 2015

I've updated to 2.15.0 and I'm wondering what became of two valid (in my eyes) suggestions made by @jdeyla about the highlighting color and @Globulopolis about the "Hide sidebar" icon. I haven't seen any of the two points in the links posted by @mattab to issues #9148 and #4167.

The current design does not stand the comparison to the mock-up by @jdeyla in terms of clarity. Nor does it remind of the 4 designs initially suggested: the markers of currently selected items are no longer there in 2.15.0...

As to the hide sidebar feature, it makes total sense for some users like me who only use the dashboard entry of the menu: in 3 years, I've never needed any of the now top-level entries other than Dashboard... Such rare use cases are out there.

I'm not disabled in any way but I still think both suggestions were valuable. Are they implicitly dismissed? Or were they taken into account some place that I didn't find?

@tsteur

This comment has been minimized.

Show comment
Hide comment
@tsteur

tsteur Nov 23, 2015

Member

We'll implement a toggle for the left menu at some point. Right now some other features and fixes just have a bit of a higher priority. Issue for toggle of left menu is here: #9263

Optimizing Piwik for mobile and making it more responsive is not really one of our priorities currently as we have a Piwik Mobile 2 app for Android and iOS. This might change though over time and we will probably always do some tweaks over time.

Member

tsteur commented Nov 23, 2015

We'll implement a toggle for the left menu at some point. Right now some other features and fixes just have a bit of a higher priority. Issue for toggle of left menu is here: #9263

Optimizing Piwik for mobile and making it more responsive is not really one of our priorities currently as we have a Piwik Mobile 2 app for Android and iOS. This might change though over time and we will probably always do some tweaks over time.

@Forsskieken

This comment has been minimized.

Show comment
Hide comment
@Forsskieken

Forsskieken Feb 3, 2016

Hi There,

When I implemented custom dimensions I needed to upgrade the piwik which I did.
On Internet explorer 11 the Left menu is now alone on the top and hides for example the date or period.

Yesterday I did a new install of the 2.16.rc2 and noticed the same behaviour.

I have no problem on firefox or chrome

https://drive.google.com/file/d/0B74nSQnUFHPDN3FYMHI3anBKSUE/view?usp=sharing

Forsskieken commented Feb 3, 2016

Hi There,

When I implemented custom dimensions I needed to upgrade the piwik which I did.
On Internet explorer 11 the Left menu is now alone on the top and hides for example the date or period.

Yesterday I did a new install of the 2.16.rc2 and noticed the same behaviour.

I have no problem on firefox or chrome

https://drive.google.com/file/d/0B74nSQnUFHPDN3FYMHI3anBKSUE/view?usp=sharing

@tsteur

This comment has been minimized.

Show comment
Hide comment
@tsteur

tsteur Feb 3, 2016

Member

We'll have a look, thx

Member

tsteur commented Feb 3, 2016

We'll have a look, thx

@tsteur

This comment has been minimized.

Show comment
Hide comment
@tsteur

tsteur Feb 3, 2016

Member

I just tested on IE11 and MS Edge with http://demo.piwik.org and it seems to work fine. Can you open the demo Piwik with your browser and see if it happens there as well?

If it works on demo, maybe try to clear your cache in tmp/assets/*, make sure no adblocker or similar extensions are active, and make sure HTML files can be served by your webserver

Member

tsteur commented Feb 3, 2016

I just tested on IE11 and MS Edge with http://demo.piwik.org and it seems to work fine. Can you open the demo Piwik with your browser and see if it happens there as well?

If it works on demo, maybe try to clear your cache in tmp/assets/*, make sure no adblocker or similar extensions are active, and make sure HTML files can be served by your webserver

@Forsskieken

This comment has been minimized.

Show comment
Hide comment
@Forsskieken

Forsskieken Feb 9, 2016

Hi There,

Before coming back to you I tested several things..
I noticed that indeed the piwik.org is fine
mine http://dgcmdc004 is not

I'm running this on a Windows server 2008 with IIS

I did as advised..
Then I noticed a 2.16 release and installed that one, only the
config.ini.php file was used from before..
When I do a new install I always have a small error complaining the /tmp
directory isn't writable..
and a http://dgcmdc004/plugins/Morpheus/images/logo.svg Failed to load
resource: the server responded with a status of 404 (Not Found)
I checked however on the server and the logo is there ?

can you please explain me what I'm doing wrong

Kind regards
Guy Forssman

2016-02-03 21:53 GMT+01:00 Thomas Steur notifications@github.com:

I just tested on IE11 and MS Edge with http://demo.piwik.org and it seems
to work fine. Can you open the demo Piwik with your browser and see if it
happens there as well?

If it works on demo, maybe try to clear your cache in tmp/assets/*, make
sure no adblocker or similar extensions are active, and make sure HTML
files can be served by your webserver


Reply to this email directly or view it on GitHub
#7589 (comment).

Forsskieken commented Feb 9, 2016

Hi There,

Before coming back to you I tested several things..
I noticed that indeed the piwik.org is fine
mine http://dgcmdc004 is not

I'm running this on a Windows server 2008 with IIS

I did as advised..
Then I noticed a 2.16 release and installed that one, only the
config.ini.php file was used from before..
When I do a new install I always have a small error complaining the /tmp
directory isn't writable..
and a http://dgcmdc004/plugins/Morpheus/images/logo.svg Failed to load
resource: the server responded with a status of 404 (Not Found)
I checked however on the server and the logo is there ?

can you please explain me what I'm doing wrong

Kind regards
Guy Forssman

2016-02-03 21:53 GMT+01:00 Thomas Steur notifications@github.com:

I just tested on IE11 and MS Edge with http://demo.piwik.org and it seems
to work fine. Can you open the demo Piwik with your browser and see if it
happens there as well?

If it works on demo, maybe try to clear your cache in tmp/assets/*, make
sure no adblocker or similar extensions are active, and make sure HTML
files can be served by your webserver


Reply to this email directly or view it on GitHub
#7589 (comment).

@tsteur

This comment has been minimized.

Show comment
Hide comment
@tsteur

tsteur Feb 10, 2016

Member

Make sure that the tmp directory is writable. Re failing logo do you mind asking in our Forums http://forum.piwik.org/ where someone can maybe help? It looks like a not correctly configured server maybe and we can do much here.

Member

tsteur commented Feb 10, 2016

Make sure that the tmp directory is writable. Re failing logo do you mind asking in our Forums http://forum.piwik.org/ where someone can maybe help? It looks like a not correctly configured server maybe and we can do much here.

@Forsskieken

This comment has been minimized.

Show comment
Hide comment
@Forsskieken

Forsskieken Feb 16, 2016

Hi There,

I found the error..
It seems piwik serves the pages as

I had to change it to

Kind Regards Guy Forssman

2016-02-10 8:40 GMT+01:00 Thomas Steur notifications@github.com:

Make sure that the tmp directory is writable. Re failing logo do you mind
asking in our Forums http://forum.piwik.org/ where someone can maybe
help? It looks like a not correctly configured server maybe and we can do
much here.


Reply to this email directly or view it on GitHub
#7589 (comment).

Forsskieken commented Feb 16, 2016

Hi There,

I found the error..
It seems piwik serves the pages as

I had to change it to

Kind Regards Guy Forssman

2016-02-10 8:40 GMT+01:00 Thomas Steur notifications@github.com:

Make sure that the tmp directory is writable. Re failing logo do you mind
asking in our Forums http://forum.piwik.org/ where someone can maybe
help? It looks like a not correctly configured server maybe and we can do
much here.


Reply to this email directly or view it on GitHub
#7589 (comment).

@tsteur

This comment has been minimized.

Show comment
Hide comment
@tsteur

tsteur Feb 16, 2016

Member

I couldn't reproduce it with edge, or IE 11. Is someone else experiencing this issue as well?

Member

tsteur commented Feb 16, 2016

I couldn't reproduce it with edge, or IE 11. Is someone else experiencing this issue as well?

@tassoman

This comment has been minimized.

Show comment
Hide comment
@tassoman

tassoman Feb 16, 2016

Contributor

http://dgcmdc004 looks like an intranet link, so I suppose that IE is using "compatibility mode" for all the websites inside the intranet network.

I solved that oddity avoiding IE browsers connected inside my custom authentication plugin. I'm using DeviceDetector to exclude IEs before 11.0 version. 😉

As far I can remember I talked about it when we discussed on IE8 support abandoning: #4620

Contributor

tassoman commented Feb 16, 2016

http://dgcmdc004 looks like an intranet link, so I suppose that IE is using "compatibility mode" for all the websites inside the intranet network.

I solved that oddity avoiding IE browsers connected inside my custom authentication plugin. I'm using DeviceDetector to exclude IEs before 11.0 version. 😉

As far I can remember I talked about it when we discussed on IE8 support abandoning: #4620

@Forsskieken

This comment has been minimized.

Show comment
Hide comment
@Forsskieken

Forsskieken Feb 16, 2016

It is indeed a intranet site...
The policy here is that every browser is IE11 only a few people have access
to chrome..

It's when I played with the document mode settings and lowered to IE8 that
the site menu whent to the left..I then noticed in the source view that
even when we use IE11..The page's show's a

It shows a small [object] [object] error window ...which is related to the
Dashboard section as pushing that button/tab isn't working. everything is
in 1 column.

I would like to hunt this down but have no clue where to begin..

The 2008 R2 server uses IIS 7.5

Kind Regards
Guy Forssman

2016-02-16 17:26 GMT+01:00 Tassoman notifications@github.com:

http://dgcmdc004 looks like an intranet link, so I suppose that IE is
using "compatibility mode" for all the websites inside the intranet network.

I solved that oddity avoiding IE browsers connected inside my custom
authentication plugin. I'm using DeviceDetector to exclude IEs before 11.0
version. [image: 😉]

As far I can remember I talked about it when we discussed on IE8 support
abandoning: #4620 #4620


Reply to this email directly or view it on GitHub
#7589 (comment).

Forsskieken commented Feb 16, 2016

It is indeed a intranet site...
The policy here is that every browser is IE11 only a few people have access
to chrome..

It's when I played with the document mode settings and lowered to IE8 that
the site menu whent to the left..I then noticed in the source view that
even when we use IE11..The page's show's a

It shows a small [object] [object] error window ...which is related to the
Dashboard section as pushing that button/tab isn't working. everything is
in 1 column.

I would like to hunt this down but have no clue where to begin..

The 2008 R2 server uses IIS 7.5

Kind Regards
Guy Forssman

2016-02-16 17:26 GMT+01:00 Tassoman notifications@github.com:

http://dgcmdc004 looks like an intranet link, so I suppose that IE is
using "compatibility mode" for all the websites inside the intranet network.

I solved that oddity avoiding IE browsers connected inside my custom
authentication plugin. I'm using DeviceDetector to exclude IEs before 11.0
version. [image: 😉]

As far I can remember I talked about it when we discussed on IE8 support
abandoning: #4620 #4620


Reply to this email directly or view it on GitHub
#7589 (comment).

@tsteur

This comment has been minimized.

Show comment
Hide comment
@tsteur

tsteur Feb 17, 2016

Member

@mattab are we mentioning this already in an FAQ?

Member

tsteur commented Feb 17, 2016

@mattab are we mentioning this already in an FAQ?

@mattab

This comment has been minimized.

Show comment
Hide comment
@mattab

mattab Mar 15, 2016

Member

@tsteur What did you refer to? If I can improve something in a FAQ, please let me know

Member

mattab commented Mar 15, 2016

@tsteur What did you refer to? If I can improve something in a FAQ, please let me know

@tassoman

This comment has been minimized.

Show comment
Hide comment
@tassoman

tassoman Mar 15, 2016

Contributor

@mattab , @tsteur this is my reference. In brief I gave up to IE <11. Forbidding them by use of _Device Detector _in my authentication plugin. Now we're testing IE11+WIN7 looks like being fine.

Contributor

tassoman commented Mar 15, 2016

@mattab , @tsteur this is my reference. In brief I gave up to IE <11. Forbidding them by use of _Device Detector _in my authentication plugin. Now we're testing IE11+WIN7 looks like being fine.

@Forsskieken

This comment has been minimized.

Show comment
Hide comment
@Forsskieken

Forsskieken Mar 15, 2016

It's solved on my side by solving the svg mime settings.

In a Intranet only site a map where you're customers come from aren't that
importend to show on a map. Therefore we overlooked to long that there
wasn't a map at all.
Once I corrected that, the menu felt in place to

regards
Guy Forssman

On 15 March 2016 at 04:32, Matthieu Aubry notifications@github.com wrote:

@tsteur https://github.com/tsteur What did you refer to? If I can
improve something in a FAQ, please let me know


You are receiving this because you commented.
Reply to this email directly or view it on GitHub:
#7589 (comment)

Forsskieken commented Mar 15, 2016

It's solved on my side by solving the svg mime settings.

In a Intranet only site a map where you're customers come from aren't that
importend to show on a map. Therefore we overlooked to long that there
wasn't a map at all.
Once I corrected that, the menu felt in place to

regards
Guy Forssman

On 15 March 2016 at 04:32, Matthieu Aubry notifications@github.com wrote:

@tsteur https://github.com/tsteur What did you refer to? If I can
improve something in a FAQ, please let me know


You are receiving this because you commented.
Reply to this email directly or view it on GitHub:
#7589 (comment)

@tsteur

This comment has been minimized.

Show comment
Hide comment
@tsteur

tsteur Mar 15, 2016

Member

@mattab can we have an FAQ like "Piwik is not working in an Intranet with IE11"?

We could mention there are known problems, link to an issue where we explain a workaround that requires changing the code to set meta element <meta http-equiv="X-UA-Compatible" content="IE=8,chrome=1"/>. Also maybe we can actually fix it by setting different meta elements depending on IE version via JavaScript (likely not possible via HTML since newer IE versions do not support this anymore).

Member

tsteur commented Mar 15, 2016

@mattab can we have an FAQ like "Piwik is not working in an Intranet with IE11"?

We could mention there are known problems, link to an issue where we explain a workaround that requires changing the code to set meta element <meta http-equiv="X-UA-Compatible" content="IE=8,chrome=1"/>. Also maybe we can actually fix it by setting different meta elements depending on IE version via JavaScript (likely not possible via HTML since newer IE versions do not support this anymore).

@mattab

This comment has been minimized.

Show comment
Hide comment
@mattab

mattab Apr 21, 2016

Member

@tsteur Not willing to document users to set a HTML code manually, as we recommend against such practise. Maybe it's a case to create a new issue where we could add a config setting to set appropriate <meta> elements on IE11?

Member

mattab commented Apr 21, 2016

@tsteur Not willing to document users to set a HTML code manually, as we recommend against such practise. Maybe it's a case to create a new issue where we could add a config setting to set appropriate <meta> elements on IE11?

@tsteur

This comment has been minimized.

Show comment
Hide comment
@tsteur

tsteur Apr 21, 2016

Member

yes that would be great @Forsskieken do you mind maybe creating an issue?

Member

tsteur commented Apr 21, 2016

yes that would be great @Forsskieken do you mind maybe creating an issue?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment