Coundown section

Component Description#

A Countdown section can be helpful to push your website visitors to take action. If this element is used in a propper way it can help increasing important KPIs.

  • If a (flashing) countdown clock indicates that a sale is about to end it activates the powerful loss-aversion instinct in users, and the flashing is very difficult to avoid attending to.

  • Better signal to users is showing a countdown when something exciting is about to start

component preview#

XSSMMDLG
preview-xspreview-smpreview-xspreview-lg

1 Countdown headline#

  • Make sure the headline gives the user a first impression about what to expect.
  • Avoid headlines that only contain one word or are too vague to understand the content.

2 Counter#

3 Button#

Recommendations of Use – Do's and Don'ts#

Countdown section Do'sCountdown section Don'ts
  • Make sure to use countdowns to signalise the user that something exciting is starting.
  • Use concise headlines that are easily scannable.
  • Do not use countdowns to signalise something is ending as this can effect the user in a negative way. It activates a powerful loss-aversion instinct
  • Do not overuse the use of countdowns as they can become easily overwhelming to users
  • Avoid flashing countdowns as this is very difficult to avoid attending to. 

Source references#

nngroup.com/articles/animation-purpose-ux/