Open usethetics opened 3 years ago
Robbert
commented
3 years ago Brian Kardell shared on Twitter he did some interesting research on the 5 different variations of Tabs he found on the web: https://open-ui.org/components/tabs.research.markup/
usethetics
commented
2 years ago The beginning of a design rationale…
Instead of a background color that subtly changes (i.e. from white to light grey) depending on its state (active/inactive) both Den Haag’s and Logius’ tabs are indicated with a boxed underline.
In case of Den Haag tabs share a mental model with how anchor navigation has been designed and as such creates a consistent visual vocabulary. If an active tab is the only one gaining a (boxed) underline, it also allows users who might have difficulty distinguishing state by means of color alone to perceive differences in a tab’s state.
Furthermore it is easier to create more contrast between an active and inactive state if only the (boxed) underline needs a change in color; since no text is set on top of the underline, drastic differences in contrast can be applied.
Target area
A tab follows the overall guidelines for a minimum target area.
usethetics
commented
2 years ago nl-tab-background-color
nl-tab-hover-background-color
nl-tab-focus-background-color
nl-tab-active-background-color
nl-tab-color
nl-tab-margin-block-start
nl-tab-margin-block-end
nl-tab-padding-block-start
nl-tab-padding-block-end
nl-tab-padding-inline-start
nl-tab-padding-inline-end
nl-tab-border-start-start-radius
nl-tab-border-end-start-radius
nl-tab-border-end-end-radius
nl-tab-border-start-end-radius
nl-tab-font-family
nl-tab-font-size
nl-tab-font-weight
nl-tab-current-background-color
nl-tab-current-hover-background-color
nl-tab-current-focus-background-color
nl-tab-current-active-background-color
nl-tab-current-background-color
nl-tab-current-color
nl-tab-current-font-size
nl-tab-current-font-weight
nl-tab-current-indicator-color
nl-tab-current-indicator-height
nl-tab-current-indicator-border-start-start-radius
nl-tab-current-indicator-border-end-start-radius
nl-tab-current-indicator-border-end-end-radius
nl-tab-current-indicator-border-start-end-radius
nl-tab-disabled-background-color
nl-tab-disabled-color
nl-tab-disabled-font-size
nl-tab-disabled-font-weight
nl-tab-panel-background-color
nl-tab-panel-color
nl-tab-panel-font-size
nl-tab-panel-font-weight
nl-tab-panel-padding-block-start
nl-tab-panel-padding-block-end
nl-tab-panel-padding-inline-start
nl-tab-panel-padding-inline-end
Naam
Tabs
Link naar GitHub Discussion