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

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

Adam Argyle
Sam Dutton

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

الاطّلاع على تقرير "الاستطلاع الخاص بالتمرير لعام 2021"

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

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

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

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

السؤال 27

%45

غير راضين إلى حدٍّ ما أو غير راضٍ على الإطلاق بشكل عام
من التمرير على الويب.

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

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

صعوبة في الانتقال للأعلى أو للأسفل

السؤال 2

%43

تشير إلى أنّه إلى حدّ ما أو
صعب للغاية على
العمل على التمرير.

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

تجعل كل هذه الأمور أكثر صعوبة بفضل ميزات المتصفح التي لا تتضمنها، ولغة JavaScript المعقدة، والحاجة إلى دعم أوضاع الإدخال، بما في ذلك اللمس ولوحة المفاتيح ولوحات الألعاب.

أهمية التفاعلات باللمس

السؤال 3

زيادة بنسبة %51

الإبلاغ عن التفاعلات باللمس باعتبارها
بالغة الأهمية أو مهمة للغاية
لعملها.

مع استمرار تزايد عدد مستخدمي الويب على الأجهزة الجوّالة في إحصاءات الزيارات، لم يكن من المفاجئ رؤية نصف المشاركين في الاستبيان بأن اللمسات مهمّة للغاية بالنسبة إلى عملهم على الويب. يشير ذلك إلى أنّ ميزات الويب، مثل الانطباق في CSS وtouch-action، تحتاج إلى مزيد من الاهتمام حتى يتمكّن الويب من تقديم تفاعل عالي الجودة باللمس.

صعوبة التنقل باستخدام مفتاح التبويب (Tab) أو لوحة الألعاب

السؤال 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 ومكتبات المكوّنات الإضافية على رضا مطوّري برامج Snapchat وتجربة المستخدم.

سنركّز عمل واجهة برمجة التطبيقات على scroll-snap: 1. مدى توفر واجهة برمجة التطبيقات والتوافق عبر المتصفحات. 1- بدء العمل على واجهات برمجة تطبيقات CSS الجديدة مثل scroll-start. 1- ابدأ العمل على أحداث JavaScript الجديدة، مثل snapChanged().

الميزات

أظهرت نتائج الاستطلاع أنّ المستخدمين يواجهون صعوبة في التعامل مع بعض الأنواع المحددة من المكونات المتعلّقة بالتمرير على الويب، لأنّ النظام الأساسي لا يوفّر الأساسيات التي يحتاجون إليها لإنشائها بدون مكوّنات إضافية أو مستوى عالٍ من الجهد. هذا مجال نأمل أن نستكشفه بشكل أكثر عمقًا.

تشمل الميزات التي يكافح المطورون في إنشائها ما يلي: 1. العروض الدوارة 1. التمرير الافتراضي 1. التمرير اللا نهائي

المراجِع

صورة مصغّرة: صورة من إعداد تايلور ويلكوكس على UnLaunch.