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

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

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

Microsoft Word

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

• Сразу поставлен прямой и короткий вопрос: «Сохранить изменения?».
• Короткие, моментально понятные и легко воспринимаемые ответы: «Да», «Нет», «Отмена».
• Варианты ответа расположены в единственно правильном и удобном порядке.
• Правильный (в 90% случаев) ответ уже выделен — можно смело жать пробел и приступать к дальнейшей работе.

Но есть здесь и недочеты (один из них — корпоративный, мать его, стандарт):

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

Теперь разберем по такому же принципу другой диалог.

GNU Image Manipulation Program (GIMP)

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

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

Но есть в этом окне и положительные моменты:

• Информативная иконка, сразу дающая понять, что речь идет о сохранении.
• Информативный (под сомнением) заголовок окна.

Чувствуете разницу в этих диалоговых окнах? Первое удобно, а второе — нет. Если проанализировать успешные продукты, можно выделить некоторые правила. В данном контексте, важнейшим правилом является порядок кнопок. Удобный вариант это «положительный, отрицательный, нейтральный» и никак иначе. Пользователи привыкли в таких ситуациях видеть первую кнопку — подтверждающую, а последнюю — отменяющую данный вопрос. Модальные окна вроде настроек будут рассмотрены ниже.

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

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

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

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

Microsoft Word

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

Rhytmbox

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

Microsoft Windows

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

Ubuntu Linux

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

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

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