0

I am working on a chart application and the user changes options many times to update the chart. Sometimes the updating may take few second.

(A) Should I hide it to avoid any misunderstanding about data

(B) Or is it better to keep the old one while updating (old information is better than no information)

enter image description here

1

(B), but only if you make it very clear that information is being updated.

A different colo(u)r scheme like in your example works well.

You might want to display 'updating...' close to/instead of your spinner.

Bonus points if your graph animates from the old state to the new! (while subtly hinting that updating succeeded.)

1

Whether you hide or display the old graph, neither method really helps the user visualise the change. Either way, you present the new graph abruptly leaving the user to work out what changed, if anything.

Ideally you should be indicating not that there is a change going on, but also what that change is relative to what was there before.

To help the user transition, you should make the data itself communicate the transition. That can be done in three steps:

  • Indicate the areas of change: Animate the graph from the old version to the new version. Users can see the fastest moving parts as the points of most change.

  • Retain what the change is relative to: Keep a copy of the old graph as a background, but faded, so that the user can see the relative difference between old and new.

  • On completion, lose the old data: Once the animation is complete and the new version is shown, transition a fade out of the old background graph so that it disappears leaving only the new graph.

Ideally, there would also be an undo/redo, where the transitioning works in reverse, and forward again, so the user can review if they wish.

I appreciate that's probably more work than you anticipated!

  • very interesting point. Unfortunately i have to deal with technical limits right now but I keep that in mind. – Renaud Jun 25 '14 at 10:15
1

The second option, with a clear but not abrupt transition is better because it makes it obvious the change is happening, rather than forcing users to consciously think about what they've done and what the result of their changes will be.

One way to get the message across would be to animate your change, as seen in this example which uses the ZingChart JavaScript charting library: http://zingchart.com/playground/run/53ab17132f5d5

Another option would be to consider choosing a library that renders the charts quickly enough that the stage between updates is fairly imperceptible. This would basically eliminate the need for a blank screen or transition state.

0

I would be inclined to go with option B, as it would have a less jarring effect than A. The feedback needs to be obvious to the user that the chart is updating.

One thing you need to consider is how often is the chart being updated? If its frequently, they won't need the feedback to be as obvious as an occasional user updating it. Also if the user is intently changing data and expecting to see it reflected in the chart again the feedback can be more subtle.

0

I am assuming that the new chart is not related to the first one in terms of info value.

This reply really changes according to your scenario. It would be different for a linkedin viewers number in time than to have 3-4 financial data. Keeping the line on the screen would not matter much if you are changing the time span or (I dunno if LinkedIn actually has it but) field of work of your viewers, etc... However viewing 3-4 different kinds of financial data according to time, sub categories, sums and all would require a clean sheet to refresh the users's mind.

As a generic answer; I would suggest A because if you need to "compare" the old / new data, then you want to do a different kind of chart rendering like having both in hand. Seeing the new data emerging would probably get more attention to the new chart.

0

My short answer would be to use option B, as it is less abrupt and can possibly be animated to show the changing information.

There are also several other factors to consider:

  1. How much comparison will the user be doing between the old and updated chart? If the behavior is change parameters --> update --> compare --> repeat, then showing some sort of transparent overlay of the older results may be the way to go. If this is not the case, then Option B with animation to show the change may be enough.

  2. Is the chart updating based on parameters that the user can re-select, or is the updated chart something that cannot be reproduced, like a real-time stock chart?

Overall, I agree with @roger-attrill - but I think there are degrees of how far you need to go with representing the change based on the nature of the chart and what exactly is being updated.

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.