24 февраля 2011 в 22:06

Почему кнопка «ОК» теперь считается дурным тоном в дизайне перевод

Когда графический интерфейс пользователя только появился, дизайнеры проектировали диалоговые окна используя двоичный подход: «OK» и «Отмена». Нажатие кнопки «OK» в диалоговом окне означало, что пользователь хотел, чтобы система начала действовать. Нажатие кнопки «Отмена» означало то, что пользователь хотел вернуться обратно к приложению без принятия каких-либо действий. В то время как данный подход, в прошлом, был стандартом для ОС и приложений, сегодня принят более удобный для пользователя подход к проектированию диалоговых окон.

Вместо кнопки «ОК» в диалоговом окне следует использовать кнопку с названием действия, которое выполнит кнопка при нажатии. Такая кнопка позволит вашим пользователям сделать правильный выбор более быстро. Не секрет, что есть пользователи, которые не читают содержимое диалоговых окон или читают невнимательно. И если кнопка подтверждения названа просто «OK», то это может стать причиной неправильного выбора действия пользователем. Однако, если кнопка будет иметь название действия, то пользователи станут меньше ошибаться. Потому что они будут нажимать ту кнопку, которая будет выполнять, то что им нужно и будет иметь соответствующие название. Это не только убережет от ошибок, но и даст возможность выбрать действие быстрее, без необходимости читать содержимое окна.

Пример:

image
Вместо кнопки «OK» используется кнопка «Сохранить»


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

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

Хорошее диалоговое окно — это не только ясный вопрос пользователю, но и понятные кнопки, которые дают пользователю возможность быстрого и точного выбора. От «OK» отдает посредственностью. Да, это хорошая кнопка, но не лучшая. А посредственный дизайн не лучший способ для взаимодействия с вашими пользователями. То что когда-то было приемлемым, сейчас не входит в стандарты дизайна. Совершенствуйтесь и будьте профессионалами.

UPD: MicVit нашел на хабре Историю кнопки «OK»…
+89
1545
48
zholdas 4,4

Комментарии (110)

–7
gasyoun, #
Я тоже за это ратую.
+5
horses, #
Во истину. Множество людей привыкли жать на «ок» дабы пропустить по быстрому сообщение и диалоговое окно не читая его. Когда каждая кнопка имеет осмысленное название, это менее привычно, но позволяет человека вырвать из его «привычно и на автомате» и заставляет хоть на секунду задуматься.

Например, диалоговое окно, при закрытии не сохраненного документа (Вы не сохранили документ. Вы действительно хотите выйти?) с кнопками «пропустить», «отмена», «ок» вводились бы в ступор множество людей, либо они на автомате жали бы «ок».
+1
gcc, #
Я привык тыкать «отмена». Это же как с любым договором/соглашением — читай, что подписываешь, или не подписывай
+3
hardex, #
А я привык думать, что [и куда] тыкаю.
+2
averkin, #
«Если ты выдернешь волосы — ты их не вставишь назад
И твоя голова всегда в ответе за то, куда сядет твой зад»
(с) В. Бутусов
+1
opposite, #
Всё абсолютно наоборот: когда ты видишь «OK», приходится прочитать, что именно ты подтверждаешь, а когда видишь «Save», то тебе кажется, что ты уже всё понял и текст в окне можно не читать, хотя там могло быть предложение, например, сохранить предыдущую версию кода без ошибок, вместо дописанной, но с одним варнингом.
–36
bigrucom, #
Давненько я «ОК» не на вижу, слишком — это как-то по-пацански…
+60
burzilov, #
не на ви жу
НЛО прилетело и опубликовало эту надпись здесь
+17
arkady, #
«по-пацански» и это говорит человек 1995 года рождения :)
–4
bigrucom, #
Опять война возраста))
0
opposite, #
Сейчас и этот коммент заминусуют Grammar Nazi.
+1
dudeonthehorse, #
+3
ChemAli, #
Некоторые и диалоговые окна уже считают дурным тоном, предпочитая какие-нибудь панели уведомлений или всплывающие в фоновом контексте сообщения на манер макосевого Growl.
+64
Kassab, #
На иллюстрациях как раз продемонстрирован случай, который лично меня выбешивает: в чём разница между Don't Save и Cancel? Традиционно Cancel — антоним Ok. Но в данном случае Cancel означает отмену задачи, прерванной данным сообщением. То есть, место Ok занимает Save, место Cancel занимает Don't Save, а Cancel -он сегодня у нас просто Cancel. Каждый раз приходится размышлять над такой комбинацией кнопок.

