Detailed progress indicator with different states

Question

I am creating an application for mobile devices (tablet primarily, but in the future phone size).

A user creates a new process, which has many 'cards'. A 'card' is essentially a collection of forms. A 'card' can have 1 or many forms.

A requirement from the client is that whilst in a 'card', they can see their progress through the process. Basically, they want to know what cards are left and what state they are in.

If a user is in a 'card', they cannot navigate out of that card until they have completed it.

My problem is basically this:

• I need to display the current card to the user so they can fill it in
• On the same screen, I need to show them the rest of the cards and their status
• The portion of the screen displaying the rest of the card data should not look like users can use it to navigate, unless the user has completed the form.
• It isn't a linear journey, users can move to any card once they complete one.

I have tried something like this:

^{download bmml source – Wireframes created with Balsamiq Mockups}

But it (obviously) always looks like tabs.

Does any one have any solutions to this. Even when I try to make the other tabs look 'disabled' until the current form is complete, they still look navigable.

The solution I have now only really works on tablet, I'm not sure if a better solution could work across both.

Answer 1

Focus on status rather than navigation. What you are showing looks like buttons which are clickable. A more textual approach will help and avoid underlines and state changes on On a larger format screen, you can list the steps across the page - (1) Step 1 | (2) Step 2 | (3) Step 3 and format the step number to indicate done, current, next. There are many examples of this that you can see with a simple google search.

Answer 2

I would want to investigate more if it is really important to show the status of the other cards while in one card. But let me take it is needed for some reason.

In that case, you can have a consolidated indicator (circular or linear or a simple colored lined) that shows the overall progress across the cards and use some micro-interactions to view details. (for eg if you use a line type of an indicator aligned to the top of the page, dragging it further can expose the details of the status of other cards with their names.) Something like this.