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:
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.