Не работают кнопки в диалоговых окнах. О кнопках, диалогах и кнопке «Применить. Клавиша Alt и компьютерная мышь

В топике «Агрессивные «колючие» кнопки против закруглённых» развилась небольшая дискуссия по поводу расположения стандартных кнопок в диалоговых окнах («Да», «Нет», «ОК», «Отмена»). В этой статье я рассматриваю основные ошибки, которые допускают проектировщики интерфейсов в отношении диалоговых окон.

Диалоговые окна

Как часто вы попадаете в ситуацию, когда по привычке нажали на кнопку, ожидая получить один результат, а вместо этого получаете прямо противоположный? Или, скажем, «подвисали» над через чур заумным диалогом подтверждения выхода? А может встречались с вопросами из серии «Не сохранять?» и кнопки «Да», «Нет», «Отмена»? Виной этому является непонимание разработчиками «неписанного кодекса дизайна» - простых правил, которые никто не придумывал, но так уж сложилось. Данная проблема распространена в мире свободного ПО и почти отсутствует в продуктах крупных компаний, интерфейсы программ которых строго стандартизированы и тщательно продумываются. Давайте рассмотрим несколько примеров.

Это - хороший диалог. Он простой, в нем есть все, что нужно и нет ничего лишнего. Давайте по порядку:

  • Сразу поставлен прямой и короткий вопрос: «Сохранить изменения?».
  • Короткие, моментально понятные и легко воспринимаемые ответы: «Да», «Нет», «Отмена».
  • Варианты ответа расположены в единственно правильном и удобном порядке.
  • Правильный (в 90% случаев) ответ уже выделен - можно смело жать пробел и приступать к дальнейшей работе.
Но есть здесь и недочеты (один из них - корпоративный, мать его, стандарт):
  • Заголовок окна. Куда более правильней продублировать в нем суть вопроса - «Сохранить?». Но с другой стороны это хорошо, ведь этот вопрос может выскочить в тот момент, когда пользователь работает с другим приложением. Хотя опять же, с какого перепуга Word вдруг будет закрываться без участия пользователя, тем более, когда он работает с другой программой? «За» больше, чем «против». Следовательно, лучше продублировать вопрос в заголовке или, как компромисс, указать с вопросом название программы («Сохранить? - Microsoft Word»).
  • Иконка. В продуктах Microsoft она призвана задавать тон диалога, но часто разработчики используют в качестве иконки не просто «тоновый» знак, а пиктограмму действия, если она присутствует. К примеру, так сделано в следующем примере с иконкой «Сохранить». Я не буду останавливаться на вопросе «Дискетка или HDD со стрелкой вниз», поскольку это выходит за рамки этого топика.
Теперь разберем по такому же принципу другой диалог.

GNU Image Manipulation Program (GIMP)


Это - плохой диалог. Он сложный, перенасыщен информацией. Пройдемся по списку:

  • Вопрос представлен в слишком длинной форме и зачем-то добавлено «перед закрытием». Этот вопрос задается только при закрытии документа, так зачем же писать «перед закрытием»? Опять же зачем нужно уточнение «в изображении»? Я в графическом редакторе, капитан подсказывает, что в нем работают с изображениями. Все-равно, что 3D Max спросит меня «Сохранить изменения в наборе трехмерных моделей, покрытых текстурами %file_name%?»
  • Слишком длинные варианты ответа, которые к тому же не соответствуют вопросу (привет, башорг!). Кнопки заставляют включать мозг, что бы понять, чего от меня хотят.
  • Варианты ответа расположены в одним разработчикам понятном порядке. Почему именно «Нет», «Отмена», «Да»? Как бы намекают на «Чувак, твои поделки ужасны, не надо засорять винт»?
  • Выделен неправильный вариант ответа. Предложение по-умолчанию должно выполнять какое-то действие одним движением пользователя. Представьте себе диалог установки ПО в Windows, где вместо «Далее» в каждом окне фокус будет прыгать на «Отмена». Глупо, не правда ли?
  • Непонятно зачем добавлена фраза «Если вы не сохраните изображение, все изменения за последние 3 минуты будут потеряны». Возрадуйтесь, господа: я вычислил место работы Капитана Очевидность.
Но есть в этом окне и положительные моменты:
  • Информативная иконка, сразу дающая понять, что речь идет о сохранении.
  • Информативный (под сомнением) заголовок окна.
Чувствуете разницу в этих диалоговых окнах? Первое удобно, а второе - нет. Если проанализировать успешные продукты, можно выделить некоторые правила. В данном контексте, важнейшим правилом является порядок кнопок. Удобный вариант это «положительный, отрицательный, нейтральный» и никак иначе. Пользователи привыкли в таких ситуациях видеть первую кнопку - подтверждающую, а последнюю - отменяющую данный вопрос. Модальные окна вроде настроек будут рассмотрены ниже.

Какие отсюда можно сделать выводы:

  • Задавать пользователю вопрос нужно максимально кратко, что бы не заставлять его полчаса думать над вопросом.
  • Не использовать отрицательные вопросы («Не сохранять?» и «Да», «Нет», «Отмена»).
  • Используйте только общепринятый порядок кнопок (положительный, отрицательный, нейтральный)
  • Варианты ответа должны быть простыми и лаконичными. Это программа, которая должна быстро работать, а не семинар лингвистов, где можно болтать часами ни о чем.
  • Не писать лишнюю информацию. Конечно круто, что вы считаете, сколько времени прошло с момента последнего сохранения, но пользователю фиолетово на это, а в диалоге это только отвлечет и, возможно, поставит в ступор или даже разозлит.
  • Заголовок окна тоже должен быть информативным.
  • Не забывайте об иконке. Она должна максимально отражать суть вопроса и быть легко узнаваемой.

Модальные окна и кнопка «Применить»

Та же проблема встречается и в окнах настроек. Вот правильное окно (о-па, опять MS):



Две кнопки: «ОК» и «Отмена». И «Отмена» справа. Так было есть и будет. И это правильно, потому что все к этому привыкли. Если пользователь чего-то там наменяет и вдруг передумает сохранять изменения, он неглядя жмакнет на правую нижнюю клавишу, потому что он привык там видеть отмену (и она в продуктах MS там и есть). Совсем другое дело Linux. Тут нет жестких правил и стандартов, тут каждый делает как хочет.



Интересно, не правда ли? Хотя предыдущее окно имеет нормальное расположение кнопок. Чем руководствовались разработчики - одному ежу известно. Оставим эти промахи на совести авторов, а для себя сделаем вывод: самая правая кнопка - отмена (если это свой не особый случай).

Microsoft Windows

Еще один интересный вариант - кнопка «Применить». Ах, какие у меня с ней воспоминания… Перед нажатием «ОК» на полном автоматизме нажимается «Применить». Не понятно зачем, но все же:-)
Пережиток прошлого, от которого Microsoft почему-то не хочет отказываться. Предназначена она для сохранения и применения изменений без закрытия диалогового окна. Изменили настроечку - будьте добры нажать «Применить». Сделано так было из-за того, что во времена Windows 95 компьютеры были слабенькие и применение настроек «на лету» вызывало некислые подзадумывания ПК. Сейчас же, во времена дохрена-ядерных машин и «офисных» лошадок с четырьмя гигами мозгов на борту, такая система просто излишня.

Ubuntu Linux


В Gnome, например, используется система применения настроек «на лету», т.е. тыкнул мышкой в картинку и она тут же стала обоями рабочего стола. Не надо нажимать «Применить»/«Сохранить». Есть только одна кнопка - «Закрыть». И больше ничего не нужно в некритичных диалогах.

Отсюда вывод: пользы от кнопки «Применить» мало, поэтому ее использование востребовано.

Вот, в принципе, и все на эту тему. Делайте, господа, хорошие, удобные интерфейсы. Да возрадуются ваши пользователи!

Диалоговые окна, о которых уже упоминалось в статье , пользователь видит в процессе работы с приложениями (программами) и самой . Они появляются в момент обращения системы или программы к пользователю с запросом какой-либо необходимой информации для продолжения работы или подтверждения каких-то действий.

Диалоговые окна всегда находятся на переднем плане, закрывая остальные открытые (работающие) . Как правило, они не изменяются в размерах, а закрывать их можно только: после подтверждения выбора (ОК, Применить, Отмена) или кликом на закрывающей кнопке.

Диалоговые окна Windows могут быть модальными или немодальными.

Модальные окна останавливают работу приложения и прежде, чем вы продолжите работу, необходимо выполнить все команды в этом окне и закрыть его.

Модальные диалоговые окна могут быть вида:

Необходимо для ввода (выбора) данных или параметров, требующихся для продолжения работы с программой.
Оповещает пользователя, что совершено какое-то действие или завершена операция.
Дает пользователю возможность выбрать действие, итогом которого станет продолжение работы с программой или ее завершение.

Немодальные окна работу приложения (программы) не останавливают. Не закрывая окна, можно перейти в окно документа или программы и работать с ними, возвращаясь также щелчком мыши в диалоговое окно. Пример — окно Справка.

Диалоговые окна могут быть самого разного назначения и иметь различные поля и кнопки для ответа на запрос. Сложные диалоговые окна многостраничны, состоят из нескольких вкладок (закладок).

Диалоговое окно Windows обычно состоит из строки заголовка и элементов окна.

В диалоговых окнах предусмотрен набор различных полей и кнопок для возможности ответа на запрос.

Основные элементы диалогового окна

От назначения окна зависит его содержимое, но в целом, набор элементов повторяется во всех приложениях операционной системы Windows. Это:

    вкладки (сложное окно);

    командные кнопки;

    флажки (включатели/выключатели);

    радиокнопки (переключатели);

    поля ввода (текстовые поля);

    списки и раскрывающиеся списки;

    ползунок (скользящая кнопка управления).

Рассмотрим основные разновидности элементов:

закрытие окна с сохранением всех параметров и внесенных изменений
закрытие окна без сохранения параметров и внесенных изменений
сохранение всех параметров и изменений без закрытия окна
пользователь может с клавиатуры вводить в прямоугольную область текст, для этого нужно щелкнуть внутри поля мышью
в данное поле значения можно ввести как с клавиатуры, так и нажимая на кнопки справа, стрелка вверх увеличивает значения параметра, стрелка вниз — уменьшает
в нем содержится список, доступных для выбора объектов, если список больше размера поля, то будут видны полосы прокрутки для просмотра всего списка полностью, выбрать объект можно щелкнув на нужном мышью
в нем отображается значение текущего параметра, просмотреть все возможные значения можно щелкнув мышью на кнопке — треугольнике справа
кружок с цветной точкой внутри или без точки (радиокнопка) — выбор только одного из взаимоисключающих, заменяющих друг друга параметров (как в русском языке союз «или») Щелчком ЛКМ мышки отмечается выбор пользователя, с других кнопок отметка снимается
«галочка» внутри квадратного поля (чекбокса), с ее помощью можно включить/отключить параметры, описание которых расположено рядом, одновременно можно выбрать несколько параметров одновременно (соответствует союзу «и»)
щелчок по кнопке активирует режим контекстной справки диалогового окна, для этого кликните по выбранному элементу, сразу появится прямоугольная область с текстом — пояснением
закрытие окна
перемещение влево/вправо вдоль линейки позволяет плавно настраивать значение параметра в определенном диапазоне (увеличение/уменьшение), к примеру, громкость, чувствительность мыши, скорость автоповтора клавиатуры и т.п.
в ряде диалоговых окон сходные параметры группируются во вкладках: от двух и более; располагаются вкладки сразу под строкой заголовка окна; одновременно можно работать только с одной вкладкой, активная находится на переднем плане, полностью занимая окно; сменить вкладку можно щелкнув мышью на ее названии
предварительный просмотр, показывает, как будет выглядеть настраиваемый объект после сделанных изменений и выбранных параметров

Горячие клавиши для диалоговых окон .

Alt+F4 — закрывает текущий элемент или же выход из активной программы

Ctrl+Tab – переключение вкладок в правую сторону (вперед)

Ctrl+Shift+Tab — переключение вкладок в левую сторону (назад)

Tab – последовательное перемещение по кнопкам, полям, спискам, меню, панелям и т. д. (вправо вниз)

Shift + Tab - последовательное перемещение по пунктам, кнопкам, полям, спискам, меню, панелям и др. в обратном порядке (влево вверх)

Space (Пробел) – позволяет выделить (нажать) на выбранную кнопку, поставить флажок

Alt + подчеркнутая буква - нажав и удерживая клавишу Alt, посмотрите на название вкладки окна, списка, поля и т.д., одна из букв подчеркнута, нажмите ее на клавиатуре и вы перейдете к выбранному элементу

Клавиши со стрелками - навигация по пунктам, опциям

На этом повествование о диалоговых окнах и их основных элементах можно завершить. Поделитесь в комментариях своими способами работы, положительным опытом или проблемами и трудностями.

Большинство пользователей ПК не в полной мере используют компьютерную мышь. В этой статье Вы увидите советы по использованию мышки и узнаете секреты и удобные функции в работе с мышью, которые облегчают множество задач в работе за компьютером.

Колесико мыши.

