# Are there common standards for aviation graphical user interfaces?

I'm searching for graphical user interface in aviation guidelines. Yet I miss the correct terms and I don't really know where to start.

Let's take an example:

• what's the meaning of the green color?
• what's the meaning of the pink color?
• is the color code regulated?
• is this look (color, fonts, layout) regulated globally or does this vary by airplane type?

I guess that's a bit of a naive question but I gotta start somewhere.

A bit more Background: I'm a graphic designer. I have to create a web-interface for a national air rescue service. They want the look and feel to be as aviation specific as possible. The web app won't be used in the airplane itself so it is not regulated and it provides non-critical services.

One thing is that the interface should look cool and "techy". But on the other hand I don't want to use colors or layouts which are either very regulated or have a highly specific meaning.

• You may look at §5.8 of AC 25-11 which is related to EFIS (also HFDS). In this case, green is for data that are "set", magenta for "targets/goals/objectives". 167 kt is the target speed for the autopilot/autothrust (currently 173 kt). Baro 1700 means the "decision/descent height" has been set by the pilot to 1,700 ft and is measured using the barometric altimeter (not the radar altimeter). – mins Jun 27 '17 at 12:23
• Just to know: How much are you into aviation? Have you ever had something to do with it or are you completely new? – Noah Krasser Jun 27 '17 at 12:26
• @NoahKrasser I'm a total noob. But as a interface-designer I absolutely love cockpit photographs. – KSPR Jun 27 '17 at 13:06
• @Thunderstrike Maybe; the OP does ask about both specific details (colors) and general standards so there's certainly an argument there for splitting it. The question is quite broad as it's currently written, which is one reason I edited the title: to try to make it a bit more focused. – Pondlife Jun 27 '17 at 13:13
• @Pondlife I think part of the reason I'm being picky is that I think people have a tendency to close new questions as duplicates and link to answers that never quite go into the detail they should :) 'overly' focusing it here as a specific question/situation might to improve the quality and detail in the long run. – Thunderstrike Jun 27 '17 at 14:16

I think your best bet might be going through the Instrument Flying Handbook [PDF, Large!] by the Federal Aviation Administration. It has plenty of nice graphics, if you're fine with a lot of other irrelevant stuff in the document. There's also the Chapter 8, Instruments, of the FAA Pilot Flying Handbook [PDF], which is a bit more compact.

I'm not sure there are any exact specifications how these things have to look. I suspect the minimum requirements are given in the certification specifications, and how they are then presented may be up to the manufacturer.

For instance, in EASA CS-23.2600B:

The applicant must install flight, navigation, surveillance, and powerplant installation controls and displays so that a qualified flight crew can monitor and perform defined tasks associated with the intended functions of systems and equipment. The system and equipment design must minimise flight crew errors, which could result in additional hazards

I'd interpret "minimise flight crew errors" to not do anything overly ambitious with the instruments that deviate from the norm, i.e. what everybody else is doing.

In EASA CS-23.2610A:

Each aeroplane must display in a conspicuous manner any placard and instrument marking necessary for operation.

It does happen that this stuff can be different- while the military is generally more flexible, the U-2 reconnaissance aircraft has a speed indicator that goes the opposite direction.

• Thanks for those pdf's that's what I was hoping for. I'll dive into it :) – KSPR Jun 27 '17 at 12:33

There are no regulations on what color something has to have as far as I know, but of course, a good color usage is a key part of every good and modern avionic.

Maybe you need some terms relevant for you:

• EFIS for Electronic Flight Instrument System That's in general the name instruments that are displayed on a screen instead of steam gauges.
• PFD for Primary Flight Display This is the thing on the picture you posted in your question (From a Boeing by the way). It has all information regarding the planes position in the room and a bit more.
• ND OR MFD for Navigation Display or Multifunctional Display Those displays are usually located next to the PFD and provide the pilots information about the position on a map, a radar and so on.
• EICAS/ECAM for Engine indication and crew alerting system/Electronic centralised aircraft monetoring (system) Those screen are, on small planes integrated into the MFD and on big planes in the middle of the cockpit. They provide the captain with information about the engines and the state of the whole plane.

That's just some terms you can research further on. There are usually thousands of pages about those systems available. Of course also a lot on the color codes.

• is this look (color, fonts, layout) regulated globally or does this vary by airplane type?

It is actually. There are of course differences but only small. Compare a Boeing PFD and an Airbus PFD. They will look the same at the first look. And also in other EFIS like the Garmin G1000.

Some things about color used in the ECAM (Airbus):

• Level 3 Failures: red warnings, situations that require immediate crew action and that place the flight in danger. For example, an engine fire or loss of cabin pressure. They are enunciated with a red master warning light, a warning (red) ECAM message and a continuous repetitive chime or a specific sound or a synthetic voice. The chime can be silenced by pressing the master warning push button.
• Level 2 Failures: amber cautions, failures that require crew attention but not immediate action. For example, air bleed failure or fuel fault. They have no direct consequence to flight safety and are shown to the crew through an amber master caution light, a caution (amber) ECAM message and a single chime.
• Level 1 Failures: Cautions, failures and faults that lead to a loss of system redundancy, they require monitoring but present no hazard. Examples include the loss of DMC3 when not in use. Level 1 failures are enunciated by a caution (amber) ECAM message only (no aural warning).

Source

Traditional instruments have long used color, but lack the ability to change a color to indicate some change in condition. The electronic display technology of EFIS has no such restriction and uses color widely. For example, as an aircraft approaches the glide slope, a blue caption can indicate glide slope is armed, and capture might change the color to green. Typical EFIS systems color code the navigation needles to reflect the type of navigation. Green needles indicate ground based navigation, such as VORs, Localizers and ILS systems. Magenta needles indicate GPS navigation.

Source

That means you are free to use any color you want, but of course it's good practice to use the standards. And as graphics designer, I'm sure you know the mean of the different colors.

• RED (Often flashing) Warning - Immediate action required
• ORANGE/Yellow (Amber often used in aviation) Attention - No immediate action required
• GREEN Success
• BLUE Information

This is the way normal people in everyday-applications are used to understand color. In avionics, this is similar, however some colors are indeed used consistent across the industry and are reserved for specific events. More below:

## Analyzing a PFD (Boeing type)

I found this Boeing PFD with like everything displayed that can be displayed on a PFD. This shows the color codes used perfectly. I marked all different elements in a specific color:

• MAGENTA The color used for an aim, the aircraft has to reach. For example the speed on top of the speed-strip at the left, the selected altitude at the right or the two bars in the middle, the flight director, which guides the plane how to fly, simplified said.

• GREEN Every variable that is set to a specific value, is displayed in green. For example on the left, the numerous numbers at the speed strip, are v-speeds for flaps, gear, rotation and so on. Or also the BARO, which shows the selected QNH.

• WHITE Things in white is just information. Like at the bottom right, there is only a reference to the standard QNH or at the bottom center of the artificial horizon you can see the radar altitude (RA).

• RED Red is as always the warning color. In this picture this is the two red, dotted lines at the top and bottom of the speed-stripe. They indicate minimum and maximum airspeed. Or the big PULL UP message, saying the pilot he has to pull up the plane because of immediate danger of terrain or an excessive sink-rate.

NOTE: Magenta is also used on navigational displays (maps and CDIs) to indicate a GPS-route, whilst green is used for things like VOR and ILS.

One thing is that the interface should look cool and "techy". But on the other hand I don't want to use colors or layouts which are either very regulated or have a highly specific meaning.

I don't know what your web-interface will be for, how critical the information is and by whom it will be used. However, because you want to let it look like an avionic I assume it will be made for pilots. As you said it's a rescue service, what looks time-critical for me. I would recommend a dark design, as every avionic with bright, saturated, well-chosen colors, to emphasize important parts. Combined with a modern monospace font, it is going to look terrific. (Interface designer is such a cool job :) )

• Magenta is also used as a "target" color -- heading bug (target heading), set altitude, desired course line on the map, etc. – Ralph J Jun 27 '17 at 15:11
• So good. Thank you very much for that thorough examination. – KSPR Jun 29 '17 at 7:03
• @KSPR Would you mind sending a screenshot or two if you are finished? I'm just too curious how it will look like :) – Noah Krasser Jul 25 '17 at 6:03

Alright so this is the thing.

This is a tool to see the amount of icing concentration on your route. The main idea is to circumvent those conditions mainly due to decrease maintenance cost (at least that's what I understood).

• So you can click on the map and create your flight path.
• This generates a profile on top of the view where you can see the conditions you are about to expect.
• on the right hand you can adjust the coordinates of ech waypoint for very precise data nerds
• on the upper right corner you can choose a forecast datapoint in the future

Unfortunately the map isn't in dark mode then it would be looking realy great but you can't have everything

The whole thing runs on the ipad an is used on flight briefings.

Voilà. Now you know what a interface designer does ;)

• This is the result of all your design work? Very nice! Thanks for coming back to post an update!! – FreeMan Oct 24 '18 at 12:59
• jep. that's just the first release. usualy in software development this is just the start. – KSPR Oct 24 '18 at 13:36
• Not bad for a first release! By the time you get to the 3rd or 4th rewrite, you'll really be rockin'! – FreeMan Oct 24 '18 at 13:48
• The only comment I would have would be to change all of the UI green for white/gray – selectstriker2 Oct 24 '18 at 20:46
• Awesome, thank you so much you didn't forget us. I was just checking out my answer again after some time and found your post. Looks cool, guess it's not Google Maps where theming the map to your desire is not a problem, regarding the dark mode. – Noah Krasser Nov 29 '18 at 15:57