Here were some tips of how I designed the card component with more intuitive feedback from the user interactions.

Tip 1. Each action has a separate state style.

Open a modal / Add to cart

To do this, first of all, I divided the elements into two groups as per action. One group included all elements except the “Add to cart” button and it opens the modal component. The other group included only the “Add to cart” button to add the product to the shopping cart.

Tip 2. Elevation

Light theme elevation of Material design

Dark theme elevation of Material design

Change the background colour of the component to achieve the elevation, if it has a dark background colour. And change the shadow deepness, if it has a light background colour.

📚 Elevation of Material design

🕹Code example- Light and shadows / dark theme — Elevation

Tip 3. Change colour

Have different colours for each state on the elements such as font, border or background colour.

Change colour

Tip 4. Add micro-interactions to media (image)

Apply different animations such as scale, filter, ripple effect or transform.

Photo by Cristina Gottardi

Tip 5. Add transition-duration and timing function

It makes the transition more smoothly for the change of the state.

📚Transition -MDN

Slow mode 2s

Transition values

Tip 6. Keep blue colour as focus style

From my UX research, I found that the blue colour for the focus style was more noticeable and easy to scan than other colours. That is because users are already used to the blue outline as the focus style by the browsers default behaviour. Therefore it is not recommended to remove the outline (it is also important for the accessibility).

I, however, understand the colour plays an important role in the brand expression and if you chose to use another colour scheme for the focus style, make sure to use the colour which is accessible.

Accessibility Concerns Make sure the visual focus indicator can be seen by people with low vision. This will also benefit anyone use a screen in a brightly lit space (like outside in the sun). WCAG 2.1 SC 1.4.11 Non-Text Contrast requires that the visual focus indicator be at least 3 to 1. -MDN

📚 Give Your Site Some Focus! Tips for Designing Useful and Usable Focus Indicators

This is my thought, if you have any other opinions, please let me know. 🐠

Finding Dory ©Disney

🏃🏻‍♀️ Let’s move onto the development step.

4. Development

Once I finish the prototyping, I go to CodePen and validate my design through iterating coding experiments. This is the most fun step I always enjoy. I feel I give life to the component by developing it with real-code, especially with interaction effect such as transition, transform and timing function and so forth.

I saw the angel in the marble and carved until I set him free.

- Michelangelo

HTML

Card component HTML

As I mentioned above, I divided the card component into 2 groups in HTML.

CSS: 4 issues & solutions

While developing this card component, I faced 4 issues listed below with solutions.

CSS specificity issue with states

State order issue

If you write the state in this order such as hover → active → focus in CSS, the active state styles will be overwritten by the focus styles. That means the active state will also showing the focus state style due to the specificity.

When multiple declarations have equal specificity, the last declaration found in the CSS is applied to the element. -MDN

💡Solution

State order solution

① hover → focus → active

The order of the states should be hover → focus → active.

② Reset the focus styles in the active state

Following ①, then the active state will contain the focus styles. So we need to reset the focus styles in the active state.

State order solution

If you use SASS, you can create a placeholder for the reset styles and apply it to where it is required. You can use @extend to reference to the reset placeholder.

2. Border width issue

Border width issue

Can you spot a problem with the card component above? 👀

The positions of the elements ($10 and chips) which have absolute positions are moved. It is because the width of the border newly occupied the space of the card component and due to the box model, that caused this unwanted result.

💡Solution

Add two border properties into the default style also.

border-width: the same as focus state style

border-color: transparent

By applying the transparent border, we can initially occupy the border width and it will prevent the position’s swift as seen above.

.c-card {

border: rem(4) solid transparent;

}

Border width solution

Look at this!!! It is so silky now.

3. Focus style issue after click event

Focus style issue after click event

You might have faced this issue already. After the user clicks on a button or link, the focus state styles will be shown. Also, the browsers behave differently with the focus state issue. For example, Chrome still shows the focus state style when you click on both link and button whereas Safari gets rid of the focus state style for us.

The browsers behave differently with the focus state issue

*<a> is a link HTML tag.

⚠️ Don’t make a mistake like me 😅

To avoid having it, we might use a JavaScript blur method.

Solution

HTMLElement.blur()

const removeFocus = [...document.querySelectorAll('.btn-click')]; removeFocus.map(card => {

card.addEventListener('click', function(e) {

e.target.blur();

});

});

However, it is not recommended to use it because the .blur() will loose its focused position on the link, <a>, though it seems the <button> element retains the focused position. Thanks for the feedback, Thomas Rijsewijk and patrick h. lauke for pointing that out.

Moreover, W3C states

Content that normally receives focus when the content is accessed by keyboard may have this focus removed by scripting. This is sometimes done when designer considers the system focus indicator to be unsightly 😅. However, the system focus indicator is an important part of accessibility for keyboard users. -W3C

💡Consideration

Even though having no focus style on the click event provides a good visual effect😔, it is strongly recommended not to remove the focus using .blur() .

When we think about the behaviour of the click event on the link and button, the visual effect for the focus is not much important than considering the accessibility because it either:

navigates to another page (link): the focus is moving to the other page

or triggers an action (button) such as a modal: we anyway need to move the focus to the new component. The focus in the modal example can be found here at W3C.

At the moment, Safari gets rid of the focus style from both link and button natively when we click on the button which provides both accessibility and correct focus visual effect. 🙏 I hope to see this behaviour gets implemented in other browsers too.

If you have any other solution, please let me know. 😃

Thanks for the accessibility advice, Ryan Yu.

4. Examples of other state styles

Here are my hand-crafted UI components focusing on state styles. I’m very happy to share it with you (my latest 2 projects were both dark themes). Follow the links to see my work.

🕹 Social media icon — fill animation

Social media icon — fill animation

🕹 Cart micro-interaction

Cart micro-interaction

🕹 Chips

Chips

🕹 Navigation

Navigation

🕹 Navigation & Paragraph

Navigation & Paragraph

6. Wrap up

Designing different state styles will take time and need to put an extra effort. However, I believe it is worth it to do it because it will provide intuitive and delightful user experience as well as the accessibility to everyone with different needs.

🙏 Thank you so much for taking the time to read this case study.

📚Resources

🙏 Huge thanks to everyone who shared experiences and perspectives.

🕹Collection #State styles