UX Review
Структурный разбор сделанного: что работает, что плохо, насколько быстро клиент-аналитик
понимает страницу. Источник — прод-сборка cards-v2/ на разрешениях 1024 / 1440 / 1920 px.
Что работает хорошо
Match-термометр сверху — лучшее решение в макете
Тройное кодирование (число «87%» + ширина заливки + цвет акцента) считывается за полсекунды. Клиент сразу видит иерархию кандидатов: топ → средний → слабый.
Source product визуально отделён
Серая полоска вместо термометра + иконка home + зелёная аватарка «no operator review needed» — мгновенно ясно «это эталон». Никакой путаницы «а где источник».
Per-параметр scores — главная аналитическая фича
100% / 96% / 62% возле каждой строки. Оператор не сличает текст глазами — цвет сам подсветил расхождения. Brand=100%, Price=62% значит «бренд тот же, цена сильно отличается, копнуть туда». Экономит ~80% времени ревью.
Per-thumb match score под превьюшками
100% / 92% / 84% / 71% под каждой миниатюрой. Таких фишек обычно не делают, а тут она логична: у конкурента 7 фоток продукта, не все одинаково похожи на оригинал.
Group expand — один клик раскрывает Engine + Operator notes на всех 5
Это правильный паттерн для compare-сценария: сравнивать ML-объяснения построчно становится возможно без беготни «открыл — закрыл — открыл следующую».
Серая / цветная аватарка Monica
Статус ревью читается интуитивно. Серый = pending, цветной = approved. Без иконок и подписей.
JS-синхронизация Mapping Engine Notes высоты
Operator Notes заголовки выстраиваются на одной горизонтальной линии у всех 5 плашек. Глаз не «прыгает» между карточками.
Адаптивная сетка
На любом разрешении сетка работает, плашки не ломают вёрстку, нет горизонтального скролла.
Что плохо (честно)
4/2 split на 1440 px и 5/1 на 1920 px — главная визуальная проблема
Шесть плашек на широких экранах всегда дают «осиротевший» хвост во втором ряду. Клиент откроет на ноуте 1440 → ровная четвёрка сверху + две одинокие плашки внизу. Решение: зафиксировать 3-в-ряд до ~1600 px, потом честно 4×2 — у клиента в брифе и было 3×2.
Нет легенды цветовой шкалы
Что такое 62% жёлтый, а 41% розовый? Где граница «ещё ОК» / «уже плохо»? Без подсказки клиент должен интуичить. Решение: tooltip-onboarding или мини-легенда в углу страницы.
«Show More» не объясняет, ЧТО раскроет
Клиент не догадается, что под кнопкой Mapping Engine Notes + Operator Notes (а не «больше параметров» или «больше фоток»). Лучше: «Show notes» / «Hide notes» или иконка-намёк.
Плотность контента — 6 × 7 = 42 строки параметров
На первый взгляд — рябь мелкого текста. Это осознанный trade-off: клиент сам сказал «выводи 7, не так красиво, но надо». Но при ревью 30+ кластеров за день оператор устанет. В проде — top-4 параметра сразу + остальное под Show More.
Photo carousel дублирует навигацию
Chevrons слева/справа + thumbnails ниже. На узких плашках thumbs съёживаются до 40×40 px. Достаточно либо thumbs (как Amazon), либо chevrons.
Pending review без фильтра
Три из пяти кандидатов сейчас pending. Оператор зашёл бы и сразу хотел «show only pending». Сейчас фильтра нет, только глазами по аватарке. Для прототипа ОК, для прода — filter chip.
Engine Notes — длинный свободный текст
В стиле «Anchor product — точка отсчёта кластера». В демо ОК, в проде эти notes должны быть структурированными (bullets / key:value), а не сплошной параграф — иначе оператор читать не будет.
Mobile не оптимизирован
На 375 px плашки в одну колонку — длинная простыня без bottom-sheet или swipe-deck. Клиент мобайл и не просил, но в roadmap отметить стоит.
Скорость понимания (без онбординга)
После 2-минутного онбординга ревью одного 6-плашкового кластера = 30–60 секунд. Это хороший результат для compare-задачи такой плотности.
Что фиксить до клиента и что отдать в roadmap
~1.5 часа работы
- 3-в-ряд layout breakpoint — чтобы не было 4/2 на ноуте. ~30 мин.
- Легенда цветовой шкалы в углу страницы. ~1 час.
После пилота
- Filter chips (Approved / Pending / All)
- Mapping Engine Notes structured (bullets)
- Top-4 параметра + Show More для остальных трёх
- Mobile-layout (bottom-sheet)