Автор, будьте последовательны, Cancel надо заменить на Don't Close.
+42
Kassab, #
И конечно же расположение кнопок в данном примере — это жопа. :)
+2
GambiTst, #
А никто не подскажет где найти картинку — «Дедушка мороз, пусть тот кто проектировал этот интерфейс, сдохнет как собака в новом году». Когда то давно ее видел, был в диком восторге, а теперь найти не могу(((
НЛО прилетело и опубликовало эту надпись здесь
+1
8bitjoey, #
Черт его знает, что будет более деструктивным в конкретном случае, — сохранение случайных правок документа или не сохранение нужных :)
НЛО прилетело и опубликовало эту надпись здесь
+11
ova777, #
Всё правильно! Например, пользователь нажал «выход» — в таком случае возможны как раз 3 действия: «сохранить» (и выйти), «не сохранять» (и выйти) и «отмена» (т.е. отмена действия кнопки «выход» — значит продолжить работу).
+17
Kassab, #
Кто спорит. Надо написать «я пошутил, ничего закрывать не надо». А то пользователь должен ещё сообразить, что именно отменяется. Вопрос относится к сохранению, а отменяется — выход. Так что машинально отмена будет отнесена именно к сохранению.
+6
ova777, #
Значит в таком случае кнопку «Отмена», как и кнопку «ОК», нужно считать дурным тоном :)

Я вот как-то действие кнопки Отмена никогда не путал, а вот с ОК бывало не раз!
+7
VasilioRuzanni, #
Ну, потому что «Отмена» чаще всего попадает-таки в контекст, и подсознательно понятно, что именно нужно отменить. Однако, одновременные «Не сохранять» и «Отмена» вызывают жесткий диссонанс, потому что кажутся синонимами, и заставляют вдумываться для принятия решения.
0
alisey, #
Именно, сколько попадаю на это окно, каждый раз приходится вчитываться.
–2
vbarhatov, #
В чем то автор и прав, но пример, действительно, отвратительный.

1) здесь не стандартный диалог «Ок/Cancel», а немного иное, где вполне логично в паре расположены Don't save и Save.

2) как заметили выше, расположение кнопок ужасное. Размеры кнопок и интервалы между ними разные.

3) рассмотрен всего один пример, а ведь иногда одного слова может быть мало. При этом разместить на кнопке ОченьДлинныйТекст представляется более дурным тоном.

PS: Всегда стоит руководствоваться здравым смыслом и названия давать в зависимости от ситуации, плюс в рамках проекта логика должны быть едина.
+2
ne_toy, #
RE: 2)
Почему-то вспомнилась басня Крылова «Мартышка и очки»…
Очевидно же, что это сделано для того, чтобы избежать автоматического или ошибочного нажатия на эту кнопку. По-моему, не надо быть гением юзабилити, чтобы понять это.
0
ne_toy, #
Я о кнопке «Don't Save», если что
0
init_sub, #
А что с ней такое? Выравнена по левому краю. Справа группа кнопок, с которыми документ может быть сохранен, слева — потерян, логичное разделение.
–3
vbarhatov, #
Про интервал прекрасно понимаю, приветствую. Но тут ВСЕ разное. Осталось только в разные цвета раскрасить
+1
ne_toy, #
1) Save и Cancel одинаковые по размеру, Don't Save больше, потому что в ней тупо длиннее строка. Сравните кнопки «предпросмотр» и «написать» внизу окошка, где вы пишете коммент. Вас не смущает, что они разного размера? :)
2) Save подсвечивается, потому что она выбрана по умолчанию.
Что еще не понятно?
0
fanex, #
Не трогайте Cancel, он на месте. Во-первых, Cancel — это единственная кнопка в диалоге, которая не содержит деструктивного действия. Т.е. максимум что плохого может случиться — придется смотреть на диалог еще раз.
Во-вторых, размещение кнопок очень правильное: действие, которое может принести больше всего вреда, отделено от остальных.
Ну а в-третьих, предлагаемое вами Don't Close не говорит ничего. Что «не закрывать»? Не закрывать диалог? Не закрывать программу? Не закрывать документ? Cancel в данном случае вполне уместно.

