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.

enter image description here

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?

  • nice Balsamiqs by the way, it's a great app I love using it on my desktop
    – Toni Leigh
    Jan 26, 2014 at 20:11
  • @ColinSharpe definitely - I was surprised that you didn't use any in your question ;-)
    – methuselah
    Jan 27, 2014 at 0:09

3 Answers 3


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

  • thanks for the answer, its prompted me to add some more detail to the question. Can you help out with that as well? I like the idea of saving a booking as unconfirmed when the user navigates away :-)
    – methuselah
    Jan 27, 2014 at 0:07
  • yes i really like the idea of saving without prompting or reminding in all cases where it is feasible, secure and in a way that doesn't confuse the user - I've just applied local storage to my CMS forms and use a button which gives the user the option to reload their auto-saved data if they wish rather than serving a half completed form that could be confusing
    – Toni Leigh
    Jan 29, 2014 at 22:24
  • re: the second part of your question ... I think that is probably a question in it's own right, it might be better to ask it separately, though i would suggest that this accident would be avoided by autosaving (maybe you can flash a 'saved' message on navigation away)
    – Toni Leigh
    Jan 29, 2014 at 22:25

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

  • But how would you cancel it at step 2?
    – methuselah
    Jan 29, 2014 at 19:40
  • I think most people who need to cancel will do it in step 1. If you need to cancel in step 2, you can press "Back" and then "Cancel"
    – kwahn
    Jan 29, 2014 at 20:57
  • to focus the user by removing the buttons as in the mockup can be good for helping them complete a task like checkout, maybe set the buttons to re-appear on swipe up or double tap ?
    – Toni Leigh
    Jan 29, 2014 at 22:30

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.

  • Welcome to the site, @Mordred! Interesting opinion. Is there any evidence you can provide to support it? At the moment it reads largely as opinion. Jan 27, 2014 at 4:23
  • Well that's because it was mostly opinion based on experience, design, and some best practices (particularly UI consistency). :) I'm not entirely sure how/where to find supporting evidence on that though, so apologies if I'm not following protocol here.
    – Mordred
    Jan 27, 2014 at 4:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.