Empty States and Loading Screens Covering Every Interactive State and Accessibility Requirement

Design your empty state first. A screen that has no user data is the most likely moment a new visitor bounces, and it is the one state most prototypes skip. Empty states loading screens UI design guidance that works must define every state a screen can be in: first-use empty, user-cleared empty, loading, loaded-with-error, and offline. For each state, specify what the user sees, what the screen reader voices via ARIA live regions, and where focus lands. WCAG 2.2 requires a 4.5:1 contrast ratio for normal text and a 3:1 ratio for non-text components such as placeholder blocks. Failing those ratios on a dimmed mobile screen in sunlight is a failure mode that sends the user away, not to an error message they never read.

Empty states fall into three categories: first-use, user-cleared, and error. First-use appears when someone opens an app or site for the first time. User-cleared appears after a user has deleted all items. Error appears when data fails to load. Each demands a different treatment.

First-Use Empty State

Include a platform-native illustration (iOS SF Symbols 6 or Android Material Symbols 2024), a title of 30-60 characters, a body of 50-120 characters, and one primary action button. The action guidance must be a single CTA, not a list. The screen reader voices the title, the body, and the button label via an ARIA live region set to polite. Focus lands on the CTA button, not on the illustration.

User-Cleared Empty State

A user-cleared empty state follows the same layout but adjusts the title. Instead of "Welcome", write "You have cleared all items. Create your first one." The action remains the same. The screen reader voices the changed text and the button again. Focus returns to the CTA.

Error Empty State

An error empty state replaces the illustration with a non-text component that has a 3:1 contrast ratio against its background. The title states the problem: "Could not load your list." The body offers a retry button and a timeout feedback message: after 10 seconds, the button changes to "Try again later" or offers an alternative action. The screen reader voices the error and the retry option. Focus lands on the retry button.

A skeleton screen shows placeholders while data loads. Apple Human Interface Guidelines prefer skeleton screens over spinners. Material Design 3 specifies a circular indeterminate indicator with 4 rotating arcs and a stroke width of 4 dp. Use 3-5 repeating blocks to suggest the structure: a rectangle for an image, two narrower rectangles for title and body. The animation is a left-to-right shimmer gradient with a duration of 1.5-2.0 seconds.

Accessibility And Motion Preferences

Accessibility requires the prefers-reduced-motion media query. When a user sets that preference, the skeleton must display as a static placeholder with no shimmer. The shimmer gradient alone does not convey information, so the ARIA live region voices "Loading" on a polite setting. If the load completes within 0.5-1.0 seconds, suppress the announcement entirely to avoid flicker. A loading indicator displayed for less than 0.5 seconds causes visual flicker and screen reader interruption. Display it for at least 0.5 seconds, but never exceed 10 seconds before showing a timeout feedback option.

Progressive Image Loading

For progressive loading of images, use a low-quality image placeholder (LQIP) at 20-50 pixels wide, blurred. The LQIP loads immediately, then the full-resolution image replaces it. The ARIA live region voices nothing for the placeholder; it voices the alt text when the full image loads.

An error state is not a dead end. It is a decision point. Show a non-text component with a 3:1 contrast ratio, a title that names the failure, a body that offers a retry or alternative action, and a timeout feedback mechanism. After 10 seconds of loading without success, present a retry button and a link to a fallback action such as viewing cached content or contacting support.

Focus management is critical. When the error state replaces the loading state, move focus to the error title or to the retry button. Do not leave focus on a loading spinner that no longer exists. The screen reader voices the error via an ARIA live region set to assertive, not polite. Assertive interrupts the current announcement; polite waits for the current announcement to finish. An error that the user needs to act on should interrupt.

The offline state is a specific error variant. The screen reader voices "You are offline. Showing previously loaded content." The UI shows cached data if available, or a title stating that the content requires a network connection. A single retry button appears that attempts to reconnect. After 10 seconds without reconnection, the button changes to "Check your connection and try again."

The first-use state is the user's first impression. Show a platform-native illustration, a concise title, a brief description, and one primary action button. Progressive disclosure applies here: do not show all features at once. Reveal them as the user completes actions.

The screen reader voices the title and the button label. Focus lands on the button. The user taps or clicks it and the empty state transitions to the loaded state. If the load takes longer than 0.5 seconds, show a skeleton screen. If it fails, show the error state.

The failure case for first-use experience is a blank screen with no instruction. A user who opens an app and sees nothing but a logo and a spinner has no guidance. They close the app. The fix is the action guidance: a single CTA that makes the first step obvious.

Before: A blank white screen. No illustration. No title. A spinner in the center. The screen reader voices nothing. The user waits 10 seconds. The spinner stops. Nothing changes. The user leaves.

After: An illustration using Material Symbols. A title: "No items yet." A body: "Create your first item to get started." A button: "Create Item." The screen reader voices the title and the button label. Focus lands on the button. The user taps it and the empty state transitions to a skeleton screen showing 3 blocks with a shimmer animation. The ARIA live region voices "Loading your items." After 1.5 seconds, the skeleton screen is replaced by the loaded content. Focus moves to the first item. The screen reader voices the item title.

The difference is measurable: the before state has a 0% action rate. The after state has a measurable conversion to the first action. The WCAG 2.2 contrast minimum of 4.5:1 for normal text and 3:1 for non-text components is met in the after state. The before state fails because the spinner is a non-text component with no contrast guarantee.

WCAG 2.2, published 2023-10-05 by W3C, specifies Success Criterion 2.2.1 for timing adjustable. A loading state that exceeds 10 seconds must offer a retry or alternative action. Success Criterion 2.4.3 for focus order requires that focus moves in a logical sequence. When an empty state transitions to a loading state to a loaded state, focus must follow that sequence.

Success Criterion 1.4.1 requires that color is not the only means of conveying information. The shimmer gradient cannot be the only indicator of loading. The ARIA live region announcement provides the redundant cue. Success Criterion 1.4.11 requires a 3:1 contrast ratio for non-text components. The skeleton blocks, the loading indicator arcs, and the empty state illustration all count as non-text components. Measure the contrast of the block fill against the background, not the shimmer edge.

Material Design 3 specifies an empty state as an illustration plus a title, a description, and an optional action button. The loading indicator is a circular indeterminate indicator with 4 rotating arcs and a stroke width of 4 dp. Apple Human Interface Guidelines specify a single graphic, a concise title, a brief description, and one primary button for the empty state. For loading, Apple prefers skeleton screens over spinners and advises showing as much static UI as possible.

Both systems require the action guidance to be a single CTA. Both require the illustration to be platform-native. Both require the title to be 1-2 lines, 30-60 characters, and the body to be 1-2 sentences, 50-120 characters. Both require the loading indicator minimum display duration to be 0.5-1.0 seconds. Both require the skeleton animation to be a left-to-right shimmer gradient with a duration of 1.5-2.0 seconds.

The failure case is ignoring either spec. A Material Design app that uses a spinner instead of a skeleton screen violates the platform convention. An iOS app that shows a full-screen spinner with no static UI violates the Apple HIG. Users familiar with the platform expect the platform pattern. Deviating from it feels broken.

Designers test the happy path and forget the empty state. The prototype shows data. The user never sees the blank screen. The developer ships the app. The first user opens it and sees a white void with a spinner. That user closes the app and never returns.

The fix is to design the empty state first. Define every state a screen can be in: first-use empty, user-cleared empty, loading, loaded-with-error, offline. Specify what the user sees, what the screen reader voices, and where focus lands. Test every state with a screen reader turned on. Test every state with the prefers-reduced-motion preference enabled. Test every state with a 10-second timeout. If any state fails, the entire experience fails.