среда, 28 мая 2008 г.

OK–Cancel или Cancel–OK?

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

Существует 2 классических последовательности кнопок в диалоговых окнах:

- OK/Cancel
- Cancel/OK

Каждый вариант имеет свои причины для существования:

- "ОК" в начале. При чтении слева направо, как это делается в английском, русском и многих других языках, сначала идет ОК, а потом - Cancel. Эта же причина используется для расположение кнопок Yes/No или Previous/Next именно в таком порядке. Также, при перемещении по кнопкам при помощи Tab, чтобы попасть на ОК, который чаще нужен пользователю, потребуется на одно нажатие меньше, чем на Cancel.

- "ОК" в конце. Правильнее с точки зрения потока, так как выбирая "ОК" - мы заканчиваем диалог. Также, по аналогии с Previous/Next, выбирая ОК пользователь продвигается вперед, а Cancel - отбрасывает его назад. С этой токи зрения OK = Next, и должен находится в конце.

Не имеет такого уж большого значения как вы расположите эти кнопки. Каждый из этих вариантов имеет свои сильные аргументы и ни один не приведет к юзабилити-катастрофе. Но в каких-то случаях это сохранит пользователю 0.1 секунды.

Чтобы решить, как лучше вам поступить именно в вашем приложении - достаточно руководствоваться стандартами GUI платформы, на которой работает ваше приложение.

К сожалению, Windows Vista User Experience Guidelines отличается от Apple Human Interface Guidelines когда речь заходит о кнопках OK/Cancel:

- В Windows OK ставится вначале
- В Apple OK ставится в конце

Если вы разрабатываете десктопное приложение - делайте, как это принято в используемой ОС.

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

Если вы разрабатываете Web-приложение - выбор сделать сложнее.

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

Однако, можно дать еще более универсальную рекомендацию, которую иллюстрирует следующий скриншот Office 2007:



- Использовать в названии кнопки текст, описывающий, что точно делает данная кнопка. Например, написать Save вместо ОК.

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


Подробнее:
http://www.useit.com/alertbox/ok-cancel.html
Ссылки по теме:
http://www.rimmkaufman.com/rkgblog/2008/05/29/usable-sites-must-persuade-too/
http://measuringuserexperience.com/SubmitCancel/index.htm
http://hellousability.blogspot.com/2007/10/ok-cancel-buttons-evolution-till-web-20.html

6 комментариев:

Анонимный комментирует...

Ну я б так не сказал :)
Попробуй по работай на маке после винды, и посмотри сколько будешь терять нервов и времени 0.1 секунды, или 100 - особенно на 5-6 раз, при заполнении форм с данными.

поповоду web. Что мешает серверным скриптом определить операционку и поставить кнопки в нужном порядке? :)

Omega комментирует...

При заполнени формы в грамотном интерфейсе вообще нельзя давать возможность потерять все данные "на ура!".
Банально спрашивать "Вы уверены?"

>>поповоду web. Что мешает серверным скриптом определить операционку и поставить кнопки в нужном порядке? :)

Тут вроде все очевидно.
Способ плох тем, что один и тот же сайт один и тот же человек может посещать - дома из-под мака, с работы - из винды, а в дороге - с телефона.(Например, сайт типа ToDo list).
И если кнопки будут перепрыгивать с места на место каждый раз....гм... :))

Анонимный комментирует...

БЛИН! Я такой камент тут написал - В СТРАНИЦУ!!

:-(((

И всё похерилось только потому, что я не залогинен на вордпрессе!

И вы мне будете ещё говорить про интерфейс, товарищи? :-))) Когда выбрали блог, в котором оставить камент мало того что проблема - написание картиночного кода, поле ввода вываливается в каком-то зачуханом маленьком окошечке.

После этого особенно смешны слова из предыдущего камента: при заполнени формы в грамотном интерфейсе вообще нельзя давать возможность потерять все данные "на ура!".

S. Danilov комментирует...

Надуманная проблема :)
Если есть сомнения в порядке следования кнопок, то надо запрограммировать возможность кастомизации положения кнопок в интерфейсе ("скины" например).

Omega комментирует...

to umilin: мне жаль, я бы с интересом почитала

to danx: возможно в сложных программах это дейсвительно прокатит - настроил, и пользуйся как угодно.
А если это программа типа калькулятор, для быстро-сделать-что-надо-и-не-думать?
Неужели так таки и настройки делать для, возможно, единственного диалога в программе?

Анонимный комментирует...

Конечно делать! Если уж начали под такие мелочи прогибаться - делайте... А юзер который выходит с разных операционок, мне думется гораздо осмотрительнее того кто с одной (ну все поняли с какой да?) и полностью отдает себе отчет в каком окружении интерфейса он находится..