Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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:

  1. 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
  2. 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):

enter image description here

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:

enter image description here

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.

Question

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)
share|improve this question
add comment

1 Answer

up vote 1 down vote accepted

You could provide better experience implementing task-oriented interface, which contains a set of tasks, each task has only relevant data and input fields. Input fields are placed in a way, which is most appropriate to the task. This brings better performance and reduce user's cognitive load.
enter image description here

Also disabled controls isn't appropriate way for displaying non-editable data.

UPDATED
Sorry for non-clear description. Under Task I meant groups in the output screens. So basically you have the same screens, but the layout is different, which is designed to support task for each output group. So the idea is:

  • to unite the input and output data for the task, not to disjoint on two panels,
  • limit the data to necessary amount for each task.

enter image description here

share|improve this answer
    
Thanks, I'll have a look into showing non-editable controls. What would be a better way of showing these? I cannot put multiple tasks in one view, since one of the key points of the system is to let users work on a single task without having to worry about the others. The input and output fields/components are configured on relevance, but still, the amount of data involved can expected to be large. –  t.hendr Oct 15 '13 at 15:07
    
I think Alexey's design implies the "input" fields are likely data labels, where you have Name: value/data, rather than field label + control. At least that's how I would interpret/ approach them. –  Leslie M Oct 15 '13 at 15:26
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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