System Status. Usability Principles by Craft Innovations (#7)

System Status explains how clear feedback keeps users oriented, confident, and in control of digital product flows.
  • #Article
  • 12 min read

Digital products constantly perform actions in the background, from sending requests and loading data to processing transactions and moving users between states. Users don’t need to understand these processes in detail, but they do need to see that something is happening.

When system feedback is missing or unclear, uncertainty appears. Users hesitate, repeat actions, or leave flows that were technically working as intended. The usability issue is rarely complexity. It’s the absence of clear communication.

The system status principle addresses this gap by making current system activity visible. It helps users understand what’s happening and decide what to do next. When handled well, system status fades into the experience. When it isn’t, it turns into friction, errors, and lost trust. In this article, we’ll look at 12 examples of system status in UX design.

Core aspects of System Status are:

7.1. Users should know whatʼs happening 

7.2. Users should understand why things are happening

7.3. Users should know what will happen next

7.4. Users should understand their location 

7.1. Users should know whatʼs happening

Knowing what’s happening means understanding the current state of the interface at the moment of interaction. Users should be able to tell whether an action has been registered, whether a process is ongoing, or whether a state has changed.

This feedback should appear immediately and without requiring interpretation. If users need to click again to check the current state, the system status has already failed to communicate it clearly.

Tips to Make System Status Visible

  • Provide immediate system feedback on user actions, without delay.
  • Use clear, concrete states (added, unavailable, processing).
  • Communicate restrictions before interaction, not after.
  • Update system feedback dynamically as conditions change.
  • Keep status messages close to the element they refer to.
  • Avoid messages that require users to infer system behavior.

Project: J.Crew, eCommerce site

Platform: Desktop

✅ The size selector shows availability before interaction. Sold-out sizes are visually disabled, while low-stock options display an “Only a few left” label. The user understands the state instantly, without needing to test the interface through clicks. A perfect example of usability in action.

Unavailable sizes are dimmed and clearly separated

Project: NatureBox, eCommerce site

Platform: Desktop

✅ A persistent banner shows how much more the user needs to spend to qualify for free shipping. As items are added, the message updates immediately, reflecting the current cart state and clarifying the next possible action.

Top banner shows amount left for free shipping

7.2. Users should understand why things are happening

Knowing that something went wrong is not enough. In many cases, users also need to understand why it happened. Without that explanation, system behavior feels random. And random behavior quickly breaks trust.

This is especially critical in products that deal with money, identity, or access. For example, when an action is blocked or fails, users immediately question whether the issue is temporary, user-related, or caused by the system itself.

Clear explanations help users make sense of the situation. They reduce frustration. And they prevent unnecessary retries or support requests.

Tips to Explain System Behavior

  • Explain the reason, not just the outcome.
  • Avoid generic error messages that hide the cause.
  • Connect the explanation to the user’s last action.
  • Be specific about what went wrong and what didn’t.
  • If possible, suggest a clear next step.
  • Use plain language. Avoid technical or internal terms.

Project: Revolut, digital banking app

Platform: Mobile

❌ In this example, the error message “Something went wrong” provides no useful context. Users don’t know whether the issue is related to connectivity, account status, or a temporary system problem. As a result, they are left guessing and retrying without direction. This kind of message shifts the burden of understanding onto the user.

Generic error message doesn’t explain the issue or how to fix it

Project: Rainbow, mobile wallet and payments app

Platform: Mobile

✅ The app explains that the issue is caused by a connection problem and mentions a possible outage. It also suggests what the user can do next: try again later or contact support. The reason is clear, and the system behavior feels intentional rather than broken. The user may still be blocked, but the situation makes sense.

App explains the possible error cause and offers support contact

Project: Uber, on-demand ride-hailing app

Platform: Mobile

✅ During sign-in, the app clearly states the reason for the error: too many requests. This explanation sets expectations and prevents repeated attempts. Users understand that waiting is part of the process, not a mistake. 

Sign-in error clearly explains the reason

Project: Revolut, digital banking app

Platform: Mobile

❌ The interface shows that the transaction failed, but it doesn’t explain why. Instead of a clear system feedback and reason, users are prompted to “write to chat” via a low-contrast link that’s hard to notice. The transaction status itself is also difficult to scan, making it unclear what exactly went wrong. 

System Status Revolut - 7.2.4.-users-should-understand-why-things-are-happening

7.3. Users should know what will happen next

Understanding the current system state is not always enough. In many UX flows, users also need clarity about what will happen after their next action. Without that, even a working interface can feel uncertain or risky.

This becomes especially visible in multi-step processes such as transfers, publishing, booking, or content creation. If the next outcome is unclear, users slow down or hesitate before moving forward. Not because the flow is complex, but because the future state is unknown.

Clear system status should set expectations in advance and help users understand what comes next before they commit.

Tips to Clarify What Happens Next in the Process

  • Make upcoming steps visible in multi-step flows.
  • Explain outcomes before users confirm irreversible actions.
  • Show progress and future states, not just the current one.
  • Communicate time-related expectations clearly.
  • Surface next actions immediately after a step is completed.
  • Avoid buttons or confirmations that hide their consequences.

Project: Revolut, digital banking app

Platform: Mobile

✅ When creating a payment link, the app displays transfer tracking with clear stages, such as link created, link shared, and payment received. Users can see where they are in the process and what will happen next, which reduces uncertainty during waiting periods.

Payment status is clearly shown during the transfer

Project: Airbnb, travel accommodation marketplace

Platform: Mobile

✅ After completing the final step of listing creation, Airbnb presents a clear “What’s next” section. It outlines upcoming actions, including setting availability, adjusting settings, and preparing for the first guest. The flow continues with guidance instead of ending abruptly.  

Final step clearly shows what comes next

Project: Instagram, social media app

Platform: Mobile

✅ When a user attempts to leave the story creation flow, the system explains the consequence of that action. It clearly states that going back will discard changes, allowing users to decide before the action takes effect.

Message clearly shows what happens when going back

7.4. Users should understand their location

Users should always know where they are within the system and within the current process. Not in abstract terms, but concretely: which section they’re in, what step they’re on, and how far they are from completion.

When location cues are missing, users lose orientation. They hesitate, backtrack, or abandon the flow because they’re no longer sure what context they’re in or how they got there. This often happens even in otherwise well-structured products.

System status alone is not enough here. Users also need a sense of control. They must clearly see options to go back, skip ahead, or safely exit without losing progress. Avoid forcing users to infer their location from content alone.

Tips to Make User Location Clear

  • Use clear page or screen titles that reflect the current context.
  • Show progress indicators in multi-step flows.
  • Highlight the current section in navigation menus.
  • Keep navigation patterns consistent across screens.
  • Make backward and exit actions predictable and safe.

Project: BCU Financial, financial services website 

Platform: Corporate website (Desktop)

❌ In this example, the site does not use clear page titles that indicate where users are within the site structure. As a result, users may know what content they’re viewing, but not how it fits into the broader navigation. This makes orientation difficult, especially when moving between sections.

Credit union site lacks page titles to show user location

Project: Strava, fitness tracking app 

Platform: Mobile

❌ During onboarding, the app does not show a progress indicator. Users can’t tell how many steps are left or where they are in the process. This lack of location awareness makes the flow feel longer and less predictable than it actually is. 

Onboarding has no progress bar, leaving users unsure of the steps

Project: Baymard Institute, UX research and benchmarking platform

Platform: Desktop

✅ On long-form articles, a sticky content menu shows the reader’s current position within the page. Users can see which section they’re reading and jump to other sections without losing context. This keeps orientation intact, even in dense content. 

 

Link copied to clipboard