أفضل ممارسات لوحات العرض الدوّارة

حسِّن لوحات العرض الدوّارة لتحسين الأداء وسهولة الاستخدام.

Katie Hempenius
Katie Hempenius
X

العرض الدوار هو مكون تجربة مستخدم يعرض المحتوى بطريقة تشبه عرض الشرائح. يمكن "تشغيل" العروض الدوارة تلقائيًا أو يمكن للمستخدمين التنقل يدويًا. على الرغم من أنه يمكن استخدام العروض الدوارة في مكان آخر، إلا أنها تُستخدم غالبًا لعرض الصور والمنتجات والعروض الترويجية على الصفحات الرئيسية.

تناقش هذه المقالة أفضل ممارسات الأداء وتجربة المستخدم في لوحات العرض الدوّارة.

صورة تعرض لوحة عرض دوّارة

عروض أداء

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

  • سرعة عرض أكبر محتوى مرئي (LCP)

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

  • مدى استجابة الصفحة لتفاعلات المستخدم (INP)

    تحتوي العروض الدوارة على الحد الأدنى من متطلبات JavaScript، وبالتالي يجب ألا تؤثر على استجابة الصفحة. إذا اكتشفت أنّ لوحة العرض الدوّارة لموقعك الإلكتروني تحتوي على نصوص برمجية طويلة الأمد، عليك استبدال أدوات العرض الدوّارة.

  • متغيّرات التصميم التراكمية (CLS)

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

أفضل ممارسات الأداء

تحميل محتوى لوحة عرض دوّارة باستخدام HTML

يجب تحميل محتوى لوحة العرض الدوّارة من خلال ترميز HTML للصفحة ليكون بالإمكان اكتشافه من خلال المتصفّح في وقت مبكر من عملية تحميل الصفحة. إنّ استخدام JavaScript لبدء تحميل محتوى لوحة العرض الدوّارة هو على الأرجح أكبر خطأ في الأداء يجب تجنُّبه عند استخدام لوحات العرض الدوّارة. ويؤدي ذلك إلى تأخير تحميل الصورة ويمكن أن يؤثر سلبًا في سرعة LCP

الإجراءات الموصى بها
<div class="slides">
  <img src="https://example.com/cat1.jpg">
  <img src="https://example.com/cat2.jpg">
  <img src="https://example.com/cat3.jpg">
</div>
الإجراءات غير المُوصى بها
const slides = document.querySelector(".slides");
const newSlide = document.createElement("img");
newSlide.src = "htttp://example.com/cat1.jpg";
slides.appendChild(newSlide);

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

تجنُّب متغيّرات التصميم

تُعد انتقالات الشرائح وعناصر التحكم في التنقل المصدرين الأكثر شيوعًا لتغييرات التخطيط في العروض الدوارة:

  • عمليات انتقال الشرائح: تحدث عادةً متغيّرات التصميم التي تحدث أثناء عمليات انتقال الشرائح بسبب تعديل خصائص عناصر DOM. تشمل أمثلة بعض هذه السمات: left وtop وwidth وmarginTop. لتجنّب متغيّرات التصميم، يمكنك بدلاً من ذلك استخدام سمة CSS transform لنقل هذه العناصر. يوضّح هذا العرض التوضيحي كيفية استخدام transform لإنشاء لوحة عرض دوّارة أساسية.

  • عناصر التحكّم في التنقّل: يمكن أن يؤدّي نقل عناصر التحكّم في التنقّل في لوحة العرض الدوّارة أو إضافتها أو إزالتها من نموذج العناصر في المستند (DOM) إلى متغيّرات في التنسيق بناءً على كيفية تنفيذ هذه التغييرات. عادةً ما تفعل العروض الدوارة التي تظهر هذا السلوك استجابةً لتمرير المستخدم.

في ما يلي بعض نقاط الالتباس الشائعة في ما يتعلق بقياس متغيّرات التصميم التراكمية (CLS) في لوحات العرض الدوّارة:

  • لوحات العرض الدوّارة التي يتم تشغيلها تلقائيًا: تُعدّ انتقالات الشرائح المصدر الأكثر شيوعًا لمتغيّرات التصميم المتعلّقة بمنصّة العرض بعناصر متغيّرة. في لوحة العرض الدوّارة التي لا يتم تشغيلها تلقائيًا، تحدث متغيّرات التصميم هذه عادةً خلال 500 ملي ثانية من تفاعل المستخدم، وبالتالي لا يتم احتسابها ضمن "متغيّرات التصميم التراكمية" (CLS). ومع ذلك، بالنسبة إلى لوحات العرض الدوّارة التي يتم تشغيلها تلقائيًا، لا يمكن احتساب متغيّرات التصميم هذه ضمن متغيّرات التصميم التراكمية فحسب، بل يمكن أيضًا تكرارها إلى أجل غير مسمى. وبالتالي، من المهم بشكل خاص التحقق من أن لوحة العرض الدوّارة للتشغيل التلقائي ليست مصدرًا لمتغيّرات التصميم.

  • التمرير: تتيح بعض لوحات العرض الدوّارة للمستخدمين استخدام التمرير للتنقّل بين شرائح لوحة العرض الدوّارة. إذا تغيّر موضع بداية العنصر ولكن تغيّرت إزاحة التمرير (أي scrollLeft أو scrollTop) بالمقدار نفسه (ولكن في الاتجاه المعاكس)، لا يُعدّ ذلك تغييرًا في التصميم شرط أن تحدث في الإطار نفسه.

لمزيد من المعلومات حول متغيّرات التصميم، يمكنك الاطّلاع على تصحيح الأخطاء في متغيّرات التصميم.

استخدام التكنولوجيا الحديثة

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

ومع ذلك، قد لا تحتاج إلى JavaScript على الإطلاق، وذلك بناءً على نوع لوحة العرض الدوّارة التي تنشئها. وتتيح واجهة برمجة التطبيقات Scroll Snap الجديدة تنفيذ انتقالات تشبه لوحة العرض الدوّارة باستخدام HTML وCSS فقط.

في ما يلي بعض المراجع المفيدة حول استخدام "scroll-snap":

تحسين محتوى لوحة العرض الدوّارة

غالبًا ما تحتوي العروض الدوارة على بعض من أكبر الصور في الموقع، لذا قد يكون من المفيد وقتك للتأكد من تحسين هذه الصور بالكامل. يمكن أن تساهم كل الأساليب التي يمكن أن تقلل حجم نقل الصور في اختيار تنسيق الصورة ومستوى ضغطها المناسبَين، واستخدام شبكة توصيل المحتوى (CDN)، واستخدام srcset لعرض نُسخ متعددة من الصور.

قياس الأداء

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

قياس سرعة عرض أكبر جزء من المحتوى على الصفحة (LCP) للوحات العرض الدوّارة

في ما يلي النقاط الرئيسية لفهم طريقة حساب سرعة عرض أكبر جزء من المحتوى على الصفحة (LCP) في لوحات العرض الدوّارة:

  • يراعي LCP عناصر الصفحة عند كونها مرسومة في الإطار. لن يتم النظر في المرشّحين الجدد لعنصر LCP بعد تفاعل المستخدم (النقر أو التمرير أو الضغط على المفاتيح) مع الصفحة. وبالتالي، من الممكن أن تكون أي شريحة ضمن لوحة عرض دوّارة قيد التشغيل التلقائي عنصر LCP الأخير، بينما في العرض الدوار الثابت فقط تكون الشريحة الأولى هي المرشح المحتمل لمقياس LCP.
  • في حال عرض صورتَين متساويتَين في الحجم، سيتمّ اعتبار الصورة الأولى هي عنصر LCP. لا يتمّ تعديل عنصر LCP إلا إذا كان عنصر LCP المرشَّح أكبر من عنصر LCP الحالي. وبالتالي، إذا كانت جميع عناصر العرض الدوار متساوية في الحجم، فيجب أن يكون عنصر LCP هو أول صورة يتم عرضها.
  • عند تقييم المرشّحين لسرعة LCP، يضع LCP في الاعتبار "الحجم المرئي أو الحجم الأساسي، أيهما أصغر". وبالتالي، إذا كانت لوحة العرض الدوّارة التي يتم تشغيلها تلقائيًا تعرض صورًا بحجم ثابت، ولكنّها تحتوي على صور ذات أحجام أساسية متفاوتة أصغر من حجم العرض، قد يتغير عنصر LCP مع عرض شرائح جديدة. في هذه الحالة، إذا تم عرض جميع الصور بالحجم نفسه، سيتم اعتبار الصورة ذات الحجم الجوهري الأكبر عنصرًا لمقياس LCP. للحفاظ على انخفاض سرعة عرض أكبر جزء من المحتوى على الصفحة، يجب التأكد من أنّ جميع العناصر في لوحة عرض دوّارة قيد التشغيل التلقائي بالحجم الأساسي نفسه.

تغييرات على عملية احتساب سرعة عرض أكبر جزء من المحتوى على الصفحة (LCP) للوحات العرض الدوّارة في Chrome 88

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

وقد تم إجراء هذا التغيير استجابةً للملاحظة التي تفيد بأنّ العديد من المواقع الإلكترونية تنفّذ عمليات انتقال للوحة العرض الدوّارة من خلال إزالة الصورة التي تم عرضها في السابق من شجرة نموذج العناصر في المستند (DOM). قبل استخدام Chrome 88، كانت كل مرة يتم فيها عرض شريحة جديدة تؤدي إزالة العنصر السابق إلى تحديث LCP. يؤثّر هذا التغيير فقط في عرض لوحات العرض الدوّارة تلقائيًا حسب التعريف، ولا يمكن عرض أكبر قدر من المحتوى المحتمَل إلّا قبل أن يتفاعل المستخدم مع الصفحة أولاً.

تغييرات على الحدود في الإصدار 121 من Chrome

غيَّر Chrome 121 سلوك الصور التي يتم عرضها أفقيًا، مثل لوحات العرض الدوّارة. تستخدم هذه المنصّات الآن الحدود نفسها التي يوفّرها التمرير العمودي. وهذا يعني أنه بالنسبة إلى حالة استخدام لوحة العرض الدوّارة، سيتم تحميل الصور قبل ظهورها في إطار العرض. وبالتالي، من غير المرجح أن يلاحظ المستخدم تحميل الصورة، ولكن سيكون ذلك على حساب تكلفة المزيد من عمليات التنزيل. يمكنك استخدام العرض التوضيحي لميزة "التحميل الكسول" في الوضع الأفقي لمقارنة سلوك المستخدمين في متصفّح Chrome ومتصفّح Safari وFirefox.

اعتبارات أخرى

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

توفير عناصر تحكّم بارزة في التنقّل

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

الإشارة إلى مستوى تقدّم التنقّل

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

إتاحة إيماءات الأجهزة الجوّالة

على الهاتف المحمول، يجب أن تكون إيماءات التمرير مدعومة بالإضافة إلى عناصر التحكم في التنقل التقليدية (مثل أزرار الشاشة).

توفير مسارات تنقّل بديلة

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

أفضل ممارسات سهولة القراءة

عدم استخدام ميزة التشغيل التلقائي

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

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

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

فصل النص والصور

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

كن موجزًا

لديك جزء من الثانية فقط لجذب انتباه المستخدم. ستزيد النسخة القصيرة وواضحة من احتمالات إيصال رسالتك.

أفضل الممارسات المتعلقة بالمنتجات

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

ومع ذلك، لا يتم استخدام العروض الدوارة دائمًا بشكل فعال.

  • يمكن تضليل الإعلانات بسهولة من خلال العروض الدوارة، خاصةً إذا كانت تحتوي على عروض ترويجية أو تقدم تلقائيًا. يميل المستخدمون إلى تجاهل الإعلانات، وهي ظاهرة تُعرَف باسم عمى بانر.
  • غالبًا ما يتم استخدام العروض الدوارة لاستقاء أقسام متعددة وتجنب اتخاذ القرارات بشأن أولويات العمل. نتيجة لذلك، يمكن أن تتحول العروض الدوارة بسهولة إلى تربك للمحتوى غير الفعال.

اختبِر افتراضاتك

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

الملاءمة

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