shading on hover - for tabs / panels etc.

[benkoshy]

It would be very nice if there was some type of signifier upon hovering - i.e. a slight color change etc. Am I missing something? Is there any way this can be done?

I looked through the retype repo and I could not find where this change could be made or suggested:

Without some shading or some other signifier, users might not realise that this is even a tab.

any advice would be beneficial.

chrs

[geoffreymcgill]

The blue underline switches to gray and the gray text changes to blue when the Tab is hovered. This is a somewhat minimal Tab user-experience, although relatively common design, for example in Material Design themes used in Android and other OS's.

Screen.Recording.2022-06-23.at.6.24.55.PM.mov

[benkoshy]

Agreed. I would argue that the signifier for that affordance isn't strong enough - notwithstanding the minimalist designs and the patterns of other frameworks. even the very lightest and slightest background shading on hover would more than suffice - if you still want to retain the minimalist approach.

There may be consequential complications which I am not privvy to with that approach.

I offer them as feedback, directly from a user - here's a work in progress docs site we're working on for the pagy open source project:

https://benkoshy.github.io/pagy/docs/api/frontend/

[benkoshy]

@geoffreymcgill

Same theme, but slightly different context. I feel the signifiers are a little too weak. The panels are not clearly distinguishable. At least on my browser (firefox), OS, my screen and operating system, and the lighting conditions in my environment. Changing screens makes a marginal difference.

A possible solution worth investigating: change background color on hover - a very light shading to serve the minimalist approach.

See here for a live demo

That's my two cents anyways.