Рӯйхатҳо ва шабакаҳо: муқоисаи UX

1) Ҳангоми рӯйхат, вақте ки шабака (қоидаҳои 5 савол)

1. Ҳадафи корбар: параметрҳоро (рӯйхат) зуд муқоиса кунед ё аз рӯи визуалӣ/сарпӯш (шабака) интихоб кунед?

2. Шакли маълумот: майдонҳои сохторӣ (ҷадвал/матн) → рӯйхат; объектҳои визуалӣ (пӯстҳо, аксҳо) → шабака.

3. Зичӣ ва шарҳи мухтасар: барои ҳар як экран (рӯйхат) ё намоиши ягона (шабака) ҳадди аксар лозим аст?

4. Амали пешфарз: кушода/тафсилот (рӯйхат) ё фаврӣ "Play/Buy" аз корт (шабака)?

5. Контексти дастгоҳ: портрети мобилӣ - одатан шабакаи 2-дар-сатр барои кортҳо; ҳисоботҳо/ҷадвалҳо дар мизи корӣ - рӯйхат/ҷадвал.

Кӯтоҳ: муқоиса - рӯйхат; бо чашмони худ интихоб кунед - шабака.

2) Модели мундариҷа ва IA

сатр-аввал-Сигнали асосӣ матн/майдонҳо мебошад. Мувофиқ аст: гузоришҳо, таърихи муомилот, гузоришҳо, натиҷаҳои ҷустуҷӯ.
Корт-аввал: Сигнали асосӣ сарпӯш/пешнамоиш аст. Мувофиқ: бозиҳо/маҳсулот, ВАО, маҷмӯаҳо.
Гибрид: "кортҳои хати мутобиқшавӣ" (дар мобилӣ - корт, дар мизи корӣ - хат бо сутунҳо) бо ҳамон манбаи маълумот.

3) Тарҳрезии унсурҳо: сатр vs корт

Сатр (сатри рӯйхат)

Сохтор: нишона/ангушти калон (ихтиёрӣ), унвон, 1-3 майдони калидӣ, мета (сана/ҳолат), амалҳои контекстӣ (⋮).
Тарафҳои қавӣ: хониш, зичии баланд, маҷмӯи хуби навъбандии сутунҳо.
Маслиҳатҳои UX: баландиро ислоҳ кунед; Рост кардан ба шабакаи пинҳон кардани майдонҳои хурд дар "ошкор".

Корти шабакавӣ

Сохтор: муқова, сарлавҳа, сарлавҳа/тамғакоғазҳо (нав/Jackpot), як CTA + амали иловагӣ дар... ""

Тарафҳо: Интихоби визуалӣ, амали зуд, заминаи эҳсосӣ.
UX-маслиҳатҳо: таносуби паҳлӯиро нигоҳ доред (масалан, 4: 3/1: 1), ҳамон баландии сарлавҳа, буридани матн бо асбоб.

4) Навигатсия, мураттабсозӣ ва филтрҳо

Умумӣ: филтрҳо ва навъҳо дар наздикӣ ва устувор мебошанд (бе секунҷа). Шароити фаъол - микросхемаҳо аз натиҷаҳо.
Рӯйхат: дастгирии бисёр сутунҳо + сарлавҳаҳои "ях кардан"; ҷобаҷогузорӣ бо пахш кардани сарлавҳа.
Шабака: мураттабкунӣ аз рӯи рӯйхати афтанда; филтрҳо - бо микросхемаҳои/панел. Барои ҷустуҷӯи "визуалӣ" - пешнамоиш дар hover/long-press.

5) Мизи кории мобилӣ

• Grid: 2-in-a-row (телефон), 3-in-a-row (планшет). CTA-ҳои калон дар минтақаи ангушти калон.
• Рӯйхат: хатҳои паймон (56-72dp), мета-майдонҳои пошхӯрда.

• Шабака: 4-6-дар-сатр дар ≥ 1200px, худкор бо паҳнои корти 'min' пур кунед.
• Рӯйхат: ҷадвал/сатрҳо, андозаи сутун, ҷустуҷӯи ҷадвали зуд.

6) Давлатҳо ва зеркашиҳо

Скелетҳо: хатҳои скелет (ҳадди аққал 3-5), кортҳои скелетӣ бо сарпӯш ва матн.
Холӣ: фаҳмонед, ки чаро филтрҳо холӣ ва пешнамоишро пешниҳод мекунанд/хориҷ мекунанд.
Хатоҳо: интихоб ва мавқеи корбарро захира кунед; такрорӣ диҳед.
Аз нав бор кардан: "Нишон додани бештар" (гибрид) ба наворҳои беохир дар каталогҳо афзалтар аст; барои гузоришҳо - шумо метавонед бо "Таваққуф" худкор ҳаракат кунед.

7) Иҷро

Ҳадафҳо: INP ≤ 200ms, CLS ≤ 0. 1, ҳаракат-jank <1%.

Рӯйхат: виртуализатсияи сатр, баландии собит, ҳисобҳои таъхиршуда.
Grid: тасвирҳои танбал (AVIF/Web 'P),' srcset/андозаҳо ', андозаҳои пешбинишаванда, дар "маҷмӯаҳо" -и 20-60 корт.
Умумӣ: 'Намоёнии мундариҷа: худкор', кэши пешакӣ, афзалиятҳои сарборӣ барои унсурҳои қаҳрамон.

8) Дастрасӣ

