In the topic “Aggressive “spiky” buttons versus rounded ones” there was a small discussion about the placement of standard buttons in dialog boxes (“Yes”, “No”, “OK”, “Cancel”). In this article, I look at the main mistakes interface designers make when it comes to dialog boxes.
Dialog boxes
How often do you find yourself in a situation where, out of habit, you pressed a button expecting to get one result, but instead you get the exact opposite? Or, say, “hung” over the overly abstruse exit confirmation dialogue? Or maybe you’ve encountered questions from the “Do not save?” series. and “Yes”, “No”, “Cancel” buttons? The reason for this is the lack of understanding by the developers of the “unwritten code of design” - simple rules that no one came up with, but that’s how it happened. This problem common in the world of free software and almost absent from the products of large companies, whose program interfaces are strictly standardized and carefully thought out. Let's look at a few examples.This is a good dialogue. It is simple, it has everything you need and nothing unnecessary. Let's go in order:
- A direct and short question was immediately posed: “Save changes?”
- Short, instantly understandable and easy to understand answers: “Yes”, “No”, “Cancel”.
- The answer options are arranged in the only correct and convenient order.
- The correct (in 90% of cases) answer is already highlighted - you can safely press the space bar and proceed to further work.
- Window title. It would be much more correct to duplicate the essence of the question in it - “Save?” But on the other hand, this is good, because this question may pop up at the moment when the user is working with another application. Although, again, why would Word suddenly close without user intervention, especially when he is working with another program? There are more pros than cons. Therefore, it is better to duplicate the question in the title or, as a compromise, indicate the name of the program with the question (“Save? - Microsoft Word”).
- Icon. In Microsoft products, it is designed to set the tone of the dialogue, but often developers use not just a “tone” sign as an icon, but an action icon, if present. For example, this is done in the following example with the “Save” icon. I will not dwell on the question “Floppy disk or HDD with a down arrow”, since this is beyond the scope of this topic.
GNU Image Manipulation Program (GIMP)
This is bad dialogue. It is complex and oversaturated with information. Let's go through the list:
- The question is presented in too long a form and for some reason “before closing” is added. This question is asked only when closing a document, so why write “before closing”? Again, why do we need the clarification “in the image”? I'm in graphic editor, the captain suggests that they work with images. It's the same as if 3D Max asks me "Save changes to a set of 3D models covered with %file_name% textures?"
- The answer options are too long, which also do not correspond to the question (hello, bashorg!). The buttons force me to turn on my brain to understand what they want from me.
- The answer options are arranged in a clear order for developers. Why exactly “No”, “Cancel”, “Yes”? How do they hint at “Dude, your crafts are terrible, don’t clog the screw”?
- The incorrect answer option is highlighted. The default offer should perform some action with one user movement. Imagine a software installation dialog in Windows, where instead of “Next” in each window, the focus will jump to “Cancel”. Stupid, isn't it?
- It is not clear why the phrase “If you do not save the image, all changes made in the last 3 minutes will be lost” was added. Rejoice, gentlemen: I have figured out the place of work of Captain Obvious.
- An informative icon that immediately makes it clear that we are talking about saving.
- Informative (questionable) window title.
What conclusions can be drawn from this:
- You need to ask the user a question as briefly as possible, so as not to force him to think about the question for half an hour.
- Do not use negative questions (“Do not save?” and “Yes”, “No”, “Cancel”).
- Use only the standard button order (positive, negative, neutral)
- Answer options should be simple and concise. This is a program that should work quickly, and not a seminar of linguists where you can chat for hours about nothing.
- Do not write unnecessary information. Of course, it’s cool that you count how much time has passed since the last save, but the user doesn’t care about this, and in the dialogue it will only distract and, perhaps, confuse or even anger.
- The window title should also be informative.
- Don't forget about the icon. It should reflect the essence of the issue as much as possible and be easily recognizable.
Modal windows and the "Apply" button
The same problem occurs in the settings windows. Here is the correct window (oops, MS again):
Two buttons: “OK” and “Cancel”. And "Cancel" on the right. So it was, is and will be. And that’s right, because everyone is used to it. If the user changes something there and suddenly changes his mind about saving the changes, he will click on the lower right key without looking, because he is used to seeing undo there (and it is there in MS products). Linux is a completely different matter. There are no strict rules or standards, here everyone does as they want.
Interesting, isn't it? Although the previous window has normal location buttons What guided the developers - only a hedgehog knows. Let us leave these mistakes on the conscience of the authors, and draw a conclusion for ourselves: the most right button- cancellation (if this is not a special case).
Microsoft Windows
Another interesting option is the “Apply” button. Oh, what memories I have with her... Before clicking “OK”, “Apply” is clicked fully automatically. It’s not clear why, but still :-)
A relic of the past that Microsoft for some reason doesn’t want to give up. It is designed to save and apply changes without closing the dialog box. If you have changed the setting, please click “Apply”. This was done due to the fact that Windows times 95 computers were weak and applying settings “on the fly” caused the PC to hesitate. Now, in times of tons of nuclear machines and “office” horses with four gigabytes of brains on board, such a system is simply unnecessary.
Ubuntu Linux
Gnome, for example, uses a system for applying settings on the fly, i.e. I poked the mouse at the picture and it immediately became my desktop wallpaper. No need to click "Apply"/"Save". There is only one button - “Close”. And nothing more is needed in non-critical dialogues.
Hence the conclusion: the “Apply” button is of little use, so its use is in demand.
That, in principle, is all on this topic. Gentlemen, make good, user-friendly interfaces. May your users rejoice!
Most PC users do not take full advantage of the computer mouse. In this article, you will see tips on using a mouse and learn the secrets and convenient functions of working with a mouse that make many tasks easier when working on a computer.
Mouse wheel.
Everyone is familiar with the mouse wheel; it is very convenient to use it to turn pages, release and pick up text, etc. But the mouse wheel also has other convenient functions, some of which are listed below:
- The mouse wheel is not only a wheel, but also a third button. By clicking on a link with the mouse wheel, the page will open in a new tab, which is very convenient if you don’t want to leave this page and separately see what is on the link. You can also close a tab in the browser with the mouse wheel, just click on the tab with the wheel and not on the cross with the left button.
- Also in the browser, when viewing large pages, for example, to go down, by pressing the middle button (wheel) on this page, you can quickly move up, down, left and right, increase or decrease the speed, you just need to move the cursor further.
- You can also enlarge and reduce a document on web pages, fonts, etc. using the wheel of a computer mouse; to do this, just hold down the Ctrl key and scroll the wheel up or down, increasing or decreasing the size accordingly.
- Move forward and backward while browsing the Internet. Holding Shift key and by scrolling the mouse wheel you can move forward or backward through pages in the browser.
- Some mice allow you to move the wheel left or right, which also allows you to move around pages in the browser.
Quick selection.
If you double-click on any word, it will be highlighted, and if you click three times, the entire paragraph will be highlighted, which also makes it much faster to select the desired text.
Shift key and computer mouse.
Very convenient to use this function if you need to select a large text, but you don’t want to wait for the scrolling until all this is highlighted, because when selecting text the mouse goes down for a very long time, then you just need to click with the cursor in the place from which you want to select the text, then hold down the Shift key and click at the end of the text, everything will stand out at once and there is no need to wait.
Alt key and computer mouse.
Bonus tip: Hold down the Alt key while dragging and selecting text in text editor, will allow you to selectively highlight text. This can be useful if the text is in a column.
Ctrl key and computer mouse.
- If you do not have a mouse, for example, you have a laptop/netbook where you only use a touchpad, then you can hold Ctrl and left-click on the link, it will open in a new window.
- By holding down the Ctrl key, you can select certain objects, for example, you need to select some scattered films from a huge list; to make the task easier, you just need to hold Ctrl and left-click on the desired objects.
Side buttons on the mouse.
On some computer mice There is side buttons, which can be programmed for a specific function, they can be changed, and what to set is up to you, the main thing is to make working at the computer with these buttons even more convenient.
This function is convenient if you use many dialog boxes, i.e. If they are used frequently, for example, you need to agree or refuse some changes (Ok/Cancel), then by turning on this function, the cursor will automatically move to the “Ok”, “Accept” button, etc. When the dialog box exits, you only need to click, you no longer need to move the mouse.
How to enable this feature? Everything is quite simple: “Start -> Control Panel -> Hardware and Sound -> Mouse”. A window will open in which you need to go to the “Pointer Options” tab and check the box next to “On the button selected by default.”
Managing windows with the mouse.
- By double clicking on the box above, open window, it will automatically decrease or increase.
- Also, double-clicking on the upper left edge of the screen will close the window; clicking once will open a special window management menu.
Own cursor.
Surely many people know that you can change the cursor to your own, all this is done in the same control panel, once it was already talked about on this site, the article is not very great, but I think the main thing will be clear is the process of changing the standard “arrow” to a more colorful, you can download cursors on the Internet.
I think these secrets computer mouse will help you make working at the computer more convenient, because the functions that can be performed with the mouse will now increase.
Dialog boxes, which have already been mentioned in the article, the user sees in the process of working with applications (programs) and the . They appear when the system or program contacts the user with a request for something. necessary information to continue working or confirm some actions.
Dialog boxes are always in the foreground, covering other open (running) ones. As a rule, they do not change in size, and they can only be closed: after confirming the choice (OK, Apply, Cancel) or by clicking on the close button.
Windows dialog boxes can be modal or modeless.
Modal windows stop the application from running and you must complete all the commands in that window and close it before you can continue working.
Modal dialog boxes can look like:
| Necessary for entering (selecting) data or parameters required to continue working with the program. |  |
| Notifies the user that some action has been taken or an operation has been completed. |  |
| Gives the user the opportunity to select an action, the result of which will be to continue working with the program or to terminate it. |  |
Modeless windows do not stop the operation of the application (program). Without closing the window, you can go to the document or program window and work with them, also returning by clicking the mouse to the dialog box. An example is the Help window.
Dialog boxes can have a variety of purposes and have different fields and buttons to respond to a request. Complex dialog boxes are multi-page and consist of several tabs (bookmarks).
A Windows dialog box typically consists of a title bar and window elements.
Dialog boxes provide a set of different fields and buttons to enable you to respond to a request.
Basic Dialog Box Elements
Its contents depend on the purpose of the window, but in general, the set of elements is repeated in all applications operating system Windows. This:
tabs (complex window);
command buttons;
checkboxes (on/off switches);
radio buttons (switches);
input fields (text fields);
lists and drop-down lists;
slider (sliding control button).
Let's look at the main types of elements:
| closing the window, saving all settings and changes made | |
| closing the window without saving the settings and changes made | |
| saving all settings and changes without closing the window | |
 |
