1

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)
Improve this question
1
  • Another simple distinction could be to align the input to the left and the output to the right. which will work in western society where we read left to right.
    – Gurnard
    Jun 19, 2015 at 7:16

1 Answer 1

Reset to default
1

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

Improve this answer
4
  • 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, 2013 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, 2013 at 15:26
  • Alexey can I ask what software or app you used to make these nice looking images?
    – JasonDavis
    Jun 9, 2015 at 17:41
  • Hi @JasonDavis, I use Xara Designer. Xara Photo & Graphic Designer is also good for this.
    – Alexey Kolchenko
    Jun 11, 2015 at 14:25

Your Answer

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

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