8

An email is sent out to users informing that the reviewers' comments for talk proposals are now available. The top of the page (with identifiable information blocked out) is shown below.

Next to the highlighted-white and highly visible "Proposal" tab there is a "Reviews" tab but its only indicated with small, dark-on-dark text. There's no additional visual cues that there are multiple tabs.

Whichever tab is active turns white and the other reverts to dark-on-dark text only.

Without changing or interfering/conflicting with the current committee-chosen color scheme, aesthetics and layout, what kinds of changes might make the now most-important feature on the whole page more visible i.e. impossible to miss?


PyCon TW 2022 proposal

3
  • 19
    Some answers have mentioned this, but that color scheme has pretty bad contrast, especially for people with certain types of color blindness. This should ideally be brought up with whoever is responsible for the color selection. The white text on the purple background is actually reasonably good, but the pink and lilac text on the side tabs is very bad (I’ve seen worse, but not much worse), and using blue text to ‘draw attention’ on a purple background is also pretty bad. Low contrast should only ever be a thing for disabled inputs, and even then should be handled carefully. May 9 at 13:50
  • 7
    @AustinHemmelgarn I have normal color vision, and I have to squint to read the "Reviews" label because of the low contrast. May 10 at 16:30
  • 1
    Can you make this color scheme versus contrast conflict discussable? If so don't avoid this, especially if coming up with an alternative is not ideal. If you can't discuss it directly, maybe it is possible to deliver your design with some explanation about the improvements you made. Even if that conflicts with the color-scheme and as long as you come up with the right reasoning.
    – jazZRo
    May 11 at 8:21

5 Answers 5

21

First, the contrast on the dark on dark text needs to be improved either way, for unimportant or important tabs.

Second, you may not need to highlight it at all. Often, as long as users are well-informed and can find the thing in an obvious location, they will quickly learn what to do. That is, you've contextualized them in the email; they know they're looking for reviews and it's in the middle of their screen so they're likely to find it.

Third, because of that, you could consider just having the email take them directly to the reviews tab. If that's the action you want them to take, then eliminate a click. There is definitely much to be desired in an experience where two tabs are highlighted in different ways for different reasons. That is to say, it's very hard to expect the user to say, "Oh, that colour means it's highlighted because I'm on it, while that colour means it's highlighted because I'm supposed to be on it." These visual cues are too broad to differentiate that way (to unskilled users) and will remain ambiguous.

But supposing you really need to highlight it and can't do #2 or #3 above. What are your options?

  • Do a lighter highlight, such as a thin white border with no colour fill or a lower-contrast colour fill than the other one

  • Add an icon to the tab text, such as an exclamation mark or asterisk or a floating arrow pointing at it

  • Establish and follow a consistent design for such cases, e.g. the text for an action you're supposed to take is always lime green

  • Include a modal popup directing the user's attention

15

Go back to your colour picking committee and tell them their scheme violates accessibility standards and to change it, toot suite as they say. That's why it's hard to spot.

https://webaim.org/resources/contrastchecker/?fcolor=2C65A2&bcolor=3F3E73

5
  • 5
    While your answer could be helpful, "go back and tell them" is not the right way to focus it.
    – Danielillo
    May 9 at 13:15
  • 4
    It's the only way to do it, trying to fix it with borders etc is avoiding the fundamental problem
    – mgraham
    May 9 at 20:22
  • 1
    TIL anglophones use "tout de suite" but spelled wrongly.
    – Puck
    May 11 at 12:47
  • 1
    @Puck I've never seen it spelled toot suite before. It's usually tout suite, but we do leave out the de.
    – Andrew Ray
    May 11 at 20:31
  • @Puck Could've been worse. They could have written toot sweet May 12 at 4:22
9

With so much restriction, the first thing that comes to my mind and eyes is to use some of the graphic resources already implemented in the design.

Avoiding the change of color in the text or the tab, which would be the most immediate option, the most outstanding visual resource is the white outline, already used in the separation with the content and in the yellow toast notification.

enter image description here

4

enter image description here enter image description here

A red circle with a number in it is an instantly recognizable indicator for "this many action items," and will never be interpreted as "this item is currently selected." In your case, I'd put the number of reviews. I suspect that red is so universally used for this, that your committee won't notice that it's not in the color scheme.

2

One problem I see (other than the colour scheme) is that you've got two sets of tabs:

  • Proposals / Edit Profile / Change Password (vertical)
  • Proposal / Reviews (nested under Proposals, horizontal).

It feels to me like Edit Profile / Change Password (and Log out) should be in an "Account" drop-down at the top-right, meaning that the Proposal / Reviews tabs are made more obvious.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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