the user can enter text into the rectangular area using the keyboard by clicking inside the field with the mouse |
| values can be entered into this field either from the keyboard or by clicking on the buttons on the right, the up arrow increases the value of the parameter, the down arrow decreases it | |
| it contains a list of objects available for selection; if the list is larger than the field size, then scroll bars will be visible to view the entire list; you can select an object by clicking on the desired one with the mouse | |
| it displays the value of the current parameter; you can view all possible values by clicking on the button - the triangle on the right | |
| a circle with a colored dot inside or without a dot (radio button) - selecting only one of the mutually exclusive, replacing each other parameters (as in the Russian language, the conjunction “or”) Clicking the left mouse button marks the user’s choice, the mark is removed from other buttons | |
| “tick” inside a square field (checkbox), with its help you can enable/disable parameters whose descriptions are located nearby, you can simultaneously select several parameters at the same time (corresponds to the conjunction “and”) | |
| Clicking on the button activates the contextual help mode of the dialog box; to do this, click on the selected element, a rectangular area with explanatory text will immediately appear | |
| closing the window | |
 |
Moving left/right along the ruler allows you to smoothly adjust the parameter value in a certain range (increase/decrease), for example, volume, mouse sensitivity, keyboard auto-repeat speed, etc. |
 |
in a number of dialog boxes, similar parameters are grouped in tabs: two or more; Tabs are located immediately below the title bar of the window; You can work with only one tab at a time; the active one is in the foreground, completely occupying the window; You can change a tab by clicking on its name |
| preview, shows what the custom object will look like after the changes have been made and the parameters selected |
Hotkeys for dialog boxes.
Alt+F4— closes the current element or exits the active program
Ctrl+Tab– switch tabs in right side(forward)
Ctrl+Shift+Tab- switch tabs to the left (back)
Tab– sequential movement through buttons, fields, lists, menus, panels, etc. (down to the right)
Shift + Tab- sequential movement through items, buttons, fields, lists, menus, panels, etc. in reverse order(up left)
Space– allows you to highlight (click) the selected button, check the box
Alt + underlined letter - by pressing and holding the Alt key, look at the name of the window tab, list, field, etc., one of the letters is underlined, press it on the keyboard and you will go to the selected element
Arrow keys - navigation through items, options
This concludes the story about dialog boxes and their main elements. Share your ways of working, positive experiences or problems and difficulties in the comments.
Loading...
