Monday, 21 October 2002
What kind of design suits
  • a change function,
  • with lots of data elements,
  • that won't fit on one screen?

A Wizard?

Details 1- 9

Prompt 1 Prompt 5
Prompt 2 Prompt 7
Prompt 3 Prompt 8
Prompt 4 Prompt 9
The first answer that comes to my mind is a wizard.

But the sequential navigation of a wizard is a bit too cumbersome for high frequency usage. It should be easier to navigate to a specific detail screen.

Multiple tabs?

A second thought is to use tabs as navigation between the various detail screens.

Details 1- 9

Prompt 1 Prompt 5
Prompt 2 Prompt 7
Prompt 3 Prompt 8
Prompt 4 Prompt 9

Hm, this design looks quite good at first sight. But it poses some navigation challenges.

  1. The user is easily tempted to click from tab to tab, without confirming the changes with the save button.
  2. What navigation should be when the user does click the save button?
    • Automatic navigation to a next tab strikes me as unnatural. In addition the user lacks the feedback confirming successful save of the changes.
    • Stay on the detail screen? That would pose troubles for the feedback too and it requires a manual action to move on to the next screen.

Summary > detail

An alternative, inspired on Jef Raskin's ZoomWorld (Chapter 6-2, Zoomworld, from The Humane Interface)

Summary screen

Prompt A Detail 1, 2, 3, 4, 5 Prompt D Detail 31, 32, 33
Prompt B Detail 11, 12 Prompt E Detail 41, 42, 43, 44
Prompt C Detail 26, 27, 28, 29, 30
  1. An overview lists a summary of all details.

    It offers links to several follow up screens to change the details.

  2. Every detail screen has

    Details 1- 9

    Prompt 1 Prompt 5
    Prompt 2 Prompt 7
    Prompt 3 Prompt 8
    Prompt 4 Prompt 9
    • A relatively low profile bread crumb trail with a link back to the summary.

      The bread crumb trail is a fine way to leave the detail screen occasionally, without saving the changes.

    • A form with a save button.
    A click on the save button stores the data and flows back to a refreshed summary.
I like this design, although it is unusual.
  • The navigation is nicely consistent with usual list-detail screens.
  • The navigation is predictable, with clear, standard interface elements:
  • The user is not easily tempted to leave the detail screen prematurely.

Summary & detail

Still, I'm not yet fully comfortable with the navigation between summary and detail screens. Why have 2 screens, why not just one? It should be possible to edit on the spot, right in the summary screen, by enlarging a section till edit mode.

Yes that is possible, but it will give the save navigation problems as the tabs. I'll stick to a summary and detail screen.

Till next week,