אפשר לקבל את הדוח Scroll Survey לשנת 2021, וגם מילים מצוות Chrome, שמסבירות איך השינוי הזה משפיע על סדרי העדיפויות ועל התוכניות לגבי Chromium והאינטרנט.
באפריל, צוות Chrome פרסם סקר בנושא גלילה ופעולה באמצעות מגע על סמך הבעיות המדווחות ביותר מדוח MDN Web DNA לשנת 2019. הדוח Scroll Survey לשנת 2021 מוכן, והצוות של Chrome רוצה לשתף איתך כמה רעיונות ופעולות לביצוע שאספנו מתוצאות הסקר. אנחנו מקווים שהתוצאות האלה יעזרו לספקי דפדפנים ולקבוצות תקנים להבין איך לשפר את הגלילה באינטרנט.
עיינו בדוח Scroll Survey לשנת 2021.
תוצאות מעניינות
בסקר נאספו 880 הגשות באופן אנונימי, ו-366 השיבו על כל השאלות.
תחילת העבודה בגלילה היא שורה אחת של CSS, כמו overflow-x:
scroll;, אבל שטח הפנים של האפשרויות וממשקי ה-API לגלילה הוא גדול, שכולל בין JavaScript ל-CSS. התוצאות הבאות עוזרות להדגיש את הבעיות שבהן מפתחי אתרים נתקלים.
שביעות רצון כוללת מגלילה באינטרנט
שאלה 27
45%
הם קצת או מאוד לא מרוצה באופן כללי
מגלילה באינטרנט.
השאלה הזו הוצבה לקראת סוף הסקר באופן מכוון, אחרי שאלות לגבי 26 תרחישים לדוגמה ותכונות של גלילה. מהתגובה ניתן לראות בבירור שקהילת האינטרנט נאבקת בגלילה. כמעט חצי מהמשתתפים מדווחים על רמה כללית של אי שביעות רצון.
אנחנו מאמינים שהתחושה הכללית לגבי עבודה עם גלילה לא אמורה להיות נמוכה כל כך. צריך לשנות את המדד הזה. זה סימן ברור שצריך לעשות זאת.
קשיים בעבודה עם גלילה
שאלה 2
43%
דווח קצת או
מאוד קשה
לעבוד עם הגלילה.
מהמחקר שלנו, הקשיים האלה נובעים ממגוון תרחישים לדוגמה של גלילה. כשאנחנו מדברים על גלילה, זה יכול לכלול: - מיקום אלמנטים בתוך אזורים שניתנים לגלילה - גלילה מתמשכת - אנימציה של גלילה עם קישור לגלילה - קרוסלות - מרווח פנימי של תצוגת גלילה - גלילה מחזורית - גלילה וירטואלית
תכונות דפדפן חסרות, JavaScript מורכב והצורך לתמוך במצבי קלט כולל מגע, מקלדת וגיימפאד, הופכים את כל הדברים האלה לקשה יותר.
החשיבות של אינטראקציות מגע
שאלה 3
51%
לדווח על אינטראקציות מגע בתור
מאוד או חשובות מאוד
לעבודה.
נתוני המשתמשים באינטרנט לנייד עדיין במגמת עלייה בנתונים הסטטיסטיים, כך שלא מפתיע לראות שחצי מהמשתתפים דיווחו שנגיעה חשובה מאוד לעבודה שלהם באינטרנט. הדבר סימן שתכונות אינטרנט כמו גלילה ב-CSS ו-touch-action מחייבות תשומת לב נוספת, כדי שהאינטרנט יוכל לספק אינטראקציה איכותית במגע.
קשיים בשימוש במקש Tab או בניווט באמצעות גיימפאד
שאלה 5א
44%
לדווח קצת או קשה מאוד
לבצע gamepad וניווט בכרטיסיות.
הגלילה כוללת שיטות ניווט כמו חיצי מקלדת, מקשי Tab, לחיצות על מקש הרווח ופקדי משחקים, ולפעמים קשה לכלול שיטות ניווט אלה כשמבצעים גלילה בהתאמה אישית. כמעט חצי מהמשתתפים דיווחו על כך שקצת או קשה מאוד לכלול את המידע הזה.
למידה של touch-action
שאלה 9
50%
לדווח על מצב למידה לגבי
'touch-action: מנוהל'
מהסקר.
חלק משאלות הסקר נשאלו על השימוש בממשקי API מסוימים עם תשובה אפשרית: 'כן', 'לא' או 'היום למדתי'. משוב חשוב אחד הוא מספר האנשים שדיווחו על מידע על touch-action מהסקר, כי זהו מאפיין קריטי כשיוצרים תנועות מגע בהתאמה אישית שצריכות לקיים אינטראקציה בתוך גלילה.
גלילה מחזורית
שאלה 27
58%
ידווחו לפעמים, לעיתים קרובות או בכל פרויקט
באמצעות גלילה מחזורית.
אחרי 60 שניות היא מתחילה שוב ב-0.
מדובר במספרים גבוהים עבור תכונת גלילה שפלטפורמת האינטרנט מספקת תמיכה מועטה, אם בכלל. בדרך כלל התכונה גורמת לעלויות גבוהות של חובות טכניים, וזאת על מנת לאלץ את ההשפעה הזו על כפילות או על ידי הוספת JavaScript. זו דרך פופולרית לקרוסלות מוצרים, וכשבוחרים את הזמן בשניות או בדקות כדי להציע גלילה מחזורית.
שהם חשובים לגלילה.
שאלה 2
55%
מאוד או
מאוד חשוב
16%
לדווח בכלל לא
או קצת חשוב
המשיבים התעניינו בחשיבות של אזורים שניתן לגלול, ולכן ציינו אות נוסף לגבי המאבקים שנדרשים כדי לספק גלילה באיכות גבוהה.
קרוסלות
שאלה 20
87%
השתמשו בקרוסלות.
24%
לדווח שהם
קלים לניהול.
כמעט כל המשתתפים מספקים קרוסלות בעבודות שלהם באינטרנט, אבל רק 25% קל לנהל אותן. הקרוסלות הרגילות היו פופולריות במהלך המחקר שלנו, אבל הנתון הסטטיסטיים הזה הפתיע אותנו, כי נראה שהוא לא נשמע כל כך פתור.
גלילה מתמשכת
שאלה 22
65%
משתמשים בו לפעמים
בכל פרויקט.
60%
קצת או
מאוד קשה.
שני שליש מהמשתמשים מספקים גלילה מתמשכת במסגרת עבודת האינטרנט שלהם, וקשה לעשות דוח בסכום שווה. דוגמה נוספת לשימוש גבוה בשילוב עם רמת קושי גבוהה, שמציינת לנו תחום שדורש טיפול.
אפשר לשלב את content-visibility עם contain-intrinsic-size כדי להפחית את עלויות העיבוד באזורים ארוכים שאפשר לגלול, אבל נראה שזה לא עוזר ב"טעינת עוד" בחוויית הגלילה האינסופית.
אנימציות שמקושרות לגלילה או שהופעלו בגלילה
שאלה 24
47%
משתמשים בו לפעמים
בכל פרויקט.
56%
לדווח קצת או
מאוד קשה
כמעט חצי מכל המשיבים משתמשים באנימציות מוכוונות גלילה וחצי מהמגיבים מתקשים לעשות זאת, ושוב הן מקשרות בין שימוש ברמה גבוהה לבין קושי.
מתחרים עם גלילה מובנית
שאלה 26
32%
תמיד או
רוב הזמן
50%
לפעמים
האינטראקציות המובנות בגלילה ובמגע שמבוצעות ביישומי הטלפון והטאבלט מוצגות בדרך כלל כמקום ברור שבו האינטרנט יכול להתעדכן. התכונות כוללות אנימציות שמקושרות לגלילה, ממשקים פרוגרמטיים, שילוב קולי, טיפים לגלילה וממשקי API מסוג 'משיכה לרענון'.
רק חצי מהמשתתפים הרגישו שרק לפעמים ניתן להתאים את חוויית הגלילה המובנית.
שביעות הרצון הכללית מיצירת אינטראקציות של גלילה באינטרנט
שאלה 27
מסקנות לסקר
תוצאות הסקר מחולקות לארבע קטגוריות: תאימות, חינוך, ממשקי API ותכונות.
תאימות
צוות Chrome הכריז על יעד להפחתת מספר בעיות התאימות לאינטרנט, כולל תאימות לגלילה.
שלוש בעיות התאימות הראשונות שיש להתמקד בהן:
1. תאימות לגלילה אופקית.
1. overscroll-behavior בדפדפנים שונים.
1. הסרת הקידומות מ--webkit-scrollbar וציות לתקן.
חינוך והשכלה
תוצאות הסקר הראו שצריך להרחיב את הידע בנושא touch-action ומאפיינים לוגיים. הדפדפן נמצא בחזית הפריסה הבינלאומית, ונראה שהוא לא מנוצל במלואו או לא מובן באופן שגוי.
תחומים שכדאי להתמקד בהם:
1. touch-action
1. מאפיינים לוגיים
ממשקי API
השימוש בתכונה 'הצמדה לגלילה' הולך וגדל, ומפתחים הגיבו לכך שהם רוצים להשתמש בתכונות בשיתוף פעולה עם ספריות ויישומי פלאגין פופולריים. צמצום הפער בין ספריות ה-CSS לספריות הפלאגין יעזור למפתח של הצמדת הגלילה ולחוויית המשתמש.
נתמקד בעבודה על ה-API ב-scroll-snap:
1. זמינות ותאימות של API בכל הדפדפנים.
1. מתחילים לעבוד על ממשקי API חדשים של CSS, כמו scroll-start.
1. מתחילים לעבוד על אירועי JS חדשים, כמו snapChanged().
פיצ'רים
תוצאות הסקר הראו שמשתמשים נאבקים בסוגים מסוימים של רכיבים שקשורים לגלילה באינטרנט, כי הפלטפורמה לא מספקת את הפרימיטיבים הנדרשים כדי לבנות אותם בלי יישומי פלאגין ובלי הרבה מאמץ. זהו תחום שאנחנו מקווים לחקור לעומק.
התכונות שהמפתחים מתקשים לפתח כוללות: 1. קרוסלות 1. גלילה וירטואלית 1. גלילה מתמשכת
משאבים
- דוח גלילה של סקר
- הודעה לסקר
- דוחות DNA של Mozilla
- Compat2021: ביטול של חמש הבעיות העיקריות בתאימות באינטרנט
תמונה ממוזערת: תמונה מאת טיילור וילקוקס ב-UnFlood.