B2B
Web
Sigma
Операции с наличностью Sigma Cloud
Проблема.
Визуально она выглядит разрозненной, элементы дизайна размещены хаотично. Прокрутка реализована только внутри таблицы, что ограничивает удобство взаимодействия. Счётчики выровнены по центру, отсутствуют некоторые типы платежей, таблица не настроена. В каждой строке дублируется информация о валюте. Отсутствие гибкой настройки столбцов затрудняет использование страницы на экранах с различным разрешением. Также у страницы отсутствует мобильная версия, что делает её неудобной или недоступной для пользователей с мобильных устройств.
Счётчики.
Один из ключевых интерфейсных компонентов страницы — он помогает пользователю ориентироваться в текущем состоянии смены или просматриваемого периода.
В процессе редизайна я отказался от избыточно крупных цифр: акцент на них не был необходим и лишь перегружал интерфейс. Центрированное выравнивание заменил на классическое — по левому краю. Это упростило сканирование информации, особенно при последовательном просмотре нескольких виджетов.
Также была реализована адаптивная версия для узких экранов, что значительно улучшило восприятие и удобство работы с компонентом на мобильных устройствах.
Работа с таблицей.
Адаптация таблицы.
Работа с таблицей фокусировалась не на кардинальных изменениях в дизайне, а на решении ключевых проблем с дублирующимися знаками валют и настройкой поведения столбцов.
Понимая неизбежность горизонтального скролла на узких экранах, я задал оптимальные минимальные ширины для столбцов таблицы, чтобы сохранить читаемость данных. При разрешении ниже установленного порога интерфейс автоматически переключается на мобильные карточки, обеспечивая адаптивность и комфортное взаимодействие на любых устройствах.
Знаки валют были вынесены в заголовок столбца, что позволило избежать излишнего повторения и улучшить восприятие данных. Для столбца «Комментарий» были прописаны правила: если в ячейке две строки текста, то остальные ячейки выравниваются по первой строке, обеспечивая чистоту и читаемость данных.
Столбцы с суммами выровнены по левому краю — это улучшает восприятие числовых данных, особенно при быстром сканировании таблицы. Визуальные акценты были добавлены в виде графических элементов, которые чётко указывают на тип операции, улучшая визуальную и функциональную составляющую интерфейса.
Работа со скроллингом.
Таблица растягивается на всю высоту экрана — так работать с данными комфортнее. Фильтры специально не закреплены: при каждом изменении происходит полная перезагрузка таблицы, и если бы фильтры оставались на месте, это вызывало бы неприятные скачки и мешало бы пользователю. Зато фиксированная шапка таблицы остаётся на виду при скролле — так проще ориентироваться, особенно когда данных много.
Мобильная версия.
Ранее у раздела не было мобильной версии, и пользователи испытывали серьёзные трудности. По данным метрики, он стабильно входил в топ-5 самых посещаемых в «Облаке» — несмотря на неудобство.
Забегая вперёд — после запуска мобильной версии пользователи не путались в новом интерфейсе. Ставка на привычный опыт не просто сработала — она себя оправдала. Мы получили несколько хвалебных откликов и пожелания «оформить остальные разделы системы так же удобно».
Вместо таблицы использовал карточки, а панель фильтров спроектировал, вдохновляясь интерфейсами интернет-магазинов и соцсетей. Эти элементы уже привычны аудитории — пользователи интуитивно понимают, как они работают.
Чтобы добиться интуитивного пользовательского опыта на мобильных страницах, я принял решение опираться на паттерны мобильных приложений.
Работа с данными.
На мобильных устройствах табличная строка трансформируется в карточку — так привычнее воспринимать информацию с небольшого экрана.
Фильтрация позволяет быстро находить нужную операцию по параметрам кассира, торговой точки, а также дате проведения.
Результат.
Мы получили удобную страницу для просмотра статистики по операциям внутри бизнеса, которой теперь можно пользоваться даже с мобильного. Возросшие метрики посещений с мобильных устройств показали, что пользователям действительно не хватало комфортного интерфейса для работы с таким сложным разделом на телефоне.
