У меня есть навигационная панель с функцией поиска, которая имеет две кнопки «Поиск» и «Дополнительно». Мой основной цвет — синий #2a7ab0. Я использую его для кнопок и некоторого текста. Цвет текста на синей кнопке — белый #fff. Для рискованных действий, будь то текст или кнопка, я использую красный #e00000. Мой вопрос в том, должен ли я использовать оранжевый # d43900 в качестве дополнительной кнопки для «дополнительно». Не будет ли путаницы между ним и красным за рискованные действия? Я имею в виду дальтоников. Я пробовал зеленый, но он был либо слишком темным и уродливым, либо слишком светлым для белого текста. Я бы рассмотрел другие цвета, кроме пурпурного и розового.

enter image description here

1
Devin 12 Дек 2016 в 07:58

2 ответа

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

Таким образом, ваше вторичное действие...

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

См. также: исследование Люка Вроблевски по основным и дополнительным действиям в веб-формах.

enter image description here

9
Roger Attrill 11 Дек 2016 в 18:13
Хотя кнопка «Дополнительно» не является основной, я хочу выделить ее. На данный момент я решил остановиться на темно-сером. # 444, так как я не могу сделать его подчеркнутым текстом без фона. Спасибо
 – 
Bilal Khoukhi
11 Дек 2016 в 21:22
3
Вы должны быть осторожны с серыми кнопками, потому что они могут выглядеть отключенными.
 – 
slugolicious
11 Дек 2016 в 23:56
1
@slugolicious, хотя вы правы, #444 — это не тот оттенок, который большинство людей примет за отключенный. Кроме этого, я думаю, что ответ Роджера точен. Может быть, не для этого конкретного случая (мы не знаем, ПОЧЕМУ это не может быть подчеркнутой ссылкой), но, вероятно, правильно в большинстве других случаев.
 – 
Devin
12 Дек 2016 в 07:57
@devin, да, мне тоже нравится предложение Роджера, но я думаю, нам нужно быть осторожными с тем, что, по нашему мнению, люди могут принять за отключенную кнопку. любой серый оттенок, который отличается от других кнопок, может сбивать с толку. использование оригинального синего фона bixal (# 2a7ab0) для нескольких кнопок и одной кнопки с # 444 делает кнопку отключенной. см. s6.postimg.org/4oj6hr5n5/buttons.jpg
 – 
slugolicious
12 Дек 2016 в 20:03
Ну, вот здесь и пригодится тестирование с реальными пользователями. Для меня эта кнопка выглядит как "нажатая" :D
 – 
Devin
12 Дек 2016 в 20:04

С точки зрения доступности оранжевый и красный цвета почти неразличимы. Вы можете отличить их по яркостному контрасту.

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

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

enter image description here

2
Rien Daamen 15 Дек 2016 в 12:13
Спасибо за ответ, Риен! Я согласен с идеей значков, однако я не думаю, что у нас должна быть кнопка поиска внутри поля и выделенная расширенная кнопка снаружи, многие пользователи сделают ошибку, нажав расширенную кнопку после ввода ключевого слова. Это мое мнение, не основанное ни на каких исследованиях.
 – 
Bilal Khoukhi
14 Дек 2016 в 22:01
Bixal, вы правы. Я добавил второй пример, где кнопки имеют одинаковый формат: значок и текст.
 – 
Rien Daamen
15 Дек 2016 в 12:17
Основная (зеленая) кнопка теперь больше связана с полем ввода поиска, а дополнительная (серая) кнопка будет иметь собственное действие.
 – 
Rien Daamen
15 Дек 2016 в 12:22