ما هو الجزء المرئي من الصفحة ولماذا هو مهم؟ (+10 أمثلة مقنعة)

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

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

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

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

هيا بنا نبدأ!

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

لا يزال هذا جزءًا من صناعة الصحف: عندما تشتري صحيفة من كشك ، لا يظهر سوى النصف العلوي من الصحيفة.

لهذا السبب تمت طباعة أهم أخبار اليوم في الجزء المرئي من الصفحة. يرغب الناشرون في جذب الانتباه وإغراء الناس بشراء أوراقهم!

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

تعتبر منهجية "الجزء المرئي من الصفحة" جزءًا من تصميم مواقع الويب أيضًا.

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

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

يصل الزوار إلى صفحتك على الويب بفترة انتباه قصيرة بشكل مدهش - حوالي 8 ثوانٍ .

تعرف على سبب أهمية التركيز على جذب انتباههم في أسرع وقت ممكن؟

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

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

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

في الواقع ، خلص تقرير MOVR إلى أن 11٪ من مستخدمي الجوال يبدأون في التمرير في غضون أربع ثوانٍ عند انتهاء تحميل صفحة الويب. إذا لم تنته الصفحة من التحميل ، فقد بدأ 9٪ في التمرير خلال أربع ثوانٍ على أي حال.

ولكن بغض النظر عن الجهاز الذي يستخدمه زوارك ، فمن الضروري أن توضح لهم على الفور سبب كون موقعك جديرًا باهتمامهم!

فيما يلي ثلاث اقتراحات للمساعدة في جعل محتوى الجزء المرئي من الصفحة أكثر قوة:

1. اجعل تصميم الويب الخاص بك سريع الاستجابة

تتجاوز أهمية تصميم الويب سريع الاستجابة الجوانب الجمالية أو اتباع "أهم اتجاهات تصميم الويب".

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

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

2. أضف عبارات مهمة تحث المستخدم على اتخاذ إجراء

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

هناك ثمانية أنواع مختلفة من CTAs ، ولكن أهمها:

• تقود الجيل
• زر "قراءة المزيد"
• اكتشاف المنتج

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

3. ضع المحتوى المهم في الجزء المرئي من الصفحة

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

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

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

يبحث المستخدمون عن المعلومات ذات الصلة بطلبات البحث الخاصة بهم.

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

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

لن تفيدك إضافة معلومات أو إعلانات أو أي شيء آخر قد يزعج تركيز الزائرين.

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

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

لكن انتظر ، ما مدى ضرر ذلك على مُحسّنات محرّكات البحث؟

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

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

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

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

1. Allbirds

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

لديهم أيضًا زرًا قابلاً للنقر لكل من "تسوق الرجال" و "تسوق النساء" ، مما يساعد المستخدمين في العثور على ما يبحثون عنه في أي وقت من الأوقات.

2. سيفورا

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

3. طحين الملك آرثر

يروج موقع King Arthur Flour المصمم بشكل جميل لمحتواه من الدرجة الأولى.

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

4. واربي باركر

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

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

5. Shopify

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

بمجرد وصول العميل المحتمل إلى صفحته المقصودة ، يتم توجيه انتباهه إلى الإجراء الذي يريده Shopify أن يتخذه.

6. OptiMonk

مثل Shopify ، يهدف محتوى الجزء المرئي من OptiMonk إلى إقناع الزوار بالتسجيل للحصول على حساب مجاني.

يسلط OptiMonk الضوء على الوعد الرئيسي ("أقوى النوافذ المنبثقة للتجارة الإلكترونية") والإثبات الاجتماعي في شكل جوائز ومراجعات Shopify.

7. Ahrefs

يتجنب تصميم الويب الخاص بـ Ahrefs استخدام الصور لصالح اللون الغامق والنسخة القصيرة لتقديم رسالة بسيطة: منتجهم هو كل ما تحتاجه "للحصول على مرتبة أعلى" و "الحصول على المزيد من الزيارات."

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

8. ثم التقيت بك

هذه الصفحة من Then I Met You هي واحدة من أفضل الصفحات المقصودة تصميمًا في هذه القائمة.

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

9. هابي بوكس ​​ستور

يهدف التصميم العلوي لمتجر Happy Box Store إلى تعريف زوار جدد بالعلامة التجارية. يؤدي زر الحث على اتخاذ إجراء إلى مزيد من التفاصيل حول منتجهم الأساسي: حزم الهدايا القابلة للتخصيص.

10. كوتن

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

الآن بعد أن ناقشنا قسم الجزء المرئي من الصفحة ورأينا بعض الأمثلة ، حان الوقت للحديث عن المنطقة الموجودة أسفل الجزء المرئي من الصفحة لمدة ثانية.

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

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

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

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

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

فيما يلي بعض درجات دقة الشاشة الأكثر شيوعًا التي يستخدمها مصممو الويب لصفحات الويب سريعة الاستجابة:

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

قرارات مواقع الويب القياسية لشاشات الجوال:

• 360 × 640
• 375 × 667
• 414 × 896
• 360 × 780
• 375 × 812

دقة موقع الويب القياسية لشاشات الكمبيوتر اللوحي:

• 768 × 1024
• 1280 × 800
• 800 × 128
• 601 × 962
• 962 × 601

دقة موقع الويب القياسية لشاشات الكمبيوتر المحمول:

• 1920 × 1080
• 1366 × 768
• 1440 × 900
• 1536 × 864
• 1024 × 768

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

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

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

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

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

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