“На ссылки какого цвета чаще нажимают?”
UX Курс: 22 из 30 глупых вопросов
(Вы читаете перевод нового ускоренного курса UX. На этот раз курс посвящен глупым вопросам (UX Crash Course: 30 Stupid Questions). Если вы здесь впервые, то лучше начните с первой главы).
Для любого, кто не в теме дизайна, работа UX-специалиста кажется бесконечным обсуждением заголовков и цветов кнопок. Едва ли это отражает суть UX, но мы действительно этим иногда занимаемся. Так что давайте ответим на вопрос:
“На ссылки какого цвета чаще нажимают?”
В одном из предыдущих уроков мы обсуждали огромный A/B-тест от Google, который они проводили в поиске идеального оттенка синего.
Мы также обсуждали, что у красных ссылок репутация победителей A/B-тестов.
Интересуетесь свежими статьями по дизайну? Вступайте в группу на Facebook | Instagram, Telegram
И мне лично случалось повысить количество кликов на 400% просто сделав кнопку желтой вместо фиолетовой.
Так какой же цвет самый лучший?
Глупый ответ:
Кому-то нужно провести A/B-тест всех цветов, чтобы решить эту дилемму раз и навсегда. (Но, вообще-то, ничего это не решит … читайте дальше).
Настоящий ответ:
Не нужно рассматривать цвет ссылок как изолированный элемент вашего дизайна.
Огромное значение имеет цвет фона!
Цвета бренда вокруг ссылки — это фактор.
Цвет обычного, не кликабельного текста — это фактор.
Выглядит ли ссылка как ссылка? — вот настоящий вопрос, который вы должны задавать себе. В каждом проекте. Всегда. Начиная со вчерашнего дня.
Когда дело доходит до кнопок и ссылок, все, что вам нужно, — это контраст.
Цвет ссылок должен быть противоположен цвету фона, они должны вписываться в цвета бренда, но при этом выделяться, они должны заметно отличаться от основного текста — даже если они не внутри этого текста! Сравните ваше меню и ваши ссылки с параграфом обычного текста. Они радикально отличаются или выглядят почти одинаково?
Вот почему этот вопрос совсем не глупый:
Новички мыслят конкретными случаями.
Контраст — это вещь относительная. Он означает отличие. Но отличие в чем?
Если вы хотите, чтобы люди на что-то кликнули, нужно сделать это что-то выделяющимся из окружающего хлама.
т.е. — увеличить контраст.
Представьте, что вы идете на одну из тех “белых вечеринок”. Нет, не расистских, а тех, где все одеты в белое, и идет какой-то концерт.
Давайте представим, что вы придурок, которому хочется выделиться на камеру, снимающую с вертолета. Что бы вы одели? Думай, придурок, думай!
Красный бы подошел. Синий бы подошел. Даже черный бы подошел. Да, по сути, какой угодно, только не белый.
А если бы это была “желтая вечеринка”? Или “красная вечеринка”? Или “синяя вечеринка”?
Если бы толпа на такой вечеринке плохо соблюдала инструкции, и люди вырядились бы в разные цвета, вам было бы сложнее стать заметным.
Так же работают и ссылки с кнопками. Если вы делаете все элементы разноцветными, то ссылки и кнопки пропадут в океане визуального шума.
Эксперты мыслят системно.
Будучи новичком, вы можете смотреть на дизайн так: “красный сработал у них, сработает и у меня”. Но вы должны учитывать контекст, который сделал так, чтобы красный сработал.
Не нужно просто предполагать, что красный сработал. Соберите информацию! Как узнать, что красный у них сработал?
Новички думают о кнопках и ссылках как о чем-то конкретном: конкретный цвет, конкретная форма, может быть, конкретный стиль (как в случае с плоским дизайном).
Опытные дизайнеры рассматривают кнопки и ссылки как часть системы. Некоторые части существуют, чтобы поддерживать другие: стиль основывается на согласованности и брендинге, а не на деталях, вроде плоских иконок и скругленных углов. Конкретный выбор цветов, форм, стилей и нижнего белья не имеет значения, если они в комплексе не работают на нужный вам результат. Особенно нижнее белье. Оно должно вносить вклад!
Чтобы на ссылки чаще нажимали, измените то, что не является ссылками!
Новички упускают из виду, что одна фиолетовая кнопка — в меню, на белом фоне — это совсем не то же самое, что другая фиолетовая кнопка — на фиолетовом фоне, в боковом меню.
Даже если это одна и та же кнопка.
Прокрутите это несколько раз в своей голове.
Завтра мы приступим к нескольким глупым вопросам о юзабилити, а начнем с “Почему номер кредитки нужно вводить без пробелов?”
Если вам понравилась и статья, и перевод, дайте нам знать — нажмите кнопку Recommend.
Также мы будем благодарны за любые отзывы по поводу адекватности и понятности перевода этой книги. Нас можно найти в Facebook: Nancy Pong и Ринат Шайхутдинов.
Мобильное приложение «Заметки о психике» | Mental Notes
Подкидывает идеи как привлечь, удержать и направить внимание пользователя
Mental notes — это колода из 53 карточек с описанием психофизиологических моделей поведения людей, которые лежат в основе принципов веб-дизайна. Они помогают дизайнерам, проектировщикам лучше понять поведение пользователей и найти эффективные решения при создании дизайна интерфейсов.
Видеокурсы и практика по дизайну интерактивных систем: ux/ui, веб-дизайн и бренд-дизайн
Вас ждет плотная проектная практика по анимации интерфейсов, дизайну сайтов, а также мобильных и веб-приложений. Под руководством наставников в стиле «смотри и повторяй»!
Breezzly — это среда для тренировки digital-навыков. Здесь вы встретите комплекты видеокурсов в актуальных инструментах интерактивного дизайна, среди них Figma, Principle и Invision Studio. А каждый проект — это живой кейс с историей, собранной по горячим следам!
