Mobile

The mouse works in dialog boxes. Windows XP Dialog Boxes

In the topic "Aggressive "spiky" buttons vs. rounded" a small discussion has developed about the location of standard buttons in dialog boxes ("Yes", "No", "OK", "Cancel"). In this article, I look at the main mistakes interface designers make with dialog boxes.

Dialog boxes

How often do you find yourself in a situation where, out of habit, you clicked on a button, expecting to get one result, and instead get the exact opposite? Or, say, "hung" over the overly abstruse exit confirmation dialog? Or maybe you met with questions from the series “Do not save?” and buttons "Yes", "No", "Cancel"? The reason for this is the lack of understanding by the developers of the "unwritten design code" - simple rules, which no one invented, but it just so happened. This problem common in the free software world and almost absent from the products of large companies, whose program interfaces are highly standardized and carefully thought out. Let's look at a few examples.

This is good dialogue. It is simple, it has everything you need and nothing more. Let's go in order:

Immediately put a direct and short question: "Save changes?".
Short, instantly clear and easily perceived answers: "Yes", "No", "Cancel".
The answer options are arranged in the only correct and convenient order.
The correct (in 90% of cases) answer has already been highlighted - you can safely press the spacebar and proceed to further work.

But there are also shortcomings here (one of them is corporate, his mother, standard):

Window title. It is much more correct to duplicate the essence of the question in it - “Save?”. But on the other hand, this is good, because this question can pop up at the moment when the user is working with another application. Although, again, with what fright will Word suddenly close without user intervention, especially when it works with another program? "For" more than "against". 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 dialog, but often developers use as an icon not just a “tone” sign, but an action icon, if it is 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" as it is out of the scope of this topic.

Now let's analyze another dialogue in the same way.

GNU Image Manipulation Program (GIMP)

This is bad dialogue. It is complex and overflowing with information. Let's go through the list:

The question is presented in too long form and for some reason added "before closing". This question is asked only when closing the document, so why write "before closing"? Again, why do we need the clarification "in the image"? I'm in graphics editor, the captain suggests that they work with images in it. It's like 3D Max asks me "Do you want to save changes to the set of 3D models covered with %file_name% textures?"
Too long answer options, which also do not correspond to the question (hello bashorg!). The buttons make me turn on my brain to understand what they want from me.
The answer options are arranged in a clear order for one developer. Why "No", "Cancel", "Yes"? As if hinting at "Dude, your crafts are terrible, do not clog the screw"?
An incorrect answer has been highlighted. The default offer should perform some action with one movement of the user. Imagine a software installation dialog in Windows, where instead of "Next" in each window, the focus would jump to "Cancel". Silly, isn't it?
It is not clear why the phrase "If you do not save the image, all changes in the last 3 minutes will be lost" is added. Rejoice, gentlemen: I have figured out the place of work of Captain Obvious.

But there are positive aspects in this window:

An informative icon that immediately makes it clear that we are talking about saving.
Informative (doubtful) title of the window.

Can you feel the difference in these dialog boxes? The first is convenient, the second is not. If we analyze successful products, we can highlight some rules. In this context, the most important rule is the order of the buttons. A convenient option is "positive, negative, neutral" and nothing else. Users are accustomed in such situations to see the first button - confirming, and the last - canceling this question. Modal windows such settings will be discussed below.

What conclusions can be drawn from this:

You need to ask the user a question as briefly as possible so as not to make him think about the question for half an hour.
Do not use negative questions ("Do not save?" and "Yes", "No", "Cancel").
Use only generally accepted button order (positive, negative, neutral)
Answer options should be simple and concise. This is a program that should work quickly, not a linguist seminar where you can chat for hours about nothing.
Do not write redundant information. Of course it's cool that you consider how much time has passed since the last save, but the user is purple for this, and in the dialogue it will only distract and, possibly, stupor or even anger.
The title of the window should also be informative.
Don't forget 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 (oh-pa, MS again):

Two buttons: "OK" and "Cancel". And "Cancel" on the right. So it was and will be. And rightly so, because everyone is used to it. If the user changes something there and suddenly changes his mind about saving the changes, he will casually click on the lower right key, because he is used to seeing the cancellation there (and it is there in MS products). Linux is a completely different matter. There are no strict rules and standards, here everyone does as he wants.

Interesting, isn't it? Although the previous window has a normal button layout. What guided the developers - one hedgehog knows. Let us leave these mistakes on the conscience of the authors, and for ourselves we will conclude: the most right button- cancellation (if it's not your special case).

Microsoft Windows

Another interesting option is the "Apply" button. Oh, what memories I have with her ... Before pressing "OK", "Apply" is pressed on full automaticity. Not sure why, but still :-)
A relic of the past, from which Microsoft for some reason does not want to give up. It is intended to save and apply changes without closing the dialog box. Changed the setting - please click "Apply". This was done because Windows times 95 computers were weak and applying settings "on the fly" caused non-sour PC thinking. Now, in the days of fucking nuclear machines and "office" horses with four gigs of brains on board, such a system is simply redundant.

ubuntu linux

Gnome, for example, uses a system to apply settings on the fly, i.e. I clicked on the picture and it immediately became the desktop wallpaper. No need to click "Apply" / "Save". There is only one button - "Close". And nothing else is needed in non-critical dialogues.

