Поработали над контрастностью чата. Как это улучшит пользовательский опыт ваших клиентов
Привет, меня зовут Женя, я дизайнер в команде продукта Carrot quest. Сегодня я расскажу, как мы работали над контрастностью в чате, а заодно попрошу принять участие в опросе, который поможет развивать чат дальше.
Чат — это первое, что появляется у клиента на сайте после установки кода Carrot quest. Многие клиенты выбирают наш чат за дизайн, и нам важно поддерживать уровень. С помощью чата и встроенных в него инструментов, таких как чат-бот, наши клиенты ежедневно оказывают поддержку посетителям своих сайтов, собирают лидов, продают и консультируют.
Чат на сайте помогает связывать компанию и клиента. Поэтому его дизайн должен быть хорошо продуман. Все элементы должны быть хорошо видны и сочетаться между собой. Мы заметили, что предусмотрели не все кейсы в дизайне чата, и в некоторых случаях он мог становиться сложным для восприятия. Это почти детективная история о том, как кастомизировать чат без потерь в юзабилити.
Как было раньше
Когда вы ставите чат на свой сайт, вполне понятно желание сделать его подходящим под фирменный стиль. В настройках чата Carrot quest десяток возможностей:
- цвет виджета и элементов чата;
- тёмная или светлая тема — фишка нашего чата, почти не встречающаяся у конкурентов;
- фон;
- иконка виджета и анимации для стандартной иконки;
- текст в шапке чата;
- приветственное сообщение или его отсутствие;
- автоматический ответ на первое сообщение пользователя, если операторы заняты
- и так далее.
Словом, настраивать чат под свой сайт почти так же увлекательно, как создавать персонажа в Sims, ну или в Cyberpunk 2077.
Но чем больше вариативность, тем больше возможностей допустить ошибку и подобрать несочетающиеся между собой элементы. Например, нечитаемые цвета или неконтрастные элементы.
Именно такие проблемы мы обнаружили, когда пользователи начали настраивать чат-бота. Если выбрать тёмную тему чата и тёмный цвет, то кнопки бота становились нечитаемыми. Выглядело, как будто что-то сломалось.
Исследовав проблему, мы нашли еще пару связанных с ней:
- Логика окрашивания элементов в тёмной и светлой теме чата была разной. Одни и те же элементы — например, иконки меню, файлов и смайликов — закрашивали в выбранный пользователем цвет в светлой теме. В тёмной теме они всегда оставались белыми.
2. Цвет текста в репликах и некоторых элементах был всегда белым, при этом фон этих элементов задавался пользователями. Это могло приводить к неконтрастным нечитаемым сочетаниям.
Задача: боремся за контрастность
Мы посмотрели, как данную проблему решают создатели, дизайнеры и разработчики других онлайн-чатов и мессенджеров. Многие из них умеют автоматически подставлять тёмный или светлый цвет текста и элементов в зависимости от фонового цвета, на котором они расположены. Мы обсудили такой подход внутри команды и начали изучать варианты, как реализовать это решение.
Остановились на том, что будем считать сontrast-ratio (коэффициент контрастности) цвета, который выбрал пользователь для чата, к светлому (#fff) или тёмному (#333) цвету в зависимости от выбранной темы чата. И считать будем по формуле WCAG.
Сначала попробовали придерживаться стандарта контрастности — уровня АА. Уровень AA означает, что ваш текст имеет коэффициент контрастности 4,5 или выше.
Попробовали применить полученный алгоритм к цветам, которые используют для чатов наши клиенты. Оказалось, что у более чем 30% наших текущих клиентов коэффициент контрастности выбранного цвета к теме чата ниже, чем 4.5. Это значило, что изменение алгоритмов привело бы к изменению цвета в чатах на слишком большом количестве сайтов. Многим пользователям это могло не понравиться.
Мы детально рассмотрели случаи этих клиентов и поняли, что такой коэффициент хоть и является международным стандартом, но работает слишком категорично и не учитывает небольшие расхождения с нормой, которые субъективно выглядят и считываются хорошо.
На этом моменте мы снова решили обратиться к опыту других продуктов, чтобы посмотреть какими коэффициентами контрастности они руководствуются. Опытным путём мы получили следующие данные:
— Telegram для определения цвета текста относительно цвета реплик использует коэффициент ∼1.9-2.0.
— Фон SMS-реплик в iPhone имеет коэффициент контрастности 2.17, хотя в собственных гайдлайнах Apple пишут про необходимость соблюдения стандарта АА (коэффициент — 4.5).
— Некоторые темы Facebook Messenger имеют коэффициент контрастности фона сообщения к тексту сообщения ниже 1.85.
— TIDIO применяет коэффициент ∼3.6 для автоматического определения цвета текста в зависимости от цвета фона, но при этом позволяет выбрать тёмный или светлый цвет текста вручную.
— Jivo использует коэффициент ∼4.35 в автоматическом режиме, но есть возможность выбора тёмного или светлого текста вручную.
— Drift использует 2 отдельных цвета — для фона и для текста. В сервисе есть рекомендации по контрастности выбранных цветов, которые рассчитываются исходя из стандарта АА (коэффициент — 4.5).
— Intercom для определения цвета текста относительно фона ориентируется на коэффициент ∼1.6.
Мы пришли к выводу, что в реальном мире далеко не все продукты строго придерживаются стандартов контрастности. Поэтому решили скорректировать свой алгоритм и изменили минимально допустимый уровень контрастности до 2.0 в светлой теме и 2.5 в тёмной.
Таким образом изменения коснутся небольшого количества наших текущих пользователей. Но при этом мы надеемся устранить проблемы и существенно повысить уровень юзабилити чата в целом.
Сейчас, если мы понимаем, что текст или элементы не контрастные, мы автоматически подстраиваем их под выбранный вами цвет по следующей логике:
- Вы выбираете цвет чата.
- Выбираете тему чата (тёмную или светлую).
- Мы рассчитываем коэффициент контрастности.
- Выбираем контрастные иконки и цвет в репликах.
Итог
- Мы разработали механизм, который помогает вам не совершить ошибку при настройке цветов в чате: если вдруг элементы становятся нечитаемыми, мы автоматически заменим их на контрастные, при этом выбранный вами цвет сохранится в виджете и при наведении на кнопки.
- Настроили единую логику изменения цвета в тёмной и светлой теме.
- Постарались сделать так, чтобы изменения затронули минимальное количество клиентов: только тех, у кого действительно были проблемы с читаемостью сообщений в чате.
Для большинства пользователей изменения прошли незаметно. Новые клиенты смогут быстро настроить чат и чат-бота на своем сайте, потому что нужные цвета иконок и текста подбираются автоматически под основной цвет чата.
Внимание к деталям — это важная составляющая дизайна, который выполняет поставленные перед ним задачи и обеспечивает отличный пользовательский опыт. Я рад, что мы сделали наш чат более легким в настройке и функциональным, при этом не ограничивая вас в выборе цветов.
Планы и исследование
Мы продолжаем активно развивать чат Carrot quest, в том числе для того, чтобы он еще лучше встраивался в визуальный стиль вашего сайта. Пройдите, пожалуйста, опрос и расскажите, что для вас важно в чате для сайта. В нем шесть вопросов, участие займет у вас не больше пяти минут. А наша команда будет вам очень благодарна за помощь в развитии продукта.
Евгений Шохирев
Дизайнер в команде продукта Carrot quest
