Navigation Menu

Skip to content
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
Closed

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

mattab opened this issue Mar 31, 2015 · 42 comments
Assignees
Labels
c: Accessibility When something is not usable for a certain group (eg missing contrast) or devices (eg smartphones). c: Design / UI For issues that impact Matomo's user interface or the design overall. Major Indicates the severity or impact or benefit of an issue is much higher than normal but not critical. Task Indicates an issue is neither a feature nor a bug and it's purely a "technical" change.
Milestone

Comments

@mattab
Copy link
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!

@mattab mattab added Task Indicates an issue is neither a feature nor a bug and it's purely a "technical" change. c: Design / UI For issues that impact Matomo's user interface or the design overall. labels Mar 31, 2015
@mattab mattab added this to the Piwik 2.14.0 milestone Mar 31, 2015
@Globulopolis
Copy link
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

@mattab
Copy link
Member Author

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
Copy link
Member Author

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
Copy link
Contributor

mnapoli commented Apr 24, 2015

They are nice, version 1 is my favorite.

@RMastop
Copy link
Contributor

RMastop commented Apr 24, 2015

+1 for version 1

@quba
Copy link
Contributor

quba commented Apr 27, 2015

version 1

@mattab mattab modified the milestones: 2.15.0, 2.14.0 Jun 9, 2015
@mattab
Copy link
Member Author

mattab commented Jun 9, 2015

fyi: moved to 2.15.0 milestone

@mattab
Copy link
Member Author

mattab commented Jun 9, 2015

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

@tassoman
Copy link
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
Copy link
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 mattab modified the milestones: 3.0.0, 2.14.x Jul 30, 2015
@mattab mattab added the Major Indicates the severity or impact or benefit of an issue is much higher than normal but not critical. label Jul 30, 2015
@mattab
Copy link
Member Author

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
Copy link

Glisse1 commented Oct 7, 2015

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

@tsteur tsteur mentioned this issue Oct 7, 2015
@tsteur tsteur self-assigned this Oct 7, 2015
@mattab
Copy link
Member Author

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
Copy link

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
Copy link
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

@tassoman
Copy link
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
Copy link
Member Author

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
Copy link

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
Copy link
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.

@mattab mattab added the c: Accessibility When something is not usable for a certain group (eg missing contrast) or devices (eg smartphones). label Jan 20, 2016
@Forsskieken
Copy link

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
Copy link
Member

tsteur commented Feb 3, 2016

We'll have a look, thx

@tsteur
Copy link
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
Copy link

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
Copy link
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
Copy link

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
Copy link
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
Copy link
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

@Forsskieken
Copy link

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
Copy link
Member

tsteur commented Feb 17, 2016

@mattab are we mentioning this already in an FAQ?

@mattab
Copy link
Member Author

mattab commented Mar 15, 2016

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

@tassoman
Copy link
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.

@Forsskieken
Copy link

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
Copy link
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
Copy link
Member Author

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
Copy link
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
Labels
c: Accessibility When something is not usable for a certain group (eg missing contrast) or devices (eg smartphones). c: Design / UI For issues that impact Matomo's user interface or the design overall. Major Indicates the severity or impact or benefit of an issue is much higher than normal but not critical. Task Indicates an issue is neither a feature nor a bug and it's purely a "technical" change.
Projects
None yet
Development

No branches or pull requests