Standardising the back/forward/cancel/book buttons at different stages on a wizard-style form

Question

I'm having a bit of dilemma here.

As the user moves through the different screens in my booking wizard below, I'm a bit worried about the buttons at the bottom of the screen, how can I standardise or add some consistency to the buttons on each screen.

For example, the user should be able to cancel the booking at any point, but the moment they can only cancel the booking on the third step.

Can you suggest any improvements I can make?

Note that on the 3rd step - pressing the pencil icon allows the user to jump to either stage 1/2 to make the necessary changes.

Also, you might notice that I've kept the tab bar along the bottom, another issue I'm worried about is that a user might inadvertently tap an icon and unwittingly abandon their booking process. Generally, checkout / booking forms can be focused experiences, so should I remove the app-wide tab bar along the bottom? How would this change the wizard style form?

Answer 1

My simple advice would be to move or even remove the cancel button.

In it's current state the user will click cancel instead of previous in some cases and one cannot rely on colour differences to help solve this.

You could put the cancel link in a consitent place on all screens and make this consistent with other application canel operations. You could also save a booking as 'uncofirmed' and consider it cancelled if the user navigates away (including accidentally ~), but let them reload and confirm it, then provide a separate 'cancel' operation just for confirmed bookings.

There is some merit in making the cancel operation interaction steps differ from general interaction steps if the operation is critical and requires thought each time. Looking at how iphones handle deleting things might help you with ideas.

~ added in response to question edit

Answer 2

IMO, a wizard flow should bring up a new modal task. The task can either be completed or canceled. The "tab bar" at the bottom is a distraction for the task of booking, and should be removed.

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

Answer 3

Personally I like the app-wide tab bar at the bottom, so here's how I'd changes things while keeping it always visible.

First, when starting a booking operation, I'd dim the bottom row entirely and then highlight booking slightly. This provides a little extra feedback that they're in the process of booking, while also letting the user know that the other three options are not actions they can currently take. I'd consider making a second press of booking act as a cancel operation as well. You'd have to weigh the tradeoffs between accidentally cancelling a legitimate booking attempt and a quick way to cancel booking if they accidentally started that operation.

Second, I don't like how Cancel and Previous appear and disappear based on what portion of the operation you're in. The pencils are a great shortcut, but someone who just clicked Next and then immediately realized they needed to make a change is going to click where the Previous button just was and be confused. My suggestion would be to always show Previous and Next (when applicable!) and then put a red-X style cancel button in the upper right corner of the app in the same area where Book appears.