I am working on an animation in which there are three somewhat small font words (Environmental, Social, and Economic) together with three colored horizontal histogram bars on each side of the labels on the upper center of the screen. These three words are spoken in sequence by the narrator. To aid cognition and bring attention to the area being referenced by the narrator so the viewer more easily understands what the narration is referring to, I am going to have each word in turn get a visual flourish to catch attention and bring the eye to that part of the screen. Each word will be bolded and turned to match the associated bar's color in succession as they are spoken. Here is a shot showing upper portion of screen with the middle of the three words (Social) being emphasized in the orange color:

Three sets of bars and labels in between them with middle one emphasized

Here is shot showing whole screen with bars in context: enter image description here

My question is about timing, in order to maximize viewer comprehension that the three bars are what is being spoken about in the narration, should the flourish exactly match the timing of the spoken word, or should it slightly precede it by say 1/10th of a second, or slightly follow it. I'm thinking preceding slightly makes the most sense, but was unable to construct a google search to find any research on this question. Similarly, should the flourish last the duration of the spoken word, or extend slightly past it, say by another 1/10th of a second?

  • 2
    $\begingroup$ I'm voting to close this question as off-topic because you'll have better chances of finding a satisfying answer on User Experience $\endgroup$ – Robin Kramer May 2 '17 at 6:17