p.s. Расположение кнопок отлично. Для мака.
0
Prosto, #
ну или на Return/Вернуться
+20
Grifon, #
image
+8
ncix, #
Press any key to continue. Press any other key to exit
+4
Halt, #
Success denied :)
+43
ncix, #
Total Commander одобряет этот топик

image
–2
FSA, #
Вот только переводить названия кнопок на русский тот ещё мазохизм :)
+4
Vizakenjack, #
Это еще старая версия, в новой есть кнопка «дополнительно» и в ней еще 7 (!!!) других вариантов кроме тех что перечислены вверху)
0
horses, #
Ага и прекрасный повод пообсуждать то, насколько логично или нет по нажатию на кнопку увидеть выпадающий список.
+4
XuMiX, #
Так еще круче :)
habreffect.ru/files/a46/8fc519ae0/tc.png
+6
bubuq, #
image

(1997 г., между прочим)
+1
Frey, #
Вообще в данном диалоговом окне очень мало пользы. Оно пригодится лишь тогда, когда пользователь по ошибке закроет программу с измененным документом, гораздо правильнее было бы сохранить документ и стек изменений после закрытия программы, а при следующем открытии дать возможность пользователю отменить свои действия.

Единственный сценарий при котором сохранять ничего не следует — когда пользователь сделал много изменений, но решил не сохранять их. В таком случае закрытие программы является массовой отменой изменений. Такой прием не очевиден для людей которые им никогда не пользовались, лучше просто сделать кнопку «Закрыть документ без изменений».
+1
init_sub, #
Сохранение может быть длительным и потреблять много ресурсов, чтобы просто так автоматически все сохранять.
+1
Frey, #
Согласен, но во многих случаях сохранение проходит быстро, если взглянуть на современные игры, то там сохранение — дело нескольких секунд, и зачастую проходит в фоне, хотя объемы информации велики. Всегда надо исходить из контекста, то что будет элегантно и удобно работает в текстовом редакторе, может быть не применимо в CAD программе.
0
Nashev, #
Ага, а ты потом этот документ унесёшь на другой комп или отправишь кому-нибудь, например начальнику или ревизору… Нафиг-нафиг.
+4
allex, #
Рискну предположить, что набор фиксированных текстов на кнопках диалогов пошел из функций создания этих самых диалогов, которые в качестве параметров принимали только заголовок, текст диалога и набор флагов для задания набора кнопок. Вот так программный интерфейс программистов ограничил возможности создания интерфейса пользователя.
+1
vanxant, #
Ограничивала программистов только их собственная лень.
В любой ОС вы можете нарисовать окошко с любыми кнопками, какие вам нравятся, и сделать им такое поведение, какое вам было надо.
Только это окно придется таки нарисовать вручную в дизайнере форм, потом закодировать пару простейших функций для реакции на кнопки и т.п. Работы немного, но минут 10-15 это займет.
Для простоты отладки во многих системах есть функция типа MessageBox, которая создает стандартное окошко с вашим текстом и кнопками на выбор ОК, ОК/Отмена, Да/Нет или Аборт/Ретрай/Игнор.
Для того, чтобы сказать «упс, случилась кака» или реализовать по-быстрому заглушку — очень даже удобно.
Другое дело, что в нормальном софте в релизе таких окон быть не должно.
+1
allex, #
Рецепта избавиться от лени пока не придумали. Поэтому 80% пойдет по пути наименьшего сопротивления. А 20% лучших — как вы написали. Если бы программный интерфейс требовал задания текста кнопок — всё могло быть по-другому.
0
Nashev, #
кроме лени бывают начальники со сроками и бюджетом
0
Nashev, #
Кроме того, есть Style Guide от авторов операционки, рекомендующие тот или иной подход, чтоб приложения на компе соответствовали друг другу и операционке.
0
deadshot, #
Поддерживаю. Наличие многословного текста сообщения и кнопки ОК автоматом подталкивает пользователей нажать её побыстрее и продолжить работу не читая сообщения вообще, что влечет за собой порой не совсем ожидаемое действие от программы.
0
AlexWinner, #
Однако при кривом/автоматическом переводе в таком случае периодически выскакивают окошки с кнопками «Отменить» и «Отмена», между которыми приходится делать выбор:)
+29
air, #
Я для текстовых форм, кнопку «Ок» можно вообще заменить прикольной лайт-капчей :)

