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
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.
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: