It’s All in the Cards: Using Card Blocks Effectively

One of the more popular layout features used in our Apollo 2.o template is the card block. While a very useful way to provide information at a glance for readers, if misused it can create barriers for audience to process information, make decisions, and navigate to the next section of the website. Here are some recommedations on how to use cards properly and provide your audience a strong navigational experience.

Be Consistent in Card Layout and Content

The card block arranges similar content in a structured way. The cards are arranged as a grid on desktop monitors, and can be set to two, three, or four columns. On mobile devices, the cards appear in a scrolled view from first to last.  Cards can contain images, or just text. Text is arranged as a category title, a title, description, and link:

A 4 column card block example using pictures.
Example 1: In this example, 4 cards have been published in a four column view.

In this example, the card block has been used to help distinguish four different categories of academic programs in the department: undergraduate, graduate, continuing education, and high-school internships. This structure works well as a landing page, helping to highlight each primary role of a potential student and arranging content into categories that make sense for that group. The description further defines the audience and the purpose of the content. The text for the call-to-action link has been written to match the title of the card and the subject matter of the linked content, which is important for providing context to readers.

While effective, the ability of a reader to scan the text can be impeded due to the differences in the amount of text – headings are sometimes published on one line, and sometimes on two; descriptions are of different lengths; link titles are also breaking to a second line. In Example 1, these differences are slight, but if the text were not curated, the issues would be more apparent:

Example 2: A four column block with about 400% more text that the other cards.

In Example 2, the second card has 4 times as much text as the cards around it. Due to this, reduces the usability fo the cards around it; their links, which publish at the bottom of the card, are separated far from the rest of the text in the cards. It makes it more difficult for a user to scan each of the cards and to make comparisons across them. Card content should provide enough information to help a user make a decision on a selection – more detail should be reserved for linked page.

With some additional refinement of the text content, our initial example can be made to achieve consistency across all of the blocks. By using the category title, we can define the audience for each card, and be more specific as the type of degree or training offered:

Example 3: Rewriting card content and using category titles to help create consistency. These changes make the cards easier to scan and to relate concepts together.

Using Color With Cards

A common pattern we see admins use is alternating colors of cards to create a checkerboard pattern. This is primarily done to create an aesthetic visual effect. However, it does cause several problems for our audiences. Differences in color often indicate several things in a repetitive pattern, like cards:

  • It can denote an emphasis or difference between one card and another, which can create cognitive dissonance for the user, who might think one selection is more important than another.
  • It can indicate an active state versus an inactive state. This can make a visitor think that they have selected an item or on a related page for the card they think is highlighted.

The checkerboard pattern is also only visible in desktop views. As the site layout changes for mobile devices, the card order will change, and the differences in card colors make the likelihood a user will misunderstand the use of color more:

Example of alternating color cards and how they appear in desktop and mobile views.
Example 4: The left layout shows how the alternating card colors would appear on a desktop for a two column layout. On a mobile device, however, the alternating color layout will break, and cards will begin repeating colors in groups, which can be confusing to the site visitor, as it denotes some sort of emphasis or difference between the items.

Color changes can be used effectively to show a difference visually, but works better in a list where the differing items ends the card list. Color should never be used as the only element that differentiates the content – this is an accessibility issue, as people using screen readers or other assistive devices will not be able to discern this visual cue.

Example 5: In this card layout from the Web Services website, an alternating color is used to distinguish the support resource offered by the University’s IT department from those offered by the UF Health’s team. The category title is also used to describe the difference between the three available options; color is not the only element used for emphasis or navigation.

Use Cards Sparingly

The Apollo card block can show up to sixteen cards. This provides a great deal of flexibility for using cards; however, it does not mean that you should.

via GIPHY

When Apollo 2.0 first launched, card blocks were used to create directory listings where images were important to show differences between items. This included faculty directories, and lists of equipment available to schedule in various labs, where being able to see the item could help with recall for the site visitor when making selections. For these purposes, having a large maximum number of cards was ideal.

Over time, however, we’ve seen a number of administrators start to use cards is place of headings and paragraphs, or bulleted lists. Sometimes these lists are longer than sixteen cards, and admins will choose to publish multiple cards blocks in order to accommodate upwards of 32 cards.

Using this many cards can create difficulty for site visitors in viewing and reading content. As the number of options grow, the ability to scan and absorb the content becomes more complex, as the user has to scroll up and down to look at each option. For mobile users, this requires even more cognitive thinking, as those 16 or 32 options will now be shown one at a time:

Example 6: As the card block grows larger, it takes more thinking to look at each option, read the content, and to make decisions on which item to pick.

The use of images in this layout also adds to the cognitive load. Content admins should determine if photos are absolutely necessary in helping users be guided to the correct destination. In many cases, we use images as a marketing element; removing them can improve the navigational experience and make the site more usable. Instead of using cards for these layouts, switch to a bulleted list or headings with paragraphs to reduce strain on users.

We’re here to Help!

Do you have concerns or questions about your card layout? Web Services is here to help! We’ll be happy to meet with you to discuss and advise on your page layout and to help conduct testing to determine the best solution for your needs.

About the Author

 Avatar

Jeffrey Stevens

Jeff Stevens is the Assistant Web Manager for UF Health Web Services. He focuses on user experience, information architecture, content strategy, and usability.

Read all articles by Jeffrey Stevens