New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Donation progress bar UI/UX #54156
Comments
@imonish8 The issue has not been triaged yet so I would wait. My issue is not with the use of a progress bar but what an animated progress bar represents and how it is interpreted. Users may associate it with a loading state. The block would work better with a heading as well. |
I agree that a heading would be a good addition. I'm not exactly sure what that heading should read, but it should help explain what the percentage is for, and it should be an Also, can we get rid of the |
I would love to work on this if the issue has been triaged |
I think the things bbsmooth called out are good, but I think the animation should stay. It's meant to look like a loading state, because it represents the progress we have made toward our donation goal. I believe with better callouts in the text around that component we may be able to convey that properly? |
Just to be clear, this is also based on user feedback. The user thought the page was stuck loading. Not saying that the feedback from a single user is a great metric, but I do understand why someone might think that. If the progress bar was filling in, having that type of animation would be fine. The fact that it stays at the same progress for as long as it does (the user will likely never see it move in real-time) makes the animation more ambiguous. As I said, it would work better with a heading. But if we need to "label" a UI element to explain what its purpose is, then there might also be an issue with the UI element semantics. Personally, I'm also not particularly crazy about the look/style. Maybe just a simple gradient, going from red/orange to teal/green might work. |
Describe the Issue
The progress bar animation gives off a stuck-loading vibe. I'd suggest not animating the progress and just filling it in.
As mentioned in the forum thread this can be labeled better as well. E.g. "Progress toward donation goal" or whatever.
Affected Page
https://www.freecodecamp.org/learn
Steps to Reproduce
Expected behavior
Less potentially confusing UX/UI
Screenshots
System
Additional context
Forum: https://forum.freecodecamp.org/t/freecodecamp-wont-load/680791
The text was updated successfully, but these errors were encountered: