Тізімдер мен торлар: 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), мета-өрістер.

• Тор: карточка ені 1200px, авто-fill ≥ кезінде 4-6-қатар.
• Тізім: кесте/жолдар, бағандар ресайзы, кесте бойынша жылдам іздеу.

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.
Тым көп бағандары бар тізім - қажетсіз көлденең скролл.
Әр түрлі мінез-құлықты карточкада да, ховерде де әрекет түймелерін қайталау.
Әрбір жүктеу кезінде сұрыптауларды/сүзгілерді араластыру (фокусты бұзады).
Жасырын белсенді сүзгілер - пайдаланушылар нәтижелерін «жоғалтады».

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) Қорытынды

Тізімдер мен торлар - түрлі тапсырмалар үшін құралдар.

Атрибуттар мен салыстыру маңызды болса, тізімді алыңыз.
Визуалды және жылдам әрекеттерді шешкен кезде торды алыңыз.
Мақсатты анықтаңыз, өлшемдер мен мінез-құлықты белгілеңіз, интерфейсті жылдам және қолжетімді ұстаңыз - және пайдаланушылар артық когнитивтік шусыз, аз қадамдар үшін нәтижеге қол жеткізеді.