كيفية جعل أدوات ووردبريس العائمة أكثر سهولة في الوصول إليها

كيفية جعل أدوات ووردبريس العائمة أكثر سهولة في الوصول إليها

ملخص

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

الوجبات الرئيسية

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

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

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

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

ما الذي يجعل أداة ووردبريس العائمة سهلة الوصول؟

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

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

تتضمن إرشادات إمكانية الوصول إلى محتوى الويب W3C 2.2 متطلبات تتعلق بإمكانية الوصول باستخدام لوحة المفاتيح، والتركيز، والتباين، وإعادة التدفق، وحجم الهدف. ينص معيار حجم الهدف من المستوى AA في WCAG 2.2 عمومًا على أن تكون أهداف المؤشر 24 × 24 بكسل CSS على الأقل، مع مراعاة بعض الاستثناءات. اعتبر ذلك حدًا أدنى وليس سببًا لتصغير كل عنصر تحكم إلى أدنى حد ممكن.

لماذا غالباً ما تُسبب الأدوات العائمة مشاكل في إمكانية الوصول؟

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

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

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

1. امنح كل عنصر غرضًا واضحًا ومحددًا

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

استخدم نصًا موجزًا ​​يشرح الإجراء. ومن الأمثلة على ذلك:

  • "تحدث مع فريق الدعم"
  • أرسل لنا رسالة
  • اتصل بفريق المبيعات لدينا
  • "اسأل عن هذا المنتج"
  • "احصل على المساعدة في طلبك"

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

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

2. اجعل الأداة قابلة للاستخدام باستخدام لوحة المفاتيح

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

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

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

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

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

3. استخدم ملصقات واضحة لنماذج الاتصال

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

استخدم تسميات تظل مرئية أو مرتبطة برمجياً بكل حقل. حافظ على دقة الصياغة.

  • استخدم "الاسم الكامل" بدلاً من "الاسم" عندما تحتاج إلى الاسم الكامل للشخص.
  • استخدم "عنوان البريد الإلكتروني الخاص بالعمل" بدلاً من "البريد الإلكتروني" فقط للاستفسارات التجارية.
  • استخدم "رقم الطلب" بدلاً من "المرجع" لطلبات الدعم.
  • استخدم عبارة "كيف يمكننا المساعدة؟" بدلاً من "الرسالة" عندما تريد شرحاً مفصلاً.

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

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

4. اختر الألوان والتباين بعناية

يمكن لألوان العلامة التجارية أن تجعل الأداة تبدو متناسقة مع باقي الموقع، ولكن يجب ألا يؤثر تناسق العلامة التجارية على سهولة القراءة. تحقق من التباين بين:

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

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

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

5. اجعل عناصر اللمس مريحة على الهاتف المحمول

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

قم بمعاينة الأداة على أحجام الهواتف المحمولة الشائعة وتحقق مما إذا كانت:

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

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

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

Web designer reviewing a mobile website layout on a smartphone beside a laptop
يساعد التصميم المتجاوب على إبقاء الأدوات العائمة قابلة للاستخدام دون حجب المحتوى أو عناصر التحكم في عملية الدفع على الشاشات الصغيرة. صورة من Cup of Couple على موقع Pexels.

6. تجنب النوافذ المنبثقة غير المتوقعة والحركة المفاجئة

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

ابدأ بتكوين هادئ ويمكن التنبؤ به:

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

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

7. استهداف الأدوات حسب الصفحة ونية الزائر

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

فمثلا:

  • عرض دردشة المبيعات على صفحات المنتجات والأسعار.
  • اعرض خيارات الاتصال بدعم الطلبات في قسم مساعدة العملاء.
  • اعرض خاصية النقر للاتصال في صفحات الخدمة التي تكون فيها المحادثات الهاتفية مفيدة.
  • اعرض رسالة تنبيه خاصة بالمنتج على صفحات منتجات WooCommerce.
  • قلل من الرسائل الترويجية أثناء عملية الدفع.

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

يساعد الاستهداف المستخدمين أيضاً على فهم سبب وجود أداة معينة. فعبارة "هل لديك سؤال حول هذا المنتج؟" أكثر فائدة على صفحة المنتج من عبارة "كيف يمكننا مساعدتك؟" العامة التي تظهر في كل مكان.

8. ربط قنوات الدردشة والتواصل دون إخفاء المسار الرئيسي

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

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

حافظ على اتساق ووضوح تسميات القنوات. فعبارة "راسلنا على واتساب" تُوصل رسالةً أكثر من مجرد رمز واتساب. يمكنك أيضاً استخدام رسالة تعريفية قصيرة لتوضيح أوقات الاستجابة المتوقعة قبل أن يختار الزائر القناة.

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

للحصول على المزيد من الأفكار حول التنفيذ الذي يراعي الأداء، اقرأ دليل Premio حول إضافة الدردشة المباشرة إلى WordPress دون إبطاء موقعك الإلكتروني.

9. اختبر الأداة باستخدام مسارات تفاعل حقيقية

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

اختبار لوحة المفاتيح

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

Customer support team coordinating messages and communication channels at computers
تُسهّل تسميات القنوات الواضحة وتوقعات الاستجابة الدقيقة فهم أدوات الدردشة والهاتف وجهات الاتصال. صورة من جيب غامبارديلا على موقع بيكسلز.

اختبار قارئ الشاشة

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

اختبار التكبير وإعادة التدفق

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

اختبار المحمول

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

اختبار المحتوى

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

10. راقب الأدوات بعد تحديثات ووردبريس

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

بعد إجراء تحديثات هامة، كرر قائمة التحقق القصيرة التالية:

  1. افتح الصفحة الرئيسية، وصفحة الاتصال، وصفحة المنتج، وصفحة الدفع.
  2. اختبر الأداة باستخدام لوحة المفاتيح.
  3. تحقق من تصميم الهاتف المحمول.
  4. أرسل رسالة اختبار وتأكد من وصولها إلى الوجهة الصحيحة.
  5. تأكد من أن الإشعارات وتوقعات الاستجابة لا تزال دقيقة.
  6. راجع قواعد ظهور الأداة وتوقيتها.

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

قائمة التحقق من عناصر واجهة المستخدم العائمة سهلة الوصول

استخدم قائمة التحقق هذه قبل نشر عنصر واجهة مستخدم عائم جديد:

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

الأسئلة المتكررة

هل أحتاج إلى إضافة منفصلة لتسهيل الوصول لعنصر واجهة مستخدم عائم؟

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

هل العناصر العائمة متوافقة تلقائيًا مع معايير WCAG؟

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

هل يجب عليّ إخفاء عنصر واجهة المستخدم العائم عن زوار الهواتف المحمولة؟

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

هل يمكن الوصول إلى زر الدردشة الذي يحتوي على أيقونة فقط؟

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

كم مرة يجب عليّ اختبار أدوات ووردبريس الخاصة بي؟

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

الأفكار النهائية

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

تُساعد أدوات مثل Chaty وMy Sticky Elements أصحاب مواقع ووردبريس على مركزة خيارات التواصل. وتكون إعداداتها أكثر فعالية عند استخدامها مع نصوص سهلة الفهم، وموقعها المُختار بعناية، وتقليل المقاطعات، واختبارها بانتظام. والهدف ليس جعل الأداة أكثر وضوحًا بأي ثمن، بل توفير المساعدة المناسبة لأكبر عدد من الزوار.