I am designing a seat map in which different seats will be in different zones.

Each zone has a different price, so the zones are highly relevant to the user during seat selection.

However, because the seat map is built as a grid, I can't use lines or labels to demarcate the zones. I also can't use different icons to represent zones because I need icons to represent between different seat types (recliners, standard seats, etc.)

That leaves color.

In order to support colorblind users (and for the sake of selection feedback in general) I am planning to dynamically list the user's selections, along with the the corresponding zone surcharges on the bottom bar. enter image description here

Does this provide enough support for colorblind users to make an informed seat selection regardless of whether or not they can differentiate between the zone colors?

1 Answer 1


I'm not sure if it's just the mockup you provided, but using outlines is a good way to indicate selection as well. If you provide a contrasting outline for your selections, it should be visually clear which seats are selected.

Alternatively, adjusting your selected seats' light/dark value should help as well. If all of your unselected seats have a relatively lighter color (as it appears in your mockup), making your selected seats even darker than demonstrated in the mockup would provide effective contrast.

Another thing to consider if you have the screen space: It looks like your sections of "seat levels" (i.e. bargain, value, choice) tend to be mostly in rows. If you can afford it, you could consider adding a label to the side of the section. This would allow you to get rid of the legend at the top altogether and rely less on colors overall.

As an example (obviously it could look loads better if this weren't a wireframe...):


download bmml source – Wireframes created with Balsamiq Mockups

  • Unfortunately, it sounds like I won't be able to add shading or borders to the zone sections due to the way the layout grid is built. The issue isn't so much the feedback that a seat has been selected, but rather the feedback that they have selected a seat from a particular zone (and the price increase/decrease that results.) I am looking at the contrast ratios between the various colors to see if I can make the different zones apparent enough for colorblind users, but I don't want to rely on that exclusively if I can find an additional way.
    – Refe
    Dec 20, 2017 at 20:12
  • You could also show a running total in the footer instead of a [number of seats] [type of seats] list. Something like Seats: 2 @ $12 + Upgrades: 1 @ $1 = $25. This kind of seems like you might be trying to combine two steps of the process into one. This might fit better on an "order confirmation" step where you have more room to show a cost breakdown, if you're okay with making this step be just about selection. Dec 20, 2017 at 20:25

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.