Списки и сетки: UX-сравнение

1) Когда список, когда сетка (правило 5 вопросов)

1. Цель пользователя: быстро сравнить параметры (список) или выбрать по визуалу/обложке (сетка)?

2. Форма данных: структурные поля (табличные/текстовые) → список; визуальные объекты (обложки, фото) → сетка.

3. Плотность vs обзор: нужен максимум элементов на экран (список) или равномерная витрина (сетка)?

4. Действие по умолчанию: открыть/подробности (список) или мгновенное «Играть/Купить» с карточки (сетка)?

5. Контекст устройства: мобильный портрет — обычно сетка 2-в-ряд для карточек; отчеты/таблицы на десктопе — список/таблица.

Кратко: сравнивать — список; выбирать глазами — сетка.

2) Модель контента и IA

Список (row-first): главный сигнал — текст/поля. Подходит для: логов, историй операций, отчетов, результатов поиска по атрибутам.
Сетка (card-first): главный сигнал — обложка/превью. Подходит для: игр/товаров, медиа, коллекций.
Гибрид: «адаптивные карточки-строки» (на мобайле — карточка, на десктопе — строка с колонками) при одинаковом источнике данных.

3) Дизайн элементов: строка vs карточка

Строка (list row)

Структура: иконка/миниатюра (опционально), заголовок, 1–3 ключевых поля, meta (дата/статус), контекстные действия (⋮).
Сильные стороны: читаемость, высокая плотность, хороший сортируемый набор колонок.
UX-советы: фиксируйте высоту; выравнивайте по сетке; скрывайте второстепенные поля в «раскрытии».

Карточка (grid card)

Структура: обложка, заголовок, подпись/лейблы (новое/джекпот), один основной CTA + доп. действия в «…».
Сильные стороны: выбор по визуалу, быстрые действия, эмоциональный контекст.
UX-советы: сохраняйте aspect-ratio (напр. 4:3/1:1), одинаковые высоты заголовков, обрезка текста с tooltip.

4) Навигация, сортировка и фильтры

Общее: фильтры и сортировки — рядом и стабильны (без скачков). Активные условия — чипами над результатами.
Список: поддержите много колонок + «заморозку» заголовков; сортировки по клику на шапку.
Сетка: сортировка выпадающим списком; фильтры — чипами/панелью. Для «визуального» поиска — превью на hover/long-press.

5) Мобильный vs десктоп

• Сетка: 2-в-ряд (телефон), 3-в-ряд (планшет). Крупные CTA в зоне большого пальца.
• Список: компактные строки (56–72dp), сворачиваемые мета-поля.

• Сетка: 4–6-в-ряд при ≥1200px, авто-fill с `min` шириной карточки.
• Список: таблица/строки, ресайз колонок, быстрый поиск по таблице.

6) Состояния и загрузка

Skeletons: строки-скелеты (минимум 3–5), карточки-скелеты с заглушками под обложку и текст.
Пусто: объяснить, почему пусто, и предложить пресеты/снять фильтры.
Ошибки: сохранять выбор пользователя и позицию; дать retry.
Дозагрузка: «Показать еще» (гибрид) предпочтительнее бесконечной ленты в каталогах; для логов — можно автоподскролл с «Пауза».

7) Производительность

Цели: INP ≤ 200 мс, CLS ≤ 0,1, scroll-jank < 1%.

Список: виртуализация строк, фиксированные высоты, отложенные вычисления.
Сетка: lazy-изображения (AVIF/WebP), `srcset/sizes`, предсказуемые размеры, «партиями» по 20–60 карточек.
Общее: `content-visibility: auto`, кеш превью, приоритеты загрузки для hero-элементов.

8) Доступность

Список: таблицы с корректной семантикой (`table/thead/tbody`, `aria-sort`), фокус по строкам/ячейкам.
Сетка: `role="grid"` или список с `role="list"`; порядок в DOM = визуальному; подписи для изображений.
Клавиатура: стрелки/Tab; Enter — открыть; Space — «в избранное» (если уместно).
Размеры клика: ≥ 44px; контраст AA; явные подписи у иконок.

9) Метрики и телеметрия

• `view_switch(list|grid)`, `sort_change`, `filter_apply`, `card_quick_action`,
• `row_open`, `compare_open`, `results_load_batch`, `error_retry`.

• Time-to-First-Action (TTFA), qCTR результатов, Scroll Depth, Zero-Result Rate,
• Compare Rate (для списков), Quick-Action Rate (для сеток), Latency p95.

10) A/B-эксперименты (что тестировать)

Вид по умолчанию (список/сетка) для новых/возвращающихся.
Количество элементов на экран, высота строки, размер карточки.
Порядок фильтров/сортировок; чипы vs боковая панель.
Быстрые действия на карточке (иконки/текст, один vs два CTA).
Guardrails: INP/CLS, жалобы на «перепрыгивания» верстки, рост Zero-Result.

11) Примеры для iGaming

Лобби игр (B2C): сетка — обложка + «Играть/Демо», лейблы «Новое/Джекпот», фильтры чипами (Провайдер/Категория/Механика).
Каталог провайдеров: сетка логотипов с количеством игр; по клику — страница провайдера (внутри — тоже сетка игр).
Отчеты/финансы (B2B): список/таблица — колонками NGR/GGR/FTD/CR, фиксация заголовков, экспорт.
История транзакций: список — плотный ряд, статусы, поиск по сумме/ID/дате; раскрытие строки для деталей.
Акции/турниры: сетка баннеров с датами и CTA, сортировка по «Идут сейчас/Скоро».

12) Гибкие переключатели и персонализация

Дайте пользователю переключатель «Список ↔ Сетка» и запоминайте выбор (per user/tenant).
Предлагайте пресеты представления: «Плотно», «Обычно», «Крупно».
Контекстная логика: впервые — сетка в лобби; из поиска — список для точного сравнения.

13) Антипаттерны

Сетка без фиксированного соотношения сторон → «пляшущие» карточки и высокий CLS.
Список со слишком многими колонками — горизонтальный скролл без нужды.
Дублирование кнопок действий и в карточке, и в ховере c разным поведением.
Перемешивание сортировок/фильтров при каждой подгрузке (ломает фокус).
Скрытые активные фильтры — пользователи «теряют» результаты.

14) Чек-лист внедрения (пошагово)

1. Определите цель экрана: выбор по визуалу или сравнение атрибутов.
2. Задайте модель: список/сетка/гибрид; согласуйте IA и источники данных.
3. Спроектируйте элемент: строку или карточку с фиксированными размерами ключевых зон.
4. Сортировки/фильтры: видимые чипы, стабильный контрол сортировки.
5. Загрузка/пусто/ошибка: скелетоны, понятные тексты и retry.
6. Перформанс: lazy/virtualization, `content-visibility`, p95-цели.
7. A11y: семантика, клавиатура, контраст, размеры тап-таргетов.
8. Телеметрия: TTFA, qCTR, Zero-Result, Latency p95.
9. A/B: вид по умолчанию, размеры, быстрые действия.
10. Память выбора: сохраняйте режим представления и последние фильтры.

15) Итог

Списки и сетки — инструменты под разные задачи.

Когда важны атрибуты и сравнение — берите список.
Когда решает визуал и быстрые действия — берите сетку.
Определите цель, зафиксируйте размеры и поведение, держите интерфейс быстрым и доступным — и пользователи будут достигать результата за меньшее число шагов, без лишнего когнитивного шума.