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

Comments

Projects
None yet
5 participants
@MagicFab

MagicFab commented Sep 28, 2015

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

This comment has been minimized.

Show comment
Hide comment
@Undergrounder

Undergrounder Sep 28, 2015

+1

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

Undergrounder commented Sep 28, 2015

+1

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

@mattab

This comment has been minimized.

Show comment
Hide comment
@mattab

mattab Oct 1, 2015

Member

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?

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

This comment has been minimized.

Show comment
Hide comment
@tsteur

tsteur Oct 1, 2015

Member

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.

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

This comment has been minimized.

Show comment
Hide comment
@MagicFab

MagicFab 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 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

This comment has been minimized.

Show comment
Hide comment
@MagicFab

MagicFab 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)

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

This comment has been minimized.

Show comment
Hide comment
@mattab

mattab Oct 6, 2015

Member

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

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 label Oct 6, 2015

@mattab mattab added this to the 2.15.0 milestone Oct 6, 2015

tsteur added a commit that referenced this issue Oct 6, 2015

@mattab mattab assigned diosmosis and tsteur and unassigned diosmosis Oct 6, 2015

@tsteur tsteur closed this in #8926 Oct 7, 2015

@MagicFab

This comment has been minimized.

Show comment
Hide comment
@MagicFab

MagicFab 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 ;)

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

This comment has been minimized.

Show comment
Hide comment
@tsteur

tsteur Oct 13, 2015

Member

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

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 label Oct 13, 2015

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