وجدت مجموعة Nielsen Norman Group أن المستخدمين يقضون 57% من وقت مشاهدة الصفحة في الجزء العلوي (above the fold)، مع انخفاض الانتباه بشكل حاد بعد الشاشة الأولى. بالنسبة لصفحات الهبوط، هذا الرقم أكثر حدة — حيث يقرر الزوار البقاء أو المغادرة في غضون 2-3 ثوانٍ فقط.
هذا يعني أن تصميم الجزء العلوي من الصفحة هو حرفياً فرصتك الوحيدة للاحتفاظ بالزائر.
ما تكشفه دراسات تتبع حركة العين
حددت دراسات تتبع حركة العين التي أجراها Djamasbi et al. (2010) العناصر التي تجذب الانتباه في الجزء العلوي من الصفحة:
| العنصر | متوسط وقت التثبيت | التثبيت الأول |
|---|---|---|
| الصورة الرئيسية / العنصر البصري | 1.2 ثانية | 67% ينظرون هنا أولاً |
| العنوان الرئيسي | 0.8 ثانية | 22% ينظرون هنا أولاً |
| زر الـ CTA | 0.4 ثانية | 3% ينظرون هنا أولاً |
| شريط التنقل | 0.3 ثانية | 8% ينظرون هنا أولاً |
يجذب العنصر البصري الرئيسي أكبر قدر من الانتباه، لكن التحويل يحدث عند زر الـ CTA. التحدي يكمن في تصميم مسار بصري يبدأ من الصورة الرئيسية ← العنوان ← زر الـ CTA.
العناصر الخمسة لجزء علوي عالي التحويل
1. عنصر بصري رئيسي يثير الرغبة
يجب أن تظهر الصورة الرئيسية النتيجة، وليس المنتج نفسه. أثبت Adaval & Wyer (1998) أن الصور التي تصور الحالات النهائية (عميل سعيد يستخدم المنتج) تولد نية شراء تزيد بمرتين عن صور المنتج وحده.
2. العنوان كوعد بقيمة فريدة
وفقاً لأبحاث كتابة نصوص التحويل من Copyhackers، فإن العناوين التي تحاكي الحوار الداخلي للزائر تتفوق على عروض القيمة العامة بمقدار 3-5 أضعاف. يجب أن يكمل العنوان الجملة: "أحتاج إلى شيء من شأنه أن..."
3. التسلسل الهرمي البصري الذي يوجه العين
تظهر الأبحاث التي أجراها Faraday (2000) حول التسلسل الهرمي البصري في تصميم الويب أن الحجم والتباين والموضع تخلق "ترتيباً للقراءة" يمكن قياسه وتحسينه. يجب أن يكون التدفق: المرساة البصرية ← المشكلة/الحل ← زر الـ CTA.
4. زر CTA بتباين أقصى
وجد Ling & van Schaik (2006) أن أزرار الـ CTA ذات التباين اللوني الأعلى مقارنة بخلفيتها حصلت على نقرات أكثر بنسبة 21%، بغض النظر عن الألوان المستخدمة. الأمر يتعلق بالتباين، وليس باللون نفسه.
5. الدليل الاجتماعي في الجزء العلوي
إن وضع إشارة ثقة (عدد العملاء، التقييم، شريط الشعارات) في الجزء العلوي يقلل من تقييم المخاطر في قشرة الفص الجبهي للدماغ، كما هو موضح في Klucharev et al. (2009). سطر واحد مثل "موثوق به من قبل أكثر من 10,000 مسوق" يمكن أن يزيد التحويل بنسبة 15-20%.
اختبر صفحة الهبوط الخاصة بك
الصق رابط صفحة الهبوط الخاصة بك في FlowDx لترى بالضبط أين تذهب أعين الزوار. تكشف الخريطة الحرارية للانتباه ما إذا كان زر الـ CTA الخاص بك في "المنطقة الساخنة" أم أنه ضائع وسط الضجيج.
المراجع
- Nielsen Norman Group. Scrolling and Attention.
- Djamasbi, S. et al. (2010). Generation Y, web design, and eye tracking. Int. Journal of Human-Computer Studies.
- Klucharev, V. et al. (2009). Reinforcement learning signal predicts social conformity. Neuron.