B2B

Web

Sigma

Работа с кассовыми чеками

Задача.

Обновить раздел «Чеки» в духе дизайн-системы Sigma Cloud, сохранив визуальную целостность и современность интерфейса. На основе продуктовой аналитики улучшить UX: убрать лишнее, упростить сценарии, сделать взаимодействие быстрее и понятнее. Добавить новые способы получения оплаты, отвечающие текущим задачам бизнеса. Продумать мобильную версию с учётом пользовательского контекста — чтобы раздел был одинаково удобным и на телефоне, и на десктопе.

Проблема.

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

Решение.

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

Мобильная версия.

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