גלילה וניהול תוכן

1) מדוע לחשוב על גלילה

• מאיץ את החיפוש אחר התוכן הנכון (פחות קליקים - יותר גלילה),
• נותן תחושה של שליטה (עוגנים, ”בחזרה למעלה”, מסננים מודבקים),
• חוסך משאבים (מגף עצלן, וירטואליזציה),
• מגדיל את ההמרה (תוכן שנראה קודם לכן, CTA ב ”אזור האגודל”).

עקרונות: מהירות> צפיפות; הקשר> רעש; חיזוי> ”קסם”.

2) דגמים מגולגלים: מתי לבחור מה

1. עבודת אלילים קלאסית

מתאים לתוצאות חיפוש, שולחנות, דיווח. מקצוענים: שליטה, כתובות יציבות, ניווט קל בעמוד. חסרונות: יותר קליקים, תשומת לב ”פערים”.

2. מגילה אינסופית

להזנות וקטלוגים בעלות נמוכה של שגיאות (חדשות, כרטיסי תוכן). אירוסין, פחות קליקים. חסרונות: ”רגל אבודה”, קשה לחזור, פונה קשה.

3. היברידי: הצג יותר/טען יותר

פשרה: וידג 'טים נטענים בחבורות לכל כפתור. מקצוענים: להפוך שליטה, זמינות של רגל, חיזוי. אסירים: עדיין לינאריים.

4. גלילה מקוטעת (קטעים/עוגנים)

למאמרים ארוכים, אזכורים וויקי. מפת מסמכים, קפיצות מהירות. חסרונות: סיבוך ניווט ושולחן של תוכן.

• קטלוגים/לובי - היברידי או אינסופי + ”לחזור להתחלה”.
• חיפוש/טבלאות - פאגינציה עם גודל עמוד ומסננים מהירים.
• תיעוד/Longrid - קטעים עם TOC וקריאת בר התקדמות.

3) ארכיטקטורת מידע ופריסה

כותרת עליונה (דביק): חיפוש, מסננים מהירים, מיון; אינו חופף תוכן כאשר הוא מופיע.
Sidebar (שולחן עבודה): טבלת התוכן (TOC), מסננים; על הנייד - עוזב גיליון.
אלמנטים דביקים: מסננים עליונים, תפריט עוגן, מחוון התקדמות קריאה, ”בחזרה למעלה”.
כרטיסי תוכן: גובה תצוגה מקדימה צפוי = = פחות קפיצות פריסה.
מצבים ריקים: שלדים/נצנצים, לא ”מסכים ריקים”.

4) התנהגות גלילה (מיקרו-מכניקה)

אינרציה ופיזיקה: גלילה חייבת להיראות ”מקומית”; לא לשבור דפוסי מערכת.
מנעול צירי: עבור אופקים (קרוסלות), נעל את הציר האנכי לאחר סף התנועה.
נקודות הצמדה: מתאים לקרוסלות, קלפים וצעדי אשף. אל תתעלל בקלטות ארוכות.
גלילה מעוגנת: שמור על מיקוד משתמש ומיקום יחסי בעת טעינה מחדש.
כבול מגילה: הגבל את ”זרימת” האירועים ממיכלים מקוננים כדי לא ”לקפוץ” לדף.

5) ניהול תשומת לב

STA צף/” Deposit ”/” Play”: באזור האגודל, אינו חופף לתוכן.
קריאת בר התקדמות: סרגל על גבי, מסונכרן עם עוגנים.
טבלת תוכן (TOC) - הנושא הנוכחי מודגש, קיצורי דרך, כפתור עליון.
עוגני כותרת: חשיש יציב בכתובת; מגולל עם פיצוי גובה כובע.
מסננים ”דביקים”: לתקן לאחר גלילה 1-2 מסכים.

6) טעינה ותרגום של קלטות גדולות

טעינה עצלה: תמונות, סרטונים, בלוקים. סף העומס הוא ~ 1-2 מסכים קדימה.
וירטואליזציה/רוח: צייר רק את השטח הנראה + חוצץ.
בעלי מקומות/שלדים: גדלים צפויים, ללא ”קפיצות”.
טעינה מחודשת: שלב 20-60 יסודות; איזון בין שאילתות לנותנים.
מטמון מחיצה: כאשר חוזר, להתאושש תנוחות וגושים טעונים.

7) ניהול תוכן בקלטת

קיבוצים: לפי תאריכים/קטגוריות; מקל כותרות מפריד.
מיני ומסננים: גלוי ונגיש, עם אינדיקציה לתנאים פעילים.
קריסה/התרחבות: לתיאורים ארוכים, הצג עוד.
מדיה בגלילה: וידאו להשהייה אוטומטית מחוץ לטווח ראייה; משחק אוטומטי רק בלי קול ועם שליטה מפורשת.
שגיאה מציינת: ”אובדן רשת”, ”כשל בטעינה” - עם מיקום חזרה ושמירה.

8) זמינות ומיקום

כל הפעולות זמינות ללא מחוות: ”הורד עוד”, ”להתחלה”, ”Open TOC”.
ניהול מיקוד: בעת ניווט עוגנים - העבירו מיקוד לכותרת הסעיף.
קוראי מסך: תיאורים לכפתורי גלילה/TOC, הזמנו לוגיקה.
ראי קרוסלות אופקיות ומחוונים.
תנועה מופחתת: בטל אנימציות ”מורכבות” ומקבילות לאלה המעדיפים אפקטים מפושטים.