С колесом мыши знакомы все, с помощью него очень удобно листать страницы, отпускать и поднимать текст и т.д. Но колесико мыши обладает и другими удобными функциями, некоторые из них перечислены ниже:

  • Колесико мыши это не только колесо, но еще и третья кнопка. Нажав на какую-нибудь ссылку колесиком мыши, страница откроется в новой вкладке, очень удобно если не охота уходить с данной страницы и отдельно посмотреть, что находится по ссылке. Так же колесиком мыши можно закрыть вкладку в браузере, просто нажать на вкладку колесом а не на крестик левой кнопкой.
  • Так же в браузере очень при просмотре больших страниц, например на до спуститься вниз, нажав на этой странице среднюю кнопку (колесико) можно будет быстро перемещаться вверх, вниз, влево и вправо, скорость увеличивать или уменьшать просто нужно отвести дальше курсор.
  • Увеличение и уменьшение документа на веб-страницах, шрифт и т.д., так же можно с помощью колесика компьютерной мышки, для этого достаточно удерживать клавишу Ctrl и прокрутить колесико вверх или вниз, соответственно увеличить или уменьшить размер.
  • Перемещение вперед и назад при работе в Интернете. Удерживая клавишу Shift и прокрутив колесико мыши можно переместиться вперед или назад по страницам в браузере.
  • Некоторые мыши позволяют колесико передвигать влево или вправо, что тоже позволяет передвигаться по страницам в браузере.

Быстрое выделение.

Если щелкнуть на любое слово два раза, оно выделиться, а если щелкнуть три раза, то выделиться весь абзац, что тоже позволяет значительно быстрее выделить нужный текст.

Клавиша Shift и компьютерная мышь.

Очень удобно использовать данную функцию если нужно выделить большой текст, а ждать прокрутку скроллинга пока все это выделиться не охота, ведь при выделении текста мышь очень долго опускается, тогда достаточно просто нажать курсором в том месте с которого нужно выделить текст, далее удерживать клавишу Shift и нажать в конце текста, все выделиться сразу и ждать не нужно.

Клавиша Alt и компьютерная мышь.

Дополнительный совет: Удерживая клавишу Alt во время перетаскивания и выделения текста в текстовом редакторе, позволит Вам выборочно выделять текст. Это может быть полезно, если текст в столбце.

Клавиша Ctrl и компьютерная мышь.

  • Если у Вас нет мыши, например у Вас ноутбук/нетбук где используете только тачпад, то можно удерживать Ctrl и нажать левой кнопкой мыши по ссылке, то она откроется в новом окне.
  • Удерживая клавишу Ctrl можно выделить определенные объекты, например нужно выделить из огромного списка некоторые фильмы, находящиеся в разброс, для облегчения задачи нужно просто удерживать Ctrl и нажимать левой кнопкой на нужные объекты.

Боковые кнопки на мышке.

На некоторых компьютерных мышках есть боковые кнопки, которые могут быть запрограммированы под определенную функцию, их можно изменять, а что ставить решать Вам, главное сделать работу за компьютером с этими кнопками еще удобнее.

Данная функция удобна, если используется много диалоговых окон, т.е. частое их использование, например, нужно согласиться или отказаться с какими то изменениями (Ок/Отмена), то включив данную функцию, курсор автоматически будет перемещен на кнопку "Ок", "Принять" и т.д. при выходе диалогового окна, от Вам лишь требуется нажатие, перемещать мышь уже не нужно.

Как включить данную функцию? Все достаточно просто: "Пуск -> Панель управления -> Оборудование и звук -> Мышь". Откроется окно, в котором нужно перейти на вкладку "Параметры указателя" и поставить галочку напротив - "На кнопке выбираемой по умолчанию".

Управление окнами с помощью мыши.

  • Дважды щелкнув вверху, на поле, открытого окна, оно автоматически уменьшится или увеличиться.
  • Так же дважды щелкнув по левому верхнему краю экрана, окно закроется, щелкнув один раз выйдет специальное меню управления окном.

Собственный курсор.

Наверняка многие знают, что курсор можно сменить на свой, все это делается в том же панели управления, когда то уже рассказывалось на данном сайте о том, , статья не очень супер, но думаю главное будет понятен сам ход изменения стандартной "стрелки" на более красочную, скачать курсоры можно в Интернете.

Думаю эти секреты компьютерной мыши помогут Вам сделать работу за компьютером более удобной, ведь функции теперь увеличатся, которые можно выполнять с помощью мышки.