OK /Отмена влево /вправо?

Если кнопка ОК находится слева от кнопки «Отмена» или наоборот?

Есть ли какие-либо исследования, предлагающие одно из решений?

300 голосов | спросил Art 30 AM00000050000003231 2010, 05:59:32

22 ответа


181

Как и все: пользовательский тест! К счастью, герой юзабилити Якоб Нильсен прыгает на помощь в своей статье Alertbox о кнопках OK /Cancel :

  

Если кнопка «ОК» указана до или   после кнопки «Отмена»? Следующий   более важные соглашения о платформе   чем субоптимизация личности   диалоговое окно.

Костя был прав, советуя придерживаться правил платформы. Но как насчет веб-платформ?

  

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

Он также упоминает два дополнительных важных рекомендаций, которые вы можете рассмотреть при создании кнопок ОК /Отмена:

  
  • Часто лучше называть кнопку, чтобы объяснить, что она делает, чем использовать общий ярлык (например, «ОК»). Явный ярлык служит «своевременной помощью», что дает пользователям больше уверенности в выборе правильного действия.
  •   
  • Сделайте наиболее часто выбранную кнопку по умолчанию и выделите ее (кроме случаев, когда ее действие особенно опасно, в тех случаях вы хотите, чтобы пользователи явно выбирали кнопку, а не случайно активировали ее, нажав Enter).
  •   
ответил Rahul 30 PM000000120000005031 2010, 12:22:50
124

Ответ в руководстве пользователя для используемой системы.

Для Windows

  

Представьте кнопки фиксации в следующем порядке:

     
  • OK /[Сделать это] /Да
  •   
  • [Не делать этого] /Нет
  •   
  • Отмена
  •   
  • Применить (если есть)
  •   
  • Справка (если присутствует)
  •   

Итак, Отмена всегда справа от кнопки OK.

Для MacOS

  

Кнопка, которая инициирует действие, находится дальше всего справа. Кнопка «Отмена» находится слева от этой кнопки.

Итак, для пользователей MacOS Отмена находится слева от кнопки OK.

Для Android

  

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

     

Позитивные действия находятся справа. Позитивные действия продолжают продвигаться к цели пользователя, вызвавшей диалог.

Для Android, Отмена находится слева от кнопки OK.

Для других систем см. рекомендации.

ответил Kostya 30 AM00000080000003931 2010, 08:51:39
54

Подумайте о «чтении» метафоры. Западники читают слева направо, наши мозги обусловлены движением слева направо. CANCEL - это в основном шаг назад (слева) и OK /SUBMIT /YES /Etc., Шаг вперед (справа).

ответил GoodShovel 30 PM00000090000000531 2010, 21:46:05
28

Кажется, что Windows OK /Отмена конвенции сделали много мозгового кондиционирования для пользователей. Поэтому тесты юзабилити, несомненно, выйдут с большим количеством людей , ища кнопку ОК слева, Отмена справа.

Но это не меняет самого элементарного инстинкта того, кто взаимодействует с системой без предварительной подготовки. Мой основной инстинкт говорит о том, что кнопка ОК /Утверждение /Перемещение вперед, независимо от того, какой цвет или размер вы применяете к ней, должна находиться на правом краю диалогового окна.

Рассмотрим это диалоговое окно без ярлыков или цветовых оттенков:

введите описание изображения здесь>> </p>

<p> Где бы вы нажмете? Я бы нажал кнопку на правом краю, если я хочу отправить форму. Причина в том, что до Windows я был обусловлен моим инстинктом следующими способами: </p>

<ul>
<li> Английский язык течет слева направо. </li>
<li> Навигация в браузере работает Назад (слева) и Вперед (Вправо).
<img src =

  • Старые 2D-игры, такие как Dangerous Dave, перемещают персонажа вправо, когда они продвигаются дальше.
  • введите описание изображения здесь>> </p>

<ul>
<li> <p> Числа на числовой строке увеличиваются вправо, уменьшаются влево. </p> </li>
<li> <p> Атомные веса в периодической таблице увеличиваются вправо. </p> </li>
<li> <p> Часы идут вправо. </p> </li>
<li> <p> Календарь увеличивает даты вправо. </p> </li>
</ul>
<p> Я думаю, что платформа Windows создала анти-шаблон с OK /Cancel, который теперь настолько широко распространен, что его проверяющие исследования юзабилити. Но если вы рассмотрите приведенные выше факторы, я считаю, что сохранение основной кнопки справа является оправданным и оправданным. </p>

<p> EDIT: Еще один фактор, который следует учитывать, - это последовательность. Если вы ожидаете дополнительных кнопок в ваших диалоговых окнах, основная кнопка на правом краю поможет оставаться в соответствии с местом размещения. Наглядный пример мог бы сделать это ясно: </p>

<p> <img src =

    ответил Adnan Khan 19 AM00000060000003331 2014, 06:03:33
    16

    Для пользователей, чей язык читается слева направо, я предлагаю поместить кнопку «ОК» влево, поскольку эти пользователи будут приписывать большее значение первому, что они видят.

    Это позволит этому подмножеству пользователей выполнить свою задачу как можно быстрее.

    ответил Ryan Shripat 30 AM00000060000005431 2010, 06:27:54
    15

    Люк Вроблевски написал книгу о веб-формах (дизайн веб-форм: заполнение бланков), а также рассмотрел некоторые принципы, такие как «Первичные и вторичные действия» (http: //www.lukew.com/resources/articles /psactions.asp), «Надписи верхнего, правого или левого символа» (http: //www.lukew.com/ff/entry.asp?504) или «путь к завершению» и т. д. (вы также можете прочитать http://www.uxmatters.com/mt/archives/2006/07 /label-placement-in-forms.php )

    Итак, IMO в зависимости от того, какое у вас место размещения меток (предпочтительнее по вертикали) и слева направо + сверху вниз, чтобы иметь хороший путь к завершению, сначала нужно перенести первичное действие (ОК), а затем вторичное (++ Cancel)

    EDIT: размещение меток в формах, Кэролайн Джарретт, 2010 http : //www.formsthatwork.com/files/Articles/labels-on-forms-for-uxlx-2010.pdf

    ответил Ecaterina Moraru 30 PM00000070000005431 2010, 19:20:54
    13

    ИМХО, это не имеет большого значения, где вы разместите кнопку «ОК»: слева или справа. Неважно, какие пользователи посещают ваш сайт (с ивритом или арабскими языками). Неважно, какое программное обеспечение они используют. Статистика сообщает нам, что 55% пользователей хотят видеть кнопку «ОК» справа, но если мы поместим ее вправо, остальные 45% пользователей будут недовольны.

    Лучшее решение - подчеркнуть кнопку «ОК» (сделать ее более заметной, чем «Отмена»), и все пользователи будут легко указывать кнопку «ОК» как более важную и основную кнопку.

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

    введите описание изображения здесь>> </p></body></html>

    ответил webvitaly 21 J0000006Europe/Moscow 2012, 00:40:31
    9

    Я думаю, что все дали хороший момент, но здесь есть еще один ключевой момент.

    Кнопки, такие как Ok /Submit /Save и т. д., называются позитивными кнопками. Аналогично, кнопки, такие как Отмена /Сброс и т. Д., Называются кнопками отрицательного действия.

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

    Были некоторые испытания на момент глаз и amp; тепловые испытания проводились на пользователях и выполнялись в зависимости от наличия лабораторий. Самый лучший сценарий - большинство пользователей начинают смотреть на веб-приложение или любое другое приложение слева направо & из верхнего угла и начинайте прокручивать до нижнего уровня, захватывая ключевые горячие точки и, как правило, заканчивая в левом дне, поэтому всегда полезно держать кнопку положительного действия слева и кнопки отрицательного действия справа.

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

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

    Я попытался объяснить, что пары очков основаны на моем опыте и исследовательских работах.

    Сделайте комментарий, чтобы я мог также узнать больше.

    Отношения Дипак Баджай

    ответил 30 PM00000060000004031 2010, 18:15:40
    7

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

    Я видел это как в веб-приложениях, так и в настольных приложениях.

    ответил Sam 24 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowFri, 24 Sep 2010 07:21:19 +0400 2010, 07:21:19
    5

    Просто для разъяснения причин:

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

    Однако это также зависит от того, к чему привыкли пользователи - если вы создаете сайт или приложение для пользователей Windows, лучше следовать стандартам Windows.

    Убедитесь, что «Ввод» на клавиатуре правильно связан с OK - многие люди тоже будут использовать это.

    ответил Dan Barak 30 AM000000100000001131 2010, 10:48:11
    4

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

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

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

    ответил 2 ndEurope/Moscowp30Europe/Moscow09bEurope/MoscowThu, 02 Sep 2010 03:23:34 +0400 2010, 03:23:34
    4

    Вы можете найти интересное мнение здесь ; Энтони Т. предлагает, чтобы кнопка «ОК» справа от «Отмена» была лучше:

      

    С кнопкой «OK» справа, визуальные фиксации меньше и   поток в одном направлении [...]

         

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

    ответил Claudiu Constantin 20 J0000006Europe/Moscow 2012, 15:31:48
    4

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

    Из http://www.nngroup.com/articles/reset- и-отменить-кнопки /:

      

    Большинство веб-форм могли бы улучшить удобство использования, если кнопка Reset была   удален. Кнопки отмены также часто имеют мало значения в Интернете.

         

    Предложение кнопки «Отмена», когда пользователи могут опасаться, что они   чего они хотят избежать. Имея явный способ отменить   обеспечивает дополнительное чувство безопасности, которое не предоставляется просто   оставляя.

         

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

    ответил Adam George 20 FebruaryEurope/MoscowbWed, 20 Feb 2013 03:24:25 +0400000000amWed, 20 Feb 2013 03:24:25 +040013 2013, 03:24:25
    3

    Ничего себе! Такое много ответов спорит влево или вправо.

    Я сам проверил тесты и обнаружил, что они статистически неубедительны.

    Лучший ответ, который я нашел, заключается в том, что на самом деле не имеет значения, какой порядок он выполняет, если основное действие четко обозначено - я всегда использую красочную кнопку для [Do it] /go /submit /etc и кнопка меньшего текста для [Не делать этого] /отменить /очистить /и т. д.

    Очень похоже на кнопки «Опубликовать свой ответ» и «отменить» внизу формы ответа прямо здесь, на UX StackExchange!

    ответил Andrew Martin 29 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowThu, 29 Sep 2016 11:22:38 +0300 2016, 11:22:38
    2

    Я бы пошел с «Хорошо» справа. Из-за западного направления чтения, которое идет слева направо. И «Отмена» не приведет вас вперед, но «Хорошо» будет.

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

    ответил erikrojo 17 Maypm11 2011, 23:01:26
    2

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

    ОК справа
    Этот шаблон выигрывает руки в объективном аргументе юзабилити, если пользователи не привязаны к менее используемым конвенциям Windows (см. статья ). Как обсуждается в статье, если ОК слева выравнивается с нашим соглашением чтения слева направо, более эффективным потоком задачи, является лучшей угловой целью, а также тем фактом, что мы считаем, что временные графики выполняются слева направо (следовательно, «назад» /«отменить» справа имеет смысл видеть, поскольку это образец времени назад).

    ОК слева
    Соглашение Windows

    Это неудачная реальность, но плохо разработанные шаблоны (например, ОК слева) могут стать конвенцией, и пользователи ожидают их. Попытка сделать что-то еще, даже если объективно это более удобная модель, приведет к плохой юзабилити. Классическим примером является метрическая и имперская измерительная система - метрическая система имеет все, что подходит для нее в плане удобства использования, простота преобразования единиц и т. Д .; но если вы вынуждаете горожан-американцев мыслить в метрах и сантиметрах, когда они используются в дюймах /футах, вы получите плохую юзабилити и очень разочарованные пользователи. Я думаю, что урок состоит в том, чтобы очень усердно работать, чтобы убедиться, что мы никогда не вводим плохие соглашения в первую очередь!

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

    ответил M.A.X 5 WedEurope/Moscow2012-12-05T23:42:29+04:00Europe/Moscow12bEurope/MoscowWed, 05 Dec 2012 23:42:29 +0400 2012, 23:42:29
    2

    Лол, я не могу не смеяться над многими из этих ответов. Это похоже на случай отсутствия леса для деревьев. Как и любая проблема UX, в основном это зависит от того, как формируется форма. Например, ярлыки сверху, поля ниже или метки слева полей. Посмотрите на всю страницу и на то, как глаза пользователя стекают по форме. Есть ли четкая линия визирования к окончательной кнопке «Отправить»?

    Как указано в предыдущем сообщении Книга Люка Вроблевски о веб-формах. Дизайн веб-форм. Заполнение бланков содержит некоторые из лучших советов по созданию веб-форм, а также отличную парадигму форм с точки зрения пользователя. Формы - это средство до конца и допускается из-за предполагаемого конечного результата (например, покупки чего-то, создания учетной записи, чтобы получить доступ к чему-либо и т. д.). Пользовательский тест, тест AB, конечно, если можете. Конечной целью является то, что вам легче заполнить форму.

    ответил mike 31 Jpm1000000pmThu, 31 Jan 2013 22:49:02 +040013 2013, 22:49:02
    1

    В моих приложениях я использую визуальный цвет для выделения цели кнопки действия. Тогда независимо от того, осталось это или нет. Я лично предпочитаю иметь кнопку «ok» справа (потому что я правша и /или пользователь osx - и на самом деле это ссылка ..)

    • большая зеленая кнопка для подтверждения
    • большая красная кнопка для удаления
    • (большая или не) серая кнопка для отмены
    ответил Marc D 19 Maypm11 2011, 14:20:16
    0

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

    , поэтому вместо:

    [ NOOOOO! ] [ ЩЕЛКНУТЬ МЕНЯ! CLICK ME! ]

    было бы:

    Нет, спасибо! [ Да, пожалуйста! ]

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

    ответил fallenboy 6 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowTue, 06 Sep 2011 10:46:34 +0400 2011, 10:46:34
    0

    Конечно, есть много аргументов для обеих сторон.

    Я бы сказал так. «Считаете ли вы, что позитивное отрицательное позиционирование является лучшим? Нет или да?»

    Суть в том, что «Да или Нет» лучше течет при разговоре, что, вероятно, объясняет, почему корпорация Microsoft выбрала позитивно-отрицательный порядок кнопок.

    В ДРУГОЙ стороне отрицательно-положительный поток часто используется в риторике и обсуждении, чтобы добавить вес к положительному аргументу и сохранить его свежим в сознании человека. «Вы хотите, чтобы ваши дети пострадали от рук противоположной стороны? Или вы хотите проголосовать за нашу партию и защитить свое будущее?» И так далее.

    ответил Seth Jeffery 7 Maypm15 2015, 13:06:29
    0

    В порядке приоритета используйте первое доступное решение:

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

    Однако в случае считывателей экрана и аналогичных инструментов доступности, основное действие в начале (слева в западных культурах) может сэкономить таким пользователям с особыми потребностями много времени!

    ответил straya 29 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowThu, 29 Sep 2016 03:59:02 +0300 2016, 03:59:02
    0

    Для меня это будет логический порядок:

    <left Вправо>

    <Предыдущий Далее>

    <Назад Forward>

    <Назад Готово

    Ничего не делать Сделать это

    Отменить OK

    За исключением OK, следует заменить фактическое действие, например Сохранить Удалить Принять Выход или Отправить .

    Когда я встречаю людей, которые спорят о том, чтобы положить OK слева, я всегда прошу их разместить Left vs Right , Предыдущий vs Далее и Назад vs Forward , и пусть они спорят, почему они помещают их в этот порядок, прежде чем позволить им аргументировать, почему OK должен быть слева.

    ответил Ole Tange 28 PMpSat, 28 Apr 2018 14:59:29 +030059Saturday 2018, 14:59:29

    Похожие вопросы

    Популярные теги

    security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132