შინაარსის გადახრა და კონტროლი

1) რატომ უნდა იფიქროთ საყიდლებზე?

• აჩქარებს სასურველი შინაარსის ძებნას (ნაკლები დაწკაპუნება - მეტი დარტყმა),
• იძლევა კონტროლის შეგრძნებას (წამყვანები, „თავიდან დაბრუნება“, ფილტრების დაჭერა),
• დაზოგავს რესურსებს (ზარმაცი დატვირთვა, ვირტუალიზაცია),
• ზრდის კონვერსიას (შინაარსი ადრე ჩანს, CTA - „თითის ზონაში“).

პრინციპები: სიჩქარე> სიმკვრივე; კონტექსტი> ხმაური; პროგნოზირება> „მაგია“.

2) გადახურვის მოდელები: როდის უნდა აირჩიოთ რა

1. კლასიკური პაგინაცია

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

2. გაუთავებელი ლენტი (infinite scroll)

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

3. ჰიბრიდი: „კიდევ აჩვენეთ „/„ ატვირთეთ მეტი “

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

4. სეგმენტირებული გადახრა (სექციები/წამყვანები)

გრძელი სტატიების, სერთიფიკატების და ვიკისთვის. დადებითი: დოკუმენტის რუკა, სწრაფი ნახტომი. უარყოფითი მხარეები: ნავიგაციისა და შინაარსის გართულება.

• კატალოგები/ლობი - ჰიბრიდი ან გაუთავებელი + „თავიდან დაბრუნება“.
• ძებნა/ცხრილი - პაგინაცია გვერდის ზომით და სწრაფი ფილტრებით.
• დოკუმენტაცია/ლონგრიდი - სეგმენტები TOC- ით და კითხვის პროგრესული ბარი.

3) ინფორმაციის არქიტექტურა და განლაგება

ზედა ქუდი: ძებნა, სწრაფი ფილტრები, დახარისხება; არ გადაფარავს შინაარსს გამოჩენის დროს.
გვერდითი პანელი (desktop): დაფიქსირება (TOC), ფილტრები; mobile - გამავალი sheet.
Sticky ელემენტები: ზედა ფილტრები, წამყვანების მენიუ, კითხვის პროგრესი, „უკან ტოპ“.
შინაარსის ბარათები: პროგნოზირებადი სიმაღლე აღემატება ნაკლები განლაგების ნახტომი.
ცარიელი სახელმწიფოები: ჩონჩხი/შიმერები და არა „ცარიელი ეკრანები“.

4) ქცევა (მიკრომექანიკა)

ინერცია და ფიზიკა: გადახრა უნდა ჩანდეს „მშობლიური“; არ დაარღვიოთ სისტემური შაბლონები.
ღერძული ლოკი: ჰორიზონტზე (კარუსელი) გადაკეტეთ ვერტიკალური ღერძი მოძრაობის ზღურბლიდან.
Snap წერტილები: შესაფერისია კარუსელებისთვის, ბარათებისთვის და სამაგისტრო ნაბიჯებისთვის. ნუ ბოროტად გამოიყენებთ გრძელი ფირებზე.
Anchored scrolling: გადმოტვირთვის დროს შეინარჩუნეთ მომხმარებლის ყურადღება და შედარებით პოზიცია.
Scroll-chaining: შეზღუდეთ მოვლენების „მიმდინარეობა“ ინვესტირებული კონტეინერებიდან, ისე რომ არ „გადახტომა“ გვერდზე.

5) ყურადღების მენეჯმენტი

მცურავი STA/„ დეპოზიტი “/“ თამაში “: თითის ზონაში, არ ბლოკავს შინაარსს.
კითხვის პროგრესი ბარი: ზემოდან ხაზი, სინქრონიზებულია წამყვანებთან.
ჩანართი (TOC): მიმდინარე განყოფილება განათებულია, სწრაფი ბმულები, ღილაკი „ზემოთ“.
სათაურების წამყვანები: სტაბილური ჰეშები URL- ში; კრეკი ქუდის სიმაღლის ანაზღაურებით.
კონტექსტური „წებოვანი“ ფილტრები: დაფიქსირება 1-2 ეკრანის გადახდის შემდეგ.

6) დიდი ფირების დატვირთვა და გაანგარიშება

