تقرير حول التنقّل في الصفحة لعام 2021

يمكنك الاطّلاع على "تقرير استطلاع التمرير" لعام 2021 بالإضافة إلى رسالة من فريق Chrome حول تأثير ذلك في الأولويات والخطط المتعلّقة بـ Chromium والويب.

Adam Argyle
Sam Dutton

في أبريل، أطلق فريق Chrome استطلاعًا حول التمرير والتفاعل باللمس استنادًا إلى أهم المشاكل التي تم الإبلاغ عنها في تقرير MDN Web DNA لعام 2019. أصبح تقرير استطلاع 2021 بشأن التمرير السريع جاهزًا، ويودّ فريق Chrome مشاركة بعض الأفكار والإجراءات التي استخلصناها من نتائج الاستطلاع. نأمل أن تساعد هذه النتائج مورّدي المتصفحات ومجموعات المعايير في فهم كيفية تحسين التمرير على الويب.

عرض تقرير استطلاع التمرير السريع لعام 2021

النتائج الجديرة بالاهتمام

جمع الاستطلاع 880 ردًا بشكل مجهول الهوية، وأجاب 366 مشاركًا عن كل سؤال.

على الرغم من أنّ بدء استخدام التمرير لا يتطلّب سوى سطر واحد من CSS، مثل overflow-x: scroll;، فإنّ مساحة سطح واجهات برمجة التطبيقات وخيارات التمرير كبيرة، وتتضمّن JavaScript وCSS. تساعد النتائج التالية في إبراز المشاكل التي يواجهها مطوّرو الويب.

مستوى الرضا العام عن التمرير على الويب

السؤال 27

‫45%

غير راضٍ نوعًا ما أو غير راضٍ على الإطلاق
عن التمرير على الويب.

تم طرح هذا السؤال بالقرب من نهاية الاستطلاع عمدًا، بعد الأسئلة المتعلقة بـ 26 حالة استخدام وميزة للتمرير. من الردود، يتضح أنّ منتدى الويب يواجه مشاكل في التمرير. أفاد نصف المشاركين تقريبًا بأنّهم غير راضين بشكل عام.

ونعتقد أنّ مستوى الرضا العام عن العمل مع Scroll يجب ألا يكون منخفضًا إلى هذا الحد. يجب تغيير هذا المقياس، فهو يشير بوضوح إلى ضرورة إجراء تحسينات.

صعوبة استخدام التمرير

السؤال 2

‫43%

أفادوا بأنّ التنقّل باستخدام التمرير صعب إلى حد ما أو
صعب للغاية
.

من خلال بحثنا، تبيّن لنا أنّ هذه الصعوبات ناتجة عن تعدد حالات استخدام التمرير. عندما نتحدث عن التمرير، قد يشمل ذلك ما يلي: - تحديد موضع العناصر ضمن المساحات القابلة للتمرير - التمرير بلا حدود - الرسوم المتحركة المرتبطة بالتمرير - اللوحات الدوّارة - المسافة المتروكة في Scrollview - التمرير الدوري - التمرير الافتراضي

تتسبّب ميزات المتصفّح الناقصة و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

رسم بياني دائري يعرض 5 أقسام: %6.3 غير راضٍ تمامًا، %2.7 راضٍ تمامًا، %23.4 راضٍ نوعًا ما، %28.8 لا راضٍ ولا غير راضٍ، %38.7 غير راضٍ نوعًا ما.

النتائج الرئيسية للاستطلاع

يتم تقسيم نتائج الاستطلاع إلى أربع فئات: التوافق والتعليم وواجهات برمجة التطبيقات والميزات.

التوافق

أعلن فريق 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. التمرير اللا نهائي

الموارد

الصورة المصغّرة: صورة من تايلور ويلكوكس على Unsplash