image
+3
TheMengzor, #
Справа бегемот?
+14
zitz, #
Трансильванский бегемот-дракула :)
0
spanasik, #
Картинки животных меняются, или если вопрос про животных, всегда одинаковые?
0
air, #
эта штука еще на стадии внедрения, но будут меняться и картинки и сам вопрос про животных
+10
Quadrix, #
Ботам начхать на вопрос и что нарисовано на картинке. Их больше интересует вероятность угадывания ответа. А тут она 0.16… Достаточно много.
+18
mihmig, #
Главное — чтоб не случилось так:
image
+16
Usmekhaiouschiysia, #
Осторожно! Не нажмите по ошибке на лося!
+1
VolCh, #
Индусы негодуют, школота в восторге :)
0
dmitriid, #
> В то время как данный подход, в прошлом, был стандартом для ОС и приложений

+4
dmitriid, #
> В то время как данный подход, в прошлом, был стандартом для ОС и приложений

Не стандартом для ОС, а для Windows. В макосовских Human Interface Guidelines еще в 90-х было требование к разработчикам использовать вменяемые названия на кнопках вместо OK/Cancel
+16
neanton, #
image

лично мне данный вариант кажется почти идеальным. естественно не для всех окон, потому что довольно громоздко смотрится, зато практически мгновенно дает понять что требуется от пользователя.
+2
zholdas, #
да вариант отличный, только иконки создают визуальный шум. Иконка для кнопки «Отмена» как-то настораживает, создается ощущение будто при ее нажатии программа вообще схлопнется. Может более удобно так:

image
0
neanton, #
Ну иконки то не я рисовал, просто свои 5 центов насчет юзабилити выражаю. С дискетками ассоциация сохранения, с крестом отмена или закрытие. Так что в данном случае по моему без иконок не то.
НЛО прилетело и опубликовало эту надпись здесь
+6
Hoorsh, #
Иконки удалять не стоит, потому что это дополнительная помощь глазу для распознавания действий. Ведь когда мы видим дискету, можно сразу понять, что это означает сохранение. В этом примере про Paint.NET, я думаю, просто иконки не совсем удачно выбраны и мелковаты.

Я думаю, вот так было бы гораздо лучше:
0
domin, #

Eyes-tracking:
1. Сначала прочитывается понятное в любом случае «Сохранить».
2. Потом рифмующееся с ним — «Не сохранять», причём кнопка выражает именно действие, понимаешь, что при нажатии файл НЕ сохранится.
3. Третим читаем «Отмена», и на немой вопрос, что же это за отмена, сразу отвечает нижняя строчка «Вернуться...». Здесь мы понимаем, что нажимая предыдущие кнопки, мы не сможем вернуться.

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

P.S. Данные айз-трекинга собраны с моих собственных глаз и не подтверждены никакими исследованиями.
+3
zholdas, #
Кстати, в том же Paint.NET, при запуске программы, если она обнаружила обновления на сервере, то выскакивает такое окошко:

image

