search

GDQuest / learn-gdscript

Learn Godot's GDScript programming language from zero, right in your browser, for free.
https://gdquest.github.io/learn-gdscript/
Other
2.07k stars 153 forks source link

Confirm Resetting Progress, confusing button colors #346

Closed duianto closed 2 years ago

duianto commented 2 years ago

Describe the bug

This is the same button highlight issue as: well done message, keyboard select, incorrect button highlight #291

But for the pop-up: Confirm Resetting Progress

To Reproduce

Steps to reproduce the bug:

  1. Go to https://gdquest.github.io/learn-gdscript/staging/ Or open the Windows application: learn_to_code.exe
  2. Open the Course Index
  3. At the bottom, click on the button: Reset Progress

Observed behavior

The button colors are confusing. The left button is green, it stands out, but it is not selected. The right button is white, the same color as the pop-ups text. In this case, it might be interpreted as deselected, but it is selected.

reset-progress-button-pressed

Pressing the left arrow key, results in: Left button is white, it is selected. Right button is grayish blue, it is not selected.

left-arrow-pressed

Pressing the Right arrow key, results in the same button colors as when the pop-up was first opened. Left green. Right white.

Expected behavior

It should be clear which button is selected.

Maybe this already has been fixed in another commit.

But the commit: improvement: give outline buttons a white outline when in focus https://github.com/GDQuest/learn-gdscript/commit/517e891b7d02ef04e6dbe0362c38da5680ff9a93 that fixed the issue: well done message, keyboard select, incorrect button highlight #291

Doesn't mention the scene: CourseOutliner.tscn

That scene seems to be where the Confirm Resetting Progress pop-up is defined. https://github.com/GDQuest/learn-gdscript/blob/4627a53dab3e2b1df1830dcbc65312f808c59d41/ui/screens/course_outliner/CourseOutliner.tscn#L101

Information about your device (please complete the following information):

NathanLovato commented 2 years ago

White is the selected button color throughout the app.

So seeing this, you struggled to figure out which button was selected?

duianto commented 2 years ago

So seeing this, you struggled to figure out which button was selected?

It's possible to figure it out by pressing the left and right arrow keys a couple of times.

But the green-colored button makes it look like it's the selected button, because it stands out as different from the rest of the pop-up.

To make sure that I'm not the only one that thinks it's unclear. Show someone else the first screenshot, and ask what they think will happen if they press Enter.

If they agree with my conclusion, then it's probably best to fix this. Because it's not a good idea to have a confusing UI when it comes to removing all progress.

Someone might accidentally press the Reset Progress button. Without intending to remove all progress.

I'll open a separate issue, with a suggestion to also add a confirmation pop-up, before all progress is removed.

A possible solution

Since white indicates that a button is selected.

Then the solution might be to replace the green color on the left button, with the grayish blue color that the right button has in the second screenshot. To indicate that it's not selected.

duianto commented 2 years ago

pycbouh said: https://github.com/GDQuest/learn-gdscript/issues/347#issuecomment-1046284771

The button for that popup was originally red to indicate that it's a dangerous operation. This should probably be restored.

That seems like a good suggestion. It would be more clear that the progress will be lost, if the left button was red when it's selected.