UI Case study: state styles of card component with accessibility in mind
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.
Contents
- Design Research
- Wireframing
- Prototyping
- Development
- Examples of other state styles
- Wrap up
1. Design Research
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:
- default: The state with no user’s interaction.
- hover: It is generally triggered when the user hovers over an element with the cursor (mouse pointer) -MDN
- focus: It is generally triggered when the user clicks or taps on an element or selects it with the keyboard’s “tab” key. -MDN
- active: When using a mouse, “activation” typically starts when the user presses down the primary mouse button. -MDN
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
2. Wireframing
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:
- Think about the structure of the elements and their features
- Think about user flow and user interactions
In my latest project, I had a task to redesign a card component.
The task was… to add two features in the card component:
- Open a modal component to show specific information about the product when users click on the card component
- Add the product to cart when users click on the “Add to cart” (CTA) button
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.
3. Prototyping
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 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. 🐠
🏃🏻♀️ 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
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
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
① 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 @extend to reference to the reset placeholder.
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.
- 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;
}
Look at this!!! It is so silky now.
3. 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.
*<a> is a link HTML tag.
⚠️ Don’t make a mistake like me 😅
To avoid having it, we might use a JavaScript blur method.
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
🕹 Chips
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
- Google Material Design Cards Anatomy
- How and when to use the tab index attribute
- Style hover, focus, and active states differently
- Designing a focus style
- Quick tip: Never remove CSS outlines
- Techniques for WCAG 2.0 -W3C
- The A11Y Project
🙏 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. 🤩
🙏 Lastly, special thanks to Ryan Yu for guiding and reviewing this article, Ryan Yu is the author of <FrontEnd30 /> where I learnt many cool front-end techniques.
