UXPUB 🇺🇦 Дизайн-спільнота

Cover image for ОК-Отмена или Отмена-ОК? Проблема порядка кнопок
Редакція
Редакція

Опубліковано

ОК-Отмена или Отмена-ОК? Проблема порядка кнопок

#ux

В каком порядке лучше всего расположить кнопки в диалоговом окне?

Должна ли кнопка «ОК»располагаться до или после кнопки «Отмена»? Следование стандартам платформы важнее, чем оптимизация отдельного диалогового окна.

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

  • ОК / Отмена (OK / Cancel)
  • Отмена / ОК (Cancel / OK)

Оба варианта являются разумным выбором, и люди могут часами спорить о своих предпочтениях:

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

В подобных случаях часто не имеет значения, какой порядок вы выберете. Любой из вариантов имеет веские аргументы в свою пользу, и выбор какого-либо варианта вряд ли приведет к юзабилити-катастрофе. Некоторым пользователям можно сэкономить 0,1 секунды, если вы выберете «правильный» выбор для определенных обстоятельств, но не стоит проводить тщательное исследование, чтобы выяснить, что это за выбор. Лучше потратить свои юзабилити-ресурсы на те вещи, которые могут изменить ключевые показатели эффективности на 83% и более.

Итак, чтобы сделать этот конкретный выбор – а также множество других небольших вариантов в дизайне приложения – лучше всего следовать стандарту графического интерфейса платформы. Применение согласованного дизайна, который следует ожиданиям пользователей, сэкономит людям гораздо больше времени (и приведет к меньшему числу ошибок), чем немного более оптимальный выбор для вашего приложения, но вносит несогласованность.

Несогласованность тратит больше времени, чем экономит

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

К сожалению, руководство Windows User Experience Guidelines отличается от Apple Human Interface Guidelines, когда дело доходит до последовательности кнопок «OK» / «Отмена»:

  • Windows ставит «ОК» на первое место
  • Apple ставит ОК в конце

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

Кнопки диалогового окна для веб-приложений

Если вы разрабатываете веб-приложение, принять решение сложнее, но вам, вероятно, следует выбрать платформу, предпочитаемую большинством ваших пользователей. Логи вашего сервера покажут вам процент пользователей Windows и MacOS для конкретного веб-сайта или интрасети. Конечно, у Windows, как правило, намного больше пользователей, поэтому, если вы не утруждаете себя проверкой логов, то в большинстве ситуаций будут применяться следующие рекомендации:

  • Сначала ОК, затем Отмена, как на этом скриншоте из Office 2007:

На скриншоте показаны два дополнительных правила для кнопок диалогового окна:

  • Часто лучше назвать кнопку так, чтобы объяснить, что она делает, чем использовать общую метку (например, «ОК»). Явная метка служит своевременной помощью, давая пользователям больше уверенности в выборе правильного действия.
  • Сделайте наиболее часто выбираемую кнопку, кнопкойпо умолчанию и выделите ее (кроме случаев, когда ее действие опасно; в этих случаях вы хотите, чтобы пользователи обдуманно выбирали кнопку, а не случайно активировали ее нажатием Enter).

Перевод статьи uxplanet.org

Топ коментарі (0)