Поработали над контрастностью чата. Как это улучшит пользовательский опыт ваших клиентов

Привет, меня зовут Женя, я дизайнер в команде продукта Carrot quest. Сегодня я расскажу, как мы работали над контрастностью в чате, а заодно попрошу принять участие в опросе, который поможет развивать чат дальше.

Чат — это первое, что появляется у клиента на сайте после установки кода Carrot quest. Многие клиенты выбирают наш чат за дизайн, и нам важно поддерживать уровень. С помощью чата и встроенных в него инструментов, таких как чат-бот, наши клиенты ежедневно оказывают поддержку посетителям своих сайтов, собирают лидов, продают и консультируют.

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

Как было раньше

Когда вы ставите чат на свой сайт, вполне понятно желание сделать его подходящим под фирменный стиль. В настройках чата Carrot quest десяток возможностей:

• цвет виджета и элементов чата;
• тёмная или светлая тема — фишка нашего чата, почти не встречающаяся у конкурентов;
• фон;
• иконка виджета и анимации для стандартной иконки;
• текст в шапке чата;
• приветственное сообщение или его отсутствие;
• автоматический ответ на первое сообщение пользователя, если операторы заняты
• и так далее.

Словом, настраивать чат под свой сайт почти так же увлекательно, как создавать персонажа в Sims, ну или в Cyberpunk 2077.

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

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

Исследовав проблему, мы нашли еще пару связанных с ней:

1. Логика окрашивания элементов в тёмной и светлой теме чата была разной. Одни и те же элементы — например, иконки меню, файлов и смайликов — закрашивали в выбранный пользователем цвет в светлой теме. В тёмной теме они всегда оставались белыми.

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 в тёмной.

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

Сейчас, если мы понимаем, что текст или элементы не контрастные, мы автоматически подстраиваем их под выбранный вами цвет по следующей логике:

1. Вы выбираете цвет чата.
2. Выбираете тему чата (тёмную или светлую).
3. Мы рассчитываем коэффициент контрастности.
4. Выбираем контрастные иконки и цвет в репликах.

Сократите время ответа на вопросы пользователей с помощью чата, который подходит под ваш дизайн

Подключить Carrot quest 14 дней бесплатно

Итог

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

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

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

Планы и исследование

Мы продолжаем активно развивать чат Carrot quest, в том числе для того, чтобы он еще лучше встраивался в визуальный стиль вашего сайта. Пройдите, пожалуйста, опрос и расскажите, что для вас важно в чате для сайта. В нем шесть вопросов, участие займет у вас не больше пяти минут. А наша команда будет вам очень благодарна за помощь в развитии продукта.