Author Nicolas Hardie

Date January 2018

Categories IFE

GUI design for IFE systems – a designer’s view

From a blank screen at a desk in London to globetrotting on real aircraft, this article explains the design process for an IFE (In-Flight Entertainment) interface.

It starts with a blank screen and an idea, or rather, it starts with the ‘Sketch New Document’ screen which asks for format, resolution and DPI.

Typically, an airline requires many different screen resolutions based on the various ages of the aircraft’s In-Flight Entertainment (IFE) Systems throughout the fleet, across the different setups between classes, and sometimes additional Video Handsets (VHS). Our approach is to start with the top of the range (normally the highest resolution) and then adjust the designs for smaller or older displays.

Often, the redesign of a Graphical User Interface (GUI) comes following a new order of aircraft, new seats, new branding, a new livery or a combination of these. In the case of our work with Qatar Airways, it was the launch of the Qsuite – a revolutionary new Business class. For Kuwait Airways it was a major leap forward with new branding and aircrafts, and for Alitalia it was part of the broader brand update.

Modern look

A modern look might be one of the most challenging aspects of a GUI design as design trends are constantly evolving. As GUI updates are notoriously expensive, a new design needs to be timeless and avoid short-term trends. The goal? A GUI that outlasts the hardware.

When we look back at some designs that used to be trendy, we now consider them ugly – the overuse of drop shadows or fake 3D elements, for example. But characteristics like clear readability, user guidance and intuitive navigation are timeless.

Best practices

There are manifold ways to design a GUI, but the best practice for us has been to take guidance from popular platforms as the average user will already know how to use these interfaces.

We try and make the experience for the passenger as seamless as possible, so we lean towards designing UIs similar to Netflix, Amazon Video, iTunes, Spotify, etc.. iTunes is a good example of a timeless design which has needed few updates over its 15-year history.

Even though you and I can probably navigate through all these platforms naturally, another special challenge in GUI design is that you’re talking to every imaginable user -from the notorious crying babies to octogenarians, including passengers from all corners of the world, with all sorts of different cultural backgrounds.

As I took a flight from Doha to Kuwait City, I sat in a Qatar A350 next to a person who wanted to use his IFE but had trouble even starting it. The GUI was on the start screen which showed a smiling flight attendant, a welcome message and a start button. All text rotated through different languages. My fellow passenger, however, tried to start the experience by clicking everywhere but on the start button which got him frustrated and in the end made him give up on the IFE at all. This opened my eyes to a scenario which I would have dismissed as unrealistic if brought up in a meeting.

Alongside being easily understandable, the GUI also has to look great. It is a major branding touchpoint as the user will be very likely to engage with it for the duration of the flight. If designed correctly it can become a strong airline differentiator, make the company look modern and leave the passenger with a positive feeling. On the opposite side, a poor GUI can lead to frustration and a negative association with the brand.

So far we have established that our GUI design should:  

  • be timeless
  • take advantage of familiar workflows
  • take every possible type of user into consideration
  • reinforce the airlines brand

Creating

Once we are aware of the above we can start designing the GUI using the brand identity as a guideline, presenting the content in the most appealing way and showing the designs to the following stakeholders involved:

The airline

The airline is the client. They decide what content the GUI will have, what apps, what movies, etc.. They have their vision that we try to bring to life through our GUI, and they are the ones who can sign off the final designs.

The brand agency

The agency will ensure the design is in line with the visual language they have chosen for the airline. Here, every detail matters. Every typeface has a character and has been selected for it. The experience has to be consistent and seamless.

The developers

These are usually working for the company that manufactures the hardware itself – in most cases Panasonic Avionics or Thales. They will highlight technological limitations and functionality details.

The GUI designers (us!)

We bring in our expertise in UI/UX design and are in charge of putting together the client’s vision, the brand’s visual language, the technical functionalities in an appealing way, and design these from concepts to GRD (Graphics Requirement Document – the final document covering every detail in over 300 pages).

We all work closely together throughout the design process itself, and nothing beats face-to-face meetings. Being an international industry, it can get difficult to schedule a call with program managers based in California, designers based in London, developers based in Dubai and clients anywhere in the world. All participants need to meet in person for a 2-3 day workshop on the GUI to ensure expectations from all parties are met.

Meeting regularly with developers is crucial for us designers. We need to ensure that the assets we provide work for them. Developers will also give us the chance to check our designs in situ, which allows us to optimise them in further detail by seeing first hand how animations work on provided hardware capabilities or checking if more space is needed due to a set frame covering certain parts of the screen. We always try out different button sizes for different sized screens, going back and forth between concept and technical possibilities.

There are questions to cover off, such as how the handset and seatback monitors should interact with each other. So for example, if you navigate to movies on your handset but your seatback monitor is on the homepage, should it also go to movies or at what stage should they sync?

Since the VHS offers far less space, you will have to decide what will be reduced on VHS and how the D-Pad Navigation (handset buttons controlling the seatback monitor) will jump between elements.

How do we deal with different languages? Generally, we are taught that the eye travels from the top left of the screen to the bottom right so the important elements should be placed accordingly.

In Arabic, the screen is read from right to left, so we need to ascertain how changing the language will affect the GUI design and the extent to which we can accommodate this.

Going on air

Once we’ve made all these decisions, considering concepts and technical possibilities, client visions and design agency recommendations, we will find the right balance between contemporary and lasting design. There will be then ongoing support for the developers, several testing phases (with the final test being the ATP (Acceptance Test Procedure) on the actual aircraft) and in the end the first flight of the new GUI. Then we might learn from the experience, update it and also start adapting to other systems. Ideally we’ve produced something excellent together, because this is a part of the onboard experience that really counts. If so, we’ve made sitting in a closed cabin for many hours, shoulder-to-shoulder with strangers, a slightly better experience for a large number of people.

This, after all, is the main goal and the core of our motivation – improving the passenger experience.