في أبريل، أطلق فريق Chrome استطلاعًا حول التمرير والتفاعل باللمس استنادًا إلى أهم المشاكل التي تم الإبلاغ عنها في تقرير MDN Web DNA لعام 2019. أصبح تقرير استطلاع 2021 بشأن التمرير السريع جاهزًا، ويودّ فريق Chrome مشاركة بعض الأفكار والإجراءات التي استخلصناها من نتائج الاستطلاع. نأمل أن تساعد هذه النتائج مورّدي المتصفحات ومجموعات المعايير في فهم كيفية تحسين التمرير على الويب.
عرض تقرير استطلاع التمرير السريع لعام 2021
النتائج الجديرة بالاهتمام
جمع الاستطلاع 880 ردًا بشكل مجهول الهوية، وأجاب 366 مشاركًا عن كل سؤال.
على الرغم من أنّ بدء استخدام التمرير لا يتطلّب سوى سطر واحد من CSS، مثل overflow-x:
scroll;، فإنّ مساحة سطح واجهات برمجة التطبيقات وخيارات التمرير كبيرة، وتتراوح بين JavaScript وCSS. تساعد النتائج التالية في إبراز المشاكل التي يواجهها مطوّرو الويب.
مستوى الرضا العام عن ميزة "التمرير على الويب"
السؤال 27
45%
غير راضين نوعًا ما أو غير راضين على الإطلاق
عن التمرير على الويب.
تم طرح هذا السؤال بالقرب من نهاية الاستطلاع عمدًا، بعد الأسئلة المتعلقة بـ 26 حالة استخدام وميزة للتمرير. من الردود، يتضح أنّ منتدى الويب يواجه مشاكل في التمرير. أفاد ما يقرب من نصف المشاركين في الاستطلاع بأنّهم غير راضين بشكل عام.
نعتقد أنّ مستوى الرضا العام عن العمل مع Scroll يجب ألا يكون منخفضًا إلى هذا الحد. يجب تغيير هذا المقياس، فهو يشير بوضوح إلى ضرورة إجراء تحسينات.
صعوبة استخدام التمرير
السؤال 2
43%
أفادوا بأنّ التنقّل باستخدام التمرير صعب أو
صعب للغاية
.
تشير أبحاثنا إلى أنّ هذه الصعوبات ناتجة عن تعدد حالات استخدام التمرير. عندما نتحدث عن التمرير، قد يشمل ذلك ما يلي:
- تحديد موضع العناصر داخل المساحات القابلة للتمرير
- التمرير اللا نهائي
- التمرير المرتبط بالصورة المتحركة
- لوحات العرض الدوّارة
- هامش المساحة القابلة للتمرير
- التمرير الدوري
- التمرير الافتراضي
تتسبّب الميزات غير المتوفّرة في المتصفّح وJavaScript المعقّد والحاجة إلى توفير أوضاع إدخال، مثل اللمس ولوحة المفاتيح وأذرع التحكّم، في صعوبة تنفيذ كل هذه الإجراءات.
أهمية التفاعلات باللمس
السؤال 3
51%
يصنّف تفاعلات اللمس على أنّها
مهمة جدًا أو مهمة للغاية
بالنسبة إلى عملهم.
مع استمرار ارتفاع عدد مستخدمي الويب على الأجهزة الجوّالة في إحصاءات الزيارات، لم يكن من المفاجئ أن يذكر نصف المشاركين في الاستطلاع أنّ اللمس مهم جدًا بالنسبة إلى عملهم على الويب. أشارت هذه المشاكل إلى أنّ ميزات الويب، مثل ميزة "المحاذاة عند التمرير" في CSS وtouch-action، تحتاج إلى مزيد من الاهتمام حتى يتمكّن الويب من توفير تفاعل عالي الجودة مع الشاشة.
صعوبة التنقّل باستخدام مفتاح التبويب أو لوحة الألعاب
السؤال 5 (أ)
44%
الإبلاغ عن أنّ استخدام لوحة الألعاب والتنقّل باستخدام علامات التبويب
صعب إلى حدّ ما أو صعب للغاية
يتضمّن التمرير طرق التنقّل، مثل أسهم لوحة المفاتيح ومفاتيح Tab والضغطات على مفتاح المسافة وأذرع التحكّم في الألعاب، وقد يكون من الصعب تضمين هذه الطرق عند تنفيذ عمليات تمرير مخصّصة. أفاد نصف المشاركين تقريبًا بأنّه من الصعب إلى حدّ ما أو من الصعب جدًا تضمين هذه المدخلات.
التعلّم touch-action
السؤال 9
%50
تقرير التعرّف على
`touch-action: manipulation`
من الاستطلاع.
تضمّن الاستطلاع أسئلة حول استخدام واجهات برمجة تطبيقات معيّنة، وكان من الممكن الإجابة بنعم أو لا أو "لقد تعلّمت اليوم". ومن الملاحظات الجديرة بالذكر عدد المستخدمين الذين أشاروا إلى أنّهم تعرّفوا على 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
أحيانًا
غالبًا ما يتم الترويج للتفاعلات المضمّنة مع التمرير واللمس في تطبيقات الهواتف والأجهزة اللوحية باعتبارها نقطة واضحة يمكن أن يلحق بها الويب. وتشمل الميزات رسومًا متحركة مرتبطة بالتمرير، وواجهات برمجية، ودمجًا صوتيًا، وتلميحات حول التمرير، وواجهات برمجة تطبيقات للسحب لإعادة التحميل.
أفاد نصف المشاركين فقط بأنّه يمكن أحيانًا مطابقة تجربة التمرير المضمّنة.
الرضا العام عن إنشاء تفاعلات التمرير على الويب
السؤال 27
النتائج الرئيسية للاستطلاع
يتم تقسيم نتائج الاستطلاع إلى أربع فئات: التوافق والتعليم وواجهات برمجة التطبيقات والميزات.
التوافق
أعلن فريق Chrome عن هدف يتمثل في تقليل عدد مشاكل التوافق مع الويب، بما في ذلك التوافق مع التمرير.
في ما يلي أول ثلاث مشاكل توافق يجب التركيز عليها:
1. التوافق مع التمرير الأفقي
1. overscroll-behavior متصفّح متوافق مع عدة أنظمة تشغيل
1. إزالة البادئات من -webkit-scrollbar واتّباع المعيار
تعليم
أظهرت نتائج الاستطلاع أنّ هناك حاجة إلى المزيد من التثقيف بشأن
touch-action والسمات المنطقية. يحتل المتصفح الصدارة في ما يتعلق بالتصميمات الدولية، ومن الواضح أنّه لا يتم الاستفادة منه بشكل كافٍ أو أنّه غير مفهوم.
المجالات التي يجب التركيز عليها:
1. touch-action
1. السمات المنطقية
واجهات برمجة التطبيقات
يزداد استخدام ميزة "محاذاة مواضع التمرير"، وقد أشار المطوّرون إلى أنّهم يريدون استخدام الميزات بشكل قابل للتشغيل التفاعلي مع المكتبات والمكوّنات الإضافية الشائعة. سيساعد تضييق هذه الفجوة بين CSS ومكتبات الإضافات في تحسين تجربة المطوّرين والمستخدمين في ما يتعلق بميزة "المحاذاة عند التمرير".
سنركّز جهودنا في ما يتعلق بواجهات برمجة التطبيقات على scroll-snap:
1. مدى توفّر واجهة برمجة التطبيقات وتوافقها مع المتصفّحات
1. بدء العمل على واجهات برمجة تطبيقات جديدة لخدمات CSS، مثل scroll-start
1. ابدأ العمل على أحداث JavaScript الجديدة مثل snapChanged().
الميزات
أظهرت نتائج الاستطلاع أنّ المستخدمين يواجهون صعوبة في التعامل مع بعض الأنواع المحدّدة من المكوّنات المرتبطة بالتمرير على الويب، لأنّ النظام الأساسي لا يوفّر العناصر الأساسية التي يحتاجون إليها لإنشائها بدون مكوّنات إضافية أو بذل مجهود كبير. نأمل أن نستكشف هذا المجال بشكل أعمق.
تشمل الميزات التي يواجه المطوّرون صعوبة في إنشائها ما يلي: 1. العروض الدوّارة 1. التمرير الافتراضي 1. التمرير اللا نهائي