Новый дизайн в SuiteCRM

31.10.2023

SuiteCRM многим нравится своей функциональностью — в зависимости от того, что нужно бизнесу, можно прикрутить любое количество модулей (кстати, у нас есть более 80 дополнений), и все будет отлично работать. Однако, есть одно «НО»! Визуально интерфейс выглядит устаревшим, тема совершенно не современная, поэтому мы решили создать свою. Да, мы не дизайнеры и знаем об этом. Вот, кстати, наши самостоятельные попытки навести красоту на странице списка без помощи дизайнера и верстальщика:

Согласитесь, выглядит так себе.

Поиск идеального визуального решения

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

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

Из примечательного – все решения имели крупные контролы, из-за чего на одну страницу помещалось мало полей. Это, на самом деле, проблема: почти все клиенты, которые уходили с наших российских лидеров CRM (Битрикс24, amoCRM), были рады оказаться в интерфейсе, где не надо бесконечно скролить форму сделки или клиента.

Мы искренне верили, что российское ПО одно из лучших с точки зрения дизайна. Взять, к примеру, личные кабинеты Яндекса и Google (контекстной рекламы и статистики): Яндекс куда симпатичнее и понятнее сделал свой интерфейс. Или, допустим, онлайн-банки наши и зарубежные — тоже небо и земля, особенно, если отмотать лет на 10 назад. Однако ожидания не оправдались.

Реальность: зарубежные программы внешне оказались приятнее российских CRM, посмотрите сами:

HubSpot;

Zoho;

SalesForce;

MS Dynamics;

SugarCRM (платный).

Вот лидеры CRM по популярности в России:

Битрикс24;

amoCRM.

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

Если внимательно присмотреться ко всем красивым интерфейсам, то за красотой скрывается следующее:

Дашборды с гармоничным сочетанием графиков, цифр, красных/зеленых зон;
Клиентские страницы с фото, цветные теги и графики;
Списки — это мини-отчеты, которые оживляют страницу.

В целом рецепт такой:

Большие контролы;
Минимум информации;
Нейтральные цвета информационной части;
Яркие пятна (графики, фотки, теги, уведомления).

Вот как этот рецепт реализован в интерфейсах ELMA:

Наш путь

Что же нам посоветовал дизайнер:

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

Мы перерыли кучу тем — выглядят все плюс-минус одинаково и структурно все плохо ложатся на стандартную структуру интерфейса SuiteCRM, поэтому на чаше весов оказались следующие варианты:

адаптировать код систем под готовые темы
писать свою тему, принципиально не меняя текущую структуру интерфейса

Второе по нашим оценкам технически все же выходило сильно проще.

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

крупные контролы;
мало информации бледными цветами;
яркие пятна.

Первая страница собственной темы

К дизайнеру мы вернулись с такой постановкой «структурно оставить все, как есть, но осовременить по рецепту». Такая постановка сильно упрощала задачу дизайнеру – ничего придумывать не надо, а нам в коде по минимуму переписывать.

Решили начать с самой простой страницы – List View (страница списка). Дизайнер ее отрисовал за пару часов. После дизайнера мы пошли к верстальщику и попросили его переписать CSS под сверстанную страницу (верстать мы сами тоже очень не любим и плохо это делаем). Верстальщик тоже очень быстро справился с этой задачей: потратил полдня и на установку/запуск системы (никогда ее не видел), и ее изучение, и саму верстку.

И вот потратив 2 часа дизайнера, 4 часа верстальщика и 1 час программиста на встраивание обновленного CSS с минимальными правками в JS получили вот такое преобразование.

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

Всё не так просто

Какие типы экранов надо было отрисовать:

Страница списка;
Страница просмотра записи – состоит из двух частей: детальная информация и связанные записи на субпанели;
Страница редактирования;
Главная страница;
Канбан (наш модуль);
Единое окно (наш модуль);
Отчеты (наш модуль);
И всякая специфика: админка, почта, профиль пользователя и т.д.

С какими проблемами мы столкнулись:

Контрол для Email-ов: вообще поле Email самое нетипичное поле во всем коде SuiteCRM. Чтобы хранить email SuiteCRM использует 5 (пять!) таблиц. Много, но все они объективно нужны, но контрол по управлению адресами почты действительно сильно отличается и по виду, и по поведению от всех других контролов CRM.
Контрол для управления напоминаниями — тоже отображается как «модуль в модуль».
Контрол для поля «Родитель» – были проблемы с автоподбором ширины выпадающего списка с типом привязываемой записи и полем выбора самой записи.
Дата-пикеры – у вендора их было 2 плюс для Единого Окна нам приходилось добавлять 3й для удобно одновременного выбора даты и времени.
Скроллы и автофилы – стандартные, а хотелось бы свои в стиле формы (нужен свой js).
Адаптивность верстки – конечно же, мы сразу думали о том, чтобы на мобильном телефоне SuiteCRM выглядело и красиво, и функционально. Мобильного приложения для SuiteCRM нет, поэтому важно, чтобы мобильный веб-интерфейс выглядел как надо. По верстке это требовало много усилий.
Страницы в разделе «Администрирования» имели уникальную верстку, поэтому при накатке обновлений по CSS часть страниц разъехалась. Пришлось точечно править новый CSS.
Отображение субпанелей на DV – большая-большая боль.
Страница «создания нового письма», «Шаблоны Email», «Сотрудники» и «Пользователи» имели свою уникальную верстку, под них также пришлось делать свой кусок CSS.
Фильтры на дашлетах – была боль, доставшееся от вендора, пришлось ее и в новой теме чинить.
Наше Единое Окно состоит из многих компонентов, которые автоматически изменяют свой размер. Появление новых компонентов (глобальный поиск), изменения внешнего вида контролов (в частности, email-адреса) выстреляло, обилия автогенерируемых Ajax-форм со старой генерацией View.
Массовое обновление.
Лента событий (вендоровская).
Наша Лента.

По итогу разработка новой темы растянулось у нас на 4 месяца. Чистого времени, конечно, сильно меньше, вся растягивалось по времени из-за большого количества участников.

Получилось у нас следующее (в парах ниже: первый скрин — стандартная тема, второй скрин — наша новая тема):