UI: State styles of card component

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.

©THE NEW YORK TIMES 1960

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.

Daily Prophet ©Harry potter

This is the final card component I designed and developed. Please check it out on the ?CodePen and play around.

Card state styles

Let’s dive into the state styles of the card component.

Contents

  1. Design Research
  2. Wireframing
  3. Prototyping
  4. Development
  5. Examples of other state styles
  6. 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:

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.

Hover state style ©Google design

Focus state style ©Google design
Active state style ©Google design

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!!!

Hover state style ©CSS-Tricks
Focus state style ©CSS-Tricks
Hover state style ©CodePen
Focus state style ©CodePen

We can also find some examples of the hover and focus styles as below:

Hover state style©Airbnb

Focus state style©Airbnb
Hover state style ©Medium
Focus style ©Medium

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.

Grouped elements & Individual elements

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

Grouped elements, ©Airbnb
Individual elements, ©Medium
Grouped elements ©Twitter

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:

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.

Wireframe

After discussing with the client, among those wireframes, we decided to go with the third card.

3. Prototyping

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.

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 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. ?

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.

  1. 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

.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.

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 @extendto 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.

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.

4. 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.

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.

HTMLElement.blur()

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

Social media icon — fill animation

Cart micro-interaction

Cart micro-interaction

Chips

Navigation

Navigation

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


? 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. ?

Thanks for reading,
please share it.
Related
Case study: web design focused on interaction.
Case study: web design focused on interaction.
interaction
UX/UI
web
CSS selectors cheatsheet & details
CSS selectors cheatsheet & details
CSS
selector
The story of editorial design for book ¹/₂: Cookbook
The story of editorial design for book ¹/₂: Cookbook
Print
Editorial