How could I deferential to a user that some region of a web page is for data entry and another for informative purposes?

Question

I have a web page that has to distinct regions on it. There is the top region that is for a user to enter data (and re-enter data periododically) and a separate region of the page that shows all data entered, in table format.

My team suggest we need a way to differentiate these two distinct purposes (data capture and data display) with colour. So how might i achieve this? Is this a reasonable thing to do or is have a clear division between the two parts of the page sufficient?

Answer 1

In my opinion, the clear division with white space between the regions is enough.

To improve the data entry process furthermore you should emphasize this area. It should be made readable and easy to spot. You can do that only by changing the background with white for example, and the summary area with a darker color from your style guide. White background improves readability and helps focus user's attention to that area. This is because data entry area is on the top and is brighter than the rest of the page.

Answer 2

You need to make a very clear division between the two regions. This will depend on you actual scenario, here are some ideas:

• Enter data in a completely different page or a dialog, accept and view the results.
• View data region is in a window where the changes are updated (like if it was an iframe), or maybe consider it the other way round.
• Completely opposite background color. Like the idea you propose, be careful the color helps and doesn't confuse the distinction.

Answer 3

What about labeling regions?

• Add new data
• Data history