التسلسل الهرمي البصري في تصميم مواقع الويب: إطار عمل عملي مع أمثلة
إطار عمل عملي للتسلسل الهرمي البصري في تصميم مواقع الويب. خمسة عناصر أساسية، وست صفحات هبوط حقيقية من Linear، Vercel، Stripe، Figma، Arc، وApple، وقائمة تدقيق Figma يمكنك تشغيلها في غضون عشرين دقيقة.
التسلسل الهرمي البصري في تصميم المواقع الإلكترونية هو الترتيب المدروس لانتباه الزائر على الصفحة. أنت من يحدد ما يُقرأ أولاً، وما يُقرأ ثانياً، وما يُقرأ فقط في حال بقاء الزائر. إما أن توجه الصفحة نظر الزائر عبر هذا التسلسل عمداً، أو أنها تشتت انتباهه إلى العنصر الأكثر بروزاً، فتخسر بذلك الصفحة التي تحتاجها.
يُبنى التسلسل الهرمي على خمسة عناصر أساسية: الحجم، والوزن، والمساحة، والتباين، والحركة. كل تقنية أخرى هي مزيج من هذه العناصر الخمسة. تُصيب معظم الصفحات في عنصرين وتُخطئ في ثلاثة، ولهذا تبدو الصفحات مزدحمة دون أن تُقرأ. الحل ليس في المزيد من التصميم، بل في ترتيب هذه العناصر وفقاً لمسار القراءة الذي تحتاجه الصفحة فعلياً، ثم استخدام كل عنصر منها لخدمة هذا المسار.
هذا المقال هو النسخة العملية لهذا الحل. خمسة محاور رئيسية، ست صفحات هبوط حقيقية من Linear، Vercel، Stripe، Figma، Arc، وApple مع توضيح التغييرات الهرمية الحالية، وثلاثة تقييمات قبل وبعد تُظهر الأخطاء الشائعة والحلول المُطبقة، وقائمة تدقيق Figma يُمكنك تشغيلها على أي ملف عمل في غضون عشرين دقيقة قبل إرساله إلى فريق التطوير.
التسلسل الهرمي المرئي، التعريف العملي
التسلسل الهرمي المرئي هو الترتيب الذي يقرأ به المستخدم الصفحة. ليس ترتيب ظهور العناصر في DOM، ولا ترتيبها على شبكة التصميم، بل الترتيب الذي تقع عليه العين فعليًا.
التسلسل الهرمي المرئي هو الترتيب الذي يقرأ به المستخدم الصفحة. ليس ترتيب ظهور العناصر في DOM، ولا ترتيبها على شبكة التصميم، بل الترتيب الذي تقع عليه العين فعليًا.
يعني التسلسل الهرمي القوي أن تقع العين أولاً على الرسالة الرئيسية، ثم الرسالة الثانوية، وأخيراً المحتوى الداعم، بهذا الترتيب تحديداً، في كل مرة. أما التسلسل الهرمي الضعيف فيعني أن العين تتشتت وتتنقل بين العناصر المتنافسة، فتستقر على رابط في التذييل قبل العنوان، ويغادر الزائر الصفحة دون أن تحقق هدفها.
يختلف الهدف باختلاف الصفحة. فصفحة البطل في الصفحة الرئيسية تحتاج إلى أن تقع العين على عرض القيمة، ثم على دعوة لاتخاذ إجراء. وصفحة الأسعار تحتاج إلى أن تقع العين على المستوى الموصى به، ثم المستوى الأرخص، ثم الأسئلة الشائعة. أما مقالة المدونة فتحتاج إلى أن تقع العين على العنوان، ثم المحتوى، ثم الفقرة الأولى. تتغير إعدادات التسلسل الهرمي باختلاف الهدف، لكن وجود التسلسل الهرمي نفسه لا يتغير.
وهنا أيضاً تتوقف معظم المقالات التي تتناول هذا الموضوع. فهي تُعرّف التسلسل الهرمي وتتجاهله. العمل الحقيقي ليس في تعريفه، بل في اختيار وظيفة كل عنصر في صفحة معينة.
العناصر الخمسة الأساسية لبناء التسلسل الهرمي
الحجم، والوزن، والمساحة، والتباين، والحركة هي الأدوات الوحيدة التي تحتاجها. كل ما عدا ذلك هو مزيج من هذه العناصر الخمسة.
الحجم هو المقياس النسبي للعنصر مقارنةً بكل ما يحيط به. الوزن هو مدى ثقل العنصر ظاهريًا، ويُتحكم فيه من خلال وزن الخط، وعرض الخط، وكثافة التعبئة، أو الكتلة البصرية. المساحة هي مقدار الفراغ المحيط بالعنصر، أي الشكل السلبي الذي يسمح له بالظهور بشكل واضح وجذاب. التباين هو الفرق في اللون، أو القيمة، أو التشبع بين العنصر وخلفيته. الحركة هي ما إذا كان العنصر سيظهر بشكل متحرك أو يتفاعل مع المحتوى، وكيفية حدوث ذلك.
كل قرار يتعلق بالتسلسل الهرمي هو ضبط لواحد أو أكثر من هذه العناصر الخمسة. العنوان أكبر من نص المحتوى، وهذا يمثل الحجم. زر الدعوة إلى اتخاذ إجراء مكتوب بخط ثقيل، وهذا يمثل الوزن. يحتوي العنصر الرئيسي على 80% من المساحة البيضاء، وهذا يمثل المساحة. زر الدعوة إلى اتخاذ إجراء برتقالي ساطع على خلفية داكنة، وهذا يمثل التباين. يظهر العنوان بشكل متحرك قبل نص المحتوى بقليل، وهذا يمثل الحركة.
يكمن الخطأ الشائع في تصميم الصفحات في تطبيق جميع العناصر الخمسة دفعة واحدة. كل شيء كبير، كل شيء بخط عريض، كل شيء محاط بمساحة، كل شيء ذو تباين عالٍ، وكل شيء يتحرك. يختفي التسلسل الهرمي بمجرد أن تتشارك جميع العناصر نفس الأهمية. يكمن الحل في اختيار العناصر المناسبة لكل عنصر، مع الحرص على ترك العناصر الأخرى محايدة.
قاعدة مفيدة: يجب ألا يتجاوز ترتيب كل عنصر في الصفحة عنصرين. العنوان الرئيسي كبير وذو تباين عالٍ. تم. زر الدعوة إلى اتخاذ إجراء بارز وذو تباين عالٍ. تم. النص الداعم محايد في جميع العناصر. تم. الآن، تتمتع الصفحة بتسلسل يسهل على العين تتبعه.
الحجم يحدد أول ما يُقرأ
أكبر عنصر في الصفحة هو أول ما تقع عليه العين، لذا يجب أن يكون العنصر الأكبر هو ما ترغب الشركة في قراءته أولاً.
تعرف معظم فرق العمل هذا نظرياً، لكنها تتجاهله عملياً. يجعلون الشعار أكبر عنصر لأن فريق العلامة التجارية طلب ذلك. يجعلون شريط التنقل العنصر الأكبر لأنه يحتوي على أكبر عدد من الروابط، ويجب أن يتسع لها. ويجعلون صورة البطل العنصر الأكبر لأن المصور طلب مبلغًا كبيرًا مقابلها. لا يعكس أي من هذه القرارات ما يحتاج الزائر إلى قراءته أولًا.
الحل واضح تمامًا. عنوان البطل، أو عرض القيمة، أو زر الدعوة الرئيسي، بحسب الصفحة، هو العنصر الأكبر بفارق واضح. ليس أكبر قليلًا، بل أكبر بشكل ملحوظ. كبير لدرجة أنه لا يوجد عنصر آخر في نافذة العرض الأولى ينافسه على القراءة الأولى.
يفعل موقع Linear هذا في صفحة الميزات. العنوان ضخم، والنص الداعم صغير، وشريط التنقل صغير، والشعار صغير. هناك محتوى واحد يستحوذ على القراءة الأولى، وتقع عليه العين قبل اكتمال تحميل الصفحة. قارن ذلك بصفحة رئيسية نموذجية لشركة برمجيات كخدمة (SaaS) حيث يكون العنوان وشريط التنقل وصورة البطل متقاربة في الحجم. تنقسم العين، ويتشتت مسار القراءة.
الحجم نسبي أيضًا. عنوان رئيسي بحجم 48 بكسل على صفحة لا يتجاوز حجم نصها 16 بكسل يُعدّ ملفتًا للنظر. أما عنوان رئيسي بحجم 48 بكسل على صفحة لا يتجاوز حجم نصها 28 بكسل فلا يُعدّ كذلك. النسبة هي ما يُحدد الترتيب، وليس العدد المطلق. لذا، احرص على أن تكون نسبة حجم الخط العريض إلى حجم النص الرئيسي 2.5 على الأقل، ويفضل أن تكون 3 أو أكثر، في العنصر الرئيسي لأي صفحة هبوط.
الوزن يُفرّق بين العناصر الرئيسية والثانوية
الوزن هو المعيار الثاني، وهو ما يُؤدي إلى فشل معظم الصفحات دون أن تشعر، حيث يتم التعامل مع الخط العريض كعنصر تزييني بدلًا من كونه نظامًا للترتيب.
الخط العريض أداة لتحديد التسلسل الهرمي. فهو يُشير للعين إلى أن هذا العنصر يحتل مرتبة أعلى من العناصر العادية المجاورة له. بمجرد أن تحتوي الصفحة على نص عريض في ثلاث فقرات مختلفة، جميعها متساوية تقريبًا في الأهمية، ينهار مؤشر الترتيب. يصبح الخط العريض مجرد عنصر شكلي، وليس عنصرًا للترتيب. وتتوقف العين عن الوثوق به.
استخدم الوزن كنظام ترتيب صارم. اجعل الوزن الأكبر مُخصصًا لأهم عنصر في الصفحة. وزن أخف قليلاً للعنصر الثانوي. وزن عادي للنص الداعم. لا يُستخدم الخط الغامق داخل النص الأساسي إلا إذا كانت العبارة المكتوبة بخط غامق أهم من الجملة المحيطة بها، وهو أمر نادر.
يُطبّق Stripe هذا الأمر بانضباط. انظر إلى أي صفحة هبوط من Stripe. العنوان الرئيسي بارز. النص الداعم عادي. يكاد يخلو النص الأساسي من الخط الغامق. تُقرأ الصفحة بالترتيب الذي يريده Stripe، ويؤدي التحكم في وزن الخط معظم العمل دون أن يبدو مُبالغًا فيه.
لا يقتصر وزن الخط على الطباعة فقط. زر الحث على اتخاذ إجراء (CTA) له وزن بصري أكبر من العناصر المحيطة به، وذلك من خلال لون التعبئة، أو سُمك الإطار، أو الظل. فئة التسعير المميزة لها وزن بصري أكبر من الفئات المحيطة بها، وذلك من خلال خلفية داكنة أو إطار أكثر سُمكًا. المبدأ واحد: كلما زاد الوزن، ارتفع الترتيب.
خطأ شائع: يلجأ المصممون إلى استخدام الخط الغامق داخل الفقرات "لإبراز" العبارات الرئيسية. معظم هذه العناصر المميزة ليست في الواقع ذات أهمية أكبر، بل هي مجرد تأكيد متوتر. بإزالتها، يصبح النص أكثر وضوحًا، وتستعيد العبارات المهمة المكتوبة بخط عريض مكانتها.
المساحة هي الأداة المهملة
المساحة البيضاء ليست فارغة، بل هي الشكل السلبي الذي يمنح كل عنصر آخر مكانته.
تُصنّف المساحة العناصر حسب عزلتها. العنصر الذي يحيط به أكبر مساحة فارغة يُعتبر الأهم، بغض النظر عن حجمه أو أهميته. العنوان الصغير في منتصف مساحة عرض فارغة يُعتبر العنصر الرئيسي. أما العنوان الكبير المزدحم بجوار قائمة التنقل والشعار وصورة الغلاف، فيُعتبر واحدًا من أربعة عناصر متنافسة.
صفحات منتجات Apple هي مثال يُحتذى به. غالبًا ما تكون صورة الغلاف في صفحة منتج iPhone صورة واحدة مع تعليق قصير أسفلها، محاطة بمساحة فارغة. العنصر الذي يحصل على أكبر مساحة هو الذي يجذب انتباه القارئ، وApple يفوز دائمًا في كل صفحة. المنتج هو العنصر الأساسي، وكل ما عداه عناصر داعمة، ويؤدي عامل المساحة الدور الأكبر.
ترفض معظم الصفحات ترك مساحة فارغة. فهناك دائمًا شعار إضافي لشهادة عميل، وميزة إضافية للإشارة إليها، ودعوة ثانوية إضافية لاتخاذ إجراء. كل إضافة تُؤثر سلبًا على ترتيب الصفحة. فالعنصر الذي كان يجذب الانتباه بمعزل عن غيره يُنافس الآن الإضافة الجديدة، مما يُضعف تأثيره.
يكمن الحل في ترك مساحة عرض كبيرة فارغة. يجب أن تحتوي الصفحة الرئيسية على مساحة فارغة لا تقل عن 60%، ويفضل 70% أو أكثر، مع وجود الرسالة الرئيسية في مكان بارز في وسط أو يسار هذه المساحة الفارغة. إذا لم تكن الصفحة الرئيسية مُريحة مع هذه المساحة الكبيرة، فهذا يعني أن الفريق لم يثق بعد في هذا العامل.
تؤثر المساحة أيضًا داخل العناصر. ارتفاع سطر النص، والمسافة بين الأقسام، والهوامش داخل البطاقات، والمسافة بين العنوان والنص الداعم له. كل هذه العوامل تُؤثر على ترتيب العنصر بالنسبة لما يحيط به. يُشير تقارب أعمدة النص مع تباعد واسع بين الفقرات إلى أن هذه الفقرة وحدة واحدة، بينما الفقرة التالية وحدة مختلفة. أما تباعد أعمدة النص مع تباعد واسع بين الفقرات فيُشير إلى أن النص كله عبارة عن جدار متصل، مما يُصعّب تحديد ترتيبه.
التباين يُجبر العين على التركيز
التباين هو ما يُحوّل الصفحة التي يُمكن للمستخدم قراءتها إلى صفحة لا يستطيع التوقف عن قراءتها.
يعمل التباين على ثلاثة محاور. تباين القيمة هو الفرق في درجة سطوع العنصر وخلفيته، وهو العامل الرئيسي في تباين لوني سهل الوصول إليه والذي يتحكم بشكل مباشر في سهولة القراءة. تباين اللون هو الفرق في درجة اللون بين العنصر ومحيطه، وهو العامل الذي يجعل زر الحث على اتخاذ إجراء بارزًا على خلفية الصفحة. تباين التشبع هو الفرق بين الألوان الزاهية والهادئة، وهو العامل الذي يُبرز لونًا واحدًا مميزًا على خلفية ألوان باهتة.
زر الحث على اتخاذ إجراء الرئيسي في Stripe هو لون واحد عالي التشبع على خلفية صفحة منخفضة التشبع. تلفت العين الانتباه فورًا لأنها العنصر الوحيد المشبع بالألوان في كامل مساحة العرض. Linear يفعل الشيء نفسه بزر بنفسجي ساطع واحد على خلفية أحادية اللون تقريبًا. لا يُعد أي من هذين الزرين أكبر عنصر، ولا أثقله. يجذبان الانتباه لأنهما العنصران الأعلى تباينًا في الصفحة، ببساطة.
خطأ شائع: صفحات تحتوي على خمسة أو ستة ألوان مشبعة تتنافس على جذب الانتباه. زر أخضر، وحالة خطأ حمراء، ولون رابط أزرق، وتمييز برتقالي، ولمسة وردية على الصورة الرئيسية. كل لون يسعى لجذب العين، فتتوقف العين عن محاولة ترتيبها. اختر لونًا مميزًا واحدًا، واستخدمه لغرض واحد (عادةً الزر الرئيسي)، وخفف تشبع الألوان الأخرى.
للتباين حد أدنى أيضًا. النص الأساسي الرمادي على خلفية رمادية داكنة قليلًا لا يجذب الانتباه ولا يُلبي متطلبات سهولة الوصول. اجعل نسبة التباين 7:1 على الأقل للنص الأساسي و4.5:1 لعناصر واجهة المستخدم. دون تجاوز هذه العتبات، يتوقف تأثير التباين عن تعزيز ترتيب العناصر ويبدأ في التسبب بالإرهاق.
الحركة تُنهي التسلسل
الحركة هي الأداة الأخيرة، والأكثر إساءةً للاستخدام، لأن معظم الفرق تتعامل معها كعنصر تزييني بينما هي في الواقع إشارة توجيهية.
العين مُبرمجة على تتبع الحركة. أي عنصر متحرك يكون لفترة وجيزة العنصر الأعلى ترتيبًا في الصفحة، بغض النظر عن حجمه أو وزنه أو مساحته أو تباينه. هذه قوة كبيرة لأداة واحدة، ولهذا السبب تُعد الحركة أسهل الأدوات التي يُمكن إساءة استخدامها. الصفحة التي يظهر فيها كل عنصر تدريجيًا، وينزلق للأعلى، وينبض عند تمرير المؤشر فوقه، هي صفحة ذات حركة ثابتة، مما يعني أن الحركة لم تعد تُعزز ترتيب أي عنصر.
استخدم الحركة باعتدال وعلى العنصر ذي الأولوية القصوى فقط. عنوان الصفحة الرئيسي يتحرك للداخل. زر الدعوة لاتخاذ إجراء له حالة عند تمرير المؤشر فوقه. النص الداعم ثابت. تنجذب العين أولاً إلى العنوان لأنه العنصر المتحرك، ثم إلى زر الدعوة لاتخاذ إجراء عند اقتراب المؤشر، ويبقى مسار القراءة كما هو.
تستخدم الصفحة الرئيسية لموقع Vercel الحركة كأداة أساسية في التسلسل الهرمي. يتحرك العنصر الرئيسي بتسلسل مدروس، حيث يبدأ بالعنوان، ثم النص الداعم، ثم زر الدعوة لاتخاذ إجراء، ويبقى باقي الصفحة ثابتًا في الغالب حتى يبدأ المستخدم بالتمرير. الحركة هي التسلسل. عند انتهاء الزائر من مشاهدة حركة العنصر الرئيسي، يكون قد قرأ الصفحة بالترتيب الذي أراده موقع Vercel.
يُعدّ هذا قيدًا مفيدًا. يجب تقييد الحركة بعنصر واحد لكل نافذة عرض، بالإضافة إلى حالات التفاعل (التمرير، التركيز، التفعيل) على زر دعوة لاتخاذ إجراء رئيسي واحد. إذا تحرك أكثر من عنصر في الوقت نفسه، فلن تُحسّن الحركة من ترتيب العناصر، بل ستُضفي عليها مظهرًا جماليًا، وستشعر الصفحة بعدم الارتياح دون توجيه العين إلى أي مكان محدد. يتكامل مفهوم الحركة كأداة للتصنيف بشكل طبيعي مع منهجية مبادئ تصميم الحركة، حيث يُجيب كل عنصر رسومي على سؤال بدلًا من مجرد ملء الوقت.
ست صفحات هبوط حقيقية، مع شروح توضيحية
لا يُعتدّ بالإطار إلا إذا صمد أمام اختبار الصفحات المنشورة، لذا إليكم ست صفحات قيد الإنتاج حاليًا.
يتميز كل تحليل بالإيجاز والوضوح. يوضح التحليل دور كل صفحة في كل عنصر، ومواطن قوتها، ومواطن ضعفها. لا توجد صفحة مثالية، لكن جميعها تتجاوز المستوى الأساسي لصفحات هبوط SaaS، وهذا ما يجعلها جديرة بالدراسة.
Linear، التسلسل الهرمي كضغط
يتميز Linear بواحد من أنظف التسلسلات الهرمية على الإنترنت، لأن كل عنصر يؤدي وظيفة واحدة محددة.
الحجم: عنوان رئيسي بحجم أربعة أضعاف حجم النص تقريبًا. الوزن: وزن ثقيل واحد في العنوان، ووزن عادي في باقي الصفحات. المساحة: مساحة فارغة بنسبة 70% في الصفحة الرئيسية، بدون أي رسومات توضيحية متنافسة. التباين: زر دعوة للعمل بلون بنفسجي ساطع على خلفية صفحة أحادية اللون تقريبًا. الحركة: ظهور تدريجي هادئ للعنوان الرئيسي، بدون أي حركة أسفل الجزء الظاهر من الصفحة.
تستقر العين على العنوان، ثم ترى النص المصاحب، ثم تجد زر الدعوة للعمل، ولا تقرأ بقية الصفحة إلا إذا بقي الزائر فيها. كل عنصر مُعاير بدقة. كل خيار يخدم مسار قراءة واحد.
أين تكمن المشكلة في Linear؟ شبكة العناصر أسفل العنوان الرئيسي تصبح أكثر كثافة منه، وتضعف إشارة الترتيب قليلًا عندما تنزل العين إلى أسفل الجزء الظاهر من الصفحة. تضييق نسبة الحجم في تلك الشبكة من شأنه أن يُوسّع نطاق ظهور العنوان الرئيسي إلى أسفل الصفحة.
Vercel، التسلسل الهرمي كحركة
Vercel يستخدم الحركة كعنصر أساسي في التسلسل الهرمي، وهو ناجح لأن العناصر الأربعة الأخرى هادئة عمدًا.
الحجم: عنوان الصفحة الرئيسي كبير لكن ليس ضخمًا. الوزن: وزن عادي، ليس ثقيلاً. المساحة: واسعة، ليست مفرطة. التباين: منخفض، أغلبه تدرجات رمادية حتى زر الدعوة لاتخاذ إجراء. الحركة: بارزة. يتحرك العنصر الرئيسي بتسلسل مدروس يُرتب المحتوى تدريجيًا من خلال الحركة، بينما تُكافئ بقية الصفحة التمرير برسوم متحركة تظهر على شبكة بينتو أسفله.
ينجح هذا التصميم لأن العناصر الأخرى مُقيدة بما يكفي للسماح للحركة بالقيام بدورها. لو كان العنصر الرئيسي كبيرًا وثقيلًا وذو تباين عالٍ، لكانت الحركة تبدو مُتسرعة. ولأن الحالة الثابتة هادئة، تبدو الحركة كرقصات مُنظمة، وليست فوضوية.
أين تكمن المشكلة في توقيتات الرسوم المتحركة عند التحميل الأول؟ قد تُؤثر توقيتات الرسوم المتحركة عند التحميل الأول على المستخدمين الذين يُفضلون تقليل الحركة أكثر من اللازم. من شأن خيار بديل أكثر فعالية يُفضل تقليل الحركة أن يحمي ترتيب المحتوى لهذه الفئة من المستخدمين دون التأثير على سلاسة العرض لبقية المستخدمين.
Stripe، التسلسل الهرمي كضبط
Stripe التسلسل الهرمي غير مرئي في الغالب، وهو أعلى مستويات الإبداع.
الحجم: النسب واضحة ولكنها ليست مبالغ فيها. الوزن: وزن ثقيل واحد على العنوان، ووزن عادي في باقي الصفحات. المساحة: واسعة. التباين: منخفض في جميع أنحاء الصفحة، مع لون أساسي واحد عالي التشبع لزر الحث على اتخاذ إجراء. الحركة: شبه معدومة، باستثناء حركة خفيفة عند تمرير المؤشر فوق زر الحث على اتخاذ إجراء.
Stripe يتميز بالانضباط والضبط. بإمكانهم بذل المزيد من الجهد في كل عنصر، لكنهم يختارون عدم القيام بذلك. والنتيجة هي صفحة تُقرأ بالترتيب الذي يريده Stripe دون أن تبدو مُصممة بشكل مُفتعل. التسلسل الهرمي محسوس، وليس مرئيًا.
أين يُهدر Stripe المال؟ تُكدّس بعض صفحات المنتجات الصفحة الرئيسية بنماذج برمجية ورسوم توضيحية ونصوص داعمة في آنٍ واحد، مما يُضعف تأثير حجم الصفحة على سهولة القراءة. يُمكن استعادة ترتيب الصفحة الرئيسية من خلال الاكتفاء بعنوان رئيسي واحد مع زر دعوة لاتخاذ إجراء، ونقل النموذج البرمجي إلى نافذة العرض الثانية.
Figma، التسلسل الهرمي ككثافة
Figma تُقدّم محتوىً أكثر في الصفحة الرئيسية مقارنةً بمعظم منافسيها، مع الحفاظ على مسار قراءة واضح.
الحجم: عنوان رئيسي كبير على خلفية أصغر، مع تصغير عناصر واجهة المستخدم الخاصة بالمنتج. الوزن: عنوان رئيسي كبير، خلفية عادية، عناصر واجهة مستخدم خفيفة. المساحة: أقل من Linear أو Stripe، وأكثر من معظم منافسيها في مجال البرمجيات كخدمة (SaaS). التباين: عالٍ في العنوان الرئيسي على خلفية داكنة، وأقل في العناصر المحيطة. الحركة: خفيفة في معاينة المنتج، ولا حركة في العنوان الرئيسي نفسه.
Figma ينجح تصميم الصفحة الرئيسية لأن نسبة حجمها ووزنها مناسبة تمامًا لجذب انتباه القارئ حتى مع وجود محتوى إضافي يتنافس على مساحة العرض. أي خلل في هذه النسب سيؤدي إلى فقدان الصفحة الرئيسية لجاذبيتها. وبفضل هذه النسب، تتحمل الصفحة كثافة أكبر من المعتاد دون الإخلال بالتسلسل الهرمي.
أما الصفحة Figma، فتُعاني من مشكلة في التنقل. إذ يصبح التنقل مزدحمًا بصريًا مع وجود عناصر تنقل رئيسية متعددة، وعناصر تنقل فرعية، وزر للتواصل، وزر لتسجيل الدخول. إن دمج كل ذلك في زر دعوة للعمل رئيسي واحد في التنقل سيقلل من فرص الصفحة الرئيسية في المنافسة.
Arc، التسلسل الهرمي كتمرد
Arc يكسر عمدًا قواعد الحجم والوزن، ومع ذلك يظل التسلسل الهرمي فعالًا بفضل التباين والحركة.
الحجم: ليس كبيرًا. الوزن: ليس ثقيلًا. المساحة: متغيرة، وأحيانًا ضيقة. التباين: عالٍ في جميع أنحاء الصفحة، مع استخدام ألوان مشبعة متعددة. الحركة: كثيفة، مع تأثير المنظر البانورامي، وكشف العناصر عند التمرير، ورسوم متحركة.
يُعدّ العنصر الرئيسي في صفحة Arc مثالًا مُخالفًا للأسلوب التقليدي. فالعنوان ليس العنصر الأكبر، ولا الأبرز، ولا تقع عليه العين بالضرورة أولًا. تكمن فعالية الصفحة في أن Arc يجمع بين عنصرين: المألوف والمجهول، حيث يصل الزائر بدافع الفضول، وتجذب الحركة والتباين العين عبر تسلسل لا يعتمد على التسلسل الهرمي التقليدي.
هذا الاستثناء يُثبت صحة هذا الإطار. تستطيع Arc كسر القواعد لأن العلامة التجارية حصلت على إذنٍ بذلك من خلال التموضع، وتوقعات الجمهور، واستعداد الزوار للتمرير والاستكشاف. معظم العلامات التجارية لم تحصل على هذا الإذن، ولا ينبغي لها أن تفترض ذلك.
أين تكمن المشكلة في Arc؟ قد يُربك العنصر الرئيسي ذو الحركة الكثيفة الزوار الجدد الذين لا يعرفون ما هي Arc. من شأن عنصر أوضح يُقرأ أولًا أعلى الحركة أن يُساعد الوافدين الجدد دون إبعاد الجمهور الذي يثق بالعلامة التجارية بالفعل.
Apple، التسلسل الهرمي كمسرح
تُعدّ صفحات منتجات Apple مثالًا رائعًا على التسلسل الهرمي المُعتمد على التمرير، حيث يُهيمن كلٌ من المساحة والحركة على العرض.
الحجم: صور منتجات ضخمة، وخطوط بحجم لوحة إعلانية تقريبًا في النقاط الرئيسية، وصغيرة في باقي الصفحات. الوزن: خفيف في الغالب. المساحة: هائلة، غالبًا ما تشغل 80% أو أكثر من مساحة العرض. التباين: مُتعمّد، وغالبًا ما تكون صورة رئيسية على خلفية سوداء تقريبًا. الحركة: تُفعّل بالتمرير، حيث يظهر كل قسم تدريجيًا مع انتقال الزائر إلى أسفل الصفحة.
Apple تُعامل التمرير بأكمله كتسلسل هرمي. يُخصص لكل قسم قراءة واحدة فقط. ينتقل الزائر عبر تسلسل مُصمم مسبقًا في الصفحة. عند انتهاء الصفحة، يكون Apple قد روى قصة واحدة بالترتيب الذي أراده Apple.
أما Apple فيُهدر الموارد. قد تكون صفحات المنتج بطيئة على الأجهزة ذات المواصفات المنخفضة، ويتأثر تصميم الصفحة سلبًا بالاتصالات البطيئة، مما قد يُؤدي إلى تبسيط التسلسل الهرمي للزوار الذين لا يرون المحتوى النهائي. من شأن استخدام حل بديل أكثر فعالية في حال انخفاض سرعة الإنترنت حماية مسار القراءة للصفحات الأقل أهمية.
هل ترغب في موقع إلكتروني يتميز بمسار قراءة مُحدد لكل صفحة وليس مجرد تخمين؟ استئجار Brainy. تُقدم UXBrainy خدمات تدقيق التسلسل الهرمي وتصميم أنظمة متكاملة، بينما تُقدم AppBrainy واجهات مستخدم للمنتجات للفرق التي ترغب في تطبيق نفس المنهجية على تطبيق عملي.
ثلاث ملاحظات قبل وبعد
معرفة آليات تحسين ترتيب الصفحات شيء، وإصلاح صفحة حقيقية شيء آخر، لذا إليك ثلاثة أخطاء شائعة في ترتيب الصفحات مع حلولها الدقيقة.
أولاً: الصفحة الرئيسية ذات العناصر الخمسة المتنافسة. تحتوي الصفحة الرئيسية الشائعة في مواقع SaaS على عنوان رئيسي، وخلفية، وزر دعوة رئيسي، وزر دعوة ثانوي، وشريط شعار العميل، ورسم توضيحي رئيسي، جميعها في الجزء الأمامي من الصفحة. كل عنصر يستحوذ على انتباه القارئ، لكن لا أحد منها يتفوق على الآخر. الحل: اختر العنصر الأكثر أهمية (عادةً العنوان الرئيسي مع زر الدعوة الرئيسي)، واجعله العنصر الأهم في الجزء الأمامي من الصفحة، وانقل باقي العناصر إلى أسفل الصفحة. الآن، تصبح الصفحة الرئيسية واضحة وسهلة القراءة من النظرة الأولى.
ثانياً: الصفحة التي تستخدم الخط العريض في كل شيء. نص عريض في العنوان الرئيسي، وعبارات عريض في ثلاث فقرات، وعناوين فرعية عريض، وأزرار دعوة عريض، وشهادات عملاء عريض. لم يعد ترتيب العناصر يؤثر على ترتيب الصفحة. الحل: أزل كل ما هو عريض داخل فقرات المتن إلا إذا كانت العبارة المكتوبة بخط عريض أهم من الجملة المحيطة بها. أعد استخدام الخط العريض لعنصر واحد فقط في كل قسم. يعود نظام تحديد التباين إلى نظام تصنيف بدلاً من كونه مجرد مظهر.
ثالثًا: الصفحة ذات الألوان الخمسة المميزة: أزرار دعوة للعمل باللون الأخضر، ورسائل خطأ باللون الأحمر، وروابط باللون الأزرق، وتمييزات برتقالية، ورسومات رئيسية باللون الوردي. توقف نظام تحديد التباين عن تحسين ترتيب الصفحة وبدأ يُسبب إجهادًا للعين. الحل: اختر لونًا مميزًا واحدًا لزر الدعوة للعمل الرئيسي، وخفّض تشبع الألوان في باقي العناصر إلى تدرجات الرمادي أو إلى درجات باهتة من لون العلامة التجارية، مع الأخذ في الاعتبار أن "المظهر الجذاب" لا يعني بالضرورة "الترتيب الجيد". الآن، يُرتب زر الدعوة للعمل بشكل واضح، وتُظهر العلامة التجارية ثقة أكبر.
كل حل ليس إعادة تصميم. كل حل هو إزالة العناصر المتنافسة حتى تؤدي أنظمة تحديد التباين وظيفتها. معظم مشاكل التسلسل الهرمي هي في الواقع مشاكل حذف مُقنّعة بمشاكل تصميم.
قائمة تدقيق BRAND7 السريعة (٢٠ دقيقة)
طبّق هذه القائمة على أي ملف عمل قبل تسليمه، وستكتشف أخطاء التسلسل الهرمي التي قد تُرسل إلى مرحلة الإنتاج.
١. اختبار التركيز: ركّز على لوحة الرسم حتى تتلاشى التفاصيل. هل يبرز عنصرٌ ما بوضوح؟ إذا لم يكن كذلك، فالمشكلة تكمن في حجم أو تباين العنصر الرئيسي.
٢. اختبار القراءة الأولى: غطِّ الصفحة، ثم اكشفها لثانية واحدة، ثم غطِّها مرة أخرى. ماذا قرأت؟ إذا لم تكن الرسالة الرئيسية، فعدّل حجم ذلك العنصر وتباينه.
٣. نسبة حجم الخط: قِس حجم العنوان الرئيسي مقارنةً بنص الصفحة. إذا كانت النسبة أقل من ٢٫٥، فهذا يعني أن حجم الخط غير مناسب.
٤. جرد التباين: احسب عدد العناصر المكتوبة بخط عريض في الصفحة. إذا كان هناك أكثر من ثلاثة عناصر في كل نافذة عرض، فهذا يعني أن التباين يُستخدم للتزيين وليس للترتيب.
٥. عدّ تشبّع الألوان: احسب عدد ألوان التمييز المشبعة في الصفحة. إذا كان هناك أكثر من عنصرين، فإن التباين يُسبب إجهادًا للعين، وليس تحسينًا للترتيب.
-
نسبة المساحة البيضاء: قدّر المساحة الفارغة في نافذة عرض الصفحة الرئيسية. إذا كانت أقل من 60%، فإن مستوى التباين غير مُفعّل بشكل كافٍ.
-
عناصر الحركة: احسب عدد العناصر المتحركة عند التحميل الأول. إذا كان هناك أكثر من عنصرين، فإن الحركة لم تعد تُحسّن الترتيب.
-
تباين زر الدعوة إلى اتخاذ إجراء: تحقق من لون زر الدعوة إلى اتخاذ إجراء الرئيسي مقابل خلفيته. إذا كانت نسبة التباين أقل من 4.5:1، فقم بتعديلها قبل النشر.
-
تباين نص الصفحة: تحقق من تباين نص الصفحة مقابل خلفيته. إذا كانت النسبة أقل من 7:1، فإن الصفحة تُعاني من صعوبة في القراءة.
-
ارتفاع السطر: تحقق من ارتفاع سطر نص الصفحة. إذا كان أقل من 1.5 ضعف حجم الخط، فإن الصفحة تبدو كجدار.
-
تباعد الأقسام: تحقق من المسافة بين الأقسام الرئيسية. إذا كانت الأقسام متداخلة، فإن مستوى التباين لا يفصل بينها بشكل كافٍ.
-
اختبار تقليص حجم الصفحة على الأجهزة المحمولة. افتح الملف بعرض الهاتف المحمول. هل يبقى التسلسل الهرمي كما هو، أم يتقلص حجم العنوان ليصبح مساويًا لحجم النص؟ إذا كان الاحتمال الثاني هو الصحيح، فيجب تعديل حجم الخط ليتناسب مع الهاتف المحمول.
الصفحة التي تجتاز هذه الاختبارات الاثني عشر تتمتع بتسلسل هرمي وظيفي. لن تكون مثالية، ولكنها لن تكون محرجة أيضًا، وسيكون مسار القراءة الذي يحتاجه العمل واضحًا للزائر منذ اللحظة الأولى.
الأسئلة الشائعة
ما هو التسلسل الهرمي البصري في تصميم المواقع؟
التسلسل الهرمي البصري في تصميم المواقع هو الترتيب المدروس لانتباه الزائر على الصفحة، بحيث يقرأ الرسالة الرئيسية أولًا، ثم الرسالة الثانوية، وأخيرًا المحتوى الداعم، بهذا الترتيب تحديدًا. ويعتمد على خمسة عناصر أساسية: الحجم، والوزن، والمساحة، والتباين، والحركة. التسلسل الهرمي القوي يعني أن العين تتجه تلقائيًا إلى العنصر الرئيسي. أما التسلسل الهرمي الضعيف فيعني أن العين تتشتت بين العناصر المتنافسة، وتفشل الصفحة في إيصال رسالتها الأساسية.
كيف تُنشئ تسلسلًا هرميًا بصريًا على موقع ويب؟
اختر العنصر الأهم في كل صفحة الذي ترغب الشركة في قراءته أولًا، ثم ركّز على عنصرين من العناصر الخمسة (الحجم، والوزن، والمساحة، والتباين، والحركة) مع الحفاظ على العناصر الأخرى محايدة. كرر العملية مع العنصر الثانوي مع تقليل تأثير العنصر الأول. اترك المحتوى الداعم محايدًا في جميع العناصر. والنتيجة هي صفحة يسهل فيها تتبع مسار القراءة، وهو ما يتطلبه تصميم الصفحات الجيدة.
ما هي أهم مبادئ التسلسل الهرمي البصري؟
العناصر الخمسة هي: الحجم، والوزن، والمساحة، والتباين، والحركة. يُحدد الحجم العنصر الأهم بجعله الأكبر حجمًا. يفصل الوزن العنصر الأساسي عن الثانوي بتخصيص مساحة كبيرة للعنصر الأعلى أهمية. تُحدد المساحة العنصر الأهم بجعله الأكثر وضوحًا أو قيمة في الصفحة. تُكمل الحركة التسلسل بكونها العنصر المتحرك الوحيد، وتُستخدم باعتدال. يجب أن تعمل العناصر الخمسة جميعها معًا، لا بشكل منفصل.
لماذا يُعدّ التسلسل الهرمي البصري مهمًا في صفحات الهبوط؟
لصفحات الهبوط مهمة واحدة: إيصال رسالة واحدة وحثّ المستخدم على اتخاذ إجراء واحد. بدون تسلسل هرمي، يتشتت انتباه الزائر بين عناصر متنافسة، وتتجزأ الرسالة، ولا يتم اتخاذ الإجراء المطلوب. مع وجود التسلسل الهرمي، يقرأ الزائر القيمة المُضافة، ويجد زر الدعوة إلى اتخاذ إجراء، ويُجري العملية بالترتيب الذي صُممت الصفحة من أجله. كل نسبة مئوية من زيادة التحويل في صفحة الهبوط تعتمد على مدى وضوح ترتيب عناصر الصفحة، وهذا تحديدًا ما صُممت روابط مبادئ تصميم صفحات الهبوط الجيدة لتحقيقه.
ما الفرق بين التسلسل الهرمي البصري وهيكلة المعلومات؟
التسلسل الهرمي البصري هو كيفية قراءة العين لصفحة أو شاشة واحدة. أما هيكلة المعلومات فهي كيفية تنظيم المحتوى والتنقل عبر الموقع بأكمله. التسلسل الهرمي خاص بمنطقة عرض محددة، بينما هندسة المعلومات شاملة لتجربة المستخدم. قد يحتوي موقع ذو هندسة معلومات جيدة على صفحات ذات تسلسل هرمي سيئ، والعكس صحيح. كلاهما مهم، وكلاهما مجالان منفصلان يجب تصميمهما بعناية.
النمط الذي تغفله معظم الصفحات
الصفحة ذات التسلسل الهرمي القوي ليست صفحة مليئة بخيارات التصميم، بل هي صفحة يخدم فيها كل خيار تصميمي مسار قراءة واحد.
يكمن الخطأ الذي ترتكبه معظم فرق التصميم في التعامل مع التسلسل الهرمي كمسألة أسلوبية. يعتقدون أن التسلسل الهرمي القوي يعني مزيدًا من الجرأة، ومزيدًا من الألوان، ومزيدًا من الحركة، ومزيدًا من الجاذبية البصرية. لكن العكس هو الصحيح. التسلسل الهرمي القوي عادةً ما يكون تبسيطيًا. إنه الاستعداد لترك منطقة العرض فارغة في الغالب، واستخدام وزن عنصر واحد فقط لكل قسم، وحصر لوحة الألوان المميزة بلون مشبع واحد، والحد من الحركة إلى عنصر واحد في كل طية. والنتيجة هي صفحة تُقرأ بترتيب مدروس دون أن تبدو مُصممة بشكل مُفتعل.
العلامات التجارية التي تُطبّق تسلسلًا هرميًا قويًا (مثل BRAND21 وBRAND33 وBRAND43) استوعبت هذا المبدأ تمامًا. أما العلامات التجارية التي تُطبّق تسلسلًا هرميًا أضعف، فعادةً ما تقع في فخ التراكم، حيث تُضيف كل مراجعة ربع سنوية عنصرًا جديدًا إلى الصفحة الرئيسية، وعبارة بارزة جديدة إلى متن الصفحة، ولونًا جديدًا إلى زر الحث على اتخاذ إجراء، مما يُطغى على مسار القراءة الأصلي. نادرًا ما يكون الحل إعادة تصميم الصفحة، بل هو تدقيق شامل، وإزالة العناصر غير المرغوب فيها، والعودة إلى منهجية التركيز على كل عنصر على حدة.
إذا كان فريقك يُقدّم صفحاتٍ يكون مسار قراءتها غير واضح، وتتنافس فيها جميع العناصر على جذب الانتباه، ولا تتحسن فيها معدلات التحويل مهما أجريت من اختبارات A/B، فإن المشكلة الأساسية غالبًا ما تكون مشكلة في التسلسل الهرمي. يتم استخدام العناصر بشكل خاطئ، وتتنافس فيما بينها، وتُطبّق الكثير من المهام في وقت واحد. قم بتجريد الصفحة إلى خمسة عناصر مستقلة: الحجم، والوزن، والمساحة، والتباين، والحركة. اضبط كل عنصر وفقًا لمسار القراءة الذي يحتاجه العمل، وستعود الصفحة للعمل بكفاءة.
إذا كنت ترغب في موقع إلكتروني يتميز بمسار قراءة مدروس لكل صفحة وهيكل هرمي يؤدي وظيفته على جميع أحجام الشاشات، استئجار Brainy. تقدم UXBrainy خدمات تدقيق الهيكل الهرمي، وأنظمة التصميم، ومشاريع تصميم مواقع ويب متكاملة مع دمج الهيكل الهرمي في المواصفات. كما تقدم AppBrainy واجهات مستخدم للمنتجات بنفس الدقة والمنهجية المطبقة على واجهات المستخدم بعد تسجيل الدخول. الإطار الموضح في هذه الصفحة هو ما نستخدمه في كل مشروع، على كل صفحة، قبل إطلاق أي منتج.
Want a site where every page has a deliberate read path and not a guess? Brainy ships web design and product UI through UXBrainy and AppBrainy, with hierarchy audits baked into every project.
Get Started