Допустим, я не хочу вообще устанавливать обновление, ни сейчас ни после выхода, куда мне жать? Если задуматься и потратить время, то можно догадаться, что надо жать крестик вверху справа, но все равно это не так очевидно. Или завести еще кнопку: «Не устанавливать обновление».
+3
neanton, #
а вот тут кнопка скорее всего отсутствует не просто так. это дополнительный стимул пользователю обновить свою древнюю версию софта, и получить обновления, решения возможных проблем, а не вонь на форумах что в версии от 31го года какая-то плюшка сломалась
+1
Mairon, #
А если на крестик закрытия нажать?
0
fanex, #
Все есть:
Если задуматься и потратить время, то можно догадаться, что надо жать крестик вверху справа, но все равно это не так очевидно.

0
Mairon, #
Невнимательно прочитал крестик снизу, но, имхо, вполне всё очевидно. Не нужно — закрой окошко.
0
burdakovd, #
А вот «Установить после выхода из программы» — мегаудобная вещь, больше нигде такого не видел, разве что в хроме.

Обычно или «Зайдите на сайт и скачайте инсталлятор», или «Запустите установку прямо сейчас».
0
Xpeh, #
Автор Paint.NET писал вроде в своём блоге, что сделал это специально, так как не хочет, что бы казуальные пользователи пропускали установку обновлений.
0
zholdas, #
перезалейте картинку на habrastorage.org
+1
Mezomish, #
Какой разительный контраст:

0
cepera_ang, #
Все не так плохо в современных версиях: habrastorage.org/storage/4edf189b/130d0e2b/113e8d8e/ec5ceff6.png
0
Mezomish, #
У меня скриншот из 2007-го. У вас 2010-й?
0
cepera_ang, #
Да. И в семерочной версии всяких пейнтов с вордпадами также.
+2
MicVit, #
Долгие годы пользователей Windows (и не только) дрессировали, приучая к определенному шаблону восприятия стандартных диалоговых окон. А теперь кто-то решил (может и не без оснований), что этот шаблон — дурной тон. Но привычки то надо учитывать.

Если появляется message box с кнопкой OK (конечно она должна быть слева), — то для меня это предупреждение о том, что я собрался сделать что-то необратимое (или вроде того) и у меня есть быстрая возможность подтвердить решение или отказаться от него (третья кнопка нежелательна). Текст над кнопкой обычно вообще неважен (только на случай, если что-то нечаянно нажал, сам не понял что).

Пример выше ужасен. Мало того, что кнопки не на своих местах, так их содержимое совершенно не согласуется с текстом вопроса. Заставляет долго смотреть и думать чего от меня хотят (если в этом и была цель, то способ издевательский). Приведенному тексту соответствуют два простых ответа: (yes и no). Допустима третья кнопка — cancel (хоть и не очень хорошо). Если хотите именно такие кнопки, то должен быть другой текст. Или уж действительно — его отсутствие.
+2
all1, #
Впервые за свою жизнь на маке увидел вот это: habreffect.ru/files/9f1/276e434f1/Снимок_экрана_2011-02-22_в_22.13.27.png
Непривычно как-то. :)
+1
ne_toy, #
В данном случае DSL и кабельный модем это один обобщенный вариант, а не 2 разных. Что вас смутило?
0
all1, #
Не совсем верный перевод, «DSL или кабельный модем», я вообще думал что мне предлагают выбор: DSL или кабельный. И ответ «Да и „Нет“ смутил)
0
ne_toy, #
долго думал, о каком переводе речь…
НЛО прилетело и опубликовало эту надпись здесь
0
MicVit, #
0
iNadya, #
А можно ссылку на оригинал статьи?
+3
zholdas, #
Ссылка на оригинал в переводах обычно прячется за именем автора оригинала, справа от кнопок твиттера и фейсбука и слева от ника юзера-переводчика.
+1
vovkab, #
Топик больше похож, на то, как не надо делать.
+3
VolCh, #
Помню в GNOME после Windows долго раздражали диалоговые окна с настройками с единственной кнопкой «Закрыть». После «ОК/Применить/Отменить» над каждым окошком долго думал.
0
habrauser, #
А почему у Save многоточие (Save...), а у других нет?
В винде, например, кнопка «открыть» обычно пишется как Open..., при нажатии на неё открывается ещё одно окно, где нужно выбрать файл.
+3
Quadrix, #
Многоточие подразумевает, что после нажатия появится диалоговое окно. В данном случае — диалог сохранения файла.
0
VolCh, #
Может откроется окно где надо ввести имя файла?
+2
fanex, #
Вы в первом абзаце задали вопрос, а во втором дали на него ответ.
0
winzard, #
Что-то ерунда получается. Пользователи не читают диалоговых окон, но с какой-то радости будут читать надписи на кнопках?
Никто ведь не пишет на выключателях «Включить свет» и «Выключить свет», а на педалях автомобиля «Отключить коробку передач от двигателя», «Замедлить движение» и «Ускорить движение».
Читаешь, что в окне, понимаешь смысл и жмешь знакомые с детства кнопки (Или вообще Enter и Escape)
Если надпись на кнопке такая информативная, что не нужно читать диалоговое окно, может стоит текст в окне подсократить или хотя бы структурировать?
НЛО прилетело и опубликовало эту надпись здесь
0
neanton, #
а вот если выключатель в градиент покрасить от светлого к темному то совковые надписи вроде вкл/выкл не нужны будут
0
VolCh, #
Не эстетично может выглядеть — белая стена, белый выключатель и какой-то градиент…
НЛО прилетело и опубликовало эту надпись здесь
+1
neanton, #
почему же, просто обычно такие надписи как вкл/выкл имеют место находиться на переключателях у вояк да на атомных электростанциях. а в не критичных местах можно ими пренебречь
НЛО прилетело и опубликовало эту надпись здесь
0
Colobock, #
Не хватает кнопки «Убить всех человеков»
+1
kirilloid, #
Везде надо думать.
Например, в скайпе можно начать передачу файла, а потом решить отменить передачу.
После чего мы получаем диалоговое окно с кнопками «Ok» и «Cancel».
Отменить передачу файла?
Отменить отмену?
Руки оторвать этим дизайнерам.
+8
mihmig, #
Подтвердить отказ отмены не сохранения файла?
Да, Нет.

Только отвечайте быстро!
0
charon, #
а мне не нравится идея. Я всегда читаю заголовок диалогового окна и после этого мне проще принять решение по Ок/Отмена, а не вчитываясь в 3 и более варианта. То есть теперь я объективно трачу больше времени на работу с такими окнами.
Если кто-то считает, что наши пользователи начали вчитываться — то это не про славян. Они наугад теперь тыкать будут. Неплохо бы провести научное исследование на эту тему.
0
Nashev, #
Лично я считаю, что бывают диалоги с одной кнопкой, с двумя, с тремя — и прочие, в которых не только кнопки под надписью.

С одной кнопкой — чисто информативные сообщения. И кнопка тогда — ОК, нажатием которой пользователь программе говорит что он прочёл сообщённое ему и смирился, ибо иных вариантов для него у программы нет.

С двумя кнопками — это когда пользователю в дополнение к возможности продолжения даётся возможность отмены. И там кнопка «Отмена» органично дополняет кнопку «ОК». А текст содержит уведомление о том, что именно сейчас будет сделано, если нажать ОК.

С тремя кнопками — это когда продолжить можно что-то делая дополнительное, или пропустив это дополнительное. Или отменить вовсе. Соответственно, текст содержит описание того, что именно программой делается и предложение-вопрос про возможность сделать что-то дополнительное. И кнопки тогда — «Да», «Нет» как ответ на тот вопрос-предложение, и «Отмена» для возможности отменить все как дополнительное действие, так и основное.

Читаю, что все варианты с одной, двумя и тремя кнопками под текстом могут быть уложены в эти перечисленные, и более того — надо их в эти три варианта укладывать.
0
Nashev, #
В частности, диалог из примера — с тремя вариантами: он о закрытии с сохранением или без. Или отмене закрытия. Должны быть кнопки «Да», «Нет» и «Отмена», и текст типа такого:

Вы закрываете программу Text Edit.

Документ «Untitled» ещё не сохранён.
Сохранить его на диск перед закрытием программы?

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.