Suggestions for a touch UI used to book seats on a bus

Question

I am trying to design the layout for a Bus Ticket Booking App. User is allowed to choose the seats he wishes to book. Below is the layout provided to us.

I am looking for some inspiration and suggestions on how to reproduce the same on Android/iOS Apps in terms of an innovative and easy way for allowing users to choose the seats they wish to book.

Answer 1

Seat selection on mobile devices needs to fulfill several conditions:

• Key physical features of the vehicle, such as entrances/exits and the loo (if any) need to be clearly marked.
• All active areas must be large enough to be "pressed" easily.
• If the content doesn't fit the screen comfortably, there must be an indicator that more is available in some direction.
• The selection process needs to be equally usable in portrait & landscape orientation.

Therefore, here's what you need to do:

• Draw a basic outline of a bus around the seats with proportional representation of space (icons for seats can touch each other but the total space should be equal to the space of a seat plus leg-room).
• Increase the size of each seat icon so that it can be pressed without accidentally activating a neighboring one.
• Remove the conductor seat from the layout & the legend unless it plays some important role in the boarding/travelling processes.
• Increase contrast between background and elements, e.g. no dark blue text on black background.
• Remove seat numbers from unavailable seats to avoid any confusion or add an icon of a human shape (see United Airlines example).
• If there's no space on the screen for the legend, add a button to the bottom controls where you should have Back and Book the ticket that toggles the legend. Note: this isn't a best practice but limited screen real estate forces it.
• If all seats don't fit in one screen, apply a gradient fading to the edge where more seats are available to cue for scrolling.
• Make sure that landscape layout is usable.

Examples:

United Airlines seat selection chart. Notice wing location, real size proportions, and the occupied seat icon.

Potential seat selection mock-ups (portrait & landscape respectively and not to scale):

Mock-up for horizontal scrolling affordance:

Answer 2

Think about what influences a passenger's decision process when they book a seat. Which factors influence their choice?

• Window seat
• Isle seat
• Emergency exit
• Space for wheelchair
• Proximity to toilet
• Proximity to travel partners
• Etc ...

Personally unless one of these factors is relevant, I don't care where I sit - so having the seat chosen for me would provide a better experience.

I'd suggest thinking laterally. You don't need to stick to a graphical layout to allow your users to achieve their goals. Departing from this traditional format might even offer improvements.

Answer 3

Here's my suggestion:

• Show only 1/2 the amount of seats the bus can cater. This way, the user will have a bigger 'seat' button to click on. Users can scroll up/down to view the seats.
• Have the legend displayed out of the seats screen; however do have it shown always at the top/bottom of the screen.
• Provide some indicators where the features of the bus are. i.e. Doors, emergency exists, wheels, etc.
• Provide (realistic) scaled representation of what the customers can expect in terms of size. (The aisle area seems to be like 3 seats width in your picture)
• Use appropriate colors (depending on your customer demographics, audience culture) to show the different states of seats booking (In my cultural context, not available should be red, etc).
• You probably need to provide more information such as the bus service number, routes, etc. to provide the context of what the user is booking for.
• And most important of all, you should have a 'book it' button to allow reservation.

Answer 4

If you're still at the research phase, consider including in your web convention survey http://seatguru.com by Tripdvisor.

Users can search for a flight> when the flight appears in results, the plane is presented in an illustrated top level view> users then mouse over (impractical for iPad) seats for specific information about that particular seat. Info includes proximity to a toilet, is a TV screen in a head rest, class type and other useful info. There's also a handy inflight amenities key with clickable icons providing related details.

Some of Seatgurus features could translate well into your app.