مبادئ تصميم المواقع: 12 قاعدة تجعل الزائر يثق بموقعك ويتواصل معك

في هذا الدليل

1. ما المبادئ ولماذا تهمك؟
2. القواعد 1 إلى 4: التسلسل والتباين والمساحة والاتساق
3. القاعدة 5: خط عربي يُقرأ بلا جهد
4. القاعدة 6: مسار العين من اليمين
5. القاعدتان 7 و8: قانون فيتس وقانون هيك
6. القاعدتان 9 و10: الاستجابة وإمكانية الوصول
7. القاعدتان 11 و12: السرعة والدعوة الواضحة
8. مثال قبل وبعد وقائمة فحص
9. كيف نطبقها في ويبنا
10. أسئلة شائعة
11. الخلاصة

ما مبادئ تصميم المواقع؟ ولماذا تهم صاحب النشاط؟

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

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

كل صفحة جيدة تجيب في ثوانٍ عن ثلاثة أسئلة يطرحها الزائر دون أن ينطق بها:

1. أين أنا؟ اسم النشاط ومجاله ومدينته واضحة من أول شاشة.
2. هل هذا ما أبحث عنه؟ عنوان يصف الخدمة بلغة العميل، لا بشعار عام يصلح لأي شركة.
3. ماذا أفعل الآن؟ خطوة تالية واحدة واضحة: اتصال، أو رسالة واتساب، أو طلب عرض سعر، أو حجز موعد.

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

القواعد 1 إلى 4: التسلسل البصري والتباين والمساحة والاتساق

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

القاعدة 1: تسلسل بصري يقول للعين من أين تبدأ

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

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

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

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

القاعدة 2: تباين يخدم القراءة لا الزينة

التباين هو الفرق بين النص وخلفيته في الإضاءة. تحدده إرشادات إمكانية الوصول WCAG 2.2 بنسبة رقمية: على مستوى AA يجب ألا تقل نسبة تباين النص العادي عن 4.5:1، والنص الكبير عن 3:1، والنص الكبير هنا هو ما لا يقل عن 18 نقطة (نحو 24 بكسلًا)، أو 14 نقطة إن كان عريضًا (نحو 18.5 بكسلًا). هذه النسب تقيسها أدوات مجانية كثيرة، ويكفي صاحبَ النشاط أن يطلب من مصممه إثبات أن ألوان النصوص تحققها.

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

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

القاعدة 3: المساحة البيضاء تنظّم ولا تُهدر

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

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

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

القاعدة 4: الاتساق والمحاذاة على شبكة واحدة

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

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

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

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

القاعدة 5: خط عربي يُقرأ بلا جهد

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

اختيار الخط

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

قيم بداية عملية

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

العنصر	قيمة بداية	السبب
حجم نص الفقرات	17 إلى 18 بكسلًا على الجوال والحاسوب	الحرف العربي يبدو أصغر من اللاتيني بالحجم نفسه
ارتفاع السطر	1.7 إلى 1.9 من حجم الخط	يترك مكانًا للنقاط والحروف النازلة والصاعدة
عرض السطر	نحو 60 إلى 75 حرفًا	السطر الطويل جدًا يُضيّع بداية السطر التالي
المسافة بين الفقرات	قريبة من ارتفاع سطر كامل	تفصل الأفكار دون أن تقطع القراءة
العناوين	وزن أعرض وحجم أكبر بوضوح من النص	تخدم القارئ الذي يقرأ العناوين فقط

أشياء لا تفعلها بالنص العربي

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

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

القاعدة 6: صمّم لمسار العين الذي يبدأ من اليمين

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

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

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

نمط Z في الصفحات القليلة النص

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

أنماط مسح أخرى يجب أن تستعد لها

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

القاعدتان 7 و8: قانون فيتس وقانون هيك ببساطة

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

القاعدة 7: قانون فيتس، كبّر الهدف وقرّبه

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

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

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

القاعدة 8: قانون هيك، خيارات أقل وقرار أسرع

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

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

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

القاعدتان 9 و10: الاستجابة الواضحة وإمكانية الوصول

القاعدة 9: لكل فعل ردّ فعل يراه الزائر

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

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

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

القاعدة 10: موقع يستطيع الجميع استخدامه

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

لا تحتاج أن تحفظ الإرشادات كلها لتبدأ. هذه ثمانية فحوص تغطي أغلب المشكلات في مواقع الشركات:

1. تباين النصوص لا يقل عن 4.5:1، والنص الكبير عن 3:1.
2. لكل صورة تحمل معنى نص بديل يصفها بالعربية، والصور الزخرفية تُترك بنص بديل فارغ.
3. يمكن الوصول إلى كل رابط وزر وحقل بمفتاح Tab، ويظهر إطار واضح حول العنصر المحدد.
4. لكل حقل في النماذج عنوان ظاهر فوقه، لا نص توضيحي داخله يختفي عند الكتابة.
5. العناوين مرتبة منطقيًا: عنوان رئيسي واحد، ثم عناوين أقسام، ثم عناوين فرعية، دون قفز لأجل الشكل.
6. لغة الصفحة واتجاهها معرّفان في الكود (العربية ومن اليمين إلى اليسار)، حتى تنطقها قارئات الشاشة صحيحة.
7. أهداف الضغط لا تقل عن 24 في 24 بكسل، أو تفصلها مسافة كافية.
8. المعلومة لا تُنقل باللون وحده؛ الحقل الخاطئ عليه نص يشرح الخطأ لا إطار أحمر فقط.

القاعدتان 11 و12: السرعة ودعوة واضحة للتواصل

القاعدة 11: السرعة قرار تصميم قبل أن تكون قرارًا تقنيًا

سرعة الموقع ليست شأن المبرمج والاستضافة وحدهما، فقرارات التصميم تحدد في الغالب وزن الصفحة. يقيس Google تجربة التحميل بثلاثة مؤشرات تسمى مؤشرات أداء الويب الأساسية، ويعرض موقع web.dev حدودها الجيدة كما يلي، مقيسة عند الشريحة المئوية 75 من زيارات الصفحة على الجوال والحاسوب:

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

ترجمة ذلك إلى قرارات عملية في التصميم:

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

وللعلاقة بين السرعة والمبيعات تفاصيل أوسع في مقال سرعة الموقع تصنع المبيعات، وفيه طرق قياس سرعة موقعك بنفسك.

القاعدة 12: دعوة واحدة واضحة لاتخاذ الخطوة التالية

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

قارن بين صياغات الأزرار الضعيفة والقوية:

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

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

طبّق المبادئ على موقعك: مثال قبل وبعد وقائمة فحص

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

العنصر	قبل	بعد	القاعدة
العنوان الرئيسي	مرحبًا بكم في موقعنا	ترميم الفلل وتشطيبها في جدة بعقد واضح وجدول زمني مكتوب	1 و6
الواجهة	أربع صور متبدلة تلقائيًا	صورة واحدة مضغوطة لمشروع منجز مع طبقة داكنة تحت النص	2 و11
القائمة	عشرة عناصر	خمسة: الخدمات، المشاريع، طريقة العمل، من نحن، تواصل	8
فقرة الرؤية	طويلة وموسّطة	ثلاث نقاط قصيرة محاذاة إلى اليمين عمّا يميز الشركة	4 و5
زر التواصل	«إرسال» في آخر الصفحة	«اطلب زيارة معاينة» في الواجهة وبعد المشاريع وفي شريط ثابت على الجوال	7 و12
النموذج	تسعة حقول بلا رسائل خطأ واضحة	أربعة حقول بعناوين ظاهرة ورسالة نجاح تذكر موعد الاتصال	8 و9 و10
بطاقات الخدمات	رابط «المزيد» صغير	البطاقة كلها قابلة للضغط وعنوانها يبدأ باسم الخدمة	6 و7

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

قائمة فحص في ربع ساعة

افتح موقعك على جوالك، ثم على الحاسوب، وأجب بنعم أو لا. كل «لا» هي نقطة تحسين لها أولوية:

وإذا كنت تعمل مع مصمم، فاسأله قبل اعتماد التصميم: ما العنصر الأهم في كل صفحة؟ هل جُرّب التصميم على جوال حقيقي بنصوص عربية فعلية؟ وماذا يرى الزائر بعد إرسال النموذج؟

كيف نطبق هذه المبادئ في ويبنا

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

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

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

ولتطبيق هذه المبادئ على أهم صفحة في موقعك، اقرأ: تصميم الصفحة الرئيسية للموقع.

أسئلة شائعة

الخلاصة

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

المراجع: W3C: فهم معيار التباين الأدنى 1.4.3 في WCAG 2.2، وW3C: فهم معيار الحد الأدنى لحجم الهدف 2.5.8، وNielsen Norman Group: نمط F في قراءة محتوى الويب، وNielsen Norman Group: قانون فيتس، وweb.dev: مؤشرات أداء الويب الأساسية. ومن ويبنا: صمّم لشاشة الجوال أولًا وكيفية تصميم موقع إلكتروني خطوة بخطوة. قيم الخط في الجدول قيم بداية عملية وليست معيارًا رسميًا.