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

Административная часть — рабочий инструмент менеджера, тут обрабатывают заказы, настраивают сайт, работают с документами.

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

Первым делом нужно было «сжать» блок с фильтрами. Он занимал треть экрана, отнимая полезное пространство у таблицы:

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

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

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

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

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

Раньше, чтобы совершить действие над товаром нужно было выбрать это самое действие из списка, выбрать новое состояние и нажать на кнопку «Выполнить». При чем, действия были доступны всегда, даже если ни одна строка таблицы не выбрана. Это приводило к ошибкам.

А ещё, чтобы сменить статус заказа, нужно было выбрать действие «Сменить состояние», затем выбрать само состояние, а потом нажать кнопку «Выполнить». Это взрывало мозг — менеджеру нужно было у себя в голове выстроить сценарий, по которому эта штука работает и выполнить в точности как надо.

Теперь действия в виде обычных кнопок и они появляются, когда выделен хотя бы один заказ:

Статус меняется выбором из списка:

При выполнении действия, статус можно сменить по ходу выполнения сценария:

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

Саму таблицу сделал чище: избавился от вертикальных границ, редактируемые поля сделал менее контрастными. Шрифт немного увеличил, чтобы не нужно было сидеть с лупой. Все сводные данные унёс в нижнюю панель — теперь итоги всегда на виду и в одном месте. Там же теперь и пагинация:

Я полностью перерисовал набор иконок рекомендаций. Рекомендации — это что-то вроде дополнения к статусу. Они намекают на дальнейшие действия и дополняют контекст.

У каждой иконки есть белая обводка, чтобы хорошо считываться на цветном фоне: