One single button or two buttons

Question

I'm working on a transportation service. We offer 2 services:

• Buy a bus ticket, much like public bus
• Book a car, similar to Uber

We have a mobile app, and I'm having problem with one of the screens. The current design is as follow:

• The screen display all the scheduled car or purchased bus ticket.
• A button called 'Book' is fixed at the very bottom of the screen. When tapped, the app will show an action sheet with 2 options: (1) bus service (2) car service. There is also a small 'what are these services?' link behind the 2 option above, that will open a modal explaining each service in details.

The problem: Now one of the team members want to display both options in place of the 'Book' button. At the bottom of the screen will now be 2 buttons, stacking side by side: 'buy bus ticket' and 'book a car'.

Their argument is that it will save users a click to get to those options.

Our users tend to use only one of the two options. If they use the bus service, it's likely that they won't ever use the car service and vice versa.

What is your take on this? I have seen a similar question (One button or two?) but the context is different.

Answer 1

I would choose the 2 buttons approach, for these reasons.

1) The "Book" label gives the impression that you are booking a private ride service, more often associated with a personal car ride. It will be slightly inappropriate to say that you are booking a bus service assuming you will be sharing the bus ride other commuters.

2) As one of your team member mentioned, it saves the user a couple of clicks to reach their goals. The GoodUI team also conducted a similar research on exposing options instead of hiding them. You might what to read more to give you a better insight on actions that a user will perform repeatedly over time.

If your concern is to reduce clutter and simplify the booking process, I would probably include a settings page to set the preference of the booking button. Toggle between, 1) split, 2) Book Car Ride, 3) Buy Bus Ticket.

Alternatively you could stick to your choice of one button with generic labelling, but change it to "Buy Bus Ticket" or "Book Car Ride" based on the user initial selection. Also provide an option for the user to reset their choice.

Answer 2

There cannot be a clear cut answer until one can see the entire flow of the application , where is the user coming from where does the user go etc from the mentioned screen.

One Button

Pros -

No confusion , user knows what to do. Where to tap to go forward.

Cons -

Another screen , trust me more and more screens can frustrate the user. Popup screen to show the message explaining what each does ( popups are always a bad idea , until and unless the situation demands it ).

Two Button

Pros - If the user has used your app once he will know what each option is. If majority of the users ( since yours is an app ) will be using it for the more than once , it can have two buttons without confusion and the user will know where to tap. ( might cause confusion to first time users )

Cons -

I don't see much problem with having two buttons to be honest. If the layout and spacing ( the UI part ) is fine , then there is no issues at all.

My pick would be two buttons , one for bus and one for car ( an icon along with text on the button can help too)

Or instead of buy a ticket a better text would be to book a ticket

Hiding the available options are never a good idea.In case of one button user is unaware of the fact that there are two options available ( arguable in case of second time users ) . Whenever there is an option available show it on the screen and make it easily accessible.

Answer 3

My answer could be a litle of topic, but I want to share my thougts to this anyway. The first question is, what does the user want. Does she want to book a car od buy a bus ticket or does she want to get from location A to location B an choose the better service. To choose the better service she would have to know the time it takes an the costs for each option.

This said: I think two buttons with this information would be a good choice.

Answer 4

Considering your flow, I think a single button is the way to go.

What happens afterwards is the key.

You should be displaying the available options for both scenarios instantly. The sorting of the options can be adjusted based on the more common use cases.

Moreover, as a next step, you could create flows and UIs to suggest bus riders to try the car service and vise versa.

Answer 5

How about having two separate tabs, one for booking a car, another for buying a bus ticket. Both tabs would be laid out as similarly as possible. The button at the end would then say "BOOK CAR" or "BUY TICKET" as appropriate.

That way, the user knows which option they have chosen, but the UI is the same.

Consider what Google Maps does when you ask for directions from A to B. There are 4 buttons: car, public transport (where can you narrow your search down to bus or train), walk, and cycle. Each button presents the recommended route and alternate routes, and you can toggle between the views.

The user knows which mode of transport they want to use, so they make the choice at the beginning of the process, instead of at the end of the process - but if they change their mind for some reason, they can always switch to the other tab. If they do this, the app should retain the info they have already entered (start time, start location, end time, end location, number of passengers, etc).

Answer 6

We are having a similar problem. If you just have two options, then two buttons is better, but any time you have options, they will always increase in number with time, so consider that you have N options instead of 2, and having N buttons starts to become ridiculous as N gets larger. I would segregate the options from the actual action button so that no matter how many options get invented in the future, you can add them on without affecting the action button, and the user will always know they just have the one button that actually submits the order.