This article was published in Prototypr – 10 Nov 2019
It was listed IBM Design, Codrops Collective #565, CodePen, CSS Weekly #387, Hey Designer, Designer News, Sidebar 15 Nov 2019, Web Designer Depot.
Hello, codesigners. ??♀️Today I would like to share my latest UI case study for the state styles on a card component. Providing different styles on different states such as hover, focus and active is critical because it gives the visible feedback to the user’s interaction and improves the overall user experience on the site. Throughout this case study, I am going to focus on the card component.
The card component is one of the most used components and it provides good use of real estate on the site as it efficiently displays a lot of information in an organised layout.
It can be seen in newspapers like below.
This card (ad or news) layout in the newspaper above is in a rectangular container and it contains title, subtitle, summary, image and so forth. In the digital world, the card component includes almost the same layout and its elements. Furthermore, if we add CSS styles to the card component, we can make the card component magical like the Daily Prophet, the newspaper in the Harry Potter.
This is the final card component I designed and developed. Please check it out on the ?CodePen and play around.
Let’s dive into the state styles of the card component.
Before I do the design, I follow those 4 steps:
Collecting information → Analysing data → Finding patterns → Organising ideas
From this research process, I found 4 different state styles for the card component:
I have researched more than 20 different card components from the real-products. Surprisingly, it was difficult to find websites having all/any of those three state styles.
Only Google design website has all of the state styles. For example, when users click (active state) on the card components, they can see the ripple interaction effect. Though in my opinion, it is a little bit hard to notice on a light background or image.
CSS-Tricks and CodePen’s card components are good examples in a dark theme. Also, when users hover or focus on the CodePen’s card component, extra information such as hearts, comments and view, will be shown. I love it!!!
We can also find some examples of the hover and focus styles as below:
Patterns: Grouped elements & Individual elements
From the research on the state styles, I found there are two kinds of patterns in the card component. The first pattern has grouped elements and the other pattern has individual elements like the image below.
The grouped elements pattern allows us to click on the entire card component whereas, in the individual elements pattern, we can only click on the elements inside the component.
Keeping these two patterns in mind helps me make my design decision for the card components.
*If you know any other patterns, please share with me. ?
Pattern examples
Some cards are very complicated, there might have many elements and many features (actions) in one rectangular card container: link, media, heart button, share button and so forth. Here are two things I keep in mind when I design complicated components:
In my latest project, I had a task to redesign a card component.
The task was… to add two features in the card component:
Additionally, this card includes an icon, media, title and chips. Following the details above, I drew the three wireframes.
After discussing with the client, among those wireframes, we decided to go with the third card.
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.
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
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.
Tip 4. Add micro-interactions to media (image)
Apply different animations such as scale, filter, ripple effect or transform.
Tip 5. Add transition-duration and timing function
It makes the transition more smoothly for the change of the state.
?Transition –MDN
Tip 5. 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. ?
??♀️ Let’s move onto the development step.
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
As I mentioned above, I divided the card component into 2 groups in HTML.
While developing this card component, I faced 4 issues listed below with solutions.
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
.c-card__cart-btn {
&:hover {
background-color: $primary;
border: rem(1) solid transparent;
color: $dark-gray;
}
&:focus {
border: rem(1) solid $link;
color: $link;
}
&:active {
background-color: $primary-dark;
border: rem(1) solid transparent;
color: $dark-gray;
}
}
① 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.
If you use SASS, you can create a placeholder for the reset styles and apply it to where it is required. You can use
2. 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.
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;
}
Look at this!!! It is so silky now.
4. 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.
*<a> is a link HTML tag.
?Solution
To avoid having it, we can use a JavaScript blur method.
const removeFocus = [...document.querySelectorAll('.btn-click')];
removeFocus.map(card => {
card.addEventListener('click', function(e) {
e.target.blur();
});
});
5. 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
? Chips
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.
? Huge thanks to everyone who shared experiences and perspectives.
? Any feedback or challenge
I would love to hear your feedback on how I can make this article better for everyone. Please leave me a comment below, Twitter or Linkedin. Please stay tuned and gives me loves(?) if you liked it. Thank you. ?
