Цветовая комбинация для трех кнопок

13

Какая цветовая комбинация лучше всего подойдет для этих трех кнопок:

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

Должны ли они все оставаться одного цвета?

Это мои варианты:

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

Изображение всей страницы

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

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

Ответы:

52

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

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

Для меня кнопка переключения имеет слишком большое присутствие как по размеру, так и по размеру. Я бы поместил его между выпадающими меню «Место-назначение», где это имеет больше смысла «само по себе».

Вот два похожих решения, которые для меня намного чище и лучше подходят для этой конкретной цели (я бы лично выбрал первое ):

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

Просто для справки: я использовал иконки Font-Awesom e, на первом изображении (в зависимости от вашей версии) - иконка-обмен / фа-обмен, а стрелки - иконка- стрелка влево / вправо и фа-стрелка влево / право

РЕДАКТИРОВАТЬ - Удаление беспорядка ( на основе комментария DA01 ):

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

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

Алехандро Вельтри
источник
↔︎ стрелки были моей первой мыслью тоже. Посмотрите, как translate.google.com это делает: кнопка with с всплывающей подсказкой.
200_success
Если ясно, что это действительно вторично, я согласен. Если, с другой стороны, это деструктивно (удаляет введенную работу), то я бы сказал, что на самом деле с ней нужно обращаться по-другому.
DA01
@ DA01 Не могли бы вы объяснить подробнее свой последний комментарий? Какой вариант будет лучше, если он разрушителен и почему? Я действительно заинтересован в вашем POV.
Алехандро Вельтри
@ rewobs Я обычно рекомендую вообще не иметь деструктивных параметров, хотя они все еще существуют во многих системах. Поскольку это деструктивно, это не должно выглядеть как кнопка, ИМХО, так как кнопки могут стать привычным нажатием. Люди часто заполняют форму и затем нажимают на самую «очевидную» кнопку внизу, предполагая, что это ОТПРАВИТЬ. Так что, по крайней мере, в дизайне форм, я обычно рекомендую, чтобы единственная кнопка - отправить. Если есть другие задачи, сделайте их визуально отличными и приглушенными по сравнению с основной кнопкой.
DA01
1
@ DA01 Я понял, спасибо за разъяснения. Кроме того, я прочитал ваш комментарий в вопросе, спрашивая, действительно ли нужна кнопка очистки, и я думаю, что это не так, потому что в любом случае пользователь заменит значение путем повторного выбора из выпадающих списков, поэтому добавление кнопки очистки добавит ненужные акция "посередине".
Алехандро Вельтри
12

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

Обычно у вас есть первичная кнопка (кнопки), вторичная кнопка (кнопки) и иногда третичная кнопка (кнопки) и / или неактивные кнопки действий.

Для Первичного и Вторичного я обычно предлагаю ваш предпочтительный цвет брендинга (чисто субъективный) на двух уровнях контраста. Высокая контрастность для первичной, немного меньше контрастности для вторичной.

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

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

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

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

ОБНОВЛЕНИЕ: Я только заметил, что, когда я публиковал это, это шаблон, который StackExchange использует при создании нового сообщения. Кнопка СОХРАНИТЬ является первичной, ОТМЕНА является третичной и отображается как ссылка, а не кнопка.

DA01
источник
1

Высококонтрастные (например, черно-белые) цвета всегда являются лучшими, что исключает оранжевый вариант. И затем, добавив немного маркетинга в смесь, какая цветовая схема используется для остальной части вашей страницы с точки зрения кнопок, приложения? Но если бы мне пришлось выбирать: Go: зеленый; Переключатель ...: морской синий; Ясно: черно-белый. Имейте в виду, что цвет также связан с предпочтениями.

(Не по теме: вы можете исключить длинную метку для переключения с помощью кнопки с меткой между двумя полями)


источник
1
Добро пожаловать в UX.stackexchange. Какие у вас доказательства того, что высокий контраст всегда лучший?
Майо,
1
Что ж, это может быть не лучшим решением для любого контекста, но высокая контрастность улучшает читабельность, поскольку отличает текст от фона. В противном случае это становится размытым. Рассмотрим дальтонизм (чаще всего: зелено-красный): красный текст на зеленом фоне или наоборот - как вы обнаружите эту форму дальтонизма.
1
Вот статья, в которой перечислены различные аргументы для цветов: usertesting.com/blog/2014/12/02/color-ux-conversion-rates
Есть точка, где контраст недостаточно велик и разборчивость уменьшается. Я полагаю, что я слишком сосредоточился на черно-белом примере в первом предложении. Наступает момент, когда разборчивость «достигается», и тогда «больше» не увеличивает производительность пользователя. Опять таки. Добро пожаловать в UX
Mayo
1

Я бы сказал, измените контраст похожего оттенка, чтобы показать акцент . Почему? ( 1 из 12 мужчин дальтоник и 1 из 200 женщин также дальтоник

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

В этой статье говорится, что самая важная кнопка должна выглядеть так

Смотрите их пример ниже

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

Не выглядит так хорошо, как изображение ниже (по моему мнению)

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

Эта статья также упоминает, чтобы поместить кнопки в разумном порядке . Так что, на мой взгляд, я бы поставил кнопку «идти» справа, потому что англоязычные пользователи слева направо (поэтому они, естественно, смотрят направо на конечные знаки). Я бы поставил его слева для арабских пользователей. Вот как бы я устроил это для английского рынка.

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

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

Фрэнк Висаджо
источник
«потому что англоязычные пользователи читают справа налево» - а? Мы говорим об одном и том же английском?
BlueRaja - Дэнни Пфлугхофт
отредактировано ... упс