4

I am working on an application with a seat booking UI. Are there visual standards, colors in particular, for conveying the type and state of each seat?

Examples of seat types: standard, accessible, first class.

Examples of seat states: free, reserved, not available.

I'd also be interested in ARIA standards for this scenario, if any.

Improve this question
6
  • What do other suppliers of the same kind of seating use ? Is there an existing pattern ?
    – PhillipW
    Commented Dec 12, 2020 at 22:03
  • I don't know of any pattern, hence my question. I'll add that I don't know any supplier that currently uses a visual interface. See it as something akin to hotel room booking but where you could pick your exact room.
    – Christophe
    Commented Dec 12, 2020 at 22:16
  • Maybe look at interfaces which book exact seats on planes, or exact seats in cinemas.
    – PhillipW
    Commented Dec 12, 2020 at 23:58
  • As for Aria: never rely on color alone to convey semantics.
    – Crissov
    Commented Dec 13, 2020 at 12:36
  • 2
    Use whatever colours you want, make sure there is a key to explain them. More importantly make sure that there is another way to identify the seat type and seat state. As for WAI-ARIA that is nothing to do with colour that is to do with additional labelling for assistive tech, do you mean "WCAG" instead? The best thing you could do to make it accessible is design it in black and white first, check you can tell what seat is what type and state and if it works add colours in that you like / match the brand (with the consideration of colour contrast of at least 3:1 for controls, 4.5:1 for text)
    – GrahamTheDev
    Commented Dec 13, 2020 at 14:26

2 Answers 2

Reset to default
1

I don’t believe there are any color coding standards for seats, but it doesn’t matter. If you are not aware of any standards, chances are many or most of your users aren’t either, so it wouldn’t do any good anyway. Any such color-coding tends to be quite arbitrary, so there aren’t any colors you can choose that, by themselves, users will naturally associate with a meaning.

Instead, rely on pictorial representations in the symbols for the seats. For example:

  • First class seats appear visually larger and “cushier” than standard seats (e.g., drawn with convex rather than straight lines).
  • Accessible seats may be overlaid with the International Symbol of Access.
  • Free seats are empty, reserved appear occupied, unavailable seats have an X through them (or are simply absent).

These pictorial representations should be backed up with text. If there is not enough space to label the seats, then show the text on mouseover and provide a legend for the symbols (and Alt text of course).

That said, you can use color to enhance your pictorial representations:

  • Darker and higher saturation colors suggests luxury, so make first class a deeper color.
  • Accessibility signs are associated with a specific shade of blue, so use that for accessible seats.
  • Assuming you want to direct the users’ attention to available seats, use more muted colors for reserved seats. Gray colors may be best, and may suggest the seat is “disabled” in the UI (i.e., not currently selectable).
  • A red X emphasizes “No, stop” more than other colors for unavailable seats (although it could draw unwanted attention to unavailable seats).

All this is more art than science, so it may be worth involving a trained and experienced graphic designer in the project, if you haven't already.

Color is very much a secondary channel of communication in most applications.

Improve this answer
1

The remarkable thing that we can make our product accessible is to bring a better experience to everyone regardless of ability, context, or situation. If you are using color alone, it will cause difficulty for visually challenged people (Colorblind). So please consider that aspect as well.

Improve this answer

Your Answer

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

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