أثبتت الدراسات بان القوائم الجانبية ــ المسماة بقوائم الهمبرجر قد تضر أكثر مما تنفع.في هذا المقال سنتحدث عن المشاكل التي تسببها قوائم الهمبرجر وحلولها.

 المشاكل

1.  قابلية اكتشاف قليلة
2. أقل كفاءة
3. التعارض مع المنصات المختلفة
4. ليست ملموحة

 قابلية اكتشاف قليلة

ما هو بعيد عن الأنظار, هو بعيد عن العقل

في الوضع الافتراضي، قائمة الشريط الجانبي وكافة محتوياته تبقى مخفية.

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

أقل كفاءة

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

وفيما يلي مثال مغاير لكيفية التصفح والتنقل الفوري عندما تكون عناصر التصفح مرئية طوال الوقت.

التعارض مع المنصات المختلفة

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

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

ليست ملموحة

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

قد تفعلها مثل تطبيق Jawbone UP : فقاموا بعرض أيقونة تمثل طبيعة الإخطار بجانب زر القائمة في الشرط الجانبي.

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

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

الإدراك

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

يمكن توفير مساحة في الشاشة بطرق لا تؤثر سلبا علي التصفح أو ضد مبادئ HCI الأساسية مثل تقديم الملاحظات وعرض الدولة في تطبيقك.

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

الحل

قد كتب الكثير عن المشاكل ولكن الحلول لا تزال غير واضحة للكل.

متى يجب استخدام ذلك؟

قد يكون هناك بعض الحالات النادرة حيث يكون هذا النمط عملي جدا، ولكن القاعدة العامة هي تجنبه تماما.

IRCCloud مثال حيث تطبيق هذا النمط المنطقي في هذا الاتجاه ــ لأنها تتيح التنقل بين الفنوات وقنوات الأعضاء.

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

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

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

هذا يقودنا للانتقال إلي الجزء التالي من هذه المقالة.

ماذا يجب أن أستخدم بدلا منها؟

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

الحل هو مراجعة بنية المعلومات الخاصة بك.

المثال أعلاه علي كيفية الانتقال من قائمة الشريط الجانبي. يمكنك متابعة النقاط الملونة لفهم كيفية الانتقال والتحول بين العناصر لهذين الحلين.

 الوجبات السريعة

1. يمكن عرض الحالة مباشرة في علامة تبويب الرسائل.
2. العناصر دائما مرئية ويمكن الوصول إليها علي الفور.
3. لا تعارض في التصفح

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

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

كيف يتناسب

الأمثلة هنا مرتبطة ب iOS ، وفي هذه الحالة سترغب باستخدام تبويب أو شريط أدوات.

ولكن كيف يمكن لشريط نطاق التبويب أن يتجاوز 5 عناصر؟

هذه الحالة ليست مثالية وأنها قد تظهر مجددا مشكلة مع IA لتطبيقك، ولكن اذا كان عليك التوسع واستخدام أكثر من 5 علامات تبويب (tabs)، والنمط الشائع هو استخدام علامة التبويب الأخير الأخيرة للوصول إلي الخيارات المتبقية.

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

ضع في عين الاعتبار أن الحل الثاني هو الأنسب للاستخدام بدلا من التنقل.

الخاتمة

ناقشنا المشاكل الموجودة  مع أنماط القائمة الجانبية، وأيضا الحلول في إطار iOS منذ انشائها.

أمل أن تجد هذه المقالة مفيدة لك.

المصدر