Рӯйхат: ҷадвалҳо бо семантикаи дуруст ('ҷадвал/thead/tbody', 'aria-sort'), ба сатрҳо/ҳуҷайраҳо тамаркуз кунед.
Шабака: 'нақш = "шабака" ё рӯйхат бо' нақш = "рӯйхат" '; фармоиш дар DOM = визуалӣ; сарлавҳаҳо барои тасвирҳо.
Клавиатура: тирҳо/Ҷадвал; Ворид кардан - кушодан; Фазо - "ба мунтахаб" (агар лозим бошад).
Андозаҳои клик: ≥ 44px; Контрасти АА; имзоҳои возеҳ дар нишонаҳо.

9) Метрҳо ва телеметрия

• 'view _ switch (рӯйхати' grid) ',' sort _ change ',' filter _ apply ',' card _ quick _ action ',
• 'row _ open', 'муқоиса _ кушода', 'натиҷаҳо _ load _ back', 'хато _ retry'.

• Вақт-ба-амали аввал (TTFA), натиҷаҳои QCTR, чуқурии ҳаракат, сатҳи сифр-натиҷа,
• Меъёри муқоиса (барои рӯйхатҳо), Меъёри амали зуд (барои шабакаҳо), Latency p95.

10) Таҷрибаҳои A/B (чиро санҷидан лозим аст)

Намоиши пешфарз (рӯйхат/шабака) барои нав/бозгаштҳо.
Шумораи ашёҳо дар як экран, баландии сатр, андозаи корт.
Тартиби филтрҳо/навъбандӣ; микросхемаҳои vs панели тарафӣ.
Амалҳои зуд дар корт (нишонаҳо/матн, яке против ду CTA).
Гвардияҳо: INP/CLS, шикоятҳо дар бораи тарҳ "ҷаҳида", афзоиши сифр-натиҷа.

11) Намунаҳо барои IGaming

Бозиҳои Lobby (B2C): Grid - Cover + Play/Demo, тамғакоғазҳои нав/Jackpot, филтрҳои чип (провайдер/категория/механика).
Каталоги провайдер: шабакаи логоҳо бо шумораи бозиҳо; бо клик - саҳифаи провайдер (дар дохили - инчунин шабакаи бозиҳо).
Ҳисоботҳо/Молия (B2B): рӯйхат/ҷадвал - сутунҳои NGR/GGR/FTD/CR, ислоҳи унвон, содирот.
Таърихи амалиёт: рӯйхат - силсилаи зич, статусҳо, ҷустуҷӯ аз рӯи миқдор/ID/сана; Васеъ кардани сатр барои қисмҳо.
Аксияҳо/мусобиқаҳо: Шабакаи баннерӣ бо санаҳо ва CTA, ки аз ҷониби "Going Now/Наздик ба зудӣ" ҷудо карда шудаанд.

12) Коммутаторҳои тағйирёбанда ва фардикунонӣ

Ба корбар тугмаи радиои "List ↔ Grid" -ро диҳед ва интихобро дар хотир доред (ба як корбар/иҷорагир).
Пешнамоишҳои спектаклро пешниҳод кунед: "Қатъӣ", "Одатан", "Калон".
Мантиқи контекстӣ: бори аввал - шабака дар даромадгоҳ; аз ҷустуҷӯ - рӯйхат барои муқоисаи дақиқ.

13) Антипаттернҳо

Шабака бидуни таносуби ҷанбаи собит → кортҳои "рақс" ва CLS-и баланд.
Рӯйхат бо сутунҳои аз ҳад зиёд як гардиши уфуқӣ бидуни ниёз аст.
Такрори тугмаҳои амал ҳам дар корт ва ҳам дар hover бо рафтори гуногун.
Омезиши навъҳо/филтрҳо дар ҳар як сарборӣ (фокусро мешиканад).
Филтрҳои фаъоли пинҳоншуда - корбарон натиҷаҳои "гум" мекунанд.

14) Рӯйхати назорати амалисозӣ (зина ба зина)

1. Муайян кунед, ки оё экран бо роҳи муқоисаи визуалӣ ё атрибут интихоб шудааст.
2. Моделро муайян кунед: рӯйхат/шабака/гибрид; розӣ IA ва манбаъҳои маълумот.
3. Тарҳрезии сатр ё корт бо андозаҳои минтақаи калиди собит.
4. Навъбандӣ/филтрҳо: микросхемаҳои намоён, назорати ҷобаҷогузории устувор.
5. Боркунӣ/холӣ/хато: скелетҳо, матнҳои дӯстона ва такрорӣ.
6. Иҷро: танбалӣ/виртуализатсия, 'дидани мундариҷа', ҳадафҳои p95.
7. A11y: семантика, клавиатура, контраст, андозаи ламс.
8. Telemetry: TTFA, QCTR, Zero-Натиҷа, Latency p95.

9. Намуди пешфарз A/B, андозаҳо, амалҳои зуд

10. Интихоби хотира: Ҳолати намоиш ва филтрҳои охиринро нигоҳ доред.

15) Сатри поён

Рӯйхатҳо ва торҳо воситаҳо барои вазифаҳои гуногун мебошанд.

Вақте ки сифатҳо ва муқоиса муҳиманд, рӯйхат гиред.
Вақте ки визуалӣ қарор қабул мекунад ва амалҳои зуд - шабакаро гиред.
Ҳадаф муайян кунед, андоза ва рафторро сабт кунед, интерфейсро зуд ва дастрас нигоҳ доред - ва корбарон бе садои нолозими маърифатӣ дар қадамҳои камтар натиҷа ба даст меоранд.