I'm working on a product in which users work on one ore more tasks structured in a workflow. If a user opens such a task to work on it, he gets to see a view that breaks down into two areas:
- Input area: this area shows all relevant information the user needs to know complete the task. The user cannot edit this input data, it is coming from other tasks
- Output area: this one shows all information the user needs to provide to complete the task. The user can (and must..) edit this information to make progress on the task
Additionally, this task view can have two looks (depending on configuration of the task).
First look: Form fields
Input and output areas are side by side, each side contains a number of form fields (note that these fields are disabled on the input side):
Here, all is well, but the second look where the trouble starts.
Second look: Master-detail
For a more complex configuration of the task, the view may look like this:
It shows a master-detail view, allowing users to quickly provide the required output line by line. The grid on the input side contains both input data (greyed out, disabled) and output data. Also, the grid is residing on the input side while it also contains output information We've been getting comments from our users that this is confusing them.
What's the best way to divide the screen into different areas to show the information such that:
- Input is clearly separated from output
- The master detail principle remains intact for the grid (= a requirement)