Change top button colors to increase contrast
david-a-wheeler opened this issue · 29 comments
Scorecard meeting 2024-01-08 revealed many weren't aware you could hide the met and N/A items. The hypothesis is that the buttons aren't obvious enough because they lack contrast. Add contrast.
The trend to using lower-contrast UI elements has made no sense to me at all.
Perhaps there should be a mention somewhere in the intro docs about the buttons.
Another hypothesis is that the distance between the buttons and the sections makes it less obvious that those buttons do anything to the information displayed in the sections. Another possibility is that they should be moved to directly above the Basics section.
The trend to using lower-contrast UI elements has made no sense to me at all.
I agree.
Perhaps there should be a mention somewhere in the intro docs about the buttons.
I think it's a losing battle to get users to read intro docs. Let's try to modify the UI for those who don't read any docs :-).
Then I think moving the buttons directly above the Basics section might be best. (Make it blatantly obvious that they are for modifying the display of the sections.)
Then I think moving the buttons directly above the Basics section might be best. (Make it blatantly obvious that they are for modifying the display of the sections.)
Hmm! I hadn't thought about that, but that's not a crazy idea. It expect they'll be easy to move, the question is "where should they go?"
directly above the Basics section
By that, I mean right above the blue bar that says "^ Basics" on the left side and 13/13 on the right side.
Got it, that makes sense. The template iterates over the sections, I think we could move it to just before the iteration. I still think changing the buttons to increase the color contrast would also be a good idea.
+1 to both
In addition, it may be useful to export markdown for pasting into an issue in Jira, Github Issues, etc.
A usability perspective on this project is that users aren't understanding the button to hide met and n/a items. Consider changing the text to "Show Remaining Tasks". This is different in that it describes the goal rather than the affordances.
A usability perspective on this project is that users aren't understanding the button to hide met and n/a items. Consider changing the text to "Show Remaining Tasks". This is different in that it describes the goal rather than the affordances.
I like this. Another wording might be "Show Incomplete Tasks Only"
"Show Incomplete Tasks Only" works for me.
Changing the text is a cool idea, we can do all 3 (change text, change color, move it).
Would suggest "Show only incomplete tasks" be better? It took me a moment to parse the text when "only" was at the end.
Would suggest "Show only incomplete tasks" be better? It took me a moment to parse the text when "only" was at the end.
Works for me
Changing the button color is easy, we can just use btn-primary instead of btn-info. Changing the text is also easy.
I can move the buttons down, but there's an oddity. One of the buttons reveals all details, and the first set of details are at the top of the form! We could move the buttons down anyway, or leave them there.
I still think we're better served by moving the buttons down to directly above ^Basics.
Hmm, the button text changes on press.
Let's just use term "completed criteria". So it becomes "Hide completed criteria" and "Show completed criteria".
"completed criteria" is not a user goal. The text needs to be aligned with the high-level goal.
Fair enough.
Should it be "tasks" or "criteria"? It's always been "criteria" before. E.g.:
"Show only incomplete criteria" / "Show completed criteria"
Changes made in PR #2098. It says "criteria" instead of "tasks", that can be changed of course :-).
Proposed new text (including the tooltips):
hide_met_title: Show only incomplete criteria (showing only unmet
and unknown)
hide_met_html: Show only incomplete criteria
show_met_title: Show completed criteria
show_met_html: Show completed criteria
"Show completed criteria" => "Show all criteria" ?
show_met_title: Show all criteria (completed, unmet and unknown)
show_met_html: Show all criteria
I didn't use "show all criteria". You're not usually showing all criteria, since that depends on whether or not the panel is opened.
Maybe "Show completed criteria" => "Show complete and incomplete criteria"?
+1
@lucasgonze - Adding markdown is proposed in this issue: #2094
It's now in staging, you can see an example here:
https://staging.bestpractices.dev/en/projects/34
Seem like a step forward?
I think it's an excellent improvement. (I think the buttons should be closer to the ^Basics banner than to the top matter, but it looks good enough as is to ship.)
I agree with Tony that the buttons should be grouped with the top of the ^Basics banner, but even with that this is a definite step forward.
Okay, I'll post to production. Thank you everyone!