How do you treat overview and detail pages when displaying a progress bar?

Question

I have a progress bar at the top of all pages in a signup process:

Personal details > Contact details > Choose membership package > Buy > Finish

The order of these steps is fixed but I have a question about the 'choose membership package' step. Whereas all the other steps are single pages, the 'choose membership package is made up of 2 pages:

Summary of packages > Details on a particular package

The user chooses their membership package from the summary screen and then reads additional information about it on the details page.

How would you break these two sub-steps up on the page and progress indicator?

They don't seem to be distinct enough tasks to warrant 2 separate steps on a progress indicator with limited space. Also, the details screen has too much information to fit in a lightbox - it's a full page in it's own right.

Answer 1

This could be quite easily achieved with some simple rephrasing. It looks to me as the section

Details on a particular package

is to review the selected package before purchase. If you rephrase your steps like this instead:

Personal details > Contact details > Choose membership package > Review details > Buy > Finish

You could combine the step of presenting the details of the package parallel with reviewing the personal details and contact details, inviting the user to adjust any detail they want changed. Adding a a final page letting the user review their input adds a feeling of closure which is one of the eight interface design principals of Schneiderman.

Answer 2

It's best if you can display the details directly underneath each package. If the details are too long. Then I suggest to go for page overlay boxes for displaying the package details for each package.

This will help to preserve your main processes, also it will help to make sure that user's mental picture about the overall process is not disrupted. Taking the user to other pages or adding extra steps to the main process might effect the usability of your site adversely.

Suggested solution: