Должен ли «Да, удалить его - красный или зеленый?

Разработав интерфейс для CMS (Content Management System), я наткнулся на парадокс, и я немного смущен тем, что , что делать, и , почему , чтобы сделать это ..

Контекст

Перед удалением альбома пользователю предлагается подтвердить действие.

Зеленый "Да"

Первая опция

Красный «Да»

Второй вариант

Какой параметр более интуитивно понятен для пользователя?

746 голосов | спросил Diéssica 12 Jam1000000amSun, 12 Jan 2014 02:17:38 +040014 2014, 02:17:38

17 ответов


1291

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

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

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

<p> Пользователи обычно связывают действие, такое как «Удалить» или «Удалить», красным. И, как всегда, предоставьте способ «отменить» действие. </p></body></html>

ответил jnmnrd 12 Jam1000000amSun, 12 Jan 2014 03:56:06 +040014 2014, 03:56:06
311

Я не уверен, что вы должны думать только о красных и зеленых. Красный, как правило, связанный с опасностью , возможно, относящийся к средневековью (цитата необходима) , Быстрый поиск изображений Google для «удаления» дает почти полностью красные изображения.

Для меня (и bootstrap ) зеленый указывает на успех, красный указывает на опасность.

«Кнопки

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

Изменить . Я думаю, @JNMNRD имеет лучший ответ. Вот изображение @ JNMNRD без слов. Вы можете указать, какая кнопка означает удаление?

Удалить

ответил circuitry 12 Jam1000000amSun, 12 Jan 2014 04:01:55 +040014 2014, 04:01:55
213

Взглянув на это с немного другого угла, где это возможно, вы можете рассмотреть возможность полностью удалить подтверждение и переключиться на процесс «Do /Undo».

Этот метод часто используется в службах Google:

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

<p> У этого есть преимущества, что он является культурно нейтральным и более эффективным для пользователя (один клик, а не два, чтобы удалить). </p>

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

<p> Чтобы избежать этих недостатков, вы можете подумать о включении некоторых функций корзины на сайт, как это делает SharePoint. </p></body></html>

ответил Graham Wager 13 Jam1000000amMon, 13 Jan 2014 01:27:48 +040014 2014, 01:27:48
124

При всем моем уважении, я думаю, что каждый ответ до сих пор немного упустил отметку.

Прежде всего, на основе раздела Контекст вашего вопроса ...

  

Контекст

     

Перед удалением альбома пользователю предлагается подтвердить действие.

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

  

Пожалуйста, подтвердите удаление этого альбома:

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

Когда вы добавляете все это вместе, вот пример того, что вы получаете:

подтверждение модальности


Обновление на основе комментариев о формулировке кнопок ...

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

Итак, я подумал об этом и придумал Keep и Корзина . Они оба совпадают с вопросом о том, следует ли удалять альбом или отменять действие, не говоря уже о том, что цвета по-прежнему работают для пользователей с цветным слепым цветом, ободренный Keep позволяет понять, что такое действие по умолчанию, и вместе, слова делают его 100 % ясно, какое действие подтверждают.

обновленное подтверждение модальное

ответил Code Maverick 13 Jpm1000000pmMon, 13 Jan 2014 19:40:45 +040014 2014, 19:40:45
41

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

Источник: http://en.wikipedia.org/wiki/Red#Warning_and_danger

ответил Rolf 12 Jam1000000amSun, 12 Jan 2014 06:02:39 +040014 2014, 06:02:39
26

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

Как резюмировано в аннотации (выделение мое):

  

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

     Эксперимент 1 продемонстрировал, что участники предпочитают красный цвет на зеленый в дружественной лабораторной среде.      Эксперимент 2 продемонстрировал, что предпочтение участников от красного зависит от контекста, в котором представлен цвет: Красный предпочтительнее в гостеприимном контексте (после счастливого лица), но не во враждебном контексте (после сердитое лицо). Была обнаружена противоположная картина для зеленого цвета управления.      

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

     

(Запись базы данных PsycINFO (c) 2012 APA, все права защищены)

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

ответил Jessica Yang 12 Jpm1000000pmSun, 12 Jan 2014 20:36:32 +040014 2014, 20:36:32
16

Каков существующий стандарт в остальной части вашего приложения? Вы используете красные кнопки, чтобы указать «Я хочу завершить это действие», а зеленые - «отменить это действие»? Или это наоборот?

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

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

ответил Dave Sherohman 12 Jpm1000000pmSun, 12 Jan 2014 16:58:20 +040014 2014, 16:58:20
15

Вы можете настроить первичный и вторичный вызов на действие.

Пример из LinkedIn:

example

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

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

Вы действительно хотите удалить этот альбом? ДА /Отмена

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

  

предоставить отменить

Источник: Какие альтернативы фразе« Вы уверены, что хотите XYZ »в диалоговом окне подтверждения?

Вот еще один пример предоставления возможности удаления:

example

  

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

Источник: http: //uxmovement. ком /кнопки /, как в изготовлении, Sure-пользователи-Dont-случайно-удалить /

ответил Pdxd 27 MarpmThu, 27 Mar 2014 18:55:08 +04002014-03-27T18:55:08+04:0006 2014, 18:55:08
11

Мое решение для удаления вещей - это кнопка с иконкой корзины, которая открывает немного popover. Я думаю, что это хорошее решение, потому что:

  • не тревожный диалог , все ненавидят диалоговые окна подтверждения!
  • требуется подтверждение. нет кликов по клику
  • пользователь должен только читать два слова, не надоедливый вопрос
  • Красный цвет указывает, что он действительно удален, вы можете empasize его, добавив «необратимый» для удаления
  • минимум движения мыши и глаз
  • минимум пространства впустую
  • нет контекстного переключателя

screenshot ## Заголовок ##

ответил daniel 26 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowFri, 26 Sep 2014 13:00:02 +0400 2014, 13:00:02
8

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

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

ответил Mike 12 Jam1000000amSun, 12 Jan 2014 03:56:36 +040014 2014, 03:56:36
8

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

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

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

ответил Dmacatude 14 Jpm1000000pmTue, 14 Jan 2014 21:30:49 +040014 2014, 21:30:49
6

Зеленый всегда должен быть положительным, относящимся к опции «Да, идти вперед», поэтому он должен быть зеленым. Тот факт, что вы удаляете что-то, а не создаете его, не имеет значения.

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

ответил Dave Murray 12 Jam1000000amSun, 12 Jan 2014 02:36:44 +040014 2014, 02:36:44
6

Кнопки используются для отправки /отправки информации или принятия мер, а не для запроса бездействия. Единственная кнопка должна быть той, которая проходит через поток. Любые другие действия должны быть представлены ссылкой. В этом контексте я бы отстаивал цвет кнопки, который нигде не используется на сайте, или который зарезервирован только для самых серьезных действий. Я предполагаю, что это будет красным. Дело в том, чтобы заставить пользователя выйти из пассивного психического состояния нажатия кнопок цвета X в позиции Y (зеленый, правый снизу) и заставить их явно спросить «что это будет делать?»

ответил Matt Langan 13 Jam1000000amMon, 13 Jan 2014 00:13:03 +040014 2014, 00:13:03
3

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

Цвет является ненужным отвлечением в таком сценарии и не помогает в контексте.

Разрешить текст на ярлыках кнопок для подтверждения действий: «Отмена» и «Удалить альбом»

ответил Sumi 15 Jam1000000amWed, 15 Jan 2014 10:40:33 +040014 2014, 10:40:33
0

@JNMNRD имеет лучшее решение. Обычно действие, которое вы хотите, чтобы пользователи принимали, должно быть помещено справа, а поскольку это сообщение подтверждения, то действие удаления должно быть помещено справа.

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

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

ответил Miguel Fernandez 15 Jpm1000000pmWed, 15 Jan 2014 23:07:34 +040014 2014, 23:07:34
0

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

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

<p> Github показывает всплывающее окно, чтобы убедиться, что пользователь действительно хочет удалить проект или репозиторий. </p>

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

ответил Pir Abdul 20 J0000006Europe/Moscow 2018, 09:48:46
-1

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

ответил Joshua Dance 27 MarpmThu, 27 Mar 2014 18:28:18 +04002014-03-27T18:28:18+04:0006 2014, 18:28:18

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

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

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