Ցուցակները և ցանցերը ՝ UX համեմատություն
1) Երբ ցանցը (սովորաբար 5 հարց)
Հարցրեք ինքներդ ձեզ
1. Օգտագործողի նպատակն է արագ համեմատել պարամետրերը (ցանկը) կամ ընտրել տեսողական/շապիկի (ցանց)։
2. Տվյալների ձևը կառուցվածքային դաշտերը (պլանշետային/տեքստային) նշված ցանկը։ տեսողական օբյեկտները (շապիկներ, լուսանկարներ) ցանցն են։
3. VS դիտարկման խտությունը 'էկրանի վրա առավելագույն տարրերի կարիք (ցուցակ) կամ միատեսակ վիտրինը (ցանց)։
4. Լռելյայն 'բացել/մանրամասները (ցուցակը) կամ ակնթարթային «Խաղալ/գնել» քարտից (ցանց)։
5. Սարքի կոնտեքստը 'բջջային դիմանկարը, սովորաբար 2-րդ շարքի ցանցը քարտերի համար։ Հաշվետվություններ/սեղաններ desktope - ցուցակ/2019։
Հակիրճ 'համեմատել ցուցակը; ընտրել աչքերով 'ցանցը։
2) Բովանդակության և IA մոդելը
Ցանկը (row-first) 'հիմնական ազդանշանը տեքստն/դաշտը։ Հարմար է 'լոգարաններ, վիրահատությունների պատմություններ, հետազոտություններ, օրինագծերի որոնման արդյունքներ։
Ցանցը (card-first) 'հիմնական ազդանշանը շապիկ/ավարտ։ Հարմար է խաղերի/ապրանքների, լրատվամիջոցների, հավաքածուների համար։
Հիբրիդ '«հարմարվողական գծեր» (Altaile-ի վրա քարտը, դիսկոտոպում' սյունակներով տող) նույն տվյալների աղբյուրում։
3) Տարրերի դիզայնը 'vs քարտի տողը
Տող (list row)
Կառուցվածքը ՝ իկոնկա/մանրանկարչություն (oporatura), վերնագիր, 1-3 հիմնական դաշտեր, մետա (ամսաթիվը/կարգավիճակը), կոնտեքստային գործողություններ (108)։
Ուժեղ կողմերն են ՝ ընթերցում, բարձր խտություն, կոլոնների լավ տեսակավորված հավաքածու։
UX խորհուրդ. Գրանցեք բարձրությունը; միացրեք ցանցին; թաքցրեք երկրորդական դաշտերը «բացահայտման» մեջ։
Քարտը (grid card)
Կառուցվածքը 'շապիկ, վերնագիր, ստորագրություն/պիտակներ (նոր/ջեքսպոտ), մեկ հիմնական CTA + գործողության դոզան...
Ուժեղ կողմերը 'տեսողական ընտրություն, արագ գործողություններ, էմոցիոնալ կոնտեքստ։
UX խորհուրդ. Պահպանեք asport-ratio (օրինակ ՝ 4: 3/1: 1), վերնագրերի նույն բարձրությունները, տեքստի կտրումը tooltip-ից։
4) Ինդուկցիա, տեսակավորում և ֆիլտրեր
Ընդհանուր 'ֆիլտրերը և տեսակավորումը մոտ և կայուն են (առանց թռիչքների)։ Ակտիվ պայմանները չիպեր են արդյունքների վրա։
Ցանկը 'աջակցեք շատ զանգեր + «սառեցրեք» վերնագրերի։ տեսակավորում գլխարկի վրա։
Ցանցը 'սորտերի տեսակավորումը; ֆիլտրերը չիպս/պանել են։ «Տեսողական» որոնման համար 'hover/long-press։
5) Բջջային vs desktop
Բջջային
Ցանցը ՝ 2-րդ շարքը (հեռախոսը), 3-րդ շարքը (պլանշետ)։ Մեծ CTA-ն մեծ մատի գոտում։
Ցանկը 'կոմպակտ տողեր (56-72dp), որոնք փակցված են մետա դաշտերը։
Desktop
Ցանցը ՝ 4-6-v-շարքը 1200px-ի ժամանակ, Avto-24l-ը 'քարտի լայնությամբ։
Ցանկը ՝ 108/տող, զանգերի ռեսայզ, արագ փնտրել աղյուսակը։
6) Վիճակը և բեռնումը
Skeletons: Կմախքի տողերը (առնվազն 3-5), կմախքներ, որոնք ունեն ծածկոց և տեքստ։
Դատարկ 'բացատրել, թե ինչու է դատարկ, և առաջարկել ճնշումներ/հեռացնել ֆիլտրերը։
Սխալները 'պահպանել օգտագործողի ընտրությունը և դիրքը։ տալ retry.
Ավելացնելը '«Ցույց տալ» (հիբրիդ) ավելի նախընտրելի է, քան անսահման ժապավենը օրինագծերում։ լոգարանների համար, դուք կարող եք «Դադարի» հետ։
7) Արտադրողականությունը
Նպատակները ՝ INP 24200 ms, CLS 240,1, scroj-jank <1 տոկոսը։
Ցանկը 'տողերի վիրտուալացում, ֆիքսված բարձրություններ, հետաձգված հաշվարկներ։
Ցանցը ՝ lazy-պատկեր (AVIF/Pro P), «www.cset/sizes», կանխատեսելի չափսեր, «կուսակցություններ» 20-60 քարտերով։
Ընդհանուր '«ententent-visibility: www.ru», kesh ավելի բարձր, բեռնման գերակայությունները hero տարրերի համար։
8) Հասանելիություն
Ցանկը 'աղյուսակներ ճիշտ սեմանտիկայի հետ («table/thead/tbody», «aria-soft»), կոորդինատներ/բջիջներ։
Ցանցը ՝ "role =" grid "կամ ցուցակը 'role =" list "; կարգը DFC = տեսողական; ստորագրություններ պատկերների համար։
Ստեղնաշար 'սլաքներ/Tab; Enter - բացել; Space-ը «ընտրված» է (եթե տեղին է)։
Կլիկի չափսերը ՝ 44px; հակադրություն AA; հստակ ստորագրություններ սրբապատկերների հետ։
9) Metriki և telemetry
Իրադարձությունները
`view_switch(list|grid)`, `sort_change`, `filter_apply`, `card_quick_action`,
`row_open`, `compare_open`, `results_load_batch`, `error_retry`.
KPI:- Time-to-First-Action (TTFA), qCTR արդյունքներ, Scrope Depth, Zero-Resort Rate,
- Compare Rate (ցուցակների համար), Quick-Action Rate (ցանցերի համար), Latency p95։
10) A/B փորձարկումներ (ինչ փորձարկել)
Տեսակը լռելյայն (ցուցակը/ցանցը) նոր/վերադարձողների համար։
Էկրանի վրա տարրերի քանակը, տողի բարձրությունը, քարտի չափը։
Ֆիլտրերի/տեսակավորման կարգը; chips vs կողային վահանակ։
Արագ գործողություններ քարտեզի վրա (իկոնկի/տեքստ, մեկ vs երկու CTA)։
Guardrails: INP/CLS, բողոքներ «նետելու» մասին, Zero-Resort աճը։
11) iGaming-ի օրինակները
Լոբբի խաղերը (B2C) 'ցանցը + «Խաղալ/Դեմո» շապիկը, «Նոր/Ջեքպոտ» պիտակները, չիպերի ֆիլտրերը (Պրովայդեր/Կատեգորիա/Մեխանիկա)։
Պրովայդերների կատալոգը 'խաղերի քանակով լոգոյի ցանցը։ տեսահոլովակ 'պրովայդերի էջ (ներսում նաև խաղերի ցանց)։
Հաշվետվություններ/ֆինանսներ (B2B): Ցանկը/108 - NGR/GGR/FTD/CR, վերնագրերի ամրագրումը, էքսպորտը։
Գործարքների պատմությունը 'ցանկը' խիտ շարք, ստատուսներ, որոնում գումարով/ID/ամսաթվով։ մասերի համար տողի բացահայտումը։
Ակցիաներ/մրցույթներ 'բաների ցանցը ամսաթվերով և CTA-ով, «Հիմա/շուտով» տեսակավորումը։
12) Ճկուն անջատիչները և կերպարը
Թույլ տվեք օգտագործողին «Windows Seter» և հիշեք ընտրությունը (per user/tenae)։
Առաջարկեք մտածողության ճնշումներ '«Մարմնավոր», «Սովորաբար», «Մեծ»։
Համատեքստային տրամաբանություն 'առաջին անգամ' ցանցը լոբբիում; որոնումը ճշգրիտ համեմատության ցուցակ է։
13) Անտիպատերնի
Առանց կողմերի ֆիքսված հարաբերակցության ցանցը պարունակում է «լողացող» քարտեր և բարձր CLS։
Շատ սյուներով ցուցակը հորիզոնական ժայռն է առանց կարիքների։
Գործողության կոճակների կրկնօրինակումը ինչպես քարտի, այնպես էլ հովերի տարբեր վարքագծերով։
Տեսակավորման/ֆիլտրերի խառնուրդը յուրաքանչյուր բեռնման դեպքում (կոտրում է ֆոկուսը)։
Թաքնված ակտիվ ֆիլտրերը 'օգտագործողները «կորցնում են» արդյունքները։
14) Chek-Show-( Suchagovo)
1. Էկրանի հիմնական նպատակը 'տեսողական ընտրություն կամ ատրիբուտների համեմատություն։
2. Թույլ տվեք մոդել 'ցուցակ/ցանց/հիբրիդ; ներդաշնակ IA և տվյալների աղբյուրներին։
3. Նախագծեք տարրը 'տողը կամ քարտը հիմնական գոտիների ֆիքսված չափերով։
4. Տեսակավորում/ֆիլտրեր 'տեսանելի չիպեր, կայուն վերահսկում էր տեսակավորումը։
5. Բեռնումը/դատարկ/սխալ 'կմախքներ, հասկանալի տեքստեր և retry։
6. Պերֆորանսը ՝ lazy/virtualization, «entertent-visibility», p95-նպատակներ։
7. A1y: սեմանտիկա, ստեղնաշար, հակադրություն, tap-targets չափսեր։
8. Թելեմետրիա ՝ TTFA, qCTR, Zero-Resort, Latency p95։
9. A/B 'տեսակը լռելյայն, չափսերը, արագ գործողությունները։
10. Ընտրության հիշողությունը 'պահպանեք ներկայացման ռեժիմը և վերջին ֆիլտրերը։
15) Արդյունքը
Ցուցակները և ցանցերը տարբեր առաջադրանքների համար գործիքներ են։
Երբ կարևոր են ատրիբուտները և համեմատությունը, վերցրեք ցուցակը։
Երբ լուծում է տեսողությունը և արագ գործողությունները, վերցրեք ցանցը։
Հիմնական նպատակն է, տեղադրել չափսերն ու վարքը, պահել ինտերֆեյսը արագ և մատչելի, և օգտագործողները կհասնեն ավելի քիչ քայլերի, առանց կոգնիտիվ աղմուկի։