11

I am creating a lot of UIs that contain multiple levels of objects. An example would be for instance a purchase order. A purchase order has information regarding the order itself, but it also contains an unspecified number of line items which in turn contain particular information.

One problem I have with this kind of UI is what should be seen as an atomic action (i.e. an action that should only succeed completely, or fail completely). Saving changes is such an action.

I could see each line item atomic and in a web interface use Ajax technology to save each line item that has been changed as soon as the line has no focus anymore. This would speed up the response time. However, it makes saving each line its own atomic action.

On the other hand, the saving all changes of the whole order could be seen as an atomic actions. This means that the user can change lines and cancel all changes. In this moment, either the whole document is saved, or nothing.

Is there any study about user interfaces, or design principles that can help me with this dilemma?

3 Answers 3

9

I had to deal with a similar problem recently - I show a profile card of an object, with multiple data entries (name, description, importance, etc.), that can be changed individually, but the changes don't take effect until the overall "Save" is pressed.

The way I did it was:

  • Show each line as a "label", i.e. read only
  • On mouse over, highlight the line and display an "Edit" icon
  • If pressed, the line becomes editable
  • Once focus is lost, the line is read only again (with the new value)
  • Now on mouse over, I show an "Undo" icon that reverts to the previous value.
  • The entire profile card has a "Save" (that appears only once a change has been made), making it clear that nothing is saved until then.

I think it gives the user the most flexibility and is very intuitive...

Hope this helps.

3

Maybe you should have multiple levels of atomic actions.

You could save each line item to preserve the user's work (and if you really want to get fancy, create an undo stack). But the order wouldn't be entered until the user clicks save.

Think of an email client -- web based or otherwise -- that automatically saves drafts.

See also: Multi-Level Undo

0

You could create multiple pages (like in a wizard) on which you group items that are related. Then you make each page an atomic action.

For example, have one page with the products of the order, one with the delivery information, one with the billing details and one overview page before submitting.

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.