Тизмелер жана тор: UX салыштыруу

1) Качан тизме, качан тор (эреже 5 суроолор)

1. Колдонуучунун максаты: тез параметрлерин салыштыруу (тизме) же көрүү/капкагын тандоо (тор)?

2. Маалымат формасы: структуралык талаалар (таблица/текст) → тизме; визуалдык объекттер (мукабалар, сүрөттөр) → тор.

3. тыгыздыгы VS карап чыгуу: экранда элементтердин максималдуу керек (тизмеси) же бир калыпта (тор)?

4. демейки иш-аракет: ачуу/майда-чүйдөсүнө чейин (тизме) же карта менен заматта "Play/сатып алуу" (тор)?

5. Түзмөктүн контекст: мобилдик портрет - адатта карта үчүн 2-катар тор; desktop боюнча отчеттор/таблицалар - тизме/таблица.

Кыскача: салыштыруу - тизме; тандоо - тор.

2) мазмун жана IA модели

Тизме (row-first): негизги сигнал - текст/талаа. Ылайыктуу: логдор, операциялардын тарыхы, отчеттор, атрибуттар боюнча издөө натыйжалары.
тор (card-first): негизги сигнал - мукаба/алдын ала. Ылайыктуу: оюндар/буюмдар, медиа, чогултуу.
Гибрид: "адаптивдик карточка-саптар" (мобайл - карточка, десктоп - колонка менен сап).

3) Элементтердин дизайны: сызык vs карта

Сызык (list row)

Түзүлүшү: сөлөкөт/миниатюра (кошумча), аталышы, 1-3 негизги талаалар, мета (дата/статус), контексттик иш-аракеттер (⋮).
Күчтүү жактары: окууга жөндөмдүүлүгү, жогорку тыгыздыгы, жакшы сорттолгон колонкалар топтому.
UX-кеңештери: бийиктикти бекитүү; тор боюнча тегиздөө; "ачыкка чыгарууда" экинчи даражадагы талааларды жашырыңыз.

Карта (grid card)

Түзүмү: мукаба, баш, кол/лейбл (жаңы/джекпот), бир негизги CTA + кошумча иш-аракет ""....
Күчтүү жактары: визуалдык тандоо, тез аракеттер, эмоционалдык контекст.
UX-кеңештери: aspect-ratio (мисалы, 4: 3/1: 1), аталыштардын бирдей бийиктиги, текстти tooltip менен кесүү.

4) багыттоо, сорттоо жана чыпкалар

Жалпы: чыпкалар жана сорттоо - жакын жана туруктуу (секирүү жок). Активдүү шарттар - натыйжалардын үстүнөн чиптер.
Тизме: колдоо көптөгөн колонкалар + "тоңдурулган" аталыштары; калпакка чыкылдатуу менен сорттоо.
Сетка: ачылып тизмесин сорттоо; чыпкалар - чиптер/панелдер. "Визуалдык" издөө үчүн - hover/long-press алдын ала.

5) Мобилдик VS Desktop

• тор: 2-катар (тел), 3-катар (планшет). Баш бармак зонасында ири CTA.
• Тизме: компакт саптар (56-72dp), мета-талаалар.

• тор: 4-6-1200px ≥ менен катар, auto-fill менен 'min' карта туурасы.
• Тизме: таблица/саптар, колонкаларды кайра карап чыгуу, таблица боюнча тез издөө.

6) Шарттар жана жүктөө

Skeletons: саптар-скелеттер (жок дегенде 3-5), карталары-скелеттер капкактын жана тексттин астындагы капкактары менен.
Бош: эмне үчүн бош экенин түшүндүрүп, алдын ала жазууларды/чыпкаларды алып салууну сунуштайбыз.
Каталар: колдонуучунун тандоосун жана абалын сактоо; retry бер.
Кошумча жүктөө: каталогдордогу чексиз лентага караганда "Дагы көрсөтүү" (гибрид); логдор үчүн - "Пауза" менен автоподскролл болот.

7) аткаруу

Максаттары: INP ≤ 200 ms, 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 = көрүү тартиби; сүрөттөр үчүн кол тамгалар.
Klaviatura: жебелер/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): тор - Cover + "Play/Demo", лейблдер "New/Jackpot", чип чыпкалар (Провайдер/Категория/Механика).
Провайдерлердин каталогу: оюндардын саны менен логотип торчосу; чыкылдатуу менен - ​ ​ провайдердин баракчасы (ичинде - оюндардын тору да).
Отчеттор/каржы (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) Жыйынтык

Тизмелер жана торлор - ар кандай тапшырмалар үчүн куралдар.

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