قوائم همبرغر في تصميم الموقع

نشرت: 2021-09-27

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

مقدمة لقوائم همبرغر في تصميم الموقع

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

لمساعدتك على فهم قائمة الهامبرغر بشكل أفضل ، سنناقش هنا:

  • ما هي قوائم همبرغر
  • مفهوم قوائم همبرغر في تصميم الموقع
  • الجدل وراء ذلك
  • التنفيذ البديل
  • الإيجابيات والسلبيات العامة لقوائم همبرغر في تصميم الموقع

ما هي قوائم همبرغر؟

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

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

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

لكن ، هل كان كذلك؟

الجدل الدائم حول قائمة الهامبرغر

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

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

مثال على قائمة الهامبرغر في الزاوية العلوية اليسرى من موقع الويب.
لا يتفق الجميع على أن قائمة الهامبرغر هي حل عالمي.

الاستخدام والتنفيذ البديل

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

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

الفكرة هي توفير تصميم نظيف ولكنه مميز ومناسب لمستخدمي الهواتف المحمولة بغض النظر عن حجم شاشة أجهزتهم.

الإيجابيات والسلبيات العامة لقوائم همبرغر في تصميم الموقع

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

الوقوف على الشارع مع ثلاث مؤشرات اتجاه على الأسفلت.
استخدمه ، لا تستخدمه ، أو ابحث عن حل وسط؟

الايجابيات:

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

سلبيات:

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

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