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.

Sign up for GitHub

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

Jump to bottom

It is hard to see which menu item is currently selected #7093

Closed
tsteur opened this issue Jan 27, 2015 · 12 comments
Closed

It is hard to see which menu item is currently selected #7093

tsteur opened this issue Jan 27, 2015 · 12 comments
Labels
c: Usability For issues that let users achieve a defined goal more effectively or efficiently. duplicate For issues that already existed in our issue tracker and were reported previously. Enhancement For new feature suggestions that enhance Matomo's capabilities or add a new report, new API etc. Help wanted Beginner friendly issues or issues where we'd highly appreciate community's help and involvement.
Milestone
2.14.0

Comments

@tsteur
Copy link
Member

tsteur commented Jan 27, 2015

See attached screenshot. In this case "Custom Variables" is selected. It always depends on the screen how good it is to see. On my screen it is hardly possible.

menu_item_selected
@tsteur tsteur added Enhancement For new feature suggestions that enhance Matomo's capabilities or add a new report, new API etc. Help wanted Beginner friendly issues or issues where we'd highly appreciate community's help and involvement. c: Usability For issues that let users achieve a defined goal more effectively or efficiently. labels Jan 27, 2015
@tsteur tsteur added this to the Short term milestone Jan 27, 2015
@gaumondp
Copy link

I agree with most of your recent UX suggestion but this one beats them all.

@tsteur
Copy link
Member Author

tsteur commented Jan 31, 2015

I worked on two versions to improve this. One is making the active link darker (black) and the other menu items lighter. It might be a bit dangerous that the light item color is too light and people can't see it anymore:

menu_new

menu_new_admin

Than I tried to just replace the active link color with the brand color which is by default the Piwik red:

menu_new_2

menu_new_2_admin

I didn't have any other ideas so far. I'm not a designer :) Bold doesn't work as it would be too bold and the font doesn't allow us to set eg font-weight: 600. An underline similar to the main reporting menu (red) doesn't really work either.

If anyone has other ideas please comment

@mattab
Copy link
Member

mattab commented Feb 10, 2015

The first version looks almost good, but maybe the text has not enough contrast indeed. Maybe a bit darker grey would work... Related to #6917

@mattab mattab closed this as completed Feb 10, 2015
@mattab mattab reopened this Feb 10, 2015
@tsteur
Copy link
Member Author

tsteur commented Feb 10, 2015

If we make it darker again in the first version then the contrast between the active / highlighted and the other menu items is not high enough...

Displaying the active link in red would be way more clear and not have any contrast problems.

@lemu
Copy link

lemu commented Feb 10, 2015

What about something like that?
screenshot 2015-02-10 17 38 09
screenshot 2015-02-10 17 39 00

@tsteur
Copy link
Member Author

tsteur commented Feb 10, 2015

I don't like the underline in the reporting menu. Wrote that in an earlier comment as I tried it as well. BUT It looks good in the left menu! So if we have a left menu in the future it might be all good, at least for me :) 👍

@mattab mattab mentioned this issue Feb 10, 2015
Closed
@mattab
Copy link
Member

mattab commented Feb 10, 2015

Yes it looks good in Left menu 👍

(we may make the left menu the default menu in Piwik in #7169 )

@tassoman
Copy link
Contributor

tassoman commented Mar 4, 2015

Hello for accessibility purpose, contrast between foreground and background colors should have enough amount.

http://webaim.org/resources/contrastchecker/

@jdeyla
Copy link

jdeyla commented Mar 13, 2015

I see no issu in menu colors and accessibility, except for some other contrast.

Light blue of links (#4183C4) is too light, a little change in #376FA7 would be ok.
Blue on light blue (like in message "zen mode activated") is not readable.
Grey menu voices #666666 on #F2F2F2, are borderline but good.
My suggestion is to avoid this tone-sur-tone

@mattab mattab mentioned this issue Mar 31, 2015
Closed
@mattab mattab modified the milestones: Piwik 2.14.0, Short term Mar 31, 2015
@mattab
Copy link
Member

mattab commented Mar 31, 2015

This UX issue should be fixed by the new redesign in: #7589 - let's check once it's done that the current menu is easy to spot

@tsteur
Copy link
Member Author

tsteur commented Jun 9, 2015

Can we move it to "mid term" or "long term" and instead define a checkbox / follow up task to check this in #7589? Those kinda issues otherwise pollute the milestone and one always reads and looks it over and over again

@mattab mattab mentioned this issue Jun 9, 2015
Closed
@mattab
Copy link
Member

mattab commented Jun 9, 2015

Sure, will be done in #7589

@mattab mattab closed this as completed Jun 9, 2015
@mattab mattab added the duplicate For issues that already existed in our issue tracker and were reported previously. label Jun 9, 2015
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
c: Usability For issues that let users achieve a defined goal more effectively or efficiently. duplicate For issues that already existed in our issue tracker and were reported previously. Enhancement For new feature suggestions that enhance Matomo's capabilities or add a new report, new API etc. Help wanted Beginner friendly issues or issues where we'd highly appreciate community's help and involvement.
Projects
None yet
Milestone
2.14.0
Development

No branches or pull requests
6 participants
@tassoman @tsteur @mattab @lemu @jdeyla @gaumondp