1

The application

I'm working on a desktop application whose purpose is the configuration of a complex electronic device.

The configuration process is done through several different pages which are hierarchically connected. These pages are displayed inside a fixed skeleton. The configuration to be created is modeled as a tree and each page is related to a specific node type.

More in detail, a page can show either:

  • a summary of the information contained in a configuration sub-tree; or
  • the details of a leaf of the tree.

For example, there is a page which shows summary information about the device, from which the user can add optional module. When an optional module is added, another page for its configuration is opened.

The flow through pages is triggered in different ways:

  • forward: through actions on the current page (e.g. click on a button, double-click on a graphical element...)
  • backward: through a breadcrumb, which is always visible in the top of the application skeleton.

When a new node is created (e.g. a new module is added to the device), the configuration model is updated accordingly and the related page is opened.

The following mockup shows the application skeleton:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

The application auto-saves all data to an in-memory configuration model as soon as it is entered by the user.

Before a page switch, the application performs a validation of the user input. In case of any issue, an alert is shown and the page switch is denied.

The problem

We are going to introduce two similar operations:

  1. discard the new node creation
  2. discard the changes made since the opening of the current page

These two operations are available ONLY in a few pages.

How these two operations can be shown on UI in a clear way?

Possible solutions

Solution 1

Use a clickable label on bottom of the page which describe the operation. This label appears only when the operation can be performed.

mockup

download bmml source

Solution 2

Show a revert icon for operation 2 in the toolbar.

When a page switch is requested and the validation fails, show a dialog which inform about the issue and allows to perform operation 1.

mockup

download bmml source

  • I think if a new node is not yet validated, it shouldn’t be added already. This way you can just discard it and don’t have to remove it. Or am I misunderstanding the problem? – jazZRo Nov 17 '15 at 14:05
  • @jazZRo even in that case the user must be able to perform the two operations: discard (throw away or remove) the new node, no matter if already added to the model or not; discard the changes applied to a previously added node. – Paolo Fulgoni Nov 17 '15 at 17:29
  • I like solution #2, but shouldn't the validation error popup have a 3rd option, "Revert to last valid state"? – obelia Nov 17 '15 at 18:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.