10 ms·
This has been a debate for as long as I've been a UX designer (mid '90s), and probably much longer. Ultimately, the answer about this UX style is very much the
by jaysonelliot 8y ago
This has been a debate for as long as I've been a UX designer (mid '90s), and probably much longer.
Ultimately, the answer about this UX style is very much the same as a question about writing style—there's no objectively right answer, but you have to be consistent.
For example, you can pick up any number of style books from Strunk & White to the Chicago Manual of Style and get different "right" answers about writing style, but any editor will tell you the ultimate solution is to be internally consistent.
The arguments for each approach have merit. "OK on the left" designers will argue that because we read from left to right, the positive response should be first. "OK on the right" designers will say that the positive response carries the user forward, and because we read from left to right, forward progress should be on the right.
My personal feeling is that there's another argument for OK on the right, which is that the majority of users are right-handed, so the default choice will be closer to their dominant hand if it's placed on the right.
Then again, I may be looking for evidence to support my preference, which probably arose from the fact that I began designing on the Mac, so I was conditioned to Apple's "OK on the right" standard at an early age, and I've simply conflated "familiar" with "correct."
So the answer from this veteran UX designer would be: Use whichever placement your users are going to be the most familiar with, but whichever you choose, be 100% consistent with the choice you make.
- RussianCow 8y ago> So the answer from this veteran UX designer would be: Use whichever placement your users are going to be the most familiar with, but whichever you choose, be 100% consistent with the choice you make. Not only that, but make the "OK" choice standout with a different color. If the "default" option is brighter than the rest, your eyes will most likely gravitate towards it first, regardless of the order of the buttons.
- pier25 8y agoIn my bank web application the OK button is on the left, and... both buttons are RED because that's the brand's color! It's a terrible web app.
- yellowapple 8y agoSpeaking of banks with terrible websites, my credit union's login page features a checkbox for "Forgot my password", which is not only confusing in and of itself (" I need to enter my password to reset it?") but also is exactly where you'd expect the "Remember me?" checkbox to appear, meaning that any instinctual attempt for me to tell the site to remember who I am will instead result in me resetting my password. I'm entirely convinced that banking website design guidelines are driven entirely by a seething hatred for the end-user.
- Coincoin 8y agoThey paid someone a lot of money to design their UI, so they better do something different from the rest of the world, else they would have wasted money.
- pier25 8y ago> I'm entirely convinced that banking website design guidelines are driven entirely by a seething hatred for the end-user. I've thought about this and (in all seriousness) I think the reason is that the tech banking sector must be plagued with ancient programmers that don't give a damn about UI and design.
- aaron_m04 8y agoAdditionally, if the OK option is something major and irreversible or destructive, make that different color be red, and change the OK to be what the operation is (Delete, Erase, etc.)
- kevin_thibedeau 8y agoBetter yet, follow the Apple dialog guidelines for labeling buttons and eschew the ambiguity of "OK".
- briandear 8y agoThose Human Interface Guidelines are incredible. There is also an Apple Style Guide that’s very awesome as well. For example, “don’t use ‘please’ as in “Please click yes to continue.” Instead, simply “click yes to continue.” I forget the rationale but it was pretty sound reasoning if I remember correctly.
- dpark 8y agoRationale is probably primarily that it’s just less wordy and secondarily that it sounds like an option instead of a request.
- StavrosK 8y ago> Use whichever placement your users are going to be the most familiar with, but whichever you choose, be 100% consistent with the choice you make. I think this is the right answer. Personally and anecdotally, I doubt it makes a noticeable difference which way they are, as long as they are that way everywhere. I will soon learn that "confirm/apply/proceed" is one way, and "back/cancel/revert" is the other way, whichever way those tend to be. Just make sure you don't flip on me.
- valiant-comma 8y agoYes, definitely agree. I feel the latest UI for iPhone alarms and the timer are a good example of how inconsistency in button placement can be confusing. When a timer finishes, you get a large button at the top for Stop, and a smaller one at the bottom for Repeat. When an alarm goes off, the Stop button is the small one at the bottom, and the larger top button says Snooze. Very often I find myself repeating a timer instead of stopping it.
- paulific 8y agoThat happens to me too, and I find it equally annoying, but I think it is a deliberate design choice. As I understand it they are trying to make it hard to accidentally turn off the alarm and go back to sleep, which would be a critical failure if you missed an interview or were late for work. Presumably irritation at the difficulty of switching it off is seen as the lesser of two evils
- wruza 8y agoI find myself hitting stop instead of snooze, which may turn into a disaster some day. Simply touching your phone without care may stop the alarm. iPhone alarm control became so wrong that I stopped using the screen and snooze only via top physical button. I’m not sure, but feels like it wasn’t like that before some idiot decided to change the way alarm works for sleepy subconsciously-trained users. Curious how many $M net cost was put into this “design”. (Googled it: there was no stop button in ios 5, only slide-to-stop, which you cannot do accidentally)
- btschaegg 8y ago
- Washuu 8y agoOkay/Confirm/Continue on the right is easier to hit with the mouse for me since it is in the corner of the window.
- wruza 8y agoBut why? Mouse pointer tends to be at a random position relative to a dialog window. According to GOMS, there should be no difference, unless one of the buttons touches screen border or is significantly closer.
- not_kurt_godel 8y agoBecause it's always in the same place with respect to the frame around it, and therefore easier to visually locate.
- c3534l 8y agoEven in film the convention is that if you're character is going back, standing in the way of another character moving the plot forward, or just feeling weak or uncertain, they should face the left. When was the last platformer you saw where you moved left to progress? The right hand side conventionally portrays certainty, strength, and progress in all manner of western arts.
- lfowles 8y agoYour post plus the context of Factorio brings about an interesting observation that in all of my Factorio maps, expansion/exploration happens rightwards and upwards unless constrained by geography.
- benjaminjackman 8y agoNow that you mention it I have a similar observation. Though I tend to build downward rather than upwards when laying out columns of factories coming over a central bus. Also when constrained by geography I subconsciously have been seeking out new areas with enough space to resume building left to right like a printer executing a carriage return rather than zig zagging backwards (which perhaps could be more efficient). Since I’ve noticed that factorio mimics a lot of patterns from the real world I wonder if this prevalent in some other areas eg integrated circuit or circuit board layouts.
- yacn 8y agoAxiom Verge (a metroid-vania) starts you off by going to the left first, just like Metroid did.
- tarsinge 8y agoI love how these kind of conventions are used to guide the player in Super Metroid : https://www.gamasutra.com/blogs/HugoBille/20120114/90903/The_Invisible_Hand_of_Super_Metroid.php https://www.gamasutra.com/blogs/HugoBille/20120114/90903/The... Edit: context
- latexr 8y ago
- throwawayjava 8y ago> So the answer from this veteran UX designer would be: Use whichever placement your users are going to be the most familiar with, but whichever you choose, be 100% consistent with the choice you make. What are your thoughts on how smartphones might impact this left vs. right debate? The button on the right is accessible without using just one hand (tapping with thumb while holding in palm), but I need two hands to tap the button on the left. But I'm left-handed. Do right-handed people hold their smartphone in their left hand? It just occurred to me that my minority handedness might be why I've always found large smartphones hard to use.
- gsich 8y agoI don't know if handedness does has much influence to such clumsy devices like smartphones. It's not comparable to writing text by hand, where much greater precision is required.
- jaysonelliot 8y agoIn mobile design, I generally stay with the same convention of placing positive actions on the right. The "dominant hand" argument isn't relevant, since your thumb usually rests on the left side of the screen if you're right-handed, but the "forward motion" rationale still makes sense. It will be interesting to see what conventions from Windows-Icons-Menus-Pointer (WIMP) interfaces still exist on mobile in ten years, when desktop UIs are mostly history. We still type on QWERTY keyboards, even though the original rationale is long gone; musicians still make albums about an hour long even though they don't have to fit on two sides of a vinyl record anymore; we still have 60 minutes in an hour even though the ancient Babylonians' base 60 counting system has been gone for millennia. I wonder how many more generations will continue to debate whether "cancel" should go on the left or the right?
- lozf 8y agoI'm right-handed, but for decades have used the phone in my left hand -- I found this to be useful at an early job that often required taking notes whilst on the phone, so I optimised behaviour for that and the habit stuck. When early cellphones came along I had no trouble using my left hand only when most "right-ies" I know used them with the right hand. Since smartphones became popular I still phone with my left hand primarily, though I have become more ambidextrous with it, and I've noticed that others seem to switch hands more too.
- MisterTea 8y ago> "OK on the right" designers will say that the positive response carries the user forward, and because we read from left to right, forward progress should be on the right. I look at it using a more logically safe approach where the first option should be cancel/back/safe_option to force people to think before clicking through.
- cyberferret 8y agoBack when I used to build model aircraft dioramas, a veteran told me "When you arrange vehicles in a diorama setting, always have them facing towards the left side of the board for maximum impact.". His reasoning was that most people's eyes move left to right when examining something - which mimics their eye movement when reading text (at least in Western societies. In R-L countries I guess the opposite would be true). He said that by position the nose/cockpit of the aircraft on the left side, people's eyes would always go to where the 'little humans' would sit first, then move away towards the right. Similarly if you had scale model humans in a diorama setting - place them on the left hand side. Placing the vehicles going against their eye movement would also make their attention 'catch' and stop at details of the object 'moving' in the opposite way (something about how people who drive cars are just more instinctually aware of something that is moving against their direction of travel). Whereas if they had to scan in the same direction the vehicle was moving, their attention would just slip past interesting points. I've used those lessons in most of my UX design nowadays. Placing buttons and important items towards the right of a page, with lesser items further right. The only exception is if it is a destructive action call (deleting a record etc.), then I usually place the button all the way to the right so it isn't in visual way and too tempting.
- dingaling 8y agoThe same left-bias 'advice' is given to amateur photographers, which results in a wall full of what a friend calls 'camera club copycat' photos. Until your eye alights on one that doesn't follow the guidelines and stands out as a result. I'd follow the reading-direction paradigm for something like a UI or arranging books on a shelf, but not for art.
- Izkata 8y ago> His reasoning was that most people's eyes move left to right when examining something - which mimics their eye movement when reading text (at least in Western societies. In R-L countries I guess the opposite would be true). Back in 2010, a Youtuber named Derek Lieu created a supercut called "Every Anime Opening Ever Made" [0]. One of the notes: > Interesting thing I learned, if a character is running it's overwhelmingly to the left of the screen. (Watching the video, "running" may as well also include "standing" and "flying") Characters moving is a bit different than a diorama, but there may be something to it. I think I remember something similar someone else had found about western animation, that it's biased towards having characters move to the right rather than the left. [0] https://www.youtube.com/watch?v=ibPCLMH1NM4 https://www.youtube.com/watch?v=ibPCLMH1NM4
- vasilipupkin 8y agofeels like this is something that is resolvable with a simple A/B test? collect enough data and get some answers. I will be shocked if more people end up clicking on OK when it's on the right than when it's on the left.
- sizzle 8y agoDo you agree that the active button should always be the least destructive action, irregardless of which button comes first from left to right?
- fnordsensei 8y agoGreat summary. Another thing to note in the Factorio mockups is the use of a guideline that I originally picked up from the macOS HIG[1]: use descriptive verbs rather than a generic confirmation. "Apply settings" vs "OK" "Load game" vs "OK" "Delete file" vs "OK" "Send email" vs "OK" "Print" vs "OK" and so on. [1]: https://developer.apple.com/design/human-interface-guidelines/macos/buttons/push-buttons/ https://developer.apple.com/design/human-interface-guideline...
- pasta 8y agoThis is how it should be done. People don't read the message in the popup. But when presented with a Delete button users start to think about what they are doing. Also: 'Delete - Cancel' sets 'Cancel' in a much better context. You are going to cancel a delete action not an 'Ok' action.
- ProxCoques 8y agoWhen it comes to OK/Cancel for a non-recoverable event (like delete), it's ALWAYS been the case that the dialogue should NOT appear in the first place. Instead, the UI should be seen to do the operation, but then delay its execution while showing an "undo" for a few seconds. The reason for this is that 99.9% of people know what they're doing. So don't bother them for the sake of the 0.1% who make a mistake. But more importantly - for each dialogue (of whatever kind) you have in an application, the chances of the user reading it declines by the square of the number of dialogues they encounter in a given session to the point where they will never be read, ever.
- Symbiote 8y agoThat gives me an idea for my .bashrc: rm () { (sleep 30 && \rm "$@") & } (Untested, and I'm unlikely to use this.)
- alanning 8y agoI’ve seen it generally recommended to use a different command rather than aliasing `rm`. Pretty sure there are a plethora of options for each OS but here’s a couple: For OSX, homebrew has a handy “trash” command line tool [1]. For Ubuntu, trash-cli seems popular [2]. 1. `brew install trash` 2. http://manpages.ubuntu.com/manpages/precise/man1/trash-put.1.html http://manpages.ubuntu.com/manpages/precise/man1/trash-put.1...
- xg15 8y ago> The arguments for each approach have merit. "OK on the left" designers will argue that because we read from left to right, the positive response should be first. "OK on the right" designers will say that the positive response carries the user forward, and because we read from left to right, forward progress should be on the right. And then there is the new UI paradigm, seen on many web apps, where "positive response" is replaced with "whatever response would be the best outcome for the company".
- arendtio 8y agoI think there is one factor missing: While it might be true that many of us are reading from left to right, our usage of UI is not necessarily defined by the same patterns as reading. When we start using a UI we certainly read every button before clicking on one, but after a while we just want to find the correct button. And in that case it might be helpful to place the button for the primary action right next to the bottom right corner, as that corner is one of the places we start looking for the button. With the OK-Cancel order, the OK-button would be hidden behind the Cancel-button. Nevertheless, this factor doesn't change anything about your conclusion. I think your argument is very balanced and I agree with your conclusion about consistency being the most important factor.
- noisem4ker 8y agoThe button group at the lower right corner is where we start looking for our button. Inside that button group, which is quickly located, buttons are parsed left to right. To add to this, if we're doing a task, it's probably safe to assume we're more interested in going on with it, so there's a reason for the affirmative button being at the left of the group (first to be parsed). Also, you typically ask "Yes or no?", not "No or yes?". Just a maybe different perspective from a Windows user.
- tigershark 8y agoExactly it’s incredibly unnatural to ask “are you not sure or yes?” compared with “are you sure or not?”
- JohnStrangeII 8y agoThere is a simpler reason. Apple introduced the GUI (licensed from Xerox) with the Okay button to the right. Microsoft Windows decided to go the other way for legal reasons and in order to look different. Companies make these 'slightly different' approaches often and probably usually to avoid design patent issues.
- Theodores 8y agoMakes sense to me. Microsoft also put the toolbar with the menu for getting to your programs a the bottom with the 'Start' menu, this really should have been at the top. Apple had their menu at the top so Microsoft did it differently. In those days I found it absurd how you had menus flowing out from the bottom left of the screen. Moving the menu to the top was drag and drop but nobody bothered, therefore having it wasn't that big a deal. Microsoft had to work with IBM on the original Windows so they got a lot of things right including the universal shortcut keys for menu actions. You were never left requiring a mouse except for in MS Paint. Surely the file dialog boxes and whatnot were designed to 'not look different' but tied in to this universal hotkey thing they had going, i.e. some sensible rule so you could tab or arrow key away from the 'OK' button?
- Bromskloss 8y ago> whichever you choose, be 100% consistent with the choice you make. That just makes my own things consistent with each other. I thought the problem was to decide what _everyone_ should use.
- unabst 8y agoNot just internally consistent, but externally consistent, at which point making this a matter of compliance. External consistence isn't subjective. It's as objective to that system as any other fact, and is a matter of understanding, not feeling or choosing or designing. If you're building an extension to MS Office, make your app comply with MS Office. Same with Adobe Photoshop plugins. And ultimately same with apps/programs for an OS. If the OS does OK-left, do OK-left. The UI that does not exist is the UI that is performing the best. No one "uses" a UI. They just pass it. If you're thinking too hard about it, chances are you'll make your users think about it also. And trying to get noticed will always be at the expense of usability. And finally, metrics such as consistency, obviousness/coherence, and simplicity are also objectively measurable, as are error rates, A/B tests, and step counts. What is subjective is user feedback and even developer feedback. By tallying what people think of an interface, you've already abandoned the goal of remaining unnoticed, and this is how Frankenstein UIs are built.
- city41 8y agoI feel there is another aspect to consider. The more committal action should require the more conscious movement to invoke. A great example being exiting an app being at the bottom of the file menu. Or on MacOS classic where they placed the trash can in the lower right of the desktop far from everything else. OK and cancel don't consider this aspect as much, but IMO OK should require more conscious movement to accomplish. I'd rather accidentally cancel sending an email than accidentally prematurely send one for example.
- BrandoElFollito 8y agoI had exactly the same thought as you, I actually imagined myself clicking the button and thought it is less movement for the mouse.
- daveheq 8y agoThis implies, as I agree with, that a single-action pop-up or form (which does not progress) should have OK-Cancel, and that a progressive form should be Cancel-OK, as clicking OK progresses things to the "right" (or next "page"), whereas Cancel stops that progression.