معرفة التشغيل

كيفية تصميم أزرار الصفحات في موقع الشركة لتكون أكثر فاعلية

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

صورة توضيحية

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

أولاً: تحديد الهدف من كل زر بوضوح

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

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

كيفية تصميم أزرار الصفحات في موقع الشركة لتكون أكثر فاعلية配图

ثانيًا: يجب أن يوضح نص الزر الإجراء والنتيجة

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

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

ثالثًا: يتبع الموضع ترتيب القراءة، وليس فقط الترتيب البصري

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

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

رابعًا: عند وجود أزرار متعددة في نفس الشاشة، استخدم التسلسل الهرمي للتمييز بين الأولويات

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

كيفية تصميم أزرار الصفحات في موقع الشركة لتكون أكثر فاعلية配图

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

خامسًا: فحص قابلية استخدام الأزرار واحدة تلو الأخرى قبل الإطلاق

الانتهاء من تصميم الزر لا يعني أنه قابل للاستخدام. قبل النشر أو التعديل، افحص بالترتيب التالي:

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

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

كيفية تصميم أزرار الصفحات في موقع الشركة لتكون أكثر فاعلية配图

سادسًا: إدراج الأزرار في الصيانة اليومية، وليس إنجازها مرة واحدة وتركها

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

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

03 /

من المعرفة إلى التطبيق

تخطيط المحتوى
01

تخطيط المحتوى

صفحات متجاوبة
02

صفحات متجاوبة

تشغيل مستمر
03

تشغيل مستمر