How would I make this step by step taxi booking process more seamless? A few concerns I have:

  1. Is using swipe left/right good practice when using a wizard step by step UX element?
  2. The final page feels detached from the rest of the form, is there anyway I can make it all feel more "connected"?

Page 1

enter image description here

On the first page the user sets the date/time they want to be picked up. They can then swipe right to get to the next screen.

Page 2

On the second page the user sets their pickup/destination points. Furthermore they can select from one of the past bookings made if they want to replicate a pickup/destination point used in the past. They can then swipe left to get to the previous screen, or right to get to the next screen.

Page 3

enter image description here

On the third page, the user can edit their pickup time and pickup/destination points. Furthermore they can specify the estimated fare and available seats. Making edits bounces back the user to Page 1/2. But the changes to Available Seats/Estimated Fare can be done on here.

  • To clarify: is this user interface for me to enter a trip which I will make later this day, and for which I'm looking to pick up some passengers?
    – peterchen
    Jan 20, 2014 at 12:32
  • 1
    @peterchen It's for a taxi sharing application, so you book a cab for later on in the day and then specify how many spare seats you have available to allow other users to bid for seats in your taxi.
    – methuselah
    Jan 20, 2014 at 14:04

1 Answer 1


For your first question:
If you don't have any sliders in your form, swipe left / right is a modern and smooth variant to switch between screens.
But if you have some sliders on a form, it can be, the user want to slide the slider but change the page instead.
My favourite solution is to include both, buttons and swipe function. Especially the older generations aren't very familiar with the three points navigation (your points at the bottom of the page) and they also used to use buttons on formulars.
And all generations will book a taxi, so you need to fit your form for all generations.

And if you will add a slider anytime, then you should remove this function!

For your second question:
Your form is splitted into three questions:
1. WHEN the taxi should pick you up?
2. WHERE should it pick you up?
3. HOW MANY are you? HOW MUCH you think it should cost?

So the first two pages are nice. It have free space to avoid an information overload.
But I would add a third page which you can choose the Available Seats and the fare. So that you have an overview over ALL decisions you made.
In your current solution, the user sees on the last pages, there are his inserted information. So he just overlook the form and press the Book Button without recognizing the two additional buttons.
So I would make a solution with four pages:

Some additional thoughts:
First thought
On your second page, you have "Recent Bookings". Great function! But I wouldn't place it as a link.
When you want that the user will be able to choose recent locations he choose, I would save them as special locations and should be the first item which appears in the list.
I will show you in an example of the SBB mobile app (SBB is the train company of Switzerland):
Screenshot of SBB app
As you can see, I just typed "I" in the form and the first two results are marked with a star. These are the locations I already searched. It is extremly helpful to access quickly to my hometown (Interlaken). So I think this would be a perfect solution for your "Drop Off" field.

If you want to let the user restore a whole booking (Time, Pick on / off location, Seats etc.), then I would place a button on the first screen to avoid that the user will insert unnecessary informations.

But your currently placed link isn't placed very well. Because he will firstly fill the pick on and off place and just after he see, "damn, I had could restore it".

Second thought
You wrote

Making edits bounces back the user to Page 1/2.

If he bounce back to the first page, he must swipe again through the whole form? I know your form isn't that big, but it is a bad practice. Make a pop-up to let him edit the information, or let the user bouce back again if he's finished with editing the information.

I hope my thougths will help you to reach your target.

  • Format question: How can I make the screenshot smaller? Jan 20, 2014 at 9:19
  • 2
    at the end of the filename (but before the extension) add a 'm' (for medium) or 'l' (for larger). I'll edit your post so you can see how this works
    – JonW
    Jan 20, 2014 at 9:30
  • No Worries. We have a guide on our Meta site about how to streamline images and screenshots with more info.
    – JonW
    Jan 20, 2014 at 9:42

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.