0

In an web app the user can restrict the timeinterval of an chart via a min, and a max date. When the two desired dates are set, the user has to click on the refresh button. Observated users hastiated. They did not know that they have to push the refresh button:

refresh button

How can I communicate that to the user?

  • 2
    Did you ask the test participants why they hesitated? I can think of several possible reasons (didn't recognise the icon's meaning, thought it refreshed the whole page and would lose their settings, etc.)? – adrianh Mar 23 '15 at 9:01
  • 1
    Is there a particular reason not to do auto-refresh? – Crissov Mar 23 '15 at 20:00
3

You can add an overlay on the graph if the data and filters mismatch prompting user to refresh / reload / load the graph again.

However it does not end there. I wonder if users are expecting the graph to refresh when they select the second value. How your application behaves in other similar scenarios? Are actions auto triggered on selection or there are designated buttons to that? what is the consistent behavior across application? Any particular reason to call it refresh? These questions need answers, for user's mental model expects certain things a certain way.

If the refresh flow can be invoked as many times as user wants to get latest data, I think it should not be closely linked with the date selection. You can always have a separate panel like configure chart/graph which has graph configuration operations you are offering. This separate panel near the chart, can have a submit button to render data when user has finished editing. Refresh can still be there independent of chart configuration.

something like this.

enter image description here

enter image description here

This is out of the first impression of your use case. I might be wrong, or may need to change it significantly, but the point I am trying to convey is keeping your simple refresh flow different from chart configurations. Chances are users will refresh more often than they change the configuration of the chart.

I hope I have been somewhat helpful.

|improve this answer|||||
1

What about simply swapping the icon for a button with the text "Update chart" ?

|improve this answer|||||
  • Thank you for your patience. At first, "Update Chart" is much broader than an icon. At second, it would be inconsistent when I use a button with text between buttons with icons. – Simon Mar 23 '15 at 11:29
  • You might find this answer interesting - ux.stackexchange.com/a/1803/56267 – Stephen Keable Mar 23 '15 at 12:36
  • Thank you for your link. It was very interesting for me. – Simon Mar 23 '15 at 12:47
0

I strongly recommend replacing the icon with a button that says Refresh.

Reasons:

  • User experience is more important than layout consistency. Even if you are using icons elsewhere, in this case if Refresh is the right micro-interaction, then use it.
  • The form flows from left to right. This is a good, natural flow: user enter the start date, then end date, then expect to complete the workflow on the right where the button is. But icons are not communicative and it's MUCH better to spell out what the completion action is. In this case, it's Refresh or Refresh chart, so that would create a clear end-of-workflow action for users that is much less confusing than an icon.
  • This assumes you want to show the range control all the time. If you ware willing to hide it, then using @merqri's answer or an approach similar to Yahoo Finance Charts (see this and click on Custom) may work much better.
|improve this answer|||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.