Simplifying Mobile Airline Seat Map using UX

A Simple case study on design and Limitations

When coming to airline Industry the seatmap is one of the key areas that is placed in ancillaries in the booking process. Most of the internet booking engines contain a seat map to be used by the passenger when they do online booking.

For all the airlines, their main revenue are the passengers who uses the airline to travel, and since the use of technology has been increased in a rapid manner throughout the globe, Internet Booking Engines are following up on the footsteps of having mobile responsive websites or native mobile applications.

So what do we know so far about the Airline Seat Map?

The Airline seat map contains following details

  1. The booking classes available in the flight ( First Class, Business Class, Economy class)
  2. The decks in the airplane (if the airplane is a double decker the seat map should show the lower deck and the upper deck separately)
  3. Where the wings in the airplane are located
  4. Where the washrooms, minibars and food courts are available.

These details are really valuable when comes to booking seats to passengers to select their preferences.

Why we have to use UX in the seat map?

In a mobile based IBE application the seat map should give fullest support to it’s users to make proper decisions when booking the seats for their journey. The access throughout the seat map should be easy and the amount of time the user spend on finding a location in the seat map should be less frustrating and should be quite interesting to do. Since there can be really long seat maps for airlines who have Boeing 747–400 with the passenger capacity of 524 must be able to deliver a user friendly interface that helps and guide the user to finding his/ her seat.

So lets get down to business, design the seat map

When designing the seat map in the skitch level the gaps between the seats must be in a considerable space since the application user might be using a smaller screen mobile phone. The icons that shows the different seats should be color coded in a way that the user can identify them properly.

The selected seats should display in a way that the seats are being selected, mostly a visual cue that has a different color gradient or animation would come in handy in these cases.

The seat map should show the deck as in lower deck or upper deck if the selected flight is a double decker flight it should allow the user to switch between the decks to do the selection of seats.

The user should be able to view the seats that are already being booked, inactive seats and available seats.

The seat map should contain other information such as washroom, service areas, location of wings, position of exit doors to give better indication to the user where they sit down when travelling in the flight.

If the user is booking seats for multiple members the user must be able to view the current seat location of an already allocated member by him/her and the seat number.

So lets do the visual design

In the visual design I am selecting two methodologies to maximize the user experience and to understand which method works perfectly to complete the task with less number of problems.

in a lengthy flight rather than showing all the seats that is associated with different classes, when user select the initial booking class, the screen will show only the selected booking class seats in the airplane.

Adding the magic

when come to the real deal the user have to scroll through the design in the mobile to get to a location. To solve that issue we can have a smaller version of the seat map as a scroll to move to the location of desire quickly and effectively. The user will have two functions in play to be used to do the booking.

Seat map quick view scroll

There are two different ways of managing the seat map.

  1. Using traditional on click allow user to select the seat
  2. Using drag and drop function to allocate user to the seat
Drag and Drop and Onclick seat booking

By adding a seat map quick view on top will allow the user to identify where he/ she is at when selecting the seat. The user can scroll the quick view and change the location of the seatmap quickly, making the discoverability easy within the seat map.

The function of Drag and drop and it’s limitations

The drag and drop is a quite useful and fancy functionality that works in web based desktop applications. It allows the users to select and add a certain set of data in a meaningful manner. In a drag and drop the user experience is much more satisfying to the user in use in desktop based applications.

When coming to seat map the user can select a passenger from the list as shown in the image and drag and drop the user to the desired seat. The user can separately add the users to different seats as well. When the user want to change the seat of the passenger that he/ she desire the user have to press hold on the seat the passenger being allocated and then the passenger becomes draggable inside the seat map. Then the user can drop the selected passenger on the preferred location.

Using the drag and drop function in a mobile application is not a bad decision. But the amount of multitasking should be limited since an object or in this case a passenger is drag and dropped into a certain location using a mobile screen. The touch sensitivity of the mobile device would come in to play. If the mobile device fail to do the drag and drop function properly it will directly affect the quality of the product and the functionality of selecting seats. Since not all the mobile devices have large screens the visibility after the passenger is selected from the basket to be added in to the particular seat the drop has to be quite accurate since the human finger might cover 4 seats in the range of the desired seat and would drop the passenger in a slight move of pressure towards the screen.

The function of traditional selection and it’s limitations

This function is much of a straightforward action. To add a passenger the user has to single click or double click on the desired seat and a popup will appear with the current passengers listed in the passenger details section and the user can select one passenger to be added to the particular seat. when the passenger wants to select a different seat the user has to double click on the selected seat and then action panel will appear and allow the user to can remove the passenger from the current selection. This will cause the user to do the seat booking from the start to the particular passenger.

What if the user wants to view passenger details?

A single click on the selected seat will show the passenger details as well as the booking class and the seat number details.

The amount of details would be changed according to the importance of the information that need to be shown on the seat map.

So what I would consider as the seat map function that would work well?

I would go with the traditional click and select function due to the nature of the design as well as the functionality that would reduce the issues when adding a passenger to the seatmap. But this would be a personal level perspective. I am always open to suggestions and discussions.