Empty States

Every empty state, no matter the feature or its spot in a given workflow, should serve to onboard the user.

It should always tell them what’s missing and how to get it there, with a clear next step provided via CTA.

Container

An empty state can exist in a main interface or a smaller aside.

Main Interface: When the main functionality of a page is limited by the absence of content. Think of the library with no video, the Reports page with no data, or an exchange with zero history of swapping film.

Position

Main Interface: Center the text vertically and horizontally within the viewing area to clearly indicate the missing content affects the entire area.

Aside: Vertically align within that specific section. Text stays left-aligned.

Usage

Illustrations

We realize there’s likely a lot of negative space, but avoid an illustration purely for the sake of filling the empty state.

empty-states-illustrations-dont

Don'tdistract from the key message.

empty-states-illustrations-do

Douse your words to explain what belongs.

The only acceptable use of added context is skeleton content to help communicate how content would be displayed.

empty-states-skeletons-dont

Don'tuse it just to liven up the page.

empty-states-skeletons-do

Douse skeleton content for dense interfaces.

Levels

The empty state does not get its own level. Keep it in line with all other regions on that page.

empty-states-levels-dont

Don'tplace it higher or lower for added contrast.

empty-states-levels-do

Dofollow our stack order to find the right level.

For more about the stack order, check our level guidelines.

Single Empty States

You should only ever have one empty state per page. We want to make sure the user is properly onboarded and understands the clear next step before providing more context.

empty-states-single-empty-states-dont

Don'tshow them everything at once with no clear path forward.

empty-states-single-empty-states-do

Dofocus on the most important missing content.

Single CTAs

Just as important as prioritized empty states are prioritized CTAs. Only give them one clear next step in generating the missing content. Too many options and we’d fail at the main goal to educate.

empty-states-ctas-dont

Don'tgive them a list of things to do with no clear prioritization.

empty-states-ctas-do

Dofocus on the most logical next step.

Buttons

Ideally the CTA will always begin a workflow. If the workflow begins on that page, use our button component. If the workflow begins somewhere else, use our button link.

empty-states-buttons-dont

Don'thide the CTA as linked text or a button elsewhere on the page.

empty-states-buttons-do

Douse a button to clearly call out the action they can and should take.

Links

Links should only appear in the body and take the user somewhere to learn more. It shouldn’t serve as the CTA or begin a workflow of any sort.

empty-states-links-dont

Don'tframe it as a CTA in the middle of the body.

empty-states-links-do

Dogive them the option to check a tutorial for more information.

Make sure you open a new tab when taking the user to a new destination. We don’t want to disrupt the workflow in their quest for more info.

Exceptions

Multiple Empty States

There are some instances where two workflows have no clear prioritization. In this case, when one piece of content doesn’t have to precede the other, two empty states can co-exist.

Multiple CTAs

More often than not, there will only be one logical next step. If there are a number of ways to generate the same content, however, a second CTA is acceptable.

Search as CTA

If the actual workflow requires a search before anything else, the search can appear in place of the normal button. This is only if search is the actual first step.

Microcopy

Headline

Use the headline component. (For the aside, try a subhead variation.)

Try limiting yourself to 6-7 words. Clearly state the purpose of that section and what belongs in the empty state.

empty-states-headlines-dont

Don'tbe clever and risk confusion.

empty-states-headlines-do

Dotell the user exactly what’s missing.

Body

Use Uniform text. Size small should work for the aside.

Explain why they’d want to add that content and how to get started. Don’t go into too much detail—a max. of 100 characters should suffice.

empty-states-body-dont

Don'texplain the complete process of adding said content.

empty-states-body-do

Dobriefly touch on the benefit of adding content to that interface.

Linked Text

Our link guidelines cover most of the dos and don’ts, but empty states frequently call for the suggestion to contact Hudl Support.

If you want to include that link, spell out “contact Hudl Support” and link to the actual contact form. Do not give them the email address with a mailto: link. (And avoid typing out the phone number—think of the added steps!)

empty-states-linked-text-dont

Don'tgive them the email address to type in themselves.

empty-states-linked-text-do

Dotreat Hudl Support as a proper noun.

CTA

Our button guidelines have all the details.

One big thing for empty states: If a CTA already exists on that page or might appear once content is generated, make sure the empty state CTA mirrors that copy. The sooner they become familiar with a workflow, the better.

empty-states-cta-dont

Don'tmix up the language just to keep things “fresh”.

empty-states-cta-do

Doprovide consistent CTAs.