UXPUB 🇺🇦 Дизайн-спільнота

Cover image for Как мы хотели поменять один цвет и сделали редизайн
Редакція
Редакція

Опубліковано

Как мы хотели поменять один цвет и сделали редизайн

Хотели поменять один цвет — сделали редизайн

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

Цветовая палитра нашего интерфейса не менялась с самого основания Carrot quest. По мере развития сервиса мы начали замечать, что количество только серого цвета, используемого в интерфейсе, начало подбираться к 30. Когда дизайнеров и разработчиков в команде стало больше, а историческое наследие стало массивным и неупорядоченным, мы поняли, что необходимо систематизировать цвета и упорядочить элементы интерфейса. В результате мы хотели улучшить взаимодействие между дизайнерами и разработчиками, не тратить время на подбор цветов на этапе дизайна и ускорить разработку продукта.

Вид до редизайна

Мы не хотели делать редизайн по принципу “просто потому что это красиво”. Хороший дизайн — это всегда в первую очередь функционально. Необходимы весомые причины и метрики, чтобы редизайн был оправдан. Было понятно, что систематизация поможет нам двигаться быстрее. Вот, с чем мы начали работать:

  • Очень много разных компонентов (кнопок, свитчеров и т.д.), которые отличались минимально и в которых было легко запутаться;
  • не все они используются;
  • рассинхронизация дизайна и разработки, т.к. элементы называются и выглядят по-разному в дизайне и продукте;
  • от этого тормозят и дизайн, и разработка.

Какие задачи мы ставили перед собой:

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

Разбиваем задачу на части

Обновлять дизайн — как делать ремонт. Если сразу не определить границы, то его можно делать вечно. Мы решили, что будем делать дизайн по частям. Вот план:

  • Систематизировать элементы и избавиться от ненужных;
  • Найти новую цветовую схему;
  • Систематизировать палитру;
  • Поработать над контрастностью интерфейса;
  • Применить новый шрифт.

Используем то, что есть

Основной цвет админки был синий. Мы выбрали его с самого начала, и он не был с чем-то связан. Его мы и решили обновить.

Первым делом решили попробовать использовать цвета из логотипа.

Логотип Carrot quest

Вот, как бы мог выглядеть раздел Dashboard в оранжевом цвете:

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

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

Теория цвета

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

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

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

Раздел Dashboard в новых цветах

Определяем полную цветовую палитру по HSL модели

Нам было необходимо договориться о правилах добавления и выбора цветов, поэтому за основу мы взяли HSL модель. Аббревиатура HSL означает Тон (Hue), Насыщенность (Saturation) и Светлота (Lightness). Модель можно представить в виде цилиндра, где цветовой тон измеряется в градусах по горизонтальной окружности, насыщенность измеряется радиально от нейтральной оси цилиндра к более насыщенным краям, значение светлоты измеряется вертикально по оси цилиндра от абсолютно черного до белого.

Мы взяли фиолетовый за основной цвет и несколько второстепенных цветов, которые будем использовать в интерфейсе:

  • Жёлтый — для уведомлений;
  • Оранжевый — для ошибок;
  • Зелёный — для успешных действий;
  • Чёрный и серый — для фона, текста и нейтральных элементов.

Мы разбили цвета по HSL модели от белого до чёрного с шагом 5% светлоты и, руководствуясь собственными правилами, определили цвета, которые будем использовать.

Так мы взяли 50% светлоты за базовый цвет. Дальше решили, что -10% — цвет текста, +45% — цвет фона и так далее.

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

В итоге собрали библиотеку из новых элементов и обсудили её со всеми дизайнерами и разработчиками.

Применяем дизайн

Просто так “натянуть” новый цвет не вышло: некоторые разделы стали слишком яркими и нелогичными. Предыдущий цвет был неяркий и не бросался в глаза, поэтому мы использовали его во многих местах. Как только всё стало ярко-фиолетовое, сместились акценты и стало сложно работать.

Мы стали последовательно просматривать все страницы и находить несоответствия. Фронтенд-разработчик с дизайнерами собрали скриншоты всех разделов в Miro и обсуждали каждый элемент.

В итоге ребята перебрали все элементы на всех страницах. Изменений было так много, что в итоге разработчики поменяли 850 файлов. В первой версии изменили не всё. Жёлтые комментарии — это план на следующую итерацию.

Например, в разделе Автосообщения фильтрация по активным/неактивным сообщениям была яркой и отвлекала от основной кнопки “Создать автосообщение”. Также бейджик “активно” у каждого сообщения был очень ярким, мы сделали его не таким заметным.

Раздел Автосообщения с новыми цветами до переделки

Раздел Автосообщения — итоговый вариант

В разделе “Настроки” множество табов, кнопок, датапикеров, радиобаттонов и других элементов. Вот только маленький кусочек, на котором можно увидеть сразу много изменений. Вывод — недостаточно просто поменять цвет.

Табы и кнопка с цветами “как есть”

Финальный вариант табов и кнопок

Артём, фронтенд-разработчик Carrot quest

Когда мы просто заменили синий цвет на фиолетовый, мы сразу поняли, что интерфейс стал плохо сказываться на зрении и душевном спокойствии. Все косяки дизайна и вёрстки сразу вышли наружу. Это была одна из самых непростых частей разработки: найти всё синее и понять где оно должно стать фиолетовым, а где должно быть сожжено и переделано. Масла в огонь подливал устаревший код. Его практически весь пришлось прошерстить, так как в нём было очень много копий одних и тех же элементов.

Шрифт и контрастность

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

Тест на контрастность старого цвета текста

Мы решили попробовать PT Root UI по трём причинам:

  • Он бесплатный;
  • Он более современный;
  • Он более гибкий.

Одним из ключевых требований при выборе нового шрифта было количество начертаний. Дело в том, что предыдущий шрифт (PT Sans) имел только 2 крайности — Regular и Bold. Такое ограничение доставляло неудобство при работе с весом текста, когда необходимо подчеркнуть контраст. Именно поэтому мы выбрали вариативный шрифт, в котором мы можем вручную установить подходящие нам значения и таким образом регулировать вес шрифта для необходимой контрастности.

Чтобы новый шрифт на деле хорошо работал, необходимо было проработать палитру серого цвета, который используется для заливки текста.

Как и для подбора основной палитры, мы использовали модель HSL. С помощью изменения параметра светлоты мы разбили серый цвет на 11 градаций — от абсолютно черного до белого. Далее выбрали нужные оттенки для заголовков, наборного текста, плейсхолдеров и других элементов.

В результате типографика стала контрастнее и современнее.

Тест на контрастность новых цветов

Бета-тест

Когда дизайн был готов, мы раскатали его на себя (так как сами активно пользуемся своим сервисом) и на самых наших преданных бета-тестеров.

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

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

Обратная связь

Вот разница, которую увидели пользователи: интерфейс до обновления и после:

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

Кто-то говорил, что всё стало слишком бледным

А кто-то, что очень ярким

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

Итоги

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

Мы уже сделали релиз на всех пользователей сервиса. Далее мы будем собирать обратную связь и производить улучшения.

Команда Carrot quest

Топ коментарі (0)