نعد قائمة هامبرجر عنصر متنقل يمكنك تصفحه من خلال مواقع الويب والتطبيقات والبرامج. حيث يأتى اسمه اللذيذ من خلال تصميمه: حيث يتكون من ثلاثة خطوط أفقية تشبه البرجر. ومثلها مثل نظيرتها في الحياة الواقعية ، فإن قائمة الهمبرغر هي آلية لتوفير المساحة
لكنه رمز يثير الكثير من الجدل. فبالنسبة للبعض ، يعد هذا جزءًا أساسيًا من مجموعة أدوات المصمم. اما بالنسبة للآخرين ، إنها نتيجة ثانوية مربكة لهندسة المعلومات السيئة.
حيث يغوص الخس في قائمة الهامبرغر الآن لمساعدة الكاتشب على الانسياب الحر حول الساندوتش بالكامل.
آسف ، لا أستطيع مساعدة نفسي. فأنا في قرص الخبز.
(حسنا ، سوف أتوقف)
ما هى قائمة الهامبرغر؟
تعد قائمة الهامبرغر ، أو رمز الهامبرغر ، هى الزر الموجود في مواقع الويب والتطبيقات التي تفتح عادةً في قائمة جانبية أو درج التنقل.
حيث تم انشاؤه بواسطة مصمم التفاعل نورم كوكس لصالح محطة اكسيروكس ستارالشخصية فى عام 1981 كوسيلة سهلة للتواصل مع المستخدمين بأن الزر يحتوي على قائمة بالعناصر.
على الرغم من أننا نستخدم قوائم الهامبرغر اليوم من أجل تسهيل تجربة التنقل ، إلا أن الغرض من قائمة الهامبرغر الأصلية كان مختلفًا.”
وقال كوكس في مقابلة أجريت معه عام 2014: “لقد صممت هذا الرمز منذ عدة سنوات كحاوية لاختيارات القائمة السياقية”. “إنه مكافئ إلى حد ما لقائمة السياق التي نستخدمها اليوم عند النقر فوق كائنات باستخدام زر الماوس الأيمن”
بعد ستار زيروكس, بقيت قائمة الهامبرغر هادئة. فقط عندما كان على مصممى تصميم خبرة المستخدم ايجاد طريقة لتناسب العديد من الازرار الموجودة على شاشات هواتفنا حيث بدأت القوائم فى الظهور مرة اخرى فى كل مكان.
منذ ذلك الحين ، أصبحت قائمة الهامبرغر هي رمز الانتقال للتطبيقات ومواقع الويب لإسقاط أزرار التنقل الخاصة بها.
الآن ، أصبحت قائمة الهامبرغر هي الرمز الذي يحب المصممون أن يكرهوه. فبعد كل شيء ، هل ينقر الناس فعلاً على قوائم الهامبرغر؟ وحتى لو كان الأمر كذلك ، إذا كانت عناصر القائمة مهمة جدًا ، فهل يجب ألا يتم عرضها طوال الوقت؟
خلال حديث في مؤتمر المطورين العالميين في عام 2014 ، اعترض المصمم و خبرة المستخدم لشركة أبل ايفانجليست مايك ستيرن على قائمة الهامبرغر ، قائلاً:
“تذكر أن الأمرين الأساسيين في نظام الملاحة الحدسي هو أنهما يخبرانك بمكانك ويظهران لك أين يمكنك الذهاب.”
“قوائم هامبورجر رهيبة في كل من هذه الأشياء لأن القائمة ليست على الشاشة. هذا غير مرئي. فقط زر لعرض القائمة هو”
ولكن هل يعني ذلك أنه يجب عليك التخلص من الأيقونة الثلاثية المشؤومة – أم أن الوقت قد حان للتوقف عن القلق وتتعلم أن تحب قائمة الهامبرغر؟
3 ايجابيات فى قائمة هامبرغر
الايجابية رقم 1 :من السهل التعرف عليه
قائمة الهامبرغر موجودة في كل مكان – توجد في كل مكان من التطبيقات ، وفى المواقع الإلكترونية ، وفى برامج الكمبيوتر وألعاب الفيديو.
حتى أنها وجدت طريقة للطباعة بطريقة أو بأخرى.
صورة وتغريدة لمارتن ريدينج
هاى تيسكو يبدو ان القائمة الخاصة بمنشورك معطلة
اهلا وسهلا بكم 👍🏼👍🏼🤓
إنه رمز قضى عقودا في دمج نفسه في الوعي الاجتماعي باعتباره الزر الذي يمكن للمستخدمين من الوصول إلى درج التنقل. يعرفها الناس ويمكنهم الاعتماد عليها لهذا الغرض ، مثل كيفية معرفة المستخدمين لرمز سلة المهملات حيث يمكنك حذف الملفات ، أو أن أيقونة الصفحة الرئيسية هي المكان الذي يمكنك الذهاب إليه من القائمة الرئيسية.
كما كتب المصمم أوليفر مكجو عن Usabilla ، “لا أرى أي سبب للكره على شيء يحقق هدفه. وهو معروف على نطاق واسع لدرجة أنه يحمل معياره الخاص. لماذا تقتل أيقونة في كل مكان ، يعرفها ويفهمها مستخدمونا ، وتستبدلها بتكرار جديد ليتعلموا من جديد؟”
الايجابية رقم 2: النظافة
هل هناك شئ اسوء من صفحة ويب غير منظمة؟فمثلا
عيناى , عيناى المسكينتان
وفي الأماكن التي تكون فيها العقارات المرئية أعلى من قيمتها ، مثل تطبيقات الجوال ومواقع الويب ، يمكن لقائمة الهامبرغر أن تقدم وقتها قيمة لا تصدق.
بعد كل شيء ، أنت لا تريد أن تطغى على المستخدمين لديك مع الكثير من الخيارات. فعند تقديم مجموعة كبيرة من الخيارات ، من المحتمل أن يشعر الناس بالإحباط وعدم اتخاذ قرار على الإطلاق.
حيث وجدت إحدى الدراسات التي أجرتها خبيرة صنع القرار شينا إيانجار أن الناس أكثر عرضة لإجراء عمليات الشراء عند تقديم خيارات شراء أقل.
لهذا السبب يمكن أن تكون قائمة الهامبرغر طريقة رائعة لمسح صفحة غير فوضوية.
إنه حل بسيط. إنه متواضع. وهو لا يعيق تجربة المستخدم الخاص بك. لذلك ، إذا كنت تبحث عن وسيلة لتضمين وصول سهل إلى قائمة التنقل الخاصة بك دون تعطل المستخدمين ، فإن قائمة الهامبرغر هي إجابة جيدة.
الايجابية رقم 3: الوصول الثانى
يمكن أن تكون قائمة الهامبرغر مكانًا رائعًا لأزرار التنقل التي لا تخدم هدف صفحة الويب الخاصة بك مباشرةً.
حيث يستخدم اوبر زر الهامبرغر لهذا الغرض. التطبيق لديه هدف واحد: ترتيب السيارة. لذلك تركز الشاشة الرئيسية بشكل فريد على حجز سيارة لك.
بالنسبة إلى أشياء مثل سجلات الرحلات والإيصالات وإعدادات الدفع السابقة ، يتعين عليك النقر فوق قائمة الهامبرغر – حيث أنها ليست مهمة للهدف الأساسي.
على الرغم من أن هذه الأزرار مهمة لبعض المهام ، فإنها لا تحتاج إلى شغل كل هذه المساحة على الشاشة الرئيسية. وهذا يجعل قائمة الهامبرغر مكانًا مثاليًا لهم.
3 سلبيات من قائمة هامبرغر
الان، نحن نستكشف لماذا تعد قائمة الهامبرغر بالضبط واحدة من أكثر الرموز كرهًا في عالم التصميم.
السلبية رقم 1: صنع صفحات قليلة الاهمية
واحد من اكبر مصممى جريبس مع قائمة هامبرغر هو أنه يجعل على الفور أي شيء في القائمة أقل أهمية.
فكر فى موقع الويب الخاص بك على انه احتفالا موسيقيا. فقائمة هامبرجر هى المرحلة الصغيرة. فانت لا تريد أن تضع أفضل الفنانين والعناوين الرئيسية هناك. بدلاً من ذلك ، تريدهم في المرحلة الأكبر حيث يمكن للجميع رؤيتهم (أي الصفحة الرئيسية).
فالحال سيكون نفسه مع أي تجربة رقمية تقوم بتصميمها. وعندما تقوم بنقل الأزرار والصفحات الملاحية إلى قائمة الهامبرغر ، فأنت تعلم أن هذه الأشياء ليست مهمة – وتجعلها أقل احتمالًا للذهاب إلى هناك.
وهذا يقودنا إلى الاشتراكات القادمة لدينا:
السلبية رقم 2: انخفاض المشاركة
تحتوي قوائم الهامبرغر على معدلات نقرات (ومشاركة) أقل بشكل كبير من الأزرار الأخرى ، والتي يمكن أن تعزى إلى عدد من الأسباب.
أولاً ، من الصعب الوصول إليهم. مع ازدياد حجم الهواتف مع كل جيل ، أصبح الوصول إلى الأماكن التي يوجد بها زر الهامبرغر عادةً (الزوايا العلوية اليسرى أو اليمنى) أمرًا متزايدًا.
المصدر: سكوت هيرف
ثانيًا ، عندما لا يرى المستخدمون خيارات التنقل الخاصة بهم ، يكونون أقل عرضة للتفاعل معهم. فكر: فى اهمية استخدام قائمة هامبرغر للمستخدمين:
1-ادرك عنصر القائمة الغير مرئى المفضل لديهم
2-انظر الى القائمة
3-اعرف ما هى قائمة هامبرغر وانها شئ يمكنهم النقر عليه
4-انقر فوقها
5-امسح قائمة عناصر القائمة الاضافية
6-قم بايجاد الشخص الذى يبحثون عنه
7-انقر فوقها
هذا كثير من التحميل المعرفي لشيء بسيط للغاية. على سبيل المثال ، عندما قام تطبيق زيبوكس بإزالة الصف الذي يحتوي على أزرار التنقل الخاصة بهم لصالح قائمة الهامبرغر ، فقد رأوا أن أرقام الارتباط الخاصة بهم قد انخفضت إلى النصف.
حيث وجدت إحدى الدراسات التي أجرتها مجموعة نيلسن نورمان أنه عند استخدام قائمة الهامبرغر ، فإن الاكتشافات “تنقسم إلى النصف تقريبًا عن طريق إخفاء التنقل الرئيسي لموقع الويب. أيضا ، وقت المهمة أطول ويزيد من صعوبة المهمة المتصورة”.
Source: Nielsen Norman Group
ولخصوا الامر إلى أن المستخدمين لديهم تجربة أسوأ عندما يتم إخفاء أزرار التنقل ، سواء في واجهات المحمول أو سطح المكتب.
حتى كبار اللاعبين مثل موقع يوتيوب أدركوا تأثير قائمة الهامبرغر على أرقام الاشتباك الخاصة بهم وانتقلوا منها.
السلبية رقم 3: الغير فاعلية
يعرف أي مصمم جيد أن جعل المستخدمين يمضون في خطوات إضافية للوصول إلى هدفهم النهائي هو هدف كبير لا.
تفعل قائمة هامبرغر ذلك بالظبط.
تخيل أنك كنت تبحث عن الاشتراك في مدرب اللياقة البدنية وذهبت إلى موقعهم لمعرفة المزيد. هل تفضل أن يكون الرابط / الزر لصفحة الاتصال:
أ-فى يمين الصحة الرئيسية
ب-خلف قائمة هامبرغر
بالطبع تفضل تقديمه لك على الفور. هذه معلومات مهمة لشخص يبحث عن مدرب لياقة! لا تريد البحث عن ما تبحث عنه.
8 امثلة على قوائم هامبرغر
لقد أنشأنا قائمة من ثمانية أمثلة لقوائم الهامبرجر في العمل. فهى مزيج من التطبيقات ومواقع سطح المكتب ومواقع الجوّال – لكن كل منها يستخدم قائمة الهامبرغر جيدًا.
يعلم مصممو كوتشيللا أن الأشخاص الذين يذهبون إلى موقع الويب الخاص بهم يبحثون عن معلومات حول كيفية الحصول على التذاكر والانضمام إلى قائمة الانتظار للحصول على تصاريح (خاصة قبل إعلان تشكيلة الفريق) ، وبالتالي فإن المصممين لن يتعثروا في الصفحة الرئيسية باستخدام شريط البحث والمعلومات عن مختلف البائعين. بدلاً من ذلك ، فإنهم يقدمون للناس ما يريدون فورًا.
2-اطار (اى اوه)
حيث قام احد مطورو برامج الفيديو, الاطار, بإبقاء صفحتهم الرئيسية مخصصة لهدف واحد: جمع العملاء المتوقعين.
بالإضافة إلى ذلك ، تحقق من رمز الهامبرغر الرائع هذا.
قام به مطورو برامج الفيديو ، إطار ، بإطلاق صفحتهم الرئيسية المخصصة لهدف واحد: جمع العملاء يتوقعين .
3-جوجل درايف
تقدم جوجل للمستخدم ما يريده بالضبط على الفور (أي المستندات والملفات) وتستخدم قائمة الهامبرغر للعناصر الأقل أهمية (مثل الإعدادات ، المساعدة). مع إخفاء أزرار التنقل في قائمة الهامبرغر ، سيكون انتباه المستخدم أكثر تركيزًا على المهمة الأساسية.
4-الناس المهووسين
فبالنسبة الى حدث الناس المهوسيين الخاص بدسكونت ، قررت شركة التصميم والبرمجيات أن تسلك طريق اللسان في الخد وأن تضع رمز تعبيري هامبرغر فعلي لقائمة الهامبرغر. تعرف دسكونت أن جمهورها المستهدف سيكون أشخاصًا على دراية بعالم التصميم ، حتى يتمكنوا من اللعب بأشياء مثل جعل رمز الهامبرغر رمزًا تعبيريًا.
5-كودروبس (موقع تصميم وتطوير)
يعد تصميم هامبرغر ممتع للغاية من الاشخاص فى موقع ويب كودروبس ، وهي مدونة تصميم تقدم دروسًا وعروضًا لتصميمات مواقع مختلفة مجانًا. لاحظ العناصر الأكثر دقة ، مثل كيف تتحول قائمة الهامبرغر إلى =اكس
6-المداخن البرتغالية
قائمة همبرغر لموقع ويب مخصص للجمال المعماري للمداخن البرتغالية. بشكل جاد.
7-صديق اللياقة البدنية
هذه قائمة همبرغر لتتبع الهامبرغر الخاص بك – وإذا كنت تعتقد أننا قمنا بإدراجها في هذه القائمة فقط حتى نتمكن من جعل هذه النكتة ، فأنت على حق.
ومع ذلك ، يعد هذا أيضًا مثالًا رائعًا على كيفية استخدام قائمة الهامبرغر لتخزين أزرار التنقل الأقل أهمية. عندما يصل المستخدم إلى التطبيق ، من المحتمل أن يرغب فقط في تسجيل السعرات الحرارية لهذا اليوم والمتابعة. هذه الصفحة تسمح بذلك بسهولة في أسفل الزاوية اليمنى.
8– موقع ميمرايز لتعليم اللغات
هل تعلم ان قائمة هامبرغر تعنى باللغة الاسبانية (من هام دى هامبيرجاسيس)؟ فباستخدامك لتطبيق ميمرايز تستطيع تعلم ذلك واكثر.
فقائمة ميمرايز تعمل بشكل جيد لأن الإجراء الرئيسي الخاص بك هو اتخاذ الدورة ، في حين أن الإجراء الثانوي الخاص بك قد يكون تبديل الدورات التدريبية.
هل أنت جاهز لاستخدام رمز الهامبرغر في التصميم الخاص بك؟ جرّب التصميم باستخدام رمز الهامبرغر باستخدام مجموعة أدوات واجهة المستخدم فيلوستى المتوفرة فى ستوديو انفجن وفوتوشوب وسكيتش.
للكاتب تونى هو ترين
جميع الصور بتصرف من المصدر
ترجمة : آية رضوان
للكاتبة: Tony Ho Tran
المصدر: https://www.invisionapp.com/inside-design/pros-and-cons-of-hamburger-menus/
