Аудит РМС - общие элементы на сайте
Анализ интерфейса B2B-платформы РМС: проблемы восприятия, UX-узкие места и возможности для улучшения визуальной структуры
Поля
🔍 Поля ввода: отсутствие единых состояний и интерактивов
Рис. 1 — Поле ввода «Номер заказа»
🔻 Проблема: отсутствуют визуальные состояния (hover, focus, error, success). Пользователь не получает обратной связи при взаимодействии. Это снижает удобство и может вызывать неуверенность при заполнении.
Рис. 2 — Строка поиска
🔸 Наблюдение: здесь присутствует фокус-состояние (подсветка), в отличие от других полей. Однако оно не унифицировано — поведение отличается от остальных полей.
Рис. 2 (внизу) — Счётчик
🌀 Проблема: элемент визуально отличается от остальных инпутов. Нет hover/focus-состояний, стилистически оторван от общей системы полей.
Рис. 3 — Поле загрузки файла
🚫 Проблема: нет эффекта наведения. Элемент не реагирует на курсор, что снижает интерактивность и визуальный отклик.
🔍 Поля ввода: отсутствие единых состояний и интерактивов
Рис. 1 — Поле ввода «Номер заказа»
🔻 Проблема: отсутствуют визуальные состояния (hover, focus, error, success). Пользователь не получает обратной связи при взаимодействии. Это снижает удобство и может вызывать неуверенность при заполнении.
Рис. 2 — Строка поиска
🔸 Наблюдение: здесь присутствует фокус-состояние (подсветка), в отличие от других полей. Однако оно не унифицировано — поведение отличается от остальных полей.
Рис. 2 (внизу) — Счётчик
🌀 Проблема: элемент визуально отличается от остальных инпутов. Нет hover/focus-состояний, стилистически оторван от общей системы полей.
Рис. 3 — Поле загрузки файла
🚫 Проблема: нет эффекта наведения. Элемент не реагирует на курсор, что снижает интерактивность и визуальный отклик.
Кнопки
🧩 Кнопки: несогласованность стилей и поведения
Рис. 1 — Кнопка «Перейти в каталог»
🔻 Проблема:
🔸 Наблюдение:
⚠️ Вопрос:
🚫 Проблема:
— Разные стили, скругления, цвета, размеры
— Где-то есть ховеры, где-то нет вовсе
— Функционально одинаковые кнопки выглядят по-разному
📌 Решение: требуется унификация UI-компонентов и внедрение дизайн-системы (или хотя бы UI-kit), чтобы кнопки всех типов имели предсказуемое поведение и стиль.
🧩 Кнопки: несогласованность стилей и поведения
Рис. 1 — Кнопка «Перейти в каталог»
🔻 Проблема:
- Текст визуально смещён, ощущается, что не по центру.
- Hover-состояние меняется с заливки на обводку
🔸 Наблюдение:
- Стилистика выбивается: серый фон, отсутствие чёткого ховера, другой шрифт и радиусы.
- Выглядит как элемент с другого проекта.
⚠️ Вопрос:
- Если это тот же функционал (переключение категорий), почему визуально они оформлены иначе?
- Используются иные цвета, бордеры, скругления.
🚫 Проблема:
- Нет hover-состояния вообще.
- Размеры кнопок и тэгов сильно варьируются по высоте и скруглениям.
- Разные отступы внутри кнопок, нет унификации.
— Разные стили, скругления, цвета, размеры
— Где-то есть ховеры, где-то нет вовсе
— Функционально одинаковые кнопки выглядят по-разному
📌 Решение: требуется унификация UI-компонентов и внедрение дизайн-системы (или хотя бы UI-kit), чтобы кнопки всех типов имели предсказуемое поведение и стиль.
Без комментариев