For good interaction, we designers should also design the focus state of the elements that can get focus. Most of us know, or at least can predict, the hover and focus state.
But I guess most of us confuse or misunderstand the active state. When we click a button, the active state occurs in a very short time. Actually, this state is the time interval when we interact with the button. So the active state is not the selected state.
To see it more clearly, hover over the button with the mouse and click the button and stay there. During the moment you click the button, the button is active. Keyboard users can see the same thing by holding down the enter key. How can it be designed? In the active state, no fancy designs are made as in hover.
The active state should not be designed as fancy as in hover. And again, a noticeably darker tone of the default state is usually used.
Sometimes the same color tone is used in the hover and active state example. These are the things I can talk about briefly about these three states. I think the differences become clear with the examples. Thank you for reading. Useful Resources:. Here is my other articles:. UX Planet is a one-stop resource for everything related to…. UX Planet is a one-stop resource for everything related to user experience. Sign in. UX Planet. Active, Hover, and Focus States for Designers. There was a book I always put off: Laws of UX.
I finally read it and realized…. UX Planet Follow. More From Medium. Dan Thompson in Perficient Digital Labs. Journey Mapping Learning Experience Design. Kim Ducharme. Depending on the device being used, these pseudo-classes become active at different points or not at all. When :focus is applied The :focus pseudo-class applies when an element is in a state that is ready to be interacted with, i. When :active is applied Finally, the :active pseudo-class applies during the period in which the element is being activated.
Combining :hover , :focus , and :active One thing you may have noticed is that the conditions in which each of these pseudo-classes can be applied are not mutually exclusive.
We can test this by only changing the background of the button if all three conditions apply. Click me, hold, then drag your mouse around This ability to combine the pseudo-classes can be really helpful for fine-tuning how we want to style the different states.
Order of styles - :hover then :focus then :active Due to the fact that these conditions can and frequently are applied at the same time, the order in which we add these styles is important. Ask Question.
Asked 10 years, 5 months ago. Active 10 months ago. Viewed 51k times. Improve this question. Pete Wilson Pete Wilson 8, 6 6 gold badges 34 34 silver badges 50 50 bronze badges. Add a comment. Active Oldest Votes. Improve this answer. Marc B Marc B k 39 39 gold badges silver badges bronze badges. Yes, I'd forgotten the click-then-move-the-mouse action.
Also the possibility of tabbing to a field. To avoid any confusion: "cursor" here means "caret". For completeness: Not all controls have an insertion point when they're focused. Links and buttons can also have focus. The answer you gave led me to a solution for a similar problem that included the "click and drag away". Using a:focus and a:hover were not sufficient.
I had to use "a:hover:focus" to ensure that I had both true! The different between :hover and :focus is: :hover when your mouse pointer is on the element.
Scribblemacher 1, 1 1 gold badge 12 12 silver badges 29 29 bronze badges.
0コメント