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