Introduction

    In the world of UX, “interruption” sounds like a bad word: it could imply user frustration, falling conversion rates, or negative NPS. Yet there are times when an interruption is a good thing: to communicate that a task was completed, a process ran successfully, an issue caused an error, or a test result indicates that a patient is at risk. In these cases, interruptions – whether big or small – are an effective way to get users’ attention.

    This page introduces Forge’s alert types and explains how to pair them with interruption components to notify and alert users when something happens that they need to know about.

    Key takeaways

    • Interruptions are meant to notify, warn, alert, prompt acknowledgment, or provide status updates to users.
    • Overuse or improper design can cause confusion or alert fatigue, so interruptions deserve careful consideration.
    • To design better interruptions, consider the message intent, map it to the right level of interruption, and then choose the Forge component for that level.

    About interruption design

    There are 3 key factors to good interruption design:

    1. The right information
    2. At the right time
    3. With the right level of intensity
    About interruption design

    If any of these factors are misaligned, it can cause unintended consequences for users, including alert fatigue. This occurs when an interface or user flow has so many warning messages or pop-ups that users are eventually desensitized, causing them to pay less attention or overlook key notifications. This is especially important in healthcare, because alert fatigue can affect patient safety.

    To craft better interruptions and prevent alert fatigue, your interruption design should be:

    • Appropriately interruptive: Match the level of interruption with the level of urgency. If it’s important for users to stop what they’re doing and take immediate action, use a Modal.
    • Informative: Interruptions should communicate what happened and suggest a solution, when possible. For example, an error message should explain the issue and provide a path to resolve it quickly, like a call-to-action Button.
    • Efficient: The content of the interruption message should be precise and brief. Use numbers, dates, and short phrases to help users understand the message quickly. Use Forge alert colors and icons to catch users’ attention and provide semantic meaning.
    • Noticeable: When possible, interruptions should be placed near the problem. Except for Lightbox and Modal, interruptions shouldn’t keep users from interacting with other elements on the page.
    • Multidimensional: Good interruption design uses a combination of color, placement, timing, frequency, and component choice to communicate effectively.
    • Consistent: Use visual and interaction patterns consistently across products for a clear user experience. For example, if one area uses red text and an alert icon to call attention to abnormal vitals, do the same in other areas. Using a different pattern (like a banner) for the same type of information could confuse or distract users.

    Designing interruptions

    When designing interruptions, think about what could go wrong (or right!) in your user flow. What messages should be communicated as interruptions?

    For each message, consider these factors:

    • How severe are the consequences of not responding to an alert: minor, moderate, or critical?
    • How quickly should users react to the message: no action required, follow up later, or immediate action required?
    • How long should the message be visible: a few moments, or until users take action?
    • What does the message apply to: is it general, or is it related to a specific part of the page?
    • Who will (or might) see the message: providers, staff, or patients?

    Interruption levels

    Once you’ve determined the range of messages your use case requires, consider how important it is that users see or interact with each one. Interruptions can be grouped and ranked by how disruptive they are; each interruption level is appropriate for a certain setting. Determine where each of your interruption messages fall on the scale.

    Interruption levels

    Forge interruption components correspond to an approximate location on the interruption scale. Use the interruption level that you determined for each message to help you choose the right Forge component.

    Interruption levels

    Interruption components

    Forge interruption components are built to notify, warn, alert, prompt user acknowledgement, or provide status updates to users. The table is sorted by how disruptive each component is, from passive to disruptive.

    ComponentDescription
    EmptyStateA notification that appears when no data or content is available
    IndicatorA small dot that draws attention to a new, unread, recently updated, or otherwise noteworthy individual item on the page
    BadgeA visual indicator that displays the number of new or updated items associated with an element on the page
    TooltipA small floating container that displays helpful text when users hover or focus on an element
    PopoverA floating overlay that displays information to help users complete a task
    StatusTagA pill-shaped container that displays the status, category, or another aspect of an item
    InlineAlertA non-blocking inline notification that displays a message and draws attention to a specific part of the screen
    Form error*A notification that draws attention to a problem with user-entered data in an input field
    BannerA notification or message that appears inline and notifies users of an issue or status that affects an app, page, or section
    ToastA temporary notification triggered by user actions or system updates that floats above page content before dismissing itself
    LightboxA large container that pops up over the page, forcing users to acknowledge or interact with its content (usually long content or multi-step workflows)
    ModalA small container that pops up over the page, forcing users to acknowledge or interact with its contents (usually alerts, confirmation requests, or very short forms)

    * Form error isn’t a Forge component, but it’s included with Form and FormField.

    After choosing a component for your message, use alert type and tone of voice to dial the strength of the interruption up or down.

    Alert types

    Forge has 4 alert types: Info, Success, Attention, Critical. Each alert type and its corresponding color should be used only as described below.

     Match the tone of your message to the situation, component, and alert type:

    • For informational messages, use friendly, helpful language.
    • For critical messages, be stern and direct.
    NameColorDescriptionUsageExample
    Info
     
    General tips and helpful information that might not require user actionHealth insights, an explanation of a Medicare abbreviation“PCMH stands for Patient-Centered Medical Home.”
    Success
     
    A confirmation message when a task or action has been completedAction completed, content saved“Your selections have been saved.”
    Attention
     
    An error or alert that the user should be aware of, typically requiring user actionMissing required fields, mild clinical warnings“Screening overdue”
    Critical
     
    Reserved for the highest risk and most severe issues, like patient safety or a business problem that could affect the customer’s financial healthModerate or severe clinical warnings, a financial issue that would result in lost Medicare payments“Conflict with patient allergy: ASPIRIN”

     

    For help writing messages, see Content.

    Product-specific interruptions

    These general guidelines aim to cover the basics for all athenahealth products. Ask your PO or another designer on your team if your product uses specific interruption patterns.

    In particular, teams working on clinical applications should refer to established interruption design patterns, such as:

    All teams are welcome to consult with athenahealth’s patient safety team about any questions, concerns, specific instructions, or additional guidelines related to patient safety.

    Resources