Logic Systems CRM

Компания Logic Systems развивает собственную CRM-систему с 2011 года. В конце 2018 года было принято решение переделать её под web. Потребовалось адаптировать старый дизайн под новую платформу, сохранив привычные способы выполнения задач.

По законам Д. Огилви и Э. Тафти, ниже должно быть сравнение интерфейса в формате «До–После». Будет обязательно. Скриншоты старой системы проходят проверку на конфиденциальность.

Нужно было создать UI kit, то есть набор элементов, их состояний и правил применения, которым могли бы пользоваться разработчики без моего участия. Но так как технические ограничения новой платформы не позволяли в точности реализовать прежний интерфейс, одних «косметических» изменений было недостаточно.

Новый главный экран.

Процесс редизайна

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

Изучив интерфейс, я определил основные крупные компоненты: блоки данных (таблицы, описания), панели статусов, фильтров, навигации, статистики и команд. Затем я разбил все экраны на три типа — списки, объекты и действия — и сделал для них шаблоны. Такая система позволила разработчикам создавать дизайн отдельных страниц без моего участия.

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

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

Шаблон списка

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

Затем я упростил вид панели фильтров и спрятал всё, что редко используется. Объединив фильтры с поиском, я собрал в одном месте все инструменты для создания выборки.

Одной из проблем windows-версии было быстродействие при создании выборок. Каждое изменение фильтра вызывало новый запрос к базе данных и система начинала «думать». Поменяли менеджера — ждём, поставили галочку «только интернет-заказы» — ждём снова. Решением стало принудительное обновление данных.

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

Шаблон объекта

Страницы объектов не так требовательны к ширине экрана, но содержат большое количество данных разного типа. Например, счёт — это финансовые показатели, реквизиты и несколько списков (позиции, заявки на отгрузку…). В прошлой версии данные были разнесены по табам. Это съедало место по высоте и усложняло навигацию там, где разделов было много.

Я убрал табы и вернул на страницы объектов левую колонку. Это позволило разбивать информацию на большее количество экранов. Вот объект «Счёт» в новой версии.

Шаблон действия

Страницы действий похожи на страницы объектов. Отличие — в способе использования экрана: действие всегда должно быть явно завершено (или отменено). Поэтому можно убрать всё, что непосредственно к совершению действия не относится, отдав ещё больше места под рабочую область.

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

Внизу страниц действий и объектов находится панель основных команд. Обычно это «Сохранить», «Подтвердить», «Отменить».  Унифицированное размещение подобных блоков на всех экранах позволяет быстро создавать новые страницы не занимаясь детальной проработкой взаимодействия, а при работе с системой упрощает поиск необходимых элементов. Контекстное меню всегда сверху, ключевые функции снизу, а навигация по объекту — слева.

Результат

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

Другие мои работы

Trade Navigator Europe


Cистема сертификации «Сделано в России»


Экспортный стандарт