I am working on a project that includes designing some behaviour for a web data grid. I run into a question described in the title. Below is a screenshot.

enter image description here

The editable input cell is the one with blue pencil icon, and the one will change accordingly locates on the right side, surrounded by a illuminated border along with a light blue overlay on top. The idea of this design is that when a user making a data entry/adjustment, the other cell will be highlighted temporarily (flash for a sec and then fade out), and the content will change at the same time (request from client).

I was wondering if this approach is strong enough to indicate the relationship between these two input cells? Also this makes me wondering the size of user's eye focus area when they are doing a data entry. I notice that in a text-area entry, I tend to only focus on the text area itself. Thus in my design, though the related input cell is somewhat highlighted, will the user "notice" that? should I move the related cell next to it to enforce this concept? Or should I discard this and come up with another idea? Many thanks.

1 Answer 1


Display changes to related elements in the closest possible proximity.

In your current example you have currency conversion: 1 input is translated to change in an adjacent cell. (although you have a one way model it appears).

See these examples: enter image description here

enter image description here

Input and resulting output are close in proximity.

This follows the law of proximity in Gestalt Laws of Grouping.

In your current example, the more distance between your input and the event in the farthest column, the more you'll rely on animation, motion, color change, etc.

This Neilsen Norman Group article on Animation and usability asks a great question in regards to getting a users attention:

Where would the user’s attention otherwise be focused at the time when the animation occurs?

In your case, the columns are far apart, and will require a more noticeable event.

Try moving the columns together


  • User will see the conversion rate relationship
  • Responsive: works for limited viewports (If you have a table that can scroll horizontally with a frozen column, the elements stay together in a smaller view)


  • If the First column is not the Editable rate, you may have to emphasize its importance or edit function (but I don't know the other constraints you have).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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