stillhart created an issue (openstreetmap/openstreetmap-website#7067)
### Problem
# The CSS active state
When navigating the openstreetmap website, it sometimes feels "old" or
"unresponsive" due to the lack of css active states. CSS active states are a
simple intermediate state that shows the user that his action has been
registered. Once the action has been executed, bootstrap provides an always on
"active" state to show on which page/tab/state we are.
<img width="480" height="197" alt="Image"
src="https://github.com/user-attachments/assets/e7d64e02-7d69-4ac5-9b75-5602737b9fa5";
/>
As one can see in the video, I even had to enable this circle around click in
order to visualize the clicks. Active states do exactly that, they show what is
clicked and stay active while the mouse button is down.
This is likely entirely due to bootstrap which doesn't implement active states
all that often.
The openstreetmap-website doesn't use active states either. One of the few
examples seems top be here where hover and active are mapped to the same.
```
#edit_tab .btn-outline-primary {
@include button-outline-variant($green, $color-hover: $white,
$active-color: $white);
}
```
The situation gets worse with bad internet. Active states really help here. A
user might wait a long time, or click again, if the website doesn't respond to
the new state immediately. The active state helps here to confirm that the
input has been received and is being processed.
# The CSS hover state
Slightly related is the lack of css hover states, especially in the navbar
which I consider the most critical. Again, this seems to be related to
bootstrap.
Buttons do have a hover effect, but input fields don't.
## Further CSS features
Even further is the usage of focus and rings, but these are more messy to
implement in my opinion. The focus with `tab` seems to be often quite fine
though.
### Description
In general, "Adobe Spectrum" has some really good unopinionated guidelines and
examples on UI creation.
The most relevant one is this one about states:
https://spectrum.adobe.com/page/states/
This one about tabs which mentions the states at the bottom:
https://spectrum.adobe.com/page/tabs/
This one about search forms: https://spectrum.adobe.com/page/search-field/
I would propose to may slightly fine tune bootstrap to get these active and
hover states into navbar. Most buttons could get a soft hover state too. At the
same time, maybe even more defaults could be slightly improved.
I am not certain if drifting away that much from bootstrap is desired though.
Personally I'm a big fan of hover and active states. They make a UI feel really
responsive without interfering with the visuals too much.
Something I didn't get into, but some of these also improve the mobile touch
experience.
### Screenshots
_No response_
--
Reply to this email directly or view it on GitHub:
https://github.com/openstreetmap/openstreetmap-website/issues/7067
You are receiving this because you are subscribed to this thread.
Message ID: <openstreetmap/openstreetmap-website/issues/[email protected]>_______________________________________________
rails-dev mailing list
[email protected]
https://lists.openstreetmap.org/listinfo/rails-dev
