How to make important unhighlighted tab more visible without conflicting with current layout and color scheme?

Question

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?

---

Answer 1

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

Answer 2

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

Answer 3

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.

Answer 4

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.

Answer 5

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.