It is one of the oldest debates in user interface design, yet it remains surprisingly relevant: should the "OK" button come before or after the "Cancel" button? While it might seem like a trivial detail, this choice directly impacts usability, error rates, and user trust. The answer isn't about which is "better" it's about which is right for the user's environment.
The Great Divide: Platform-Specific Patterns
The core of the issue lies in two conflicting, deeply ingrained design conventions from the world's dominant operating systems.
The Windows & Android Way: OK-Cancel
In the Microsoft Windows ecosystem, and by extension Android, the affirmative action (like **OK**, **Save**, or **Yes**) is typically placed on the left. The negative or dismissive action (**Cancel**, **Close**, **No**) is on the right. This pattern prioritizes the most common or desired action, making it the first one a user encounters when reading left-to-right.
+----------------------------------------+
| Confirm Action |
|----------------------------------------|
| |
| Do you want to save the changes? |
| |
| [ OK ] [ Cancel ] |
+----------------------------------------+The macOS & iOS Way: Cancel-OK
Apple takes the opposite approach. In macOS and iOS, the affirmative action is placed on the far right. The logic here is that the final action in a sequence should be the one that moves the user forward, aligning with the natural flow of progression towards the end of the dialog.
+----------------------------------------+
| Confirm Action |
|----------------------------------------|
| |
| Do you want to save the changes? |
| |
| [ Cancel ] [ OK ] |
+----------------------------------------+The Cost of Inconsistency: A Real-World Scenario
Years ago, while reviewing a large enterprise Content Management System (CMS), we discovered a jarring inconsistency. Some dialogs used the Windows **OK-Cancel** order, while others used the Mac-style **Cancel-OK**.
The cause was simple: the system was built by a distributed team of designers and developers, some on PCs and others on Macs. Without a clear design system or guideline, each person implemented what felt "natural" to them. The result for the user was a confusing and unpredictable interface that led to frequent, frustrating mistakes. This is a classic example of how small details, when ignored, can erode the quality of the entire user experience.
The Smart Solution: Adaptive Interfaces
So, which order is "correct" for your web application? The best answer is to **respect the user's native platform conventions.** We already use responsive design to adapt layouts for different screen sizes; we can apply the same thinking to interaction patterns.
A context-aware interface can detect the user's operating system and render the buttons in the expected order:
- For Windows/Android users: Display `[OK] [Cancel]`
- For macOS/iOS users: Display `[Cancel] [OK]`
While this requires a bit more development effort (often a simple JavaScript check of the `navigator.platform` or `navigator.userAgent` string), the payoff is significant. It reduces cognitive load, minimizes accidental clicks, and creates a seamless experience that feels native to the user's device.
Beyond Buttons: Why Platform Conventions Matter
This principle extends far beyond a simple button order. It touches on one of the most important usability heuristics: **Consistency and Standards**. Users shouldn't have to wonder whether words, situations, or actions mean the same thing in different contexts. By aligning with established platform patterns, you leverage the user's existing knowledge, making your application feel intuitive and trustworthy from the first click.
Ignoring these conventions forces users to stop and think about trivial interactions, breaking their workflow and causing unnecessary friction. Good UX is about removing that friction.
Conclusion: Sweat the Small Stuff
The OK-Cancel debate is a perfect reminder that in human-centered design, there are no small details. Every choice, from button placement to microcopy, contributes to the overall user experience. The "correct" answer is rarely universal; it's the one that best serves your user in their specific context.
Ready to ensure your interface meets your users' expectations?
At Brainstorm Ergonomics, we specialize in usability testing that uncovers these critical details. Let us help you build products that feel right, every time.
Schedule a Discovery Call