9) ביצועים: מטרות ומטרידות

(INP (Interaction to Next Paint מחוות מפתח/גלילה: 200 ms.
גלילה-ג 'אנק: <1% פריימים> 16. 7 ms על מכשירים טיפוסיים.
CLS (שינוי פריסה מצטבר): 0. 1 (במיוחד בזמן הטעינה מחדש).
TBT/חסימה: הימנע ממחשוב סינכרוני כבד בזמן הגלילה.
זיכרון: שימוש יציב במהלך הפעלות ארוכות (ללא דליפות במהלך וירטואליזציה).

מנהגים: ‏

מאזיני גלילה פסיביים, דחיית חישוב באמצעות 'מסגרת אנימציה ';

צללי ”אור ”/אין טשטוש מורכב תוך גלילה;

גודל כרטיס קבוע או צפוי

חיסכון בשרטוט מחודש (עדכונים מחוברים).

10) טלמטריה ואירועים

• 'גלילה _ התחלה '/' מגילה _ end' (מקור, מהירות, כיוון),
• 'content _ load _ request/success/fails' (ערימה, גודל),
• 'vefort _ item _ חשוף' (זיהוי, זמן ראות),
• 'toc _ click', 'עוגן _ navit', 'back _ to _ top _ click',
• 'רשימה _ שחזור' (מיקום, שחזור זמן).

• עומק הגיע (כמה אקרפים/יסודות נצפו),
• זמן חשיפה לפריט (ממוצע/חציוני),
• קצב שגיאות טעינה, קצב חזרה,
• גלילה נטישה (החוצה לפני המנה הבאה נטען),
• חזרה למיקום הצלחה.

11) דפוסים לסוגי תוכן שונים

קטלוגים של משחקים/מוצרים: סרט היברידי, פילטרים דביקים, וירטואליזציה, כפתור ”הצג עוד”.
Longrides/wiki: TOC, progress bar, עוגנים, ”העתק קישור למדור”.
להאכיל חדשות אינסופיות עם תאריכי הפרדה, ”לחזור לאחרון”.
טבלאות/רשתות: pagination + ”show by N”, קיפאון כותרות ועמודות מפתח, גלילה אופקית לפי הצורך.
הזנות חיות/זרמי יומן: גלילה אוטומטית עם ”הפסקה/התעדכנות”, גבול חוצץ.

12) תכונות ניידות

אזורי אצבע: CTA ו ”להתחלה” - מלמטה; פילטרים בגיליון היוצא.
”משיכה” רגל: להראות רק כאשר הפסיק; אל תפריע לגלילה.
מחוות: קרוסלות אופקיות - עם מנעול צירי; למשוך לרענן - רק איפה שציפינו.
שייק: 60 FPS לבדוק רשימות ”כבדות”; להפחית את צפיפות ההשפעות.

13) תרופות אנטי ־ פטריות

”קלטת אינסופית + רגל חבויה ללא יציאה” (ללא קישורים/קשרים/כללים).
עומס נוסף שמשנה את הקריאה - אובדן ההקשר.
לוחות צפים חופפים טקסט ו CTA.
גובה בלתי מוגבל של קלפים = ”נודד” סידור משמרות.
נתיחה אוטומטית מדיה עם קול כאשר נראה.
אין התאוששות מיקום כאשר ”בחזרה”.

14) רשימת מימושים (על ידי ספרינטים)

ספרינט 1: בחירת דגמים (pagination/hybrid/infinite), מכלי גלילה בסיסיים, כובע/פילטרים דביקים, ”בחזרה למעלה”.
ספרינט 2: טעינה עצלה של תמונות/בלוקים, שלדים, גדלי קלפים צפויים.
ספרינט 3: לרשום וירטואליזציה, לשמור מיקום ומטמון התפרצות, עוגנים/TOC.
ספרינט 4: מגילה וחשיפה לטלמטריה, והתראות גלילה-ג 'נק.
ספרינט 5: נגישות (פוקוס/קוראים), RTL, תנועה מופחתת, ניווט מקלדת (שולחן עבודה).
Sprint 6: Optimization Fine: Axial Lock, Snap Points, UX Media Enhancement in Tape.

15) גלוסרי

מגילה אינסופית - טעינה אינסופית של יסודות.
החלקה/וירטואליזציה - להפוך רק פריטי רשימה גלויים.
גלילה מעוגנת - שמירה על המיקום היחסי במהלך טעינה מחדש.
גלילה-ג 'אנק - ”אידיוט” בשל דילוג מסגרות בעת גלילה.
TOC (שולחן התוכן) - תוכן עם עוגנים.
CLS/INP - מדדים של יציבות פריסה ותגובה.

16) השורה התחתונה

1. בוחר את מודל הזרימה המתאים (pagination/hybrid/infinite),

2. נותן שליטה (עוגנים, TOC, מסננים דביקים, ”להתחלה”),

3. מתהפך מהר ויציב (טעינה עצלנית, וירטואליזציה, ללא משמרות),

4. נשאר נגיש וצפוי,

5. מודד טלמטריה ומשפר UX בהתבסס על נתונים.