Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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?

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

3 Answers 3

up vote 1 down vote accepted

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

share|improve this answer
    
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 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 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 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.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

share|improve this answer
    
But how would you cancel it at step 2? –  methuselah Jan 29 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 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 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.

share|improve this answer
    
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. –  3nafish Jan 27 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 at 4:56

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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