نصائح تجربة المستخدم: 10 إرشادات لنجاح تصميم القائمة

UX tips X Guidelines for menu design success

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

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

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

ما هي القائمة في تصميم تجربة المستخدم؟

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

القائمة هي عنصر تصميم ملاحي يوفر للمستخدمين نظرة عامة منظمة على المعلومات والوظائف المتاحة داخل موقع ويب أو تطبيق.

أنواع شائعة من تصميمات القوائم

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

1. قائمة البنتو

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

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

2. قائمة الكباب

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

3. قائمة البرجر

إنه نوع شائع آخر من القوائم التي نجدها عادةً في التطبيقات. يتم تمثيلها بثلاثة خطوط أفقية. تم تصميم الرمز بواسطة Norm Cox في عام 1981 لواجهة المستخدم الرسومية لمحطة عمل Xerox Star.

4. قائمة متعددة المستويات

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

5. القائمة الكبرى

القوائم الكبرى هي فئة فرعية أخرى من القوائم متعددة المستويات والتي يتم بناؤها عادةً باستخدام كتل HTML مخصصة. وهي مفضلة لأنها تقلل من مقدار التمرير للمستخدمين وتجعل التنقل أسهل كثيرًا.

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

فوائد وجود نظام تنقل (قائمة) سهل الوصول إليه

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

1. تؤدي القائمة التي يمكن الوصول إليها بسهولة إلى تجربة مستخدم أفضل

وفقًا لتقرير من Hubspot، سيتوقف 38% من الأشخاص عن التفاعل مع موقع ويب إذا لم يكن التنقل سهلاً، بينما وفقًا لمؤسسة Interaction Design Foundation، يمكن أن يحقق تجربة مستخدم جيدة 83% من عائد الاستثمار. باختصار، فإن وجود تنقل واضح ومرئي يعزز تجربة المستخدمين. إذا لم يتمكنوا من التنقل عبر منتجك بسهولة، فإن هذا الإحباط يؤدي إلى انخفاض عدد العملاء.

2. يساعد تصميم القائمة المنظمة على تحسين محرك البحث

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

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

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

3. يؤدي تصميم القائمة الجيد إلى تحسين تفاعل المستخدم

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

4. يساعد على تحسين مصداقية العلامة التجارية

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

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

5. القائمة التي تساعد المستخدمين على التنقل بسهولة تزيد من معدلات التحويل

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

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

10 إرشادات لتصميم القائمة يجب عليك البدء في اتباعها للحصول على تجربة مستخدم أفضل

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

1. تصميم قائمة مرئية وليست مخفية عن المستخدمين

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

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

الأيسر- موقع Squarespace ؛ الأيمن – موقع برج خليفة.

إن القائمة غير المرئية لا يصعب التنقل خلالها فحسب، بل إنها تؤدي أيضًا إلى زيادة نقاط الاتصال ضمن تدفق المستخدم.

2. القائمة المنظمة بشكل جيد تقلل من العبء المعرفي للمستخدمين

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

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

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

3. استخدم الرموز والعلامات المألوفة لقوائمك

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

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

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

تأكد من أنك تقوم بتصميم قائمتك مع وضع هذا في الاعتبار.

4. يساعد تحسين القوائم لشاشات الهاتف المحمول على تحسين تجربة المستخدم

في الربع الثاني من عام 2024، قام 96.2% من مستخدمي الإنترنت على مستوى العالم بالوصول إلى الويب من خلال الهواتف المحمولة. وبصفتك مصممًا، فهذا يعني أنه من الضروري إنشاء تصميمات صديقة للجوال، مع الأخذ في الاعتبار أن معظم المستخدمين يتصفحون على شاشات أصغر.

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

تطبيق وهمي يستخدم البرجر والقائمة السفلية. المصدر: Justinmind

5. اتبع إرشادات المتجر للحصول على تصميم قائمة طعام يسهل الوصول إليه

عند التصميم لنظام Android، راجع إرشادات التصميم المادي، وبالنسبة لنظام iOS، اتبع إرشادات واجهة المستخدم البشرية من Apple. لتصميم موقع الويب، استخدم إرشادات إمكانية الوصول إلى محتوى الويب (WCAG) كمرجع. توفر هذه الإرشادات نصائح أساسية حول التصميم والوسم وإمكانية الوصول والبنية والتطوير.

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

6. إنشاء تصميمات سهلة الوصول وشاملة لجمهورك

يُقدَّر التصميم عندما لا يكون متاحًا فحسب، بل وشاملًا أيضًا. وفقًا لمنظمة الصحة العالمية (WHO)، يعاني 16% من سكان العالم من نوع ما من الإعاقة. وبصفتنا مصممي تجربة مستخدم، فمن واجبنا تضمين هذا الجزء من السكان أثناء التصميم.

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

عندما يتعلق الأمر بتصميم القائمة، يمكنك ضمان ذلك من خلال القيام بما يلي:

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

7. قم بإجراء اختبار المستخدم للتحقق من قابلية استخدام القوائم الخاصة بك

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

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

8. حافظ على اتساق تصميمك ومحتواك

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

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

9. إعطاء الأولوية للتوطين

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

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

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

كما يمكن للمرء أن يلاحظ في كارفور الإمارات العربية المتحدة، إذا تم إجراء تغييرات على إعدادات التوطين، فإن التصميم والمحتوى يساعدان في التواصل مع الجمهور المحلي من خلال استخدام اللغة العربية المحلية واستخدام نمط تصميم معترف به أي RTL (من اليمين إلى اليسار).

10. إجراء عمليات تدقيق منتظمة

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

الاستنتاج

يتضمن تصميم القوائم فهم المستخدمين وتطبيق مبادئ مختلفة وإجراء عمليات تدقيق منتظمة. فيما يلي 10 قوائم مراجعة لتصميم القوائم يمكنها مساعدتك في تحديد مجالات التحسين في تصميمك.

ما هو المبدأ التوجيهي الذي تتبعه أثناء تصميم قوائمك؟ أخبرنا بذلك في التعليقات واستمر في التعلم من خلال مقالاتنا.

يشارك:

نصائح تجربة المستخدم: 10 إرشادات لنجاح تصميم القائمة

ما هي القائمة في تصميم تجربة المستخدم؟