7

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.

enter image description here

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.

Improve this question
1
  • 1
    If we've answered your question, you can select the best solution so that if anyone comes across the same problem in the future, they know the course of action.
    – dnbrv
    Feb 7, 2012 at 18:42

4 Answers 4

Reset to default
5

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.
united airlines seat selection

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

Mock-up for horizontal scrolling affordance:

enter image description here

Improve this answer
2
  • Do you always use Comic Sans for mockups?
    – fredley
    Jan 20, 2012 at 16:06
  • 1
    Haha. It's the default font in Pencil, which I use for low-fi mockups just to convey the point.
    – dnbrv
    Jan 20, 2012 at 16:27
5

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.

Improve this answer
2
  • 1
    I like this list of factors. 1 thing you could deduce from this is that it's not useful to display the seat number. That's only useful when you're on the bus trying to find your seat.
    – Rob
    Jan 20, 2012 at 15:21
  • @Rob: No, if not seat number then at least the row number is necessary. People have to remember where they are sitting without looking at the ticket.
    – dnbrv
    Jan 20, 2012 at 15:30
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.
Improve this answer
2

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.

Improve this answer
1
  • Thanks a lot. yeah i am still in research stage. I will go thru the website :)
    – Harsha M V
    Jan 20, 2012 at 16:00

Your Answer

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

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