Discounted price

When designing a product card there are multiple ways we can represent the price. I’m going to be focusing on the discounted price.

There are some designs that prefer showing labels:
Now $100 Was $200

Others like to enhance the information with the discounted amount or percentage of saving:
Now $100 Was $200 Save 50%

And finally there’s the case where no labels are used:
$100 $200

Accessibility Considerations

1. Do not rely on visual representation to convey a message

• Consider users with colour blindness. Use some kind of visual indication like strike through + font weight to indicate difference in prices.
• Use a high contrast colour even when using strike through, using a faded grey might not be visible for some users.
• Be mindful about the font in use: the strike through line can make some numbers to be misrepresented or unreadable.

2. Hidden texts

Even when not using visual labels for pricing, they should be presented in the page for Screen Readers.

This means they should be authored and presented in screen as hidden text (.sr-only or .visually-hidden)

For example the following code will be announced as "Was $200 Now $100" by screen readers, but will be visible represented as $200 $100

  
    <span class=”strikethrough”>
      <span class=”sr-only”>Was</span>$200
    </span>
    <span class=”sr-only”>Now</span>$100
  

Another way to achieve this effect is by using a mix of aria-hidden and sr-only CSS classes. This is considered more complex.

  
    <div class="price-group">
      <span class="sale-price" aria-hidden="true">
        <span class="currency-symbol">$</span>
        <span class="currency-value">200.00</span>
      </span>
      <span class="sr-only">
          Original Price: $200.00
      </span>
      <span class="strike-through" aria-hidden="true">
          <span class="currency-symbol">$</span>
          <span class="currency-value">100.00</span>
      </span>
      <span class="sr-only">
          Sale price: $100.00
      </span>
    </div>
  

The intent with this code is the same as before, hide the visual content from screen readers using aria-hidden=true and add text that will be only interpreted by Screen Readers using the CSS class .sr-only. Extra classes have been added only for visual representation: .currency-symbol and .currency-value.

3. Cognitive overload

When designing product cards, consider the information that’s is represented in the screen.
Too much information can lead to cognitive overload. Example: product image, product name, ratings, brand, price, discounted price, sale amount (%), colours available, ...

A listing page or a search result page most commonly show multiple results in a grid. When displaying all these product cards in a page it can be distracting for some users.

Compare and design for your best and worst case scenario. Remove the extra information that could be presented in other pages, for example the product detail page instead.