Hence the conclusion: there is little use for the “Apply” button, so its use is in demand.

That, in principle, and all on this topic. Do, gentlemen, good, convenient interfaces. May your users rejoice!

Most PC users do not make full use of the computer mouse. In this article, you'll see tips on how to use your mouse and learn secrets and handy mouse features that make a lot of computer tasks easier.

Mouse wheel.

Everyone is familiar with the mouse wheel, it is very convenient to turn pages, release and raise text, etc. with it. But the mouse wheel has other handy features, some of which are listed below:

The mouse wheel is not only a wheel, but also a third button. By clicking on any link with the mouse wheel, the page will open in a new tab, it is very convenient if you don’t want to leave this page and see separately what is on the link. You can also close the 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.
Enlargement and reduction of a document on web pages, font, etc., can also be done using the mouse wheel, just hold down the Ctrl key and scroll the wheel up or down, respectively increase or decrease the size.
Move forward and backward while browsing the Internet. By holding the Shift key and scrolling the mouse wheel, you can move forward or backward through the pages in the browser.
Some mice allow you to move the wheel to the left or right, which also allows you to move through the 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 selected, which also allows you to select the desired text much faster.

Shift key and computer mouse.

Very convenient to use this function if you need to select a large text, and waiting for the scrolling to scroll until all this stands out is not a hunt, because when you select the text, the mouse drops for a very long time, then just press the cursor in the place from which you want to select the text, then hold the Shift key and click at the end of the text, everything stand out at once and you do not 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 select 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 use only the touchpad, then you can hold Ctrl and left-click on the link, it will open in a new window.
By holding the Ctrl key, you can select certain objects, for example, you need to select some films that are scattered from a huge list, to facilitate the task, you just need to hold Ctrl and left-click on the desired objects.

Side buttons on the mouse.

On some computer mice there are side buttons that 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 a computer with these buttons even more convenient.

This feature is useful if you use a lot of dialog boxes, ie. frequent use of them, for example, you need to agree or refuse with some changes (Ok / Cancel), then by enabling this function, the cursor will automatically move to the "Ok", "Accept" button, etc. when the dialog box exits, you only need to click, you do not 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".

Control windows with the mouse.

Double-clicking at the top, on the field, 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 bring up a special window control menu.

Own cursor.

Surely many people know that the cursor can be changed to your own, all this is done in the same control panel, when it was already told on this site that the article is not very super, but I think the main thing will be clear the process of changing the standard "arrow" to more colorful, you can download cursors on the Internet.

I think these computer mouse secrets will help you make your work at the computer more convenient, because the functions that can be performed with the mouse will now increase.

Dialog boxes, which were already 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 any 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 selection (OK, Apply, Cancel) or by clicking on the closing button.

Dialogue Windows windows may be modal or modeless.

Modal windows stop the application and before you continue working, you must execute all the commands in this window and close it.

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 the continuation of work with the program or its termination.

Modeless windows do not stop the application (program) from running. Without closing the windows, 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 be of very different purposes and have different fields and buttons for responding to a request. Complex dialog boxes are multi-page, consist of several tabs (bookmarks).

A Windows dialog box usually consists of a title bar and window elements.

The dialog boxes provide a set of various fields and buttons to enable you to respond to a query.

Main elements of the dialog box

Its content depends on the purpose of the window, but in general, the set of elements is repeated in all applications of the operating system. Windows systems. This:

tabs (complex window);

command buttons;

flags (switches/switches);

radio buttons (switches);

input fields (text fields);

lists and drop-down lists;

slider (sliding control button).

Consider the main types of elements:

	closing the window saving all parameters and changes made
	closing the window without saving the parameters and changes made
	saving all parameters and changes without closing the window
	the user can enter text into the rectangular area from the keyboard by clicking inside the box with the mouse
	values can be entered in this field both from the keyboard and by pressing the buttons on the right, the up arrow increases the parameter values, the down arrow - decreases
	it contains a list of objects available for selection, if the list is larger than the field size, scroll bars will be visible to view the entire list, you can select an object by clicking on the desired 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) - selection of only one of the mutually exclusive, replacing each other parameters (as in the Russian union "or") By clicking the LMB of the mouse, the user's choice is marked, the mark is removed from other buttons
	“tick” inside the square field (checkbox), with its help you can enable / disable the parameters, the description of which is located nearby, you can simultaneously select several parameters at the same time (corresponds to the union “and”)
	clicking on the button activates the context help mode of the dialog box, to do this, click on the selected element, a rectangular area with text will immediately appear - an explanation
	window closing
	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: from 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 the tab by clicking on its name
	preview, shows how the custom object will look after the changes made and the options selected

Hot Keys for Dialog Boxes.

Alt+F4— closes the current element or exits the active program

Ctrl+Tab- switch tabs to the right side (forward)

Ctrl+Shift+Tab- switching tabs to the left side (back)

Tab– sequential movement through buttons, fields, lists, menus, panels, etc. (right down)

Shift + Tab- sequential movement through items, buttons, fields, lists, menus, panels, etc. in reverse order (up to the left)

Space- allows you to highlight (click) on 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 by items, options

This concludes the story about dialog boxes and their main elements. Share in the comments your ways of working, positive experiences or problems and difficulties.