Доработка корпоративного портала для сотрудников крупной ритейл-сети
Мы доработали пользовательский интерфейс (UI) корпоративного портала крупной ретейл-сети, чтобы сотрудникам было проще и быстрее работать с информацией о товарах.
Вместо перегруженной структуры папок команда реализовала более компактный и удобный интерфейс с интерактивными элементами. Это позволило сделать навигацию понятнее, сократить ложные срабатывания и эффективнее использовать пространство рабочей области.
Задача
Крупная ритейл-сеть столкнулась с проблемой неэффективной навигации в корпоративном портале. Сотрудники тратили много времени на поиск актуальной информации о товарах, которая была разрознена по множеству папок.
Требовалось обновить интерфейс, чтобы повысить скорость выполнения рутинных операций и вовлеченность пользователей, а также оптимизировать использование вертикального пространства на странице.
Задачи в контексте разработки
Для достижения бизнес-целей перед командой встал ряд технических задач:
-
Модернизировать UI рабочей области, сделав его визуально компактнее и удобнее для восприятия.
-
Реализовать интерактивный предпросмотр: при наведении на иконку папки должно появляться всплывающее окно с ее содержимым, чтобы сотруднику не приходилось открывать папки впустую.
-
Обеспечить высокую точность взаимодействия: привязать зону срабатывания hover (состояние элемента интерфейса, которое активируется, когда пользователь наводит на него курсор мыши) к непрямоугольной форме SVG-иконки, чтобы избежать ложных срабатываний на пустых областях и гарантировать предсказуемое поведение интерфейса.
Решение
При анализе запроса заказчика мы выявили ключевую проблему: стандартная модель событий DOM (Модель событий DOM — стандартный способ, которым JavaScript взаимодействует с пользователем в браузере), основанная на прямоугольных областях (bounding box), не подходит для работы с визуально сложными SVG-иконками. При использовании стандартного подхода hover срабатывал бы даже при наведении на пустое пространство рядом с иконкой, что создавало бы ложные срабатывания и делало интерфейс непредсказуемым.
Гипотеза: если программно ограничить зону интерактивности, повторив сложную геометрию иконки папки, можно добиться точного срабатывания hover только при попадании курсора непосредственно на графический объект.
Процесс реализации:
-
Геометрическая адаптация. Команда разработала кастомный полигональный контур, который точно повторяет очертания иконки папки в стиле «Проводника Windows». Это позволило отказаться от стандартной прямоугольной зоны срабатывания.
-
Техническая реализация. Для решения задачи была применена CSS-технология clip-path: polygon(). Данное правило позволило:
-
Ограничить область видимости и зону взаимодействия элемента
-
Привязать срабатывание hover к сложной геометрии SVG-контура
-
Исключить наложение зон активации соседних элементов
Для прецизионного подбора координат вершин полигона использовался специализированный инструмент генерации clip-path, что обеспечило высокую точность попадания в контуры иконки.
Результат
Благодаря применению clip-path событие hover теперь корректно считывается системой только при попадании курсора в границы графического объекта.
Это исключило ложные срабатывания и позволило реализовать компактное размещение папок на странице без ущерба для пользовательского опыта. Интерфейс стал «живым», отзывчивым и интуитивно понятным для сотрудников.
Бизнес-эффект
-
Рост скорости поиска документов на 15–20% за счет плотной компоновки элементов.
-
Снижение нагрузки на техподдержку по вопросам навигации.
-
Повышение эргономики благодаря эффективному использованию экранного пространства
Технологии
- CSS
