באפריל, צוות Chrome פרסם סקר בנושא גלילה ופעולות מגע על סמך הבעיות העיקריות שדווחו בדוח MDN Web DNA לשנת 2019. הדוח של סקר הגלילה לשנת 2021 מוכן, והצוות של Chrome רוצה לשתף כמה תובנות ופריטי פעולה שגילינו מתוצאות הסקר. אנחנו מקווים שהתוצאות האלה יעזרו לספקי דפדפנים ולקבוצות סטנדרטים להבין איך לשפר את הגלילה באינטרנט.
לצפייה בדוח של סקר הגלילה משנת 2021.
תוצאות מעניינות
בסקר נאספו 880 תשובות אנונימיות, ו-366 מהמשיבים ענו על כל השאלות.
הגדרת גלילה היא שורת CSS אחת, כמו overflow-x:
scroll;, אבל יש הרבה אפשרויות ו-API לגלילה, מ-JavaScript ועד CSS. התוצאות הבאות עוזרות להדגיש את הבעיות שמפתחי אתרים נתקלים בהן.
שביעות רצון כללית מגלילה באינטרנט
שאלה 27
45%
לא כל כך מרוצים או בכלל לא מרוצים
מגלילה באינטרנט.
השאלה הזו הוצבה בכוונה לקראת סוף הסקר, אחרי שאלות על 26 תרחישי שימוש ותכונות של גלילה. מהתשובה ברור שקהילת האינטרנט מתקשה עם גלילה. כמעט מחצית מהמשיבים דיווחו על רמת חוסר שביעות רצון כללית.
אנחנו מאמינים שהסנטימנט הכללי לגבי עבודה עם גלילה לא צריך להיות כל כך נמוך. צריך לשנות את המדד הזה. הוא מצביע בבירור על כך שיש עבודה לעשות.
בעיות בשימוש בגלילה
שאלה 2
43%
דיווחו שקשה במידה מסוימת או
קשה מאוד לעבוד עם גלילה
.
מהמחקר שלנו עולה שהקשיים האלה נובעים ממספר רב של תרחישי שימוש בגלילה. כשמדובר בגלילה, זה יכול לכלול:
- מיקום רכיבים באזורים שאפשר לגלול בהם
- גלילה מתמשכת
- אנימציה שקשורה לגלילה
- קרוסלות
- Scrollview padding
- גלילה מחזורית
- גלילה וירטואלית
היעדר תכונות בדפדפן, JavaScript מורכב והצורך לתמוך במצבי קלט שונים, כולל מגע, מקלדת וגיימפדים, מקשים על כל הפעולות האלה.
החשיבות של אינטראקציות מגע
שאלה 3
51%
לדווח על אינטראקציות עם מסך מגע כ
חשובות מאוד או חשובות במיוחד
לעבודה שלהם.
מספר המשתמשים באינטרנט לנייד ממשיך לעלות בנתוני הביקורים, ולכן לא מפתיע שחצי מהמשיבים דיווחו שממש חשוב להם להשתמש במגע בעבודה באינטרנט. האות הזה מצביע על כך שתכונות אינטרנט כמו CSS scroll snap ו-touch-action דורשות תשומת לב מיוחדת כדי שהאינטרנט יוכל לספק אינטראקציה איכותית עם מסך המגע.
קושי בניווט באמצעות מקש Tab או ג'ויסטיק
שאלה 5א
44%
מדווחים על קושי מסוים או על קושי רב
בשימוש בגיימפד ובניווט באמצעות מקש Tab.
גלילה כוללת שיטות ניווט כמו חיצי המקלדת, מקשי Tab, לחיצות על מקש הרווח וג'ויסטיקים, ויכול להיות שיהיה קשה לכלול אותן כשמבצעים גלילה בהתאמה אישית. כמעט מחצית מהמשיבים דיווחו שקשה במידה מסוימת או קשה מאוד לכלול את הקלט הזה.
למידה touch-action
שאלה 9
50%
דוח learning על
`touch-action: manipulation`
מהסקר.
חלק מהשאלות בסקר היו לגבי שימוש בממשקי API מסוימים, והתשובות האפשריות היו 'כן', 'לא' או 'למדתי היום'. אחד מהמשובים הבולטים שקיבלנו היה לגבי מספר האנשים שדיווחו שלמדו על touch-action מהסקר, כי זהו מאפיין חשוב כשיוצרים מחוות מגע בהתאמה אישית שצריכות ליצור אינטראקציה בתוך גלילה.
גלילה מחזורית
שאלה 27
58%
בדוח sometimes, often או every project
באמצעות cyclical scrolling.
אחרי 60 שניות מתחילים מ-0 שוב.
המספרים האלה גבוהים לתכונת גלילה עם תמיכה מועטה או ללא תמיכה בכלל מצד פלטפורמת האינטרנט. לכן, השימוש בתכונה הזו גורר לעיתים קרובות חוב טכני גבוה, עם כפילויות או קוד JavaScript שמוזרק כדי ליצור את האפקט. הוא פופולרי לשימוש בקרוסלות של מוצרים, וכשבוחרים זמן בשניות או בדקות כדי להציע גלילה מחזורית.
האם אזורים שניתנים לגלילה חשובים
שאלה 2
55%
very או
extremely important
16%
דיווח לא חשוב בכלל
או חשוב במידה מועטה
המשיבים הדגישו את החשיבות של אזורים שאפשר לגלול בהם, וזה עוד אות שמצביע על הקשיים שנדרשים כדי לספק גלילה באיכות גבוהה.
קרוסלות
שאלה 20
87%
השתמשו בקרוסלות.
24%
הם
קלים לניהול.
כמעט כל המשיבים משתמשים בקרוסלות בעבודות שלהם באינטרנט, אבל רק 25% מהם חושבים שקל יותר לנהל אותן. קרוסלות מוכנות מראש היו פופולריות במהלך המחקר שלנו, אבל הנתון הזה הפתיע אותנו, כי נראה שהבעיה לא נפתרה.
גלילה מתמשכת
שאלה 22
65%
להשתמש בו לפעמים
בכל פרויקט
60%
די קשה או
קשה במיוחד.
שני שלישים מהמשיבים משתמשים בגלילה אינסופית בעבודתם באינטרנט, ומספר זהה של משיבים דיווחו שקשה להם לעשות זאת. זהו עוד דוגמה לשימוש נרחב שמשולב עם רמת קושי גבוהה, מה שמצביע על תחום שצריך לשים לב אליו.
אפשר לשלב בין content-visibility לבין contain-intrinsic-size כדי לצמצם את עלויות העיבוד של אזורים ארוכים שאפשר לגלול בהם, אבל נראה שהשילוב הזה לא עוזר עם חוויית המשתמש של גלילה אינסופית עם האפשרות 'טעינת עוד'.
אנימציות שמקושרות לגלילה או מופעלות על ידי גלילה
שאלה 24
47%
להשתמש בו לפעמים
בכל פרויקט
56%
לדווח על קושי מסוים או על
קושי רב
כמעט מחצית מהמשיבים משתמשים באנימציות שמופעלות בגלילה, ומחצית מהמשיבים מתקשים בכך. שוב רואים קשר בין שימוש רב לבין קושי.
תחרות עם גלילה מובנית
שאלה 26
32%
always או
most of the time
50%
לפעמים
האינטראקציות המובנות של גלילה ומגע באפליקציות לטלפונים ולטאבלטים מוצגות לעיתים קרובות כמקום ברור שבו האינטרנט יכול להתעדכן. התכונות כוללות אנימציות שמקושרות לגלילה, ממשקים פרוגרמטיים, שילוב של קול, רמזים לגלילה וממשקי API של משיכה לרענון.
רק מחצית מהמשיבים הרגישו שאפשר לשחזר את חוויית הגלילה המובנית רק לפעמים.
מידת שביעות הרצון הכוללת מהיכולת ליצור אינטראקציות גלילה באינטרנט
שאלה 27
מסקנות מהסקר
תוצאות הסקר מחולקות לארבע קטגוריות: תאימות, הדרכה, ממשקי API, ותכונות.
תאימות
צוות Chrome הציב לעצמו מטרה לצמצם את מספר בעיות התאימות לאינטרנט, כולל תאימות לגלילה.
שלוש בעיות התאימות הראשונות שצריך להתמקד בהן:
1. תאימות לגלילה אופקית.
1. overscroll-behavior בדפדפנים שונים.
1. הסרת הקידומות מ--webkit-scrollbar ושימוש בתקן.
חינוך
תוצאות הסקר הראו שיש צורך בהסברה נוספת לגבי touch-action ומאפיינים לוגיים. הדפדפן נמצא בחזית של פריסות בינלאומיות, וברור שהוא לא מנוצל מספיק או לא מובן.
תחומים שכדאי להתמקד בהם:
1. touch-action
1. מאפיינים לוגיים
ממשקי API
השימוש בגלילה עם נקודות עצירה (scroll snapping) גדל, ומפתחים הגיבו שהם רוצים להשתמש בתכונות באופן אינטראופרבילי עם ספריות ותוספים פופולריים. צמצום הפער הזה בין CSS לספריות של תוספים יעזור לשפר את שביעות הרצון של המפתחים ואת חוויית המשתמש של התכונה 'הצמדה לגלילה'.
נתמקד בעבודה עם API ב-scroll-snap:
1. זמינות ותאימות של API בדפדפנים שונים.
1. מתחילים לעבוד עם ממשקי API חדשים של CSS כמו scroll-start.
1. מתחילים לעבוד על אירועי JS חדשים כמו snapChanged().
תכונות
תוצאות הסקר הראו שלמשתמשים יש קושי עם סוגים מסוימים של רכיבים שקשורים לגלילה באינטרנט, כי הפלטפורמה לא מספקת את הפרימיטיבים שהם צריכים כדי לבנות אותם בלי תוספים או בלי להשקיע מאמץ רב. אנחנו מקווים להעמיק את המחקר בתחום הזה.
התכונות שמפתחים מתקשים ליצור כוללות: 1. קרוסלות 1. גלילה וירטואלית 1. גלילה מתמשכת