ზარმაცი დატვირთვა: სურათები, ვიდეო, ბლოკები. დატვირთვის ბარიერი - ეკრანის ~ 1-2 წინ.
ვირტუალიზაცია/ფანჯრის გამყიდველი: დახატეთ მხოლოდ ხილული მხარე + ბუფერი.
პლეიშოლდერები/ჩონჩხი: პროგნოზირებადი ზომები, „ნახტომი“ გარეშე.
პარტიების დატვირთვა: 20-60 ელემენტის ნაბიჯი; ბალანსი მოთხოვნებსა და გამყიდველებს შორის.
სექციების ქეში: უკან დაბრუნებისას აღადგინეთ პოზიციები და დატვირთული მონეტები.

7) შინაარსის კონტროლი ფირზე

ჯგუფი: თარიღები/კატეგორიები; გამყოფი სათაურები იჭრება.
დახარისხება და ფილტრები: ჩანს და ხელმისაწვდომია აქტიური პირობების მითითებით.
გამორთეთ/განლაგება: გრძელი აღწერილობებისთვის - „აჩვენეთ მეტი“.
მედია სკრიპტში: ვიდეო ავტომატური პაუზა ხილული რეგიონის გარეთ; მანქანის პლეი მხოლოდ ხმის გარეშე და აშკარა კონტროლით.
შეცდომების მდგომარეობა: „ქსელის დაკარგვა“, „ვერ იტვირთება“ - retry- დან და პოზიციის შენარჩუნებით.

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

ყველა მოქმედება ხელმისაწვდომია ჟესტების გარეშე: ღილაკი „ჩამოტვირთვა კიდევ“, „დასაწყისისთვის“, „გახსნა TOC“.
ფოკუსის მენეჯმენტი: წამყვანზე ნავიგაციის დროს - ფოკუსის გადაცემა განყოფილების სათაურზე.
ეკრანის მკითხველები: აღწერილობები მოძრავი ღილაკებისთვის/TOS, წესრიგის ლოგიკა.
RTL: ჰორიზონტალური კარუსელები და ინდიკატორები.
Reduced motion: გამორთეთ „რთული“ ანიმაციები და პარალელები გამარტივებული ეფექტებისთვის.

9) შესრულება: მიზნები და მეტრიკა

ძირითადი ჟესტების/სკრიპტის INP (ინტერაქტია შემდეგი პაინისთვის): 200 ms ევრო.
Scroll-jank (ჩარჩოების გამოტოვება): <1% ჩარჩო> 16.7 ms სტანდარტული მოწყობილობებზე.
CLS (კუმულაციური განლაგების ცვლა): 0,1 ევრო (განსაკუთრებით დატვირთვის დროს).
TBT/Blocking: თავიდან აიცილეთ მძიმე სინქრონიზებული გამოთვლები.
მეხსიერება: სტაბილური გამოყენება გრძელი სესიებში (ვირტუალიზაციის დროს არ არის გაჟონვა).

• პასიური დამწერლობის მსმენელები, გადადებული გამოთვლები 'requestAnimationFrame' - ით;
• „მსუბუქი“ ჩრდილები/რთული ბლურის გარეშე გადახვევის დროს;
• ბარათების ფიქსირებული ან პროგნოზირებადი ზომა;
• გადაკეთების დაზოგვა.

10) ტელემეტრია და მოვლენები

• 'scroll _ start '/' scroll _ end' (წყარო, სიჩქარე, მიმართულება),
• 'შინაარსი _ load _ request/success/fail' (პაკეტი, ზომა),
• 'viewport _ item _ exposed' (id, ხილვადობის დრო),
• `toc_click`, `anchor_navigate`, `back_to_top_click`,
• 'list _ restore' (პოზიცია, აღდგენის დრო).

• Depth Reached (რამდენი ეკრანი/ელემენტი ხედავს),
• Exposure Time per Item (საშუალო/საშუალო),
• Load Error Rate, Retry Rate,
• Scroll Abandonment (გამოვიდა შემდეგი ნაწილის გადმოტვირთვამდე),
• Return-to-Position Success.

11) ნიმუშები სხვადასხვა ტიპის შინაარსისთვის

თამაშების/საქონლის კატალოგები: ჰიბრიდული ლენტი, სტილის ფილტრები, ვირტუალიზაცია, ღილაკი „აჩვენე მეტი“.
Longrids/wiki: TOC, პროგრესული ბარი, წამყვანები, „დააკოპირეთ ბმული განყოფილებაში“.
ახალი ამბების ფიდები: გაუთავებელი ფირზე გამყოფი თარიღებით, „დაუბრუნდით ამ უკანასკნელს“.
ცხრილი/მაკიაჟი: პაგინაცია + „აჩვენეთ N“, სათაურების გაყინვა და საკვანძო სვეტები, საჭიროების შემთხვევაში ჰორიზონტალური გადახრა.
Live ფირები/ლოგის ნაკადები: autoskroll „პაუზა/დაჭერა“, ბუფერული ლიმიტი.

12) მობილური მახასიათებლები

თითის ზონები: CTA და „დასაწყისისთვის“ - ქვემოდან; ფილტრები - გამავალი sheet.
„გაჭიმვა“ ფეხი: აჩვენეთ მხოლოდ გაჩერების დროს; არ შეუშალოთ სკროლას.
ჟესტები: ჰორიზონტალური კარუსელი - ღერძული ლოკით; pull to refresh - მხოლოდ იქ, სადაც მოსალოდნელია.
გლუვი: 60 FPS შემოწმება „მძიმე“ სიებზე; შეამცირეთ ეფექტების სიმკვრივე.

13) ანტიპატერები

„გაუთავებელი ლენტი + ფარული ფეხი გასვლის გარეშე“ (არ არსებობს ბმულები/კონტაქტები/წესები).
გადატვირთვა, რომელიც ცვლის წაკითხულს, კონტექსტის დაკარგვაა.
მცურავი პანელები, რომლებიც გადახურავს ტექსტს და CTA.
ბარათების შეუზღუდავი სიმაღლეა „მოხეტიალე“ layout-shift.
ხილვადობის სფეროში ხილვისას ხმის მქონე მედიის პოპულარიზაცია.
„უკან“ პოზიციის აღდგენის არარსებობა.

14) განხორციელების სიის სია (სპრინტებზე)

Sprint 1: მოდელის არჩევანი (პაგინაცია/ჰიბრიდი/გაუთავებელი), ძირითადი ასვლის კონტეინერები, sticky ქუდი/ფილტრები, „უკან ტოპ“.
სპრინტი 2: სურათების/ბლოკების ზარმაცი დატვირთვა, ჩონჩხი, ბარათის პროგნოზირებადი ზომა.
სპრინტი 3: სიების ვირტუალიზაცია, პოზიციის შენარჩუნება და პაკეტების ქეში, წამყვანი/TOS.
Sprint 4: telemetria telemetria of scroll-jank.
სპრინტი 5: წვდომა (ფოკუსი/მკითხველი), RTL, რეგულირებული მოძრაობა, კლავიატურის ნავიგაცია (desktop).
სპრინტი 6: თხელი ოპტიმიზაცია: ღერძული ლოკი, snap წერტილები, UX მედიის გაუმჯობესება ფირზე.

15) გლოსარიუმი

Infinite Scroll არის ელემენტების გაუთავებელი დატვირთვა.
Windowing/Virtualization - სიის მხოლოდ თვალსაჩინო ელემენტების გამყიდველი.
Anchored Scrolling - შედარებით პოზიციის შენარჩუნება დატვირთვის დროს.
Scroll-jank - „ნაგავი“ დაქირავების დროს პერსონალის გამოტოვების გამო.
TOC (შინაარსის ჩარჩო) - წამყვანი.
CLS/INP - განლაგებისა და რეაგირების სტაბილურობის მეტრიკა.

16) შედეგი

1. შეარჩიეთ შესაფერისი ნაკადის მოდელი (პაგინაცია/ჰიბრიდი/გაუთავებელი),

2. უზრუნველყოფს კონტროლს (წამყვანები, TOC, sticky ფილტრები, „დასაწყისისთვის“),

3. რენდერიტი სწრაფად და სტაბილურად (ზარმაცი დატვირთვა, ვირტუალიზაცია, ცვლის გარეშე),

4. რჩება ხელმისაწვდომი და პროგნოზირებადი,

5. იზომება ტელემეტრია და აუმჯობესებს UX- ს მონაცემების საფუძველზე.