דוח סקר גלילה לשנת 2021

בדוח הסקר של Scroll לשנת 2021 מוסבר איך זה משפיע על סדרי העדיפויות והתוכניות של Chromium ושל האינטרנט.

Adam Argyle
Sam Dutton

באפריל, צוות Chrome פרסם סקר בנושא גלילה ופעולות מגע על סמך הבעיות העיקריות שדווחו בדוח MDN Web DNA לשנת 2019. הדוח של סקר הגלילה לשנת 2021 מוכן, והצוות של Chrome רוצה לשתף כמה תובנות ופעולות שגיבשנו בעקבות תוצאות הסקר. אנחנו מקווים שהתוצאות האלה יעזרו לספקי דפדפנים ולקבוצות סטנדרטים להבין איך לשפר את הגלילה באינטרנט.

לצפייה בדוח של סקר הגלילה משנת 2021.

תוצאות מעניינות

בסקר נאספו 880 תשובות אנונימיות, ו-366 מהמשיבים ענו על כל השאלות.

כדי להתחיל להשתמש בגלילה צריך להוסיף שורה אחת של CSS, כמו overflow-x: scroll;, אבל יש הרבה אפשרויות לשימוש בממשקי API של גלילה, מ-JavaScript ועד CSS. התוצאות הבאות עוזרות להדגיש את הבעיות שמפתחי אתרים נתקלים בהן.

שביעות רצון כללית מגלילה באינטרנט

שאלה 27

‫45%

לא כל כך מרוצים או בכלל לא מרוצים
מגלילה באינטרנט.

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

אנחנו מאמינים שהסנטימנט הכללי לגבי עבודה עם גלילה לא צריך להיות כל כך נמוך. צריך לשנות את המדד הזה. הוא מצביע בבירור על כך שיש עבודה לעשות.

בעיות בשימוש בגלילה

שאלה 2

‫43%

דיווחו שקשה במידה מסוימת או
קשה מאוד לעבוד עם גלילה
.

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

היעדר תכונות בדפדפן, 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

תרשים עוגה עם 5 חלקים: 6.3% מאוד לא מרוצים, 2.7% מאוד מרוצים, 23.4% מרוצים במידה מסוימת, 28.8% אין להם דעה לכאן או לכאן, 38.7% לא כל כך מרוצים.

מסקנות מהסקר

תוצאות הסקר מחולקות לארבע קטגוריות: תאימות, הדרכה, ממשקי 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. גלילה מתמשכת

משאבים

תמונה ממוזערת: צילום של Taylor Wilcox ב-Unsplash.