Ok and Cancel button on right OR left side of the Dialog window?
what is better concerning user intuitive usage?
OK...Cancel or Cancel...OK in a Dialog Window?
开发者_JAVA百科edit:
arghhhh I stepped in a trap :P
seems some user misunderstood me...
I do not mean having OK and Cancel on the left/right side of the dialog.
what I mean is should the OK button be right-handed to the Cancel button or other way round?
Thats what I meant actually :)
Neither. "OK" and "Cancel" are particularly poor choices for dialog buttons. Dialog buttons should really be labelled with the actions that each button will perform - e.g.
Do you want to save this unsaved file before exiting the application?
[Save] [Don't Save] [Don't Exit]
And, in either case, I would suggest ordering from left-to-right in order of 'most likely', so in my example, I'm assuming Saving is the most likely choice, followed by exiting without saving, followed by not exiting. This is most intuitive for a left-to-right language, since the user will most likely get to their preferred choice soonest, but other language directions will differ.
- Windows puts OK first
- Apple puts OK last
(From the Nielsen Norman Group)
Set a standard for all your products, so they all have the same behaviour.
Investigate and follow the standard for the OS/Platform you are developing for.
Consider that some cultures/regions may expect different button positions.
Make it possible to change your mind easily without revisting every dialog.
OK...Cancel or Cancel...OK in a Dialog Window?
In english software OK should be to the left from Cancel. I.e.:
+------+ +--------+
| OK | | Cancel |
+------+ +--------+
For other languages you should follow whatever is commonly used. I wouldn't be suprised if in right-to-left languages OK will be to the right from cancel.
Also if you really care about GUI quality...:
1. Keyboard focus should already be on "OK".
2. User should be able to move between OK and Cancel using TAB. Focus shouldn't get "stuck" on some kind of additional element.
3. All buttons and gui element should have sane tab order. When you're focused on "OK" and press "TAB" you should jump to "Cancel", not to some other useless control.
4. Pressing Escape should trigger "cancel".
5. Closing the window should trigger "Cancel"
6. Pressing "Enter" may be equal to pressing "OK" (some software uses that, and some don't).
7. Buttons should have "accelerators" assigned. I.e. buttons should be labaled **O***k* (O is underscored) and **C***ancel* (C is underscored), Pressing Alt+O should press "OK", and pressing "Alt+C" should press "Cancel" button.
8. Keyboard accelerators should be properly assigned for all languages your application supports. Pressing Alt+"letter in your language that cannot be used as the first letter of any word" feels weird.
AFAIK, quality GUI follows those guidelines. Forgetting "keyboard accelerator", messing up tab order (IMO) is a sign of sloppiness, and some "power users" will instantly hate you for mistakes like that.
Also, If application is fullscreen, you may consider using following trick - when "OK/Cancel" appears, move mouse cursor in between the buttons (or on top of "OK" button), when window is closed, restore previous position. Note: this is more suitable for fullscreen games, using it in "standard" gui may be annoying.
If you have a dialog modal window, then it always looks good on the right-hand side.
Personally reasoning is something like a user reads from left to right and in the end he would like to see the buttons on right side once he is done reading...
I found this article too. Interesting -
http://measuringuserexperience.com/SubmitCancel/index.htm
Windows User Experience Interaction Guidelines
What most windows use today is OK and Cancel, with OK on the left and Cancel on the right, with OK set as the default button to click.
This is normally used if the dialog box is not asking to do anything potentially harmful. If it is, for example they want to delete somthing, which isn't normally deleting, then swap them around and have Cancel as the default. Therefore people double check themselves when clciking OK and less likely to mistakingly click cancel.
Also, when reading it, OK comes first, and this allows the user to read it quickly and easily, and accept.
Hope this helps.
Personal experience: I found Buttons to the right in a column is the least controversial - that is: Once you have decided on that, there are no further discussions such as "align to the left, center or align to the right?", "when right-aligning, shouldn't "OK" get a fixed position, i.e. rightmost?".
Windows User Experience Guidelines (as cited by Jay, with a painful root link) say "Commit buttons go to the bottom in a row, right-aligned, OK usually being leftmost".
The style guidelines say nothing explicit about "command buttons" (i.e. buttons that don't commit the dialog). The examples hint at a bottom-right row for commit buttons, and a top-right column for command buttons, though I personally find this rather unelegant.
I think putting the default choice to the right side is better idea.. In my opinion it is easier to press the right button ( I don't know why :) ) and I can quickly reconsider my idea while reading through left to right.(I know it is a quite a few seconds but it may be helpful)
I guess I'm in the minority, but I like the default or expected option to be on the left. Perhaps it's from reading left to right, or it's the first item, so I expect it to be the one to take me to my desired outcome.
In the referenced link above (http://measuringuserexperience.com/SubmitCancel/index.htm) one of the comments in the survey mentioned having "cancel as a link". I have seen this in forms and kind of like it, where submit is a button, and reset is a link. I hate when I fill out a form and click the reset button b/c it's on the right and I'm not paying attention...
Just my $0.02.
Whatever you pick will be wrong. Conventions vary across platforms (Win/Mac/Gtk/...) and between regions/languages, so no matter what order you use, somebody will think it's confusing. The best solution is to select the order at run-time based on system type and settings (unless it's a web-app, but we're talking about dialog windows, so that's another story).
Fortunately, you don't have to implement the best solution -- it's already been done for you. Modern GUI toolkits typically provide some mechanism for handling dialog button order automatically. For example, Qt provides the QDialogButtonBox widget. Use the widget (or other mechanism) that your toolkit provides.
I imagine this sort of thing would be regional, especially based upon right to left or left to right reading style.
For an american-english user: I for one would put the ok box on the bottom left, as this is the layout i am accustomed to seeing already.
I would look at the way the in which a OK CANCEL pop up box is automatically created. For example, in the Ajax control toolkit there is an extension called 'modal popup' and it has generic OK CANCEL buttons which are auto generated. Also, there are some confirm() methods in javascript which auto generate these type of buttons. Personally I like to look at the way these developers layed out pop ups and use their implementation because it might be something a user has seen in the past. Hope this helps.
To add my two cents - I prefer Cancel, OK
.
To me, the "yes, okay, go ahead" button naturally lives on the right hand side. Going to the "next" page on a forum or installation wizard is almost always on the right hand side. If there is only one button in an alert box, that is usually center or right aligned.
Cancel effectively performs a "back" operation usually, which is almost always on the left hand side of anything: web browsers, installation wizards.
But ultimately it's down to you. Pick a convention and stick to it!
Nielsen Norman Group gives some good thoughts on the matter. They argue that both ways are correct from the UIX point of view, since it depends on the rule you are applying. The excerpt below explans a little bit...
Both are reasonable choices, and people can argue for hours about their preferences:
- Listing OK first supports the natural reading order in English and other languages that read left-to-right. Many other button sets have a natural progression (say, Yes/No or Previous/Next). You should always list these so that the reading order matches the logical order — in this case, OK/Cancel . Further, assuming users need OK much more frequently than Cancel, it's better to place this option first so that keyboard-driven users who tab to the buttons can get to their preferred choice with one less keystroke.
- Listing OK last improves the flow, because the dialog box "ends" with its conclusion. Also, as with Previous/Next, you could argue that OK is the choice that moves the user forward, whereas Cancel moves the user back. Thus, OK should be in the same location as Next: on the right.
Personally I like the second topic better, somehow OK before CANCEL makes me feel like Iḿ not moving forward. And if you do so on a Web based UI you can simply put the focus on the button you think is more likely to be pressed by the user.
精彩评论