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

Improve date selector usability #8864

Closed
MagicFab opened this issue Sep 28, 2015 · 8 comments
Closed

Improve date selector usability #8864

MagicFab opened this issue Sep 28, 2015 · 8 comments
Assignees
Labels
c: Accessibility When something is not usable for a certain group (eg missing contrast) or devices (eg smartphones). c: Usability For issues that let users achieve a defined goal more effectively or efficiently. Major Indicates the severity or impact or benefit of an issue is much higher than normal but not critical.
Milestone

Comments

@MagicFab
Copy link

When using the date selector, the calendar and month/year dropdown all remain available without regards to the type of date range chosen.

I'd like to suggest to move the date type selection to the left, making this a 2 step selection:

  • Select type of date range (for example: year)
  • Calendar view changes accordinlgly (if needed, in this example, only allow year values choice)
  • Confirm selection by choosing value (for example, for year: current, other from dropdown)

Currently one needs to double click on a month day to enable any date range selection (except for custom).

I am no usability expert, so I trust the above will be adapted or interpreted according to other similar tools and practices.

@Undergrounder
Copy link

+1

I have already seen some coworkers choosing the wrong date range because of this usability problem.

@mattab
Copy link
Member

mattab commented Oct 1, 2015

Agreed the calendar is confusing to use for first time users. Would be nice to improve it... heard this feedback from a friend in person last week as well ;-)

Here is another suggestion:

  • As soon as one changes the period (click on a radio button), Piwik loads this period for the currently selected date

This would simplify very much the usability... as a downside, it would take a bit longer to change the Period as well as change the Date. We should check Piwik will load the calendar very fast to let one change the date after the page reloaded with the new period. Thoughts?

@tsteur
Copy link
Member

tsteur commented Oct 1, 2015

I find the downsides for when not wanting to see the current selected week etc too annoying for such a change.

Maybe we could always show the "Apply" button which is currently named "Apple date range" and only shown when the range period is selected. It wouldn't even take more space, maybe a tiny bit.

Someone could either select week and press apply and doesn't have to choose a day, someone else can still select another day.

@MagicFab
Copy link
Author

MagicFab commented Oct 1, 2015

I agree not applying the date range immediately is important, in many cases (specially big date ranges) a small mistkae will mean waiting a long time and having to click through date choosing again.

@MagicFab
Copy link
Author

MagicFab commented Oct 1, 2015

Some useful links:

Reading about this also made me think of the mobile implementation (either web access or the Android/Iphone apps), and accessibility (mentioned here: #4167 with more details here: https://github.com/piwik/piwik/wiki/Accessibility-report)

@mattab
Copy link
Member

mattab commented Oct 6, 2015

@tsteur maybe we can add this "Apply" button for all periods, in our calendar in 2.15.0? this is nice usability win

@mattab mattab added the c: Usability For issues that let users achieve a defined goal more effectively or efficiently. label Oct 6, 2015
@mattab mattab added this to the 2.15.0 milestone Oct 6, 2015
@mattab mattab assigned diosmosis and tsteur and unassigned diosmosis Oct 6, 2015
@MagicFab
Copy link
Author

MagicFab commented Oct 8, 2015

Just checked the demo site with "Apply" button implemented for all periods - simple + effective! Thank you :)

Now my muscle memory is battling it but I see the old behavior is still there, so it will be a gradual adjustment ;)

@tsteur
Copy link
Member

tsteur commented Oct 13, 2015

Pro tip that I just noticed while reading the code: A double click on a period label or radio button should directly select the period and reload the page :) As long as it is not the currently selected one...

@mattab mattab added the Major Indicates the severity or impact or benefit of an issue is much higher than normal but not critical. label Oct 13, 2015
@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
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: Usability For issues that let users achieve a defined goal more effectively or efficiently. Major Indicates the severity or impact or benefit of an issue is much higher than normal but not critical.
Projects
None yet
Development

No branches or pull requests

5 participants