CodeforAustralia / school-finder

:eyes: Find schools by location
https://education.nsw.gov.au/school-finder
GNU General Public License v3.0
17 stars 7 forks source link

Confusion caused by icon colours #336

Closed Lilith-Palmer closed 7 years ago

Lilith-Palmer commented 7 years ago

Both the secondary catchments and SSP icons are green. Feedback from users (received by Kate) showed some confusion between them - eg 'are all SSP's secondary?'.

Lilith-Palmer commented 7 years ago

A simple fix would be to swap the icon colours for secondary schools and SSP's. We could also add a heading to the key - "intake zones"

techieshark commented 7 years ago

@Lilith-Palmer if we decide to go the route of changing the key label, we could fix #178 at the same time.

Lilith-Palmer commented 7 years ago

@techieshark true! I think we need to do both

techieshark commented 7 years ago

@Lilith-Palmer can you clarify how the colour swap helps? Thanks.

Lilith-Palmer commented 7 years ago

@techieshark swapping the colours would make the secondary icon and catchment the same colour

techieshark commented 7 years ago

@Lilith-Palmer ah! Thanks for the clarification! Yes I see how that could reduce confusion. I'll take a look at 2757ca861ece47174c0c94fd7bff9ce6f2775aea from #340 with this in mind.

techieshark commented 7 years ago

@Lilith-Palmer It turns out swapping the icon colours (for SSP and Secondary schools) may not be an ideal solution, due to the pesky issue of missing and malfunctioning cones. (This issue brought to you by the Counting Crows.)

Light spectrum showing blue and red further apart than green and red (src)

Specifically, 6% of men aren't going to pick out green very well because of missing (Deuteranopia, 1%) or malfunctioning (Deuteranomaly, 5%) green sensitive cones in their eyes. About 2% of men have problems with red. Blue-blind is possible but very rare compared to red or green blindness. [See 'Sources' below.]

For those 6% of men with Deuteranomaly or Deuteranopia, this means the green icons don't stand out as much as the red and they may struggle to see the difference between the two. (That's what I notice: I can tell that the colors are different, but red and green aren't as 'different' as say, red and blue.)

In School Finder, this is most problematic when for example you have searched for a secondary school but then you want to see primary schools around it. Shown here:

Secondary icon color changed to a greenish color (the former SSP icon color) with catchment kept as greenish

Those small primary school icons look like they could be a faded version of the secondary school colour.

Perhaps a solution that would work for more people is simply change the Secondary key and catchment colour to match the current Secondary icon colour. So use blue instead of green:

Secondary catchment fill changed to match previous Secondary school icon color

In case it is of interest, in the beginning we just had one catchment colour, until we needed to differentiate between primary and secondary catchments when both were shown. That colour was the kind of pink/red on-brand colour (@pixelhappy1 will remember this one, and there's an image shown there).

In addition or instead of switching to a blue catchment colour, here are a couple ideas:

1) It's rare that we actually show two catchments at once, so why not have the map key only call out the currently visible colour. If the catchment shown is a primary catchment, just show Legend with just Primary catchment and if we're showing a secondary, show Legend with just Secondary catchment and only show both when we're looking at a Community School which may have two different catchments.

2) We may want to consider a solution that works without colour. For example, a thick solid border around secondary school catchments and a thin dashed border around primary school catchments.

Would love to get your thoughts on this, @Lilith-Palmer and @pixelhappy1.

Sources: http://www.color-blindness.com/deuteranopia-red-green-color-blindness/ http://www.wearecolorblind.com/article/a-quick-introduction-to-color-blindness https://en.wikipedia.org/wiki/Color_blindness#Red.E2.80.93green_color_blindness http://www.opticien-lentilles.com/daltonisme/questions_answers.html

Lilith-Palmer commented 7 years ago

@techieshark some tidy work. I think we may have considered this when we were first working out the catchment colors. I think showing one catchment key at a time could solve the issue, but it begs another question - why show the key at all? Why not only have it appear for central schools?

techieshark commented 7 years ago

@Lilith-Palmer it may not be immediately obvious that the strange shaped colour around a school is the school's intake area. Might be good to make a version with and without the key and show it to people--ideally people who don't work on school related issues day to day--who haven't used School Finder yet and ask them to explain the things they see on the map (see if they say: "that's the school, and that's obviously it's intake area").

Lilith-Palmer commented 7 years ago

True @techieshark. Who do we know that doesn't work in education?

techieshark commented 7 years ago

@Lilith-Palmer roommates, friends, any random person waiting for coffee outside the Education building (offer to buy their coffee if they test out your app for a couple minutes), maybe parents at a school event, people returning books at the library.

techieshark commented 7 years ago

@Lilith-Palmer I just wanted to check in and see where we were at on this. Let me know if you have any updates. Thanks!

Lilith-Palmer commented 7 years ago

@techieshark no official updates yet, but I did have a conversation today with someone using the school finder - we were discussing something else (for which you can read all about in the new issue I'm about to create), but they immediately, upon reaching the map, commented: "why is the key a different color to the markers?"

Could be a bit crazy here, but could be pick new colors, that don't affect those with vision impairment, and update both the icons, catchments and key in one go?

techieshark commented 7 years ago

@Lilith-Palmer hmm. The key indicates the meaning of the colors used for the catchment areas. If we place a school marker on top of the catchment and both have the same color (e.g, "green on green"), then no one (color blind or otherwise) would be able to actually see the marker*.

Lilith-Palmer commented 7 years ago

Realllllllly @techieshark ? Primary schools have orange markers and a lighter orange catchment...

techieshark commented 7 years ago

@Lilith-Palmer yeah, you reported that someone asked:

"why is the key a different color to the markers?"

and I'm saying that it wouldn't work well if you didn't use different colors. Note how the marker kind of disappears, and it's just the border around the marker pin that allows you to even detect its shape.

orange-on-orange

techieshark commented 7 years ago

(Remember, the key is for the catchment / intake areas. So the key is supposed to match the intake areas, not the marker pins. Maybe that was causing the confusion?)