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

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

Katie Hempenius
Katie Hempenius
X

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

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

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

الأداء

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

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

    غالبًا ما تحتوي منصّات العرض بعناصر متغيّرة في الجزء المرئي من الصفحة على عنصر LCP للصفحة. التأثير بشكل كبير على سرعة عرض أكبر جزء من المحتوى على الصفحة (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): ومع ذلك، بالنسبة إلى لوحات العرض الدوّارة التي يتم تشغيلها تلقائيًا، قد لا يقتصر الأمر على احتساب متغيّرات التصميم تجاه متغيّرات التصميم التراكمية (CLS) وقد تتكرّر أيضًا إلى أجل غير مسمّى وبالتالي، من المهم التحقق من أن لوحة العرض الدوّارة للتشغيل التلقائي ليست مصدرًا للتنسيق التبديلات.

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

لمزيد من المعلومات عن متغيّرات التصميم، اطّلِع على مقالة تصحيح الأخطاء في التنسيق. التبديلات.

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

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

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

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

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

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

قياس الأداء

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

قياس LCP للوحات العرض الدوّارة

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

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

تغييرات في عملية احتساب سرعة عرض أكبر محتوى مرئي في لوحات العرض الدوّارة في Chrome 88

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

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

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

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

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

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

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

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

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

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

دعم إيماءات الجوّال

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

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

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

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

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

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

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

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

يجب الفصل بين النص والصور.

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

كن موجزًا

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

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

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

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

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

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

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

الملاءمة

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