4

I'm working on a tool made for professionals to calculate advice for their customers. The user is following predefined steps. The steps are represented as tabs (with arrows) in the interface.

The user will most of the time follow these steps.

However, it is possible that the user will change a bit of information in an earlier step.

For example:

  • in step 4 the user makes a selection, based on the result of a calculation.

  • in step 3 a calculation is presented where one of the amounts used, appear to be incorrect

  • and in step 2 some amounts are entered that will be used for the calculation.

The user will go back from step 4 to step 2, change the value. When that value has changed, the calculation in step 3 made has become invalid. And all the choices made in step 4, based on the former calculation, has also become invalid.

How should I deal with this situation?

Improve this question

3 Answers 3

Reset to default
5

Tabs are the wrong control for this function precisely for the problem you’ve uncovered (the need to put arrows on the tab labels is also a clue). To quote the MS User Experience Interaction Guidelines for Windows 7 (p179):

Is [a tab] the right control? …If used for settings, are settings on different pages completely independent? Will changing a setting on one page affect settings on other pages? If they’re not independent, use task pages or a wizard instead.

Linear dependency calls for a linear architecture. With a wizard, if the users go back and change something, then moving through each successive page re-calculates the results and displays them for the user to see. There are no invalid values.

Assuming your app has decent response times, and the user can back through pages quickly, you’re losing little in user efficiency by making users go back one page at a time. Going back should be a rare anyway, unless there’s something else wrong with your UI that is encouraging users to make errors.

Improve this answer
2
  • In most cases, there is no need to go back. In fact it is a process that is similar to applications like 'setting up a newsletter like mailchimp' or 'composing an e-card' or 'booking a flight with options' (although it is about a financial product). Within each step there are sub processes like calculations, adding notes etc. But at the end it could happen that the user made a typo or forgot simply adding some crucial data.
    – Rene
    Apr 18, 2012 at 20:00
  • BTW thanks for the link to the downloadable guidelines.
    – Rene
    Apr 18, 2012 at 20:11
5

In a similar-sounding application, the solution we reached was to allow users to jump back in time to any previous phase, but from that point forward they could only advance through the normal "Next Phase" button. So if you jumped from Phase 4 to Phase 2, you would have to go through the submittal process of Phases 2, 3 and 4 again.

From there, all you have to do is normal input error handling. Flag it in red, disable the continue button, whatever your standard method is. Depending on your system, this may require storing data from later phases in a draft format so they can be refilled once the users gets to a later (but previously visited) phase, but that's a fairly small technical detail.

Improve this answer
1
  • I think that this is a proper way to deal with it. Next to the 'error' I was thinking of putting an extra informative message on top that some changes are made because the user altered some other data.
    – Rene
    Apr 18, 2012 at 20:03
2

I agree Michael on tabs not being the appropriate navigation, as this is more of a wizard.

Depending on the amount of inputs and the number of steps in the sequence, you may want to add the inputs to the side of the page as the user progresses through the flow. This way they could update the input asynchronously at any stage in the process vs. backing up to the step.

For example: If the first step is entering customer info, the customer info would show in a side bar on step 2 of the process. If the user needed to update the info from step one they could either do it from the side bar or click a link which makes the info editable in a modal.

Depending on the product, you may want to include the customer info as you progress through the flow anyway.

Improve this answer
2
  • I'm not sure if I understand your answer. Is it similar to a 'receipt' next to an ordering process?
    – Rene
    Apr 18, 2012 at 20:06
  • Yes, that's similar to what I'm thinking.
    – Dan Michael
    Apr 19, 2012 at 12:43

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.