A coworker, Chris, came to me with a problem that is forever a choice. Cancel then button or button then cancel.
The NN Group says consistency is essential https://www.nngroup.com/articles/ok-cancel-or-cancel-ok/
Here is my take:
In healthcare apps and desktop platforms, button placement is crucial due to the sensitivity of medical information, complex workflows, and diverse user needs. Here’s how you can optimize “Cancel” button placement in these contexts:
Placement Considerations for Healthcare Apps:
- Mobile (Patient-Facing Apps):
- Top Left or Bottom of Forms: For apps that involve patient data input (e.g., appointment booking, medication tracking), placing the “Cancel” button at the top-left or bottom of a form screen is standard. This allows users to exit without interfering with primary actions like “Submit” or “Confirm.”
- Confirmation for Critical Data: If patients are canceling an action that involves critical data (e.g., changing an appointment or canceling medication reminders), it’s vital to confirm their decision. Implement a prompt asking, “Are you sure you want to cancel?” with a clear explanation of the consequences (e.g., data loss).
- Provider-Facing Apps (Mobile and Tablet):
- Left Side of Action Buttons: Healthcare providers need quick, error-free interactions, so for apps used by doctors or nurses, the “Cancel” button should be placed on the left side of action buttons like “Save” or “Submit.” This layout reduces the risk of misclicks during high-stakes situations, such as patient check-in or medication entry.
- Visible but De-emphasized: Since healthcare providers often work quickly, the “Cancel” button should be easy to find but visually secondary (e.g., lighter color), ensuring that primary actions like saving patient data are more prominent.
Placement Considerations for Healthcare Desktop Applications:
- Medical Record Systems (EHR/EMR):
- Logical Workflow Placement: In Electronic Health Record (EHR) systems, the “Cancel” button should always appear in logical locations where users expect it, such as the top left of windows or alongside form fields. Given the complex workflows, “Cancel” should not be confused with “Go Back” or “Save.”
- Explicit Cancel Behavior: For healthcare professionals, ensure that “Cancel” clearly indicates what will happen—whether discarding unsaved data or just exiting the current window. Consider a warning dialog if the user might lose any critical patient information.
- Pharmacy or Lab Systems:
- Top or Bottom Placement: When managing lab results, prescriptions, or orders, the “Cancel” button can be placed at the top-right or bottom of screens, where users often look for actions to finalize or dismiss tasks.
- Clear Confirmation Dialog: Since workflows here involve dispensing medication or processing lab results; accidental cancellations can have serious consequences. To reduce errors, use modal dialogs that ask for confirmation before canceling any process.
Visual Hierarchy and Emphasis:
- De-emphasize, but Accessible: In healthcare interfaces, the “Cancel” button should not draw attention away from primary actions like “Submit” or “Save,” but it should still be easy to find for users who need to back out of an action.
- Color Coding for Urgency: Use distinct colors for critical actions. For example, a “Cancel” button tied to deleting sensitive patient data should use a color like red to convey risk, while more routine cancelations can use grey or other neutral tones.
Touch and Click Size:
- Mobile and Tablet (Touch Interfaces): Ensure that the touch area for “Cancel” is large enough (at least 48×48 pixels) to avoid misclicks but not so large that it distracts from the main actions.
- Spacing and Separation: On desktops, place enough space between the “Cancel” button and primary actions to minimize the chance of accidental clicks when healthcare providers are multitasking.
Specific Healthcare Scenarios:
- Patient Check-in (App/Desktop):
- If patients are using a mobile app to check in at a healthcare facility, the “Cancel” button should be accessible but unobtrusive—perhaps at the top left or in a menu that allows them to quit the process. In the case of a premature exit, the system should prompt the user with options like “Do you want to save your information for later?”
- Telehealth Apps:
- The “Cancel” button might be part of a video conferencing interface in telehealth apps where patients or providers engage in virtual appointments. Here, the button should be visually distinct from other controls (like mute or end session), and it should provide feedback if clicked accidentally, such as “Are you sure you want to leave this call?”
Consideration of User Groups:
- Patients vs. Providers: For patient-facing healthcare apps, ease of use and avoiding confusion are paramount. “Cancel” should help users feel in control without worrying about losing important data. Speed and accuracy are essential for provider-facing applications, and “Cancel” should be strategically placed to prevent costly errors in patient care.
Finally
In healthcare applications—whether patient-facing or provider-facing—the placement of the “Cancel” button requires careful thought. It must be easily located, visually de-emphasized compared to primary actions, and always include clear feedback to minimize the risk of errors or data loss. In a high-stakes environment like healthcare, confirmation dialogs and careful use of color and placement can make all the difference in delivering a seamless and safe user experience.