Ideas for transitional effects in graphs

20 Jun 2007 - 2:29pm
7 years ago
4 replies
713 reads
bhekking
2006

Hi -

Our team is exploring ways to effectively show transitional effects in
graphs (i.e., bars, lines, pies, etc...). That is, as the underyling
graph data change in realtime, we want to show the transition taking place,
through animation. We're using Flash for prototyping.

We have identified a few hopefuls (filling/emptying, fade in/out, various
types of highlighting), and are curious about what others have done in this
area.

Also, we're trying our best to avoid effects that compete with each other,
distract, or are otherwise perceptually or cognitively challenging, while at
the same time trying to maximize our ability to convey useful
information...which, as it turns out, isn't very easy.

Thanks in advance,
Bret Hekking
UI Designer | Oracle Corp.

Comments

20 Jun 2007 - 8:39pm
Jeff Howard
2004

I've experimented a bit with animation for adding new rows to tabular
data in the context of monitoring a real time event log. The final
effect involved popping open a space for the new row then quickly
fading it into place. Without the fade transition it was difficult to
perceive that a change had occurred at all.

With graphs that's less of a problem. With something like a pie
chart I'd expect the changes to be incredibly subtle, moreso as your
updates approach realtime. It's hard to imagine data volatile enough
to change the angle of the wedges more than a degree or so every few
seconds, especially at screen resolution. For something like that
I'd suggest simple tweens unless the change is above a certain
threshold. Then you might consider emphasizing the wedge that
represents the change between the last update and the current
position as you grow it into position. For a bar chart, linear growth
for small changes, but a small pulse to emphasize any bar who's
change is above a threshold. A similar strategy might work for other
charts.

The kind of tween you use is going to have an effect. Bigger changes
will entail faster movement, but you can still attack the tween to
emphasize a change that you think should be particularly noteworthy.

One other thing to keep in mind. If your data is constantly changing,
it's difficult to actually study the results in detail. Consider
implementing something like a pause button to stop the updates so
people can study a particular instance of the data, or let them dial
down the update speed if necessary to make the changes less frantic.

// jeff

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://beta.ixda.org/discuss?post=17436

21 Jun 2007 - 9:35am
Fabio Terracini
2007

Hm.. that's an interesting subject I face almost every day. :-) I
clearly see two opportunities for a good use of effects in charts:

1- Changing the data of the current chart: informing the user about that change
2- Drill down: selecting one chart series and see it's details on
another chart, animating the transition to the new chart

For the first case you can see some built-in effect that Adobe Flex
has: http://demo.quietlyscheming.com/ChartSampler/app.html - Select
one the Effects on the left and click "Change Data".

For the second case, one transition effect that has been very
effective on my use cases is horizontally scrolling the screen. The
user click on a chart series and that chart slides to the left,
revealing a new chart that is coming from the right. Something like
this:
http://blog.dclick.com.br/2006/02/15/animated-transitions-animar-para-informar/
Keeping a breadcrumb is probably a good idea, so the user can see
where he is and have nice shortcuts to get back.

Also on the second case you might wanna check out this transitions.
They are visually consistent about what's happening:
http://demo.quietlyscheming.com/drillDown/app.html

[]s,
Fabio Terracini

On 6/20/07, Bret Hekking <bret.hekking at gmail.com> wrote:
> Hi -
>
> Our team is exploring ways to effectively show transitional effects in
> graphs (i.e., bars, lines, pies, etc...). That is, as the underyling
> graph data change in realtime, we want to show the transition taking place,
> through animation. We're using Flash for prototyping.
>
> We have identified a few hopefuls (filling/emptying, fade in/out, various
> types of highlighting), and are curious about what others have done in this
> area.
>
> Also, we're trying our best to avoid effects that compete with each other,
> distract, or are otherwise perceptually or cognitively challenging, while at
> the same time trying to maximize our ability to convey useful
> information...which, as it turns out, isn't very easy.
>
> Thanks in advance,
> Bret Hekking
> UI Designer | Oracle Corp.
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> List Guidelines ............ http://listguide.ixda.org/
> List Help .................. http://listhelp.ixda.org/
> (Un)Subscription Options ... http://subscription-options.ixda.org/
> Announcements List ......... http://subscribe-announce.ixda.org/
> Questions .................. lists at ixda.org
> Home ....................... http://ixda.org/
> Resource Library ........... http://resources.ixda.org
>

21 Jun 2007 - 2:49pm
Oleh Kovalchuke
2006

On 6/21/07, Fabio Terracini <lists at terracini.com> wrote:
>
>
> Keeping a breadcrumb is probably a good idea, so the user can see
> where he is and have nice shortcuts to get back.
>
> Also on the second case you might wanna check out this transitions.
> They are visually consistent about what's happening:
> http://demo.quietlyscheming.com/drillDown/app.html

This is pretty cool. Would be even cooler to show small charts (the location
and the height of the bar right before it has been expanded) in the
breadcrumb trail.

--
Oleh Kovalchuke
Interaction Design is the Design of Time
http://www.tangospring.com/IxDtopicWhatIsInteractionDesign.htm

21 Jun 2007 - 3:43pm
bhekking
2006

Yes, some logical next steps for this project (once we get nail down some
transtional effects) are media controls, showing small multiples over time,
etc. Without the ability to compare a changed chart with its previous
states, this capability is just demo glitz, IMHO. The time dimension is
critical to understanding what the changes mean.

On 6/21/07, Oleh Kovalchuke <tangospring at gmail.com> wrote:
>
> On 6/21/07, Fabio Terracini <lists at terracini.com> wrote:
> >
> >
> > Keeping a breadcrumb is probably a good idea, so the user can see
> > where he is and have nice shortcuts to get back.
> >
> > Also on the second case you might wanna check out this transitions.
> > They are visually consistent about what's happening:
> > http://demo.quietlyscheming.com/drillDown/app.html
>
>
> This is pretty cool. Would be even cooler to show small charts (the
> location and the height of the bar right before it has been expanded) in the
> breadcrumb trail.
>
> --
> Oleh Kovalchuke
> Interaction Design is the Design of Time
> http://www.tangospring.com/IxDtopicWhatIsInteractionDesign.htm
>

Syndicate content Get the feed