Дизайн view для сравнения объектов

Действуй как product designer. View для сравнения — это редкий случай, когда таблица оправдана. Юзер реально хочет видеть несколько объектов рядом, и каждое поле — это «vs». Цель: чтобы решение приходило за 30 секунд, а не «давай сяду и буду подробно изучать».

Сравниваем: {{compare_what}} Кол-во: {{item_count}} Атрибутов: {{attribute_count}}

3 паттерна — что когда

Карта выбора

• 2 items, 3-5 attrs → side-by-side cards (компактно, ясно).
• 3 items, 5-10 attrs → side-by-side cards 3-up.
• 4+ items, любое количество attrs → comparison table.
• 2 items, 15+ attrs, фокус на отличиях → diff view (особенно для config / versions).
• Unlimited items → table с возможностью toggle items in/out.

Side-by-side cards (для 2-3)

┌─────────┐  ┌─────────┐  ┌─────────┐
│ Item A  │  │ Item B  │  │ Item C  │
├─────────┤  ├─────────┤  ├─────────┤
│ Price   │  │ Price   │  │ Price   │
│ $29     │  │ $49     │  │ Custom  │
├─────────┤  ├─────────┤  ├─────────┤
│ Storage │  │ Storage │  │ Storage │
│ 10GB    │  │ 100GB   │  │ ∞       │
├─────────┤  ├─────────┤  ├─────────┤
│ Support │  │ Support │  │ Support │
│ Email   │  │ Email + │  │ CSM     │
│         │  │ Chat    │  │         │
└─────────┘  └─────────┘  └─────────┘

• Все карточки одинаковой высоты.
• Атрибуты в одинаковом порядке.
• Header атрибута может быть слева (subtle text) или внутри ячейки.
• Highlight different value: если значение != других → bold или accent color.

Comparison table

                Item A        Item B        Item C        Item D
                ─────────────────────────────────────────────────
Price           $29           $49           Custom         $19
Storage         10GB          100GB         ∞              5GB
Users           1             5             unlimited      1
SSO             —             —             ✓              —
SLA             —             —             ✓              —
Support         Email         Email+Chat    CSM            Community

                [Choose]      [Choose]      [Contact]      [Choose]

• Sticky header при горизонтальном скролле.
• Sticky первая колонка (attribute names) при горизонтальном скролле.
• Чередующиеся row backgrounds для читаемости.
• Highlight ряд при hover — глаз не теряется.
• Highlight отличия: если все одинаковое — gray; разное — bold.
• Best in row marker: ★ на лучшее значение (если применимо: max storage, lowest price).
• CTA на каждой колонке внизу.

Diff view (overlay для 2 объектов)

                Item A → Item B
                ─────────────────
Price           $29 → $49 (+$20)
Storage         10GB → 100GB ✓ (+90GB)
Users           1 → 5 ✓ (+4)
SSO             — → ✓ (added)
Support         Email → Email + Chat (improved)

• Левая колонка = атрибут.
• Правая = «from → to» с инлайн annotation.
• Color: добавлено = green, удалено = red, изменено = amber.
• Без изменений — серым или скрыто (toggle «Show all»).

Highlighting различий

Best value

• ★ или badge «Best» на максимальном значении (если это «больше = лучше»).
• Для бинарных (yes/no): ✓ зелёным, — серым.

Equality

• Когда значения одинаковые — visually одинаковые (gray text).
• Когда разные — bold или accent color.

Numeric difference

• Pochat диффы рядом со значением: «$49 (+$20 vs A)» — но только в diff view.
• В table — лучше без диффа, юзер сам сравнит глазами.

Привязка к атрибутам

• Atribute name всегда слева. В table — это первая колонка sticky. В cards — header над значением или в самой ячейке.
• Order атрибутов: от важного к не важному. Не алфавит.
• Группировка атрибутов в секции при >10:
  • Pricing
  • Storage & Limits
  • Features
  • Support
  • Security

Что делать с длинным текстом

• Truncate с ellipsis + tooltip / expand.
• Или: «Show details» link открывает modal с полным content.
• Не растягивай ряд — всё прыгает.

Mobile-адаптация

Side-by-side cards → стек или swipe

• 2-3 cards → стек вертикально (если 2) или swipe-carousel (если 3+).
• Indicator «1 of 3» сверху.

Comparison table → toggle view

• Кнопка «Compare as cards» / «Compare as table» (default = cards на mobile).
• Если table — горизонтальный скролл со sticky первой колонки.
• НЕ сжимай table в условный «mobile table» с переломом строк — нечитаемо.

Diff view → vertical

• Атрибут сверху, «A → B» снизу или в строку с иконкой.

Items selector

• Add / remove items для сравнения:
  • Если из catalog: чекбокс «Add to compare» на product card.
  • Compare-bar внизу страницы: «3 items selected · [Compare]».
  • На странице compare: кнопка «+ Add item» открывает picker.
• Drag-to-reorder columns опционально, для power users.

States

• Loading: skeleton-таблица того же layout.
• Empty (0 items для compare): «Select 2+ items to compare» + кнопка «Browse catalog».
• 1 item only: показать предложение «Add another to compare» + кнопка-picker.

A11y

• Table — стандартная <table> semantics: <th scope="col"> для items, <th scope="row"> для атрибутов.
• Diff view — aria-label на изменениях: «Storage changed from 10GB to 100GB».
• Sticky columns не должны ломать screen reader navigation.
• Highlighted differences — не только цветом, но и иконкой / меткой («Best in row»).

Формат вывода

Решение

Одна строка: «<cards / table / diff> — потому что <критерии>».

Spec выбранного

Cards:

• Layout (2-up / 3-up)
• Структура одной карточки
• Highlight rules

Table:

• Sticky behavior (header, first column)
• Row striping
• Highlight отличий
• «Best in row» markers
• CTA placement

Diff:

• Layout
• Color coding
• Toggle «Show all / Only differences»

Атрибуты

• Order
• Грouping (если >10)
• Что делать с long text

Items management

• Add / remove
• Compare-bar (если есть)
• Drag-reorder (опционально)

Mobile-адаптация

Что меняется.

States

• Loading
• Empty / 1 item
• Error

A11y чеклист

ARIA, sticky-screen-reader compat, highlight без зависимости от цвета.

Anti-patterns (НЕ делать)

• ❌ Сравнение без highlight'а отличий. Юзер сравнивает глазами строка за строкой — провал.
• ❌ Comparison table без sticky columns. Юзер скроллит горизонтально и теряет, где какой объект.
• ❌ «Compare» как просто «open in two tabs» — это не сравнение, это «делай сам».
• ❌ Атрибуты в алфавитном порядке. Order = importance.
• ❌ Cards разной высоты. Юзер не может сравнить по горизонтали.
• ❌ Diff view, который показывает все 47 атрибутов одинаково (включая unchanged). Только различия + toggle «show all».
• ❌ Mobile table со сжатыми колонками. Перенеси на cards или горизонтальный скролл.
• ❌ Сравнение без «★ Best» / recommendation для одного из вариантов. Если все равны — нет смысла в сравнении.
• ❌ CTA только внизу страницы. Каждая карточка / колонка должна иметь свой CTA.
• ❌ Numeric diff в комбо с table вида «$49 (+$20)». В table — это шум. Diff annotations только в diff view.