სიები და ბადეები: UX შედარება

1) როდის არის სია, როდესაც ბადე (წესი 5 კითხვა)

1. მომხმარებლის მიზანი: სწრაფად შეადაროთ პარამეტრები (სია) ან შეარჩიოთ ვიზუალური/ყდა (ქსელი)?

2. მონაცემთა ფორმა: სტრუქტურული ველები (ფირფიტა/ტექსტი) - სია; ვიზუალური ობიექტები (ყდა, ფოტო) - ბადე.

3. vs ხედვის სიმკვრივე: თქვენ გჭირდებათ მაქსიმალური ელემენტები ეკრანზე (სია) ან ერთიანი ვიტრინა (ქსელი)?

4. ნაგულისხმევი მოქმედება: გახსნა/დეტალები (სია) ან მყისიერი „თამაში/ყიდვა“ ბარათიდან (ქსელი)?

5. მოწყობილობის კონტექსტი: მობილური პორტრეტი - ჩვეულებრივ, ბარათების მე -2 რიგის ბადე; მოხსენებები/ცხრილი დესკტოპზე - სია/ცხრილი.

მოკლედ: შედარება - სია; თვალების არჩევა - ბადე.

2) შინაარსის მოდელი და IA

სია (first): მთავარი სიგნალი - ტექსტი/ველი. შესაფერისია: ლოგოები, ოპერაციების ისტორიები, მოხსენებები, ატრიბუტის ძიების შედეგები.
ბადე (ბარათი-პირველი): მთავარი სიგნალი - ყდა/გადახედვა. შესაფერისია: თამაშები/საქონელი, მედია, კოლექციები.
ჰიბრიდი: „ადაპტირებული სტრიქონის ბარათები“ (მობილური - ბარათი, დესკტოპზე - სტრიქონი სვეტებით) იმავე მონაცემთა წყაროსთან.

3) ელემენტების დიზაინი: სტრიქონი

სტრიქონი (list row)

სტრუქტურა: იკონკა/მინიატურა (სურვილისამებრ), სათაური, 1-3 საკვანძო ველი, მეტა (თარიღი/სტატუსი), კონტექსტური მოქმედებები ().
სიძლიერე: კითხვა, მაღალი სიმკვრივე, სვეტების კარგი დალაგებული ნაკრები.
UX რჩევები: ჩაწერეთ სიმაღლე; გაათანაბრეთ ბადეზე; დამალეთ მეორეხარისხოვანი მინდვრები „გამჟღავნებაში“.

ბარათი

სტრუქტურა: გარეკანი, სათაური, ხელმოწერა/ეტიკეტი (ახალი/ჯეკპოტი), ერთი მთავარი CTA + დამატება „“....
ძლიერი მხარეები: ვიზუალური არჩევანი, სწრაფი მოქმედებები, ემოციური კონტექსტი.
UX რჩევა: შეინარჩუნეთ ასპექტი-რატიო (მაგ. 4: 3/1: 1), სათაურების იგივე სიმაღლეები, ტექსტის გაჭრა tooltip- დან.

4) ნავიგაცია, დახარისხება და ფილტრები

საერთო: ფილტრები და დახარისხება - ახლომდებარე და სტაბილური (ნახტომი გარეშე). აქტიური პირობებია შედეგების ჩიპები.
სია: მხარი დაუჭირეთ უამრავ სვეტს + სათაურების „გაყინვას“; დალაგება დაჭერით ქუდზე.
ქსელი: დაშლილი სიის დალაგება; ფილტრები - ჩიპები/პანელი. „ვიზუალური“ ძიებისთვის - გადახედვა hover/long-press.

5) მობილური vs desctop

• ბადე: 2-ჯერ (ტელეფონი), 3-ჯერ (ტაბლეტი). დიდი CTA თითის არეში.
• სია: კომპაქტური ხაზები (56-72dp), დახურული მეტა-ველები.

• ქსელი: 4-6 - რიგიანი 1200px, მანქანის ფილმი 'min' ბარათის სიგანეზე.
• სია: ცხრილი/სტრიქონები, სვეტების გადაკეთება, ცხრილის სწრაფი ძებნა.

6) მდგომარეობა და დატვირთვა

Skeletons: ჩონჩხის სტრიქონები (მინიმუმ 3-5), ჩონჩხის ბარათები დანამატებით გარეკანისთვის და ტექსტი.
ცარიელი: იმის ახსნა, თუ რატომ არის ცარიელი და შესთავაზეთ პრესეტები/ფილტრების ამოღება.
შეცდომები: შეინახეთ მომხმარებლის არჩევანი და პოზიცია; მიეცით retry.
დატვირთვა: „აჩვენეთ კიდევ“ (ჰიბრიდი) სასურველია გაუთავებელი ფირზე კატალოგებში; ლოგებისთვის - შეგიძლიათ შეავსოთ პაუზა.

7) პროდუქტიულობა

მიზნები: INP - 200 ms, CLS - 0.1, scroll-jank <1%.

სია: სტრიქონების ვირტუალიზაცია, ფიქსირებული სიმაღლეები, გადავადებული გამოთვლები.
ქსელი: ლაზის სურათები (AVIF/WebP), 'srcset/sizes', პროგნოზირებადი ზომები, 20-60 ბარათის „ნაწილები“.
ზოგადი: 'შინაარსის ხედვა: auto', გადახედვა, დატვირთვის პრიორიტეტები hero ელემენტებისთვის.

8) ხელმისაწვდომობა

სია: ცხრილი სწორი სემანტიკით ('table/thead/tbody', 'aria-sort'), ხაზები/უჯრედები.
ბადე: 'role = "grid" ან სია' role = "სია" "; შეკვეთა DOM = ვიზუალური; ხელმოწერები სურათებისთვის.
კლავიატურა: ისრები/Tab; Enter - გახსნა; სივრცე - „არჩეულ“ (სათანადო).
დაწკაპუნების ზომები: 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 (ბადეებისთვის), Latency p95.

10) A/B ექსპერიმენტები (რა უნდა ტესტირება)

ნაგულისხმევი ხედი (სია/ბადე) ახალი/დაბრუნებისთვის.
ეკრანზე ელემენტების რაოდენობა, ხაზის სიმაღლე, ბარათის ზომა.
ფილტრების/დახარისხების რიგი; ჩიპები გვერდითი პანელი.
სწრაფი მოქმედებები ბარათზე (ხატები/ტექსტი, ერთი 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. დატვირთვა/ცარიელი/შეცდომა: ჩონჩხი, გასაგები ტექსტები და რეტრი.
6. სპექტაკლი: lazy/virtualization, 'შინაარსის ხედვა', p95 სამიზნე.
7. A11y: სემანტიკა, კლავიატურა, კონტრასტი, tap targets- ის ზომები.
8. ტელემეტრია: TTFA, qCTR, Zero-Result, Latency p95.
9. A/B: ნაგულისხმევი ხედი, ზომები, სწრაფი მოქმედებები.
10. არჩევანის მეხსიერება: შეინარჩუნეთ წარმომადგენლობის რეჟიმი და ბოლო ფილტრები.

15) შედეგი

სიები და ბადეები - სხვადასხვა დავალებების ინსტრუმენტები.

როდესაც მნიშვნელოვანია ატრიბუტები და შედარება, მიიღეთ სია.
როდესაც ვიზუალური და სწრაფი მოქმედებები წყვეტს, აიღეთ ქსელი.
განსაზღვრეთ მიზანი, დააფიქსირეთ ზომა და ქცევა, შეინარჩუნეთ ინტერფეისი სწრაფი და ხელმისაწვდომი - და მომხმარებლები მიიღებენ შედეგს ნაკლები ნაბიჯებით, დამატებითი შემეცნებითი ხმაურის გარეშე.