لماذا وكيف تتجنب قوائم الهمبرجر

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

 المشاكل

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

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

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

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

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

أقل كفاءة

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

foursquare-menu-aa8caf50

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

twitter-instant-navigation-22705596

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

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

IMDB-NavBar-2805be38

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

444

ليست ملموحة

311

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

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

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

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

twitter-tabbar-notifications-f61a1958

الإدراك

333333

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

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

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

الحل

sol

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

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

544444

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

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

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

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

2222

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

3333

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

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

5555555

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

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

7777777777

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

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

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

9999999

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

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

كيف يتناسب

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

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

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

00000

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

2121212

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

الخاتمة

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

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

المصدر

مقالات ذات صلة

2 تعليقات

  1. Mustafa ismail
    27 يونيو,2014 في 7:01 م - Reply

    مقال رائع كالعادة
    عندي سؤال بسيط هل نفس التأثير ينطبق على تطبيقات الويب

    • محمد ماهر
      30 يونيو,2014 في 2:15 ص - Reply

      تسلم 🙂 …. نعم نفس التأثير ينطبق أيضا علي تطبيقات الويب.

اضف رد