Списки та сітки: 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) Підсумок

Списки та сітки - інструменти під різні завдання.

Коли важливі атрибути і порівняння - беріть список.
Коли вирішує візуал і швидкі дії - беріть сітку.
Визначте мету, зафіксуйте розміри і поведінку, тримайте інтерфейс швидким і доступним - і користувачі будуть досягати результату за менше число кроків, без зайвого когнітивного шуму.