هل تعلم أنه يمكن للمستخدم أن يكوّن ويشكّل فكرة حول موقعك خلال 50 ميلّي ثانية فقط من دخوله الموقع؟ نعم أي خلال وقت يساوي رمشة عين واحدة! فإما أن يعجبه موقعك من هذه النظرة الأولى ويكمل تصفح، أو لا يعجبه وينقر على زر الرجوع ببساطة. إذاً ما السرّ وراء بقائه؟ ببساطة، إنه ترتيب الواجهة وتصميم معلوماتها بشكل منظّم، فيما يُعرف في عالم كتابة تجربة المستخدم وتصميم المحتوى باسم “التسلسل الهرمي للمعلومات (Information Hierarchy)”. ما هو التسلسل الهرمي للمعلومات؟ هنا دليل شامل ومختصر حول ما يجب أن تعرفه عن هذا المصطلح.
ما هو التسلسل الهرمي للمعلومات؟
حسناً، لنمهّد للموضوع قليلاً: لا بدّ أنك دخلت تطبيقاً في إحدى المرات وشعرت بالارتباك الشديد بسبب ما رأيته. ربما لم تتمكن من تحديد ما يجب النقر عليه أولاً، أو لم تفهم علامَ يركّز التطبيق بالنسبة للمستخدمين، أو شعرت أنك لم تتمكن من فهم كيفية ارتباط العناصر المختلفة للتطبيق ببعضها البعض. أعتقد أنك شعرت وقتها بالإحباط واستسلمت في النهاية، وقلت لنفسك “لن أستخدم هذا التطبيق مرة أخرى أبداً”.
في هذه الحالة، يمكننا القول إن التطبيق غالباً يفتقر إلى تسلسل هرمي مرئي محدد للمعلومات. لأن بدون مؤشرات مرئية مرتّبة لا يمكن لواجهة المستخدم أن توجّهك إلى العناصر الأكثر أهمية أولاً أو تنقلك بسلاسة بين الأجزاء المختلفة من الواجهة. وهذا يجعل التطبيق صعب الفهم والتنقل. بينما عندما تكون عناصر الواجهة مرتبة بتسلسل هرمي مرئي واضح تتوجّه عين المستخدم إلى المكان الذي يجب أن ينظر إليه بالضبط ويتم إرشاده خطوة بخطوة عبر المعلومات الموجودة والمرتبة في التطبيق أو الموقع وهذا يقودنا إلى أهمية التسلسل الهرمي للمعلومات.
يُعرّف مصطلح التسلسل الهرمي (Hierarchy) بأنه الفرق في مستويات الأهمية بين مجموعات العناصر أو الأشخاص أو الأشياء. بالتالي يمكننا تعريف التسلسل الهرمي للمعلومات (Information Hierarchy) بأنه ترتيب العناصر والمعلومات وتقديمها بطريقة تشير إلى مستوى أهميتها. إنه تقنية بصريّة تساعد الإنسان عموماً في التنقل في الواجهات أو بما يراه منها بسهولة وفهم المحتوى بشكل أفضل. في مجالات تجربة المستخدم وواجهة المستخدم يعني الالتزام بتطبيق التسلسل الهرمي للمعلومات إنشاء بيئة رقمية حيث يمكن للمستخدمين فيها العثور بسهولة على ما يبحثون عنه في واجهة الاستخدام وبالتالي زيادة رضاهم عن الخدمة ومشاركتهم.
أهمية التسلسل الهرمي للمعلومات بحسب علم النفس
إذا حاولنا فهم علم النفس وراء كيفية استهلاك الأشخاص والمستخدمين لمحتوانا الرقمي يمكن أن تتشكل لدينا فكرة حول كيفية صياغة التسلسل الهرمي الفعّال للمعلومات في مواقعنا وتطبيقاتنا.
كيف ذلك؟
يجب أن تعرف أن المستخدم إذا لاحظ أن هناك جهد ذهني مطلوب أن يبذله لمعالجة المعلومات الظاهرة له في الواجهة فهذا يؤثر بشكل مباشر على تجربته وقد يخاف وببساطة يبحث عن محتوى أسهل أكثر ويحتاج جهداً أقل لمعالجته. ذلك لأن الواجهة التي تعرض معلومات كثيرة في وقت واحد تطغى على ذهن المستخدم مما يقلل من قدرته على المشاركة وقابلية الاستخدام (Usability).
ماذا نفعل؟
الحل الأول يكمن في اعتماد ومراعاة نمطَي F وZ في تصميم صفحات الويب لإنشاء تسلسل هرمي بصري للمعلومات. ولكن ما هو F & Z Pattern؟. لمن لا يعلم هناك طريقتان أو نمطان يكوّن من خلالهما المستخدم نظرته الأولية للمعلومات على الصفحة التي يقرأها (أي يمسح الصفحة بعينيه بدون قراءة بتركيز) وهما:
- النمط F والذي يعني أن المستخدم سيمسح معلومات الصفحة سريعاً من خلال العناوين الرئيسية والنقاط المهمة الواضحة في الصفحة. وبالتالي إذا رسمنا الطريق الذي ستسلكه عيناه في هذه الحالة سنرى أنه شكّل ما يشبه حرف F (طبعاً في خدمات الصفحات الإنجليزية، أما في العربية فهي F مقلوبة). ولذا هذا النمط شائع في الصفحات التي تحتوي على نصوص والكثير من المحتوى مثل المقالات والمدونات.
- أما النمط Z فيعني أن المستخدم سيمسح معلومات الصفحة بعينيه من اليسار إلى اليمين ثم نزولاً متوسطاً للصفحة ثم مرة أخرى من اليسار لليمين على شكل حرف Z (طبعاً هذا في الصفحات الإنجليزية وبالطبع يكون المسح بشكل Z مقلوبة في صفحات اللغة العربية). ولذا ترى هذا النمط شائعاً في مواقع الويب التي تتطلّب أنواع مختلفة من التفاعل فهو شائع في الصفحات التي لا تحتاج الكثير من المحتوى أو التمرير للأسفل مثل صفحات الهبوط. لذا نلاحظ في هذه الصفحات تركيز المصممين على وضع المعلومات الأساسية في الأماكن التي تتطلب أعلى قدر من الاهتمام مثل الزوايا العلوية ويضعون النقاط الأخرى التي تتطلب الاهتمام على طول الخطوط العلوية والسفلية.
إليك مثالَين يوضحان استخدامنا النمطين F وZ في موقعنا UX Writing بالعربية:
عناصر التسلسل الهرمي للمعلومات
إذاً بعدما عرّفنا سابقاً ما هو التسلسل الهرمي للمعلومات من الواضح أن هناك الكثير من العناصر التي تلعب دور رئيسي في تشكيله وإليك أهمها:
العناصر المرئية (Visual Elements)
عندما تزور موقعاً إلكترونياً أو منصة علامة تجارية للمرة الأولى، فإن أول ما يلفت انتباهك هو التصميم المرئي بما يحتويه من عناصر كبيرة الحجم بينما تَلحظ عينيك العناصر صغيرة الحجم فيما بعد. وهذه الآلية في التصميم المرئي ليست عبثية بل إن تلك العناصر الكبيرة مصممة بهذا الشكل لأنها الأهم في الصفحة وكمستخدم يجب أن تلتفت لها أولاً. هذا مثال بسيط على أهمية التسلسل الهرمي للمعلومات.
كما تلعب الألوان والتباين والطباعة أيضاً أدواراً مهمة في إنشاء تسلسل هرمي مرئي جذاب بصرياً حيث توضع الألوان الزاهية عادةً لجذب الانتباه ويمكن أن يجعل التباين العالي النص مقروء أكثر. ويمكن أن ترفع بعض الخيارات المطبعية أهمية النص أو تقلل منها. فعلى سبيل المثال لمَ ترى زر تسجيل الدخول بلون مختلف ساطع ملفت؟ انتبهت سابقاً لهذا التفصيل صحيح؟ لكن ربما لم تفكر فيه كثيراً.
ولكن ليس الحجم واللون فقط هما الأساس فالمسافة بين العناصر أيضاً ذات تأثير. من خلال تجميع العناصر المتشابهة بالقرب من بعضها البعض يساعدك التصميم على فهم كيفية ارتباط الأشياء ضمن الصفحة. على سبيل المثال يجعلك العنوان الموجود بالقرب من فقرة تعرف بأنها مرتبطة به والمسافة البيضاء حولها تميزها عن الأجزاء الأخرى من الصفحة. ولا ننسَ العناصر المرئية مثل الصور ومقاطع الفيديو التي تدعم كثيراً التسلسل الهرمي للمعلومات. يمكنها تقسيم النص أو تقديم سياق إضافي أو حتى قد يكون وجودها جزء محوري لجذب الانتباه إلى قطع المعلومات الرئيسية.
العناصر النّصّيّة (Textual Elements)
تلعب النصوص دوراً مهماً في توجيه المستخدمين عبر المعلومات الموجودة على موقع الويب أو في مواد العلامة التجارية. هناك أنواع مختلفة من النصوص مثل العناوين الرئيسية والعناوين الفرعية والنصوص الرئيسية. ولكل من هذه الأجزاء وظيفة معينة تسهم في ترتيب المحتوى بشكل منطقي ويسهّل التصفح على المستخدم.
تبرز العناوين الرئيسية (Headings) باعتبارها عناصر النص الأكثر وضوحاً على الصفحة. تعمل هذه الكلمات الكبيرة والمميزة بلونها الغامق كدلائل توجه المستخدمين إلى أقسام مختلفة من الصفحة أو منتج العلامة التجارية. نظراً لأنها عادةً ما تكون أول عناصر النص التي تُرى فيجب أن تكون كبيرة وسهلة الفهم.
تأتي العناوين الفرعية (Subheadings) في المرتبة التالية بعد الرئيسية من حيث الأهمية والحجم. تقسم هذه العناوين الأصغر حجماً المحتوى الموجود أسفل العناوين الرئيسية إلى مواضيع أكثر تحديداً من حيث المعلومات. حاول التفكير في العناوين الفرعية باعتبارها أفكار إضافية تقدم المزيد من التفاصيل حول ما يحتويه كل قسم. وهي تساعد المستخدمين على تحديد ما إذا كانوا سيقرؤون المزيد أو ينتقلون إلى منطقة أخرى من الصفحة.
يأتي النص الأساسي (Body Text) بعد العناوين الفرعية وفيه توجد جميع المعلومات التّفصيلية. ورغم أنه ليس جذاباً بصرياً مثل العناوين أو العناوين الفرعية إلا أنه ضروري لنقل المحتوى الرئيسي. يجب أن يكون واضحاً ومتسقاً في الأسلوب مما يسهّل على المستخدمين استيعاب المعلومات.
تنسيق النصوص (Text Formatting)
تُستخدم أدوات تنسيق النص مثل الخط العريض (Bold) والخطوط المائلة (Italics) والتسطير (Underlining) للتأكيد على الكلمات أو العبارات المهمة. ويجب استخدامها باعتدال لتسليط الضوء على النقاط الرئيسية دون التسبب في تشتيت انتباه المستخدم.
النصوص المصغّرة (Microcopy)
وهي أصغر عناصر النص مثل النصوص التوضيحية أسفل الصور (الكابشن) أو العبارات القصيرة التي تحثّ المستخدم على اتخاذ إجراء مثل “تصفّح المزيد” أو “اشترِ الآن”. ورغم أنها أقل بروزاً في الواجهة – كنصوص – لكنها توضح عناصر معينة ويمكن أن تشجع المستخدمين على اتخاذ إجراءات معينة مثل النقر فوق زر.
العناصر التفاعلية (Interactive Element)
تعتبر الأزرار (Buttons) والروابط (Links) بمثابة أدوات مساعدة في التنقل في التسلسل الهرمي للمعلومات. هي عناصر أو أجزاء الصفحة التي سينقر عليها المستخدمون ويتفاعلون معها. فهي توجه المستخدمين إلى أقسام أخرى ذات صلة أو موارد خارجية ويمكن أن يُحدث موقعها في الصفحة فرقاً كبيراً. لذا يجب وضعها في ترتيب منطقي يتوافق مع كيفية استخدامها والهدف منها.
كما يجب أن تكون النصوص المعبرة عن الأزرار والروابط واضحة ووصفيّة وتشير إلى ما يمكن للمستخدمين توقعه عند التفاعل. على سبيل المثال، يجب أن تحتوي القائمة الموجودة في أعلى الصفحة على الروابط الأكثر أهمية أولاً مثل الأزرار مثل “اشترِ الآن” أو “اتصل بنا” بحيث تكون سهلة الوصول ومُسمَّاة بوضوح. من خلال التفكير في كيفية تفاعل المستخدمين مع هذه العناصر يمكن الخروج بتصميم يسهّل عليهم تنفيذ أهدافهم. وهذا يحسّن التجربة الإجمالية للمستخدم ويساعد في إسعاده أكثر.
النقاط الرئيسية (Bullet Points) والقوائم المرقّمة (Numbered Lists)
النقاط الرئيسية أو القائمة النقطية والقوائم المرقمة هي من المحتوى المرئي المحبب على قلوب جميع المستخدمين لأنه يبسّط بيانات ومعلومات الفقرة مهما كانت معقّدة ويجعل المحتوى أكثر قابلية للمسح بالنظر. كما أنها طريقة للفصل بين الفقرات الطويلة إذا كنت تكتب مقالاً مثلاً.
المساحات البيضاء (White Space)
تفصل المساحات البيضاء المحتوى والأقسام والعناصر المختلفة مما يجعل المحتوى أكثر قابلية للقراءة وجذّاب بصرياً. لذا يمكن أن يعزز الاستخدام الصحيح للمساحة البيضاء تجربة المستخدم بشكل كبير. وعلى الرغم من ذلك أحياناً تُهمَل في التسلسل الهرمي للمعلومات.
العناصر الختامية والنهائية في التسلسل الهرمي للمعلومات. عادةً ما تحتوي على معلومات ثانوية أو تكميلية مثل تفاصيل التواصل مع العلامة التجارية والإشعارات القانونية وروابط وسائل التواصل الاجتماعي. وعلى الرغم من أنها ليست جزء محوري في التسلسل الهرمي إلا أن وجودها ضروري لتجربة مستخدم كاملة.
الأشرطة الجانبية والأدوات (Sidebars and Widgets)
يمكن اعتبار الأشرطة الجانبية والأدوات عناصر هامشية في التسلسل الهرمي للمعلومات. هذا لا يلغي أهميتها فهي تحتوي عادةً على ميزات أو معلومات إضافية مثل أشرطة البحث أو المنشورات الأخيرة أو الإعلانات. رغم أنها ليست جزء من المحتوى الرئيسي أو مكوّن أساسي في التسلسل إلا أنها تساهم في تجربة المستخدم الإجمالية ولا غِنى عنها أيضاً.
التسلسل الهرمي للمعلومات في مواقع الويب
في مواقع الويب يساعد تخطيط الصفحة (Page Layout) في ترتيب العناصر المرئية على الصفحة. عندما تفتح موقع إلكتروني يُطلق على أول جزء تراه (أي الجزء الذي يظهر أمامك قبل التمرير لأسفل) اسم “الطّية العلوية (Above the Fold)”. يمكن القول أن هذه المنطقة تسبه النافذة الأمامية للمتجر الذي نراه في الحقيقة فهي ما يجذب انتباه الأشخاص. لذا من المهم جداً وضع أكبر قدر من المعلومات المهمة هناك. يجب وضع العناوين الرئيسية الكبيرة وأزرار اتخاذ الإجراء المهمة مثل “اشتر ِالآن” أو وضع صور مثيرة للاهتمام في هذه المنطقة. يمكن ترتيب تلك العناصر بسهولة بمساعدة أنظمة الشبكة أو الأعمدة. فهي تساعدك على عرض جميع العناصر بطريقة تبدو جيدة ومنطقية. بهذه الطريقة يمكنك التأكد من أن المستخدم يرى المعلومات الأكثر أهمية أولاً مما يعزز اهتمامه باستكشاف المزيد.
من جهة أخرى من المهم أيضاً أن تجعل معلومات موقعك واضحة على جميع أنواع الشاشات والأجهزة من شاشات سطح المكتب الكبيرة إلى الهواتف المحمولة والأجهزة اللوحية الصغيرة. وهذا يعني تصميم الموقع ليناسب أصغر شاشة أولاً ثم التوسع إلى شاشات أكبر. وبهذه الطريقة تظل المعلومات والعناصر الأكثر أهمية واضحة وسهلة العثور عليها بغض النظر عن الجهاز الذي يستخدمه الشخص. وهذا يُفضي في النهاية إلى أهمية استخدام التصميم المستجيب (Responsive Design) عند تصميم خدمتك. يمكنك الاستزادة حول هذا الموضوع بقراءة هذا المقال: أساسيات التصميم المتجاوب: تصميم واجهات الاستخدام المتجاوبة (مع تطبيق عملي).
قوة التسلسل الهرمي للمعلومات في تجربة المستخدم
يؤثر التسلسل الهرمي البصري بشكل كبير على تجربة المستخدم حيث أحياناً لا يحكم المستخدم على جودة قابلية استخدام المنتج من مجرد الانطباع الأول عند دخوله موقع الويب أو التطبيق مثلاً. بل يؤثر التسلسل الهرمي للمعلومات أيضاً على كيفية فهم المستخدم للموقع أو المنتج والاستمتاع بفوائده وتحقيق هدفه منه وبالتالي إكمال رحلته. وحتى لو حدث وجذب الموقع انتباه المستخدم في الثواني الأولى فإذا لم يشعر بالراحة والسعادة وسهولة الاستخدام عندما يكمل رحلته لن تكون النتائج حميدة.
يساعد التسلسل الهرمي على التخطيط لبنية المعلومات في خدمتك وبالتالي يحسّن التنقّل عبر موقع الويب أو المنتج أو التطبيق ويجعله أسهل. وكنتيجة لتحسين التنقل يقلل التسلسل الهرمي البصري أيضاً من الجهد المبذول في التفاعل مع المنتج. لذا خذها كقاعدة عامة: إن هدفك كمصمم تجربة المستخدم سيكون إزالة الصعوبات والتشتت والجهد وتعزيز قابلية استخدام المنتج. وإن اهتمامك بالتسلسل الهرمي البصري في الخدمة هو إحدى الطرق لتحقيق ذلك.
كيف تطبّق مبادئ التسلسل الهرمي للمعلومات لتحقيق تجربة مستخدم أفضل؟
لتنفيذ التسلسل الهرمي للمعلومات بشكل مفيد لموقعك الإلكتروني أو علامتك التجارية يجب أن تحدد أهدافك أولاً وتفهم أولوياتك وتجري التحليلات المناسبة لفهم جمهورك. اسأل نفسك: ماذا أريد من المستخدم أن يرى أولاً؟ ما الذي يبحث عنه؟ ما هو أكثر ما سيجذب انتباهه في موقعي؟.
سواء كان عرض أحدث منتجاتك أو جعل معلومات الاتصال واضحة الوصول بسهولة أو تسليط الضوء على جوانب رئيسية أخرى. بمجرد أن يكون لديك فهم واضح لأهدافك يمكنك ترتيب المحتوى بشكل استراتيجي لضمان عرض العناصر الأكثر أهمية بشكل بارز. وهذا يعني وضع المعلومات الأساسية في المقدمة والمركز حيث تكون مرئية على الفور للزوار. وفي الوقت نفسه، نظّم عناصر المحتوى الأقل أهمية بطريقة لا تشتت الانتباه عن العناصر الرئيسية. يساعدك في ذلك وضع عدة اعتبارات بالحسبان (قد ذكرنا أغلبها في السطور السابقة):
- الحجم: تجذب الكائنات والنصوص الأكبر حجماً الانتباه وخاصةً في الجزء العلوي من الصفحة.
- نمط الخط: مثل جعل خط العناصر المهمة عريض أو مائل.
- اللون والتباين: حيث تخلق الكائنات والعناصر الملونة تبايناً وتجذب انتباه المستخدم. فقط كن حذراً ولا تبالغ في كميات الألوان.
- التجميع والمسافات البيضاء: يمكن أن يؤدي تجميع الكائنات التي تنتمي إلى مجموعة واحدة معاً وترك مسافة بيضاء كافية حولها إلى إبرازها وإعطاء هيكل وتنظيم للصفحة. لمنع التشتت وخلق تجربة ممتعة بصرياً وسهلة الاستخدام.
- العناوين: استخدم عناوين وعلامات واضحة لتوجيه المستخدمين عبر موقعك مما يسهل عليهم التنقل والعثور على ما يبحثون عنه.
التسلسل الهرمي للمعلومات vs معمارية المعلومات
يخلط الكثير من الأشخاص بين التسلسل الهرمي للمعلومات (Information Hierarchy) ومعمارية المعلومات (Information Architecture). يعتقدون أن المصطلحين يحملان ذات المعنى ولكن هذا الاعتقاد خاطئ. يُعتبر التسلسل الهرمي للمعلومات جزء أو قسم من معمارية المعلومات.
يعبّر التسلسل الهرمي للمعلومات عن مكونات واجهة الاستخدام وترتيب عناصر الواجهة كلّها بما تشمله من صور وأيقونات وكلمات وعناصر بطريقة هرمية توحي بالأهمية. لتوجيه انتباه المستخدم عبر واجهة المنتج بإعطاء الأولوية للمحتوى المهم من خلال الحجم واللون والتباين والموضع والاعتبارات التي ذكرناها في المقال وتشجيعه في النهاية على اتخاذ الإجراءات المرغوبة.
بينما تعتبر معمارية المعلومات العمود الفقري للمعلومات في الموقع. تعبّر عن تنظيم وهيكلة المحتوى كاملاً لتبسيط المعلومات المعقدة للمستخدمين وضمان سهولة التنقّل (Navigation) وعثورهم على المعلومات والتفاعل معها. وذلك من خلال تصنيفها وتنظيمها ووضع تسميات على أجزاء مختلفة من المحتوى لتحديد العلاقة بين محتوى الموقع ووظائفه. وربطها سوياً لإنشاء تجربة تنقّل واضحة وبديهية. ما يساعد المستخدمين على تحديد موقع المعلومات التي يحتاجون إليها بسرعة ويعزز قابلية الاستخدام العامة للواجهة. معمارية المعلومات ليست جزءاً من واجهة المستخدم التي تظهر على الشاشة بل تقدم معلومات إلى واجهة المستخدم وفيها تُرتَّب المعلومات في جداول بيانات ومخططات.
إذن يرتبط التسلسل الهرمي بفكرة جذب انتباه المستخدم أكثر بتوجيهه نحو المحتوى الأهم. بينما ترتبط معمارية المعلومات بترتيب المحتوى بشكل مفهوم لضمان سهولة الوصول وقابلية الاستخدام. يمكنك أيضاً أخذ فكرة بسيطة حول الفرق بين معنى المصطلحين بتصفّح نبذة عن كليهما في مرجع المصطلحات: التسلسل الهرمي للمعلومات (من هنا) ومعمارية المعلومات.
في ختام مقالنا الذي تحدثنا فيه عن ما هو التسلسل الهرمي للمعلومات..
حتى تتأكد من أنك التزمت بأساسيات التسلسل الهرمي للمعلومات في موقعك أو تطبيقك أو خدمتك وقد كانت فعّالة من المهمّ جداً عندما يتم تقييم موقعك أو تطبيقك، أن يوصف بأنه بسيط وبديهي وسهل الفهم ويمكن التنقّل فيه واستكشافه بسهولة والتفاعل معه بدون جهد. يرتبط التسلسل الهرمي للمعلومات كثيراً بالتصميم كما لاحظنا لذا لمزيد من المعلومات حول هذا الموضوع والتعمق فيه احجز مقعدك الآن في الدورة المتقدّمة في أنظمة التصميم.
الأسئلة الشائعة
ما أهمية التسلسل الهرمي لمعلومات المحتوى؟
يعطي التسلسل الهرمي للمحتوى الأولوية للمعلومات المهمة مما يجعلها أكثر سهولة في الوصول إليها ويقلل العبء المعرفي على المستخدمين. ومن خلال هيكلة المحتوى بطريقة منطقية وبديهية للمستخدمين تضمن الشركات قدرتهم على مسح المعلومات واستيعابها بسهولة مما يعزز قابلية الاستخدام (Usability).
كيف يفيد التسلسل الهرمي للمعلومات المستخدمين؟
يرشد التسلسل الهرمي للمعلومات المستخدمين عبر محتوى الموقع الإلكتروني أو التطبيق مما يضمن قدرتهم على فهم المعلومات المقدمة. واستيعابها بسهولة والقدرة على استخدام الخدمة بشكل بديهي بدون أدنى جهد.
