عدد الكلمات: ~٢٤٠٠ · مدة القراءة: ١٣ دقيقة

علم النظر: كيف يقرأ المستخدم العربي الشاشة

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

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

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

هذا المقال عن علم تتبّع العين (Eye Tracking)، وعما يقوله للمصمم العربي.

نمط F — القصة الكاملة

في عام ٢٠٠٦، نشرت مؤسسة Nielsen Norman Group دراسةً أصبحت من أكثر أبحاث تجربة المستخدم استشهاداً: المستخدمون الغربيون يقرؤون الواجهات الرقمية بنمطٍ يشبه حرف F. يبدأون بمسحٍ أفقيٍ في الأعلى (الضلع الأعلى من F)، ثم مسحٍ أفقيٍ أقصر في المنتصف (الضلع الأوسط)، ثم ينزلون عمودياً على الجانب الأيسر (العمود العمودي).

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

ثم جاء السؤال المنطقي: ماذا يحدث مع المستخدم العربي؟

نمط F المعكوس — ما تقوله الأبحاث

الجواب الذي يتوقعه معظم المصممين: نمط F معكوس تماماً، بحيث يبدأ من اليمين وينزل على الجانب الأيمن. وهذا الجواب صحيحٌ جزئياً، لكنه ناقصٌ بطريقةٍ مهمة.

أبحاث تتبّع العين على مستخدمين عربٍ — ومنها دراساتٌ أجرتها جامعة الملك عبدالله للعلوم والتقنية (كاوست) وأبحاثٌ مستقلةٌ عدةٌ نُشرت في مجلة Behaviour & Information Technology — تُظهر نمطاً أكثر تعقيداً من مجرد “عكس F”:

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

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

تأثير الاستخدام المتراكم للواجهات الغربية

هناك حقيقةٌ يجب مواجهتها قبل الاستمرار: المستخدم العربي قضى سنواتٍ طويلةً يستخدم واجهاتٍ مصممةٍ للغرب — فيسبوك، يوتيوب، جوجل في إصداراته الأولى — قبل أن تنتشر النسخ العربية. هذا أنتج شيئاً يُسمّيه الباحثون “التكيّف البصري الثقافي” (Cultural Visual Adaptation).

بعبارةٍ أبسط: المستخدم العربي اليوم يحمل توقعَين متعارضَين في الوقت نفسه، فهو يتوقع النص من اليمين، ويتوقع بعض عناصر الواجهة (كأزرار التحكم والأيقونات العالمية) في مكانها “الغربي” لأنه تعلّمها هناك.

هذا يُنتج تداعيَتَين عمليتَين للمصمم:

• التداعية الأولى: لا تُفاجئ المستخدم بقلب عناصرٍ اعتاد عليها دون سبب وظيفيٍ، حتى لو كان القلب “صحيحاً” نظرياً. أثر المفاجأة البصرية يُعطّل التفاعل.
• التداعية الثانية: العناصر الجديدة التي لم يتشكّل لها توقعٌ مسبقٌ (مكوّناتٌ جديدةٌ في تطبيقاتٍ جديدة) يجب أن تتبع منطق RTL بالكامل، لأنه لا توقع سابق يتعارض معه.

خرائط الحرارة — قراءة المناطق

تتبّع العين يُنتج ما يُسمّى خريطة الحرارة (Heatmap): وهي تمثيلٌ بصريٌ يُظهر المناطق التي تتركّز فيها نظرات المستخدمين بالألوان الدافئة (الأحمر والبرتقالي) والمناطق المهملة بالألوان الباردة (الأزرق). مقارنة خريطتَي حرارة — واحدةٌ لمستخدمين غربيين وأخرى لمستخدمين عرب على نفس الصفحة — تكشف عن فروقٍ بنيوية:

الخلاصة العملية من هذا الجدول: الشريط العلوي ساخنٌ للجميع، لذا ضع فيه ما تريد أن يراه الجميع. والزاوية السفلية اليسرى “منطقةٌ ميتة” للمستخدم العربي بشكلٍ أشد مما هي للغربي، لا تضع فيها شيئاً مهماً أبداً.

أين تضع زر اتخاذ القرار (CTA)؟

زر اتخاذ القرار (Call to Action) هو العنصر الذي يحدد إن كانت الصفحة تُحوّل الزائر إلى مستخدمٍ أو تتركه يغادر. موضعه ليس قراراً جمالياً، بل قراراً هندسياً مبنياً على فهم مسار البصر.

في التصميم الغربي، قاعدة CTA الأولى: ضعه في المسار البصري الأول، أي يسار الشاشة العلوي أو مركزها. في التصميم للمستخدم العربي، القاعدة تتفرّع:

السيناريو الأول — صفحة هبوط (Landing Page)

الزائر يأتي من إعلانٍ أو بحث، وهو في حالة “استكشاف”. بصره يبدأ من اليمين العلوي ويتحرك. في هذا السيناريو:

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

السيناريو الثاني — نموذج تسجيلٍ أو سداد

المستخدم في حالة “تنفيذ مهمة”، يقرأ الحقول بتسلسلٍ منطقي. هنا نمط القراءة يختلف عن الاستكشاف:

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

السيناريو الثالث — شريط تنقل (Navigation Bar)

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

• أهم رابط تنقل (الرئيسية، المنتجات) يجب أن يكون أول ما على اليمين.
• زر “تسجيل الدخول” أو “اشترِ الآن” في شريط التنقل يكون أكثر فاعليةً في اليسار، لأن المستخدم يصله بعد أن يمسح العناصر الأخرى، وهو في ذروة الانتباه “المتراكم”.

هذا استثناءٌ مثير: زر “اشترِ الآن” في شريط التنقل العربي يعمل بشكلٍ أفضل في اليسار، ليس لأن اليسار مهمٌ بصرياً، بل لأنه يقع عند نهاية مسار المسح، وهي لحظة القرار لا لحظة الاكتشاف.

الكثافة البصرية والمسافات البيضاء

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

هذا يُنتج توصيتَين للمساحات البيضاء:

مسافة السطر (Line Height)

النص العربي يحتاج مسافة سطرٍ أكبر نسبياً من الإنكليزي لأن الحركات والتشكيل يمتدان فوق وتحت الحرف. القيمة الموصى بها للنص العربي في الواجهات هي line-height: 1.8 كحدٍ أدنى، مقارنةً بـ 1.5 المعتادة للإنكليزي.

/* مسافات مُحسَّنة للنص العربي */
:lang(ar) {
  line-height: 1.8;          /* أوسع من الإنكليزي */
  letter-spacing: 0;         /* لا تُضيف تباعداً بين الحروف */
                             /* العربية متصلة — التباعد يُشوّه */
  word-spacing: 0.05em;      /* تباعد طفيف بين الكلمات فقط */
}

/* للعناوين الكبيرة: تخفيف الكثافة */
:lang(ar) h1,
:lang(ar) h2 {
  line-height: 1.5;          /* أضيق من النص العادي للعناوين */
  font-weight: 700;          /* الخط الثقيل أوضح في العربية */
}

الهامش حول العناصر التفاعلية

الأزرار والروابط في الواجهة العربية تحتاج مساحةً داخليةً (padding) أوسع من نظيرتها الإنكليزية، لأن الكثافة البصرية للنص العربي تجعل الزر يبدو “مزدحماً” بنفس المساحة التي تبدو فيها مريحةً للزر الإنكليزي:

/* زر في واجهة ثنائية اللغة */
.btn {
  padding-block: 0.6em;          /* ارتفاع موحّد */
  padding-inline: 1.4em;         /* عرض افتراضي */
}

/* توسيع تلقائي للنص العربي */
:lang(ar) .btn {
  padding-inline: 1.8em;         /* أوسع للكثافة البصرية العربية */
  letter-spacing: 0;             /* تأكيد: لا تباعد بين الحروف */
}

الحركة والانتقالات البصرية في RTL

الحركة (Animation) لها اتجاه، وهذا الاتجاه يؤثر على شعور المستخدم بالسيولة أو الانقطاع. في LTR، الحركة الطبيعية “للأمام” هي الانزلاق من اليمين إلى اليسار (مثل فتح درجٍ جديد). في RTL، المنطق يُعكس، لكن ليس دائماً:

حركة التحميل (Skeleton Loading) تستحق توقفاً خاصاً: أغلب مكتبات الـ CSS تُنشئ الحركة البريقية (shimmer) من اليسار إلى اليمين افتراضياً. في الواجهة العربية، هذه الحركة تسير عكس اتجاه القراءة، هي لا تُسبّب خللاً وظيفياً، لكنها تُشعر المستخدم بانزعاجٍ بصريٍ خفي:

/* حركة skeleton افتراضية — تسير لليمين (خاطئة في RTL) */
@keyframes shimmer-ltr {
  from { background-position: -200% 0; }
  to   { background-position:  200% 0; }
}

/* حركة skeleton لـ RTL — تسير لليسار */
@keyframes shimmer-rtl {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

.skeleton {
  background: linear-gradient(
    90deg,
    #f0f0f0 25%,
    #e0e0e0 50%,
    #f0f0f0 75%
  );
  background-size: 200% 100%;
  animation: shimmer-ltr 1.5s infinite;
}

/* تطبيق الحركة الصحيحة في RTL */
[dir="rtl"] .skeleton {
  animation-name: shimmer-rtl;
}

خلاصةٌ وما يلي

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

القاعدة الجامعة: صمّم أولاً لمسار البصر، ثم للغة، ثم للكود. أما الترتيب العكسي — الكود ثم اللغة ثم ربما البصر — هو ما يُنتج واجهاتٍ صحيحةٍ تقنياً لكن مُربِكةٍ بصرياً.

في المقالات الثلاثة السابقة بنينا الأساس الكامل: كيف تُبرمج الواجهة (المقال الأول)، ما الذي لا تقلبه (المقال الثاني)، وكيف يرى المستخدم ما بناه (هذا المقال). الآن سنُطبّق كل ذلك في مشروعٍ حقيقي: تدقيق واجهةٍ مُقلَّبةٍ خطأً وإعادة ضبطها من البداية؛ وهو موضوع المقال الرابع والأخير.

المراجع والمصادر:

1. Pernice, K. (2017). F-Shaped Pattern of Reading on the Web — Nielsen Norman Group: nngroup.com
2. Alabdulkarim, L. et al. — Arabic Web Reading Patterns, Behaviour & Information Technology: tandfonline.com
3. إرشادات Material Design لتصميم واجهات RTL: Material Design — Bidirectionality
4. W3C — توطين اتجاهات الحركة في الواجهات ثنائية الاتجاه: W3C Internationalization
5. مقالنا السابق في هذه السلسلة: المكوّنات الصامدة: ما لا يُقلب في واجهات اليمين

— دليل هندسة واجهات اليمين —

المقال السابق: ٢- المكوّنات الصامدة: ما لا يُقلب في واجهات اليمين

المقال الحالي: ٣- علم النظر: كيف يقرأ المستخدم العربي الشاشة

المقال التالي: ٤- مشروع التدقيق: إصلاح واجهة قُلبت بشكل خاطئ

سلاسل مشابهة:
دليل معالجة النصوص الهجينة | دليل معايرة البيانات المالية | ورشة التوطين لتطبيقات الويب ٣.٠ والذكاء الاصطناعي

منصة ذي يزن © ٢٠٢٦