ما هي قائمة همبرغر؟ 5 أمثلة على مواقع الويب
عند تصفح مواقع الويب ، من المحتمل أنك لاحظت رمز الشريط الثلاثي الموجود أعلى الزاوية اليسرى أو اليمنى من صفحة الويب. يُعرف هذا الرمز بأيقونة الهامبرغر ، ويتم استخدامه لتخزين خيارات التنقل.
على الرغم من بساطته النسبية (لا يستغرق الأمر سوى بضع دقائق لإنشاء قائمة همبرغر في أدوات النماذج الأولية ) ، يعد هذا أحد أكثر عناصر التصميم إثارة للجدل . يحب بعض المصممين استخدامه ، والبعض الآخر يكرهونه.
في هذه المقالة ، سنراجع مفهوم قائمة الهامبرغر وإيجابياتها وسلبياتها ، ونشارك مجموعة ممتازة من المواقع الإلكترونية التي تستخدم قائمة الهامبرغر.
ما هي قائمة همبرغر؟
قائمة الهامبرغر هي رمز مستخدم على موقع ويب وفي التطبيقات التي ، عند النقر عليها أو النقر عليها ، تفتح قائمة جانبية أو درج تنقل. تسمى "قائمة همبرغر" لأنها تأخذ شكل الساندويتش الشهير.
تم إنشاء هذه الأيقونة بواسطة المصمم Norm Cox لواجهة المستخدم الرسومية لمحطة عمل Xerox Star في عام 1981.
كان هدف Cox هو إنشاء رمز من شأنه إبلاغ المستخدمين بأن قائمة العناصر مخفية خلفها.
بعد Xerox Star ، أصبحت قائمة الهامبرغر نمط تنقل لا يحظى بشعبية وظلت على هذا النحو لما يقرب من ثلاثة عقود. لكن الوضع تغير في عام 2009 عندما بدأت الهواتف الذكية تكتسب قوة دفع.
كانت مساحة الشاشة سلعة ثمينة على الهاتف المحمول ، وكان المصممون بحاجة إلى وضع العديد من المعلومات على شاشات الجيب. بدت قائمة الهامبرغر كحل جيد لهذه المشكلة ، وبدأ الرمز في الظهور في العديد من تطبيقات الجوال الشهيرة مثل Facebook.
بعد فترة وجيزة ، بدأ ينتشر على الإنترنت وتبنت العديد من مواقع الويب وتطبيقات الأجهزة المحمولة هذا النمط. اليوم ، تم تصميم العديد من مجموعات واجهة المستخدم الشائعة (UI) التي تعمل كمرجع لمنشئي المنتجات بقائمة هامبرغر.
كانت Facebook واحدة من أولى الشركات التي قدمت قائمة الهامبرغر في تطبيقات الأجهزة المحمولة الخاصة بهم. رصيد الصورة TheNextWeb
إيجابيات وسلبيات تصميم قائمة همبرغر
عندما يتعلق الأمر بتجربة المستخدم (UX) ، فإن قائمة الهامبرغر هي مفهوم مثير للجدل للغاية - حيث أن لها مزاياها وعيوبها الفريدة.
من المهم التفكير في كليهما قبل اتخاذ قرار باستخدام هذا النمط. لنبدأ بفوائد قائمة الهامبرغر:
يبسط تخطيطات الشاشة.
الفوضى هي أسوأ عدو لقابلية الاستخدام الجيد. يعرف المصممون أن انتباه المستخدم هو مورد ثمين ومن المهم تجنب الإلهاء. تعد قائمة الهامبرغر آلية موفرة للمساحة حيث تصبح جميع خيارات التنقل مرئية فقط بعد نقرة أو نقرة. من خلال تحويل خيار التنقل من الشاشة ، فإنك تركز انتباه المستخدم على المحتوى.
إنه معروف جيدًا.
يقوم الدماغ البشري بفك تشفير الصور بشكل أسرع من الكلمات ، والشيء الرائع في رمز الشريط الثلاثي هو أنه أحد الرموز المفهومة عالميًا. على الرغم من أن العديد من المستخدمين قد لا يعرفون أنها تسمى "قائمة همبرغر" ، يمكنهم بسهولة فهم ما تفعله.
الآن دعنا نتحدث عن الجوانب السلبية لقائمة الهامبرغر:
إنه أقل قابلية للاكتشاف.
كما يقول المثل القديم ، "ما هو بعيد عن الأنظار هو بعيد عن الذهن." تخفي قوائم Hamburger خيارات التنقل ، ولرؤيتها ، يتعين على المستخدمين النقر فوق الرمز أو النقر فوقه أولاً. ولكن عندما لا يرى المستخدمون خيارات التنقل الخاصة بهم في المقام الأول ، فمن غير المرجح أن يتفاعلوا معها .
- إنه غير قابل للفحص.
في حالتها الافتراضية ، تظل خيارات التنقل في قائمة الهامبرغر مخفية. هذا يجعل من الصعب على المستخدمين فهم أدوات التنقل المتوفرة عند وصولهم إلى الصفحة لأول مرة.
يتطلب مجهودًا إضافيًا من المستخدم.
يستغرق المستخدم نقرتين أو نقرتين على الأقل للانتقال إلى صفحة أخرى. يتعين على المستخدمين النقر فوق رمز الهامبرغر أولاً لمعرفة الخيارات ، ثم يحتاجون إلى العثور على الخيار الذي يبحثون عنه والنقر عليه.
هل يجب وضع رمز قائمة الهامبرغر على الجانب الأيسر أو الأيمن من الشاشة؟
على الرغم من عدم وجود إجابة واحدة صحيحة أو خاطئة ، فمن المهم مشاركة بعض التوصيات العامة للمصممين الذين يفكرون في قوائم الهامبرغر. إذا كنت تعمل على تصميم موقع ويب ، فمن المستحسن وضع أيقونات الهامبرغر في الزاوية اليسرى العلوية من الصفحة.
في العالم الغربي ، يبدأ المستخدمون في مسح الصفحة ضوئيًا من اليسار إلى اليمين ، وستكون قائمة الهامبرغر أول ما يلاحظونه.
إذا كنت تقوم بتصميم تطبيق Android ، فيجب عليك اتباع إرشادات التصميم متعدد الأبعاد. بالنسبة للغات التي تُكتب من اليسار إلى اليمين ، يجب وضع قوائم الهامبرغر في الزاوية العلوية اليسرى من الشاشة. هذا يعني أن درج التنقل أو القائمة الجانبية ستفتح أيضًا من الجانب الأيسر من الشاشة.
ما هو التصميم المثالي لقائمة همبرغر متنقلة؟
قائمة الهامبرغر هي نمط تنقل شائع في العديد من تطبيقات الجوال والمواقع الإلكترونية. نظرًا لأن شاشات الهاتف المحمول بها مساحات صغيرة نسبيًا ، فمن المفيد استخدام هذا النمط لترك مساحة أكبر للمحتوى.
في الوقت نفسه ، قد يصعب على المستخدمين الوصول إلى أيقونات الهامبرغر على الهاتف المحمول. مع زيادة حجم شاشات الهاتف المحمول ، أصبح من الصعب على المستخدمين الوصول إلى رمز الهامبرغر الموجود في الزاوية العلوية من الشاشة.
إذا قررت استخدام قائمة الهامبرغر لموقعك على الويب أو تطبيقك للجوّال ، فستساعدك هذه القواعد البسيطة في إنشاء التصميم المثالي لقائمة همبرغر للجوّال:
تحديد أولويات الوجهات والتسلسل الهرمي للملاحة.
استخدم قائمة الهامبرغر عندما يكون لمنتجك أكثر من خمس وجهات رفيعة المستوى أو مستويين أو أكثر من التسلسل الهرمي للتنقل. إذا كان لديك خمسة خيارات تنقل أو أقل بنفس الأهمية ، فمن الأفضل استخدام التنقل المرئي.
ضع خيارات التنقل في عمود واحد. اطلب الوجهات وفقًا لأهمية المستخدم ، مما يعني أن الخيارات الأكثر أهمية يجب أن تتجه نحو الأعلى ، بينما الخيارات الأقل أهمية يجب أن تتجه نحو الأسفل. من خلال عرض خيارات التنقل هذه في قائمة عمودية ، فإنك تسهل على المستخدمين مسحها ضوئيًا.
لا تخلط أبدًا بين أنماط التنقل للتنقل الأساسي.
يجب ألا تخلط قائمة الهامبرغر مع أنماط التنقل الأخرى ، مثل أشرطة علامات التبويب ، لأنها ستربك المستخدمين. يجب أن يكون هناك نمط تنقل أساسي واحد فقط لكل تطبيق أو موقع ويب.
حاول استخدام قائمة الهامبرغر للخيارات الثانوية.
تعد قوائم Hamburger رائعة لتخزين خيارات التنقل الثانوية ، أو الخيارات التي لا تخدم بشكل مباشر أهداف التنقل الرئيسية الخاصة بك.
يستخدم Uber قائمة الهامبرغر لخيارات التنقل الثانوية.
ما هي بعض الأمثلة الجيدة لمواقع قائمة همبرغر؟
الآن بعد أن عرفت نمط التنقل المعروف هذا ، حان الوقت لمشاركة بعض مواقع الويب الشهيرة مع قوائم الهامبرغر:
1. خرائط جوجل
خرائط Google هي موقع ويب يحتوى على المحتوى أولاً. يقدم للمستخدم بالضبط ما يتوقعه منه. المنطقة الأساسية للشاشة مخصصة لخريطة مع عدد قليل من عناصر التحكم الأساسية في واجهة المستخدم (UI) ، بما في ذلك أدوات التكبير والتصغير. يتم إخفاء جميع أزرار التنقل الثانوية بعيدًا في قائمة الهامبرغر.
تستخدم خرائط Google قوائم الهامبرغر لأشياء أقل أهمية ، مثل أنواع مختلفة من العروض والعمليات السياقية (مثل الطباعة والمشاركة وما إلى ذلك).
2. يضع تصميم موقع Adidas على الويب .
قائمة الهامبرغر في الزاوية العلوية اليسرى من الصفحة. تتبع Adidas نفس الأسلوب مع نمط Priority + ، حيث تصبح قائمة الهامبرغر مرئية فقط عندما يصبح إطار عرض المستخدم صغيرًا نسبيًا.
تستخدم Adidas قوائم الهامبرغر لخيارات التنقل الأساسية ، لكن هذا الرمز يصبح مرئيًا فقط في إطارات العرض الصغيرة. رصيد الصورة أديداس .
3. Awwwards هي مجموعة من المواقع الإلكترونية الإبداعية والمبتكرة
Awwwards هي مجموعة من المواقع الإلكترونية الإبداعية والمبتكرة. تصميم هذا الموقع يتبع نهج الحد الأدنى. في محاولة لتركيز انتباه المستخدم على المحتوى ، يقومون بإزالة كل الضوضاء الإضافية. ليس من المستغرب أنهم قرروا استخدام قائمة الهامبرغر لتحقيق هذا الهدف.
أحد الأشياء الرائعة في Awwwards هو أنها تكمل رمز القائمة بعلامة "Menu". من خلال القيام بذلك ، فإنهم يقللون من فرصة عدم تمكن المستخدمين من تحديد رمز قائمة الهامبرغر.
4. التمهيد Bootstrap من الوجهات الأساسية.
يعد Bootstrap أشهر مجموعة أدوات مفتوحة المصدر للواجهة الأمامية في العالم. يسمح لمصممي الويب بإنشاء تخطيطات سريعة الاستجابة. نقاط التوقف هي اللبنات الأساسية للتصميم سريع الاستجابة.
يستخدمها المصممون للتحكم في كيفية تكييف تخطيطاتهم مع إطارات عرض معينة. يستخدم Bootstrap قائمة الهامبرغر لنقاط التوقف الصغيرة (أي أقل من 576 بكسل).
5. Evernote منتج مصمم لتدوين الملاحظات وتنظيم المعلومات.
Evernote هو منتج مصمم لتدوين الملاحظات وتنظيم المعلومات المختلفة. يتميز تصميم الصفحة الرئيسية لموقع Evernote بقائمة هامبرغر في الزاوية اليمنى العليا من الصفحة.
لاحظ مقدار المسافة البيضاء التي تحتوي عليها كل كتلة محتوى ، بما في ذلك بين اسم ورمز Evernote وعنوان الصفحة وزر الحث على اتخاذ إجراء.
يعتمد Evernote على أيقونة الهامبرغر لجعل واجهة المستخدم أقل انشغالًا.
عندما تفكر في ما إذا كانت قائمة الهامبرغر مناسبة لموقعك على الويب أم لا ، فمن المهم أن تفكر في كيفية عملها لمستخدميك. هل ستجعل قائمة الهامبرغر التنقل أسهل؟ عندما تكون في شك ، يمكنك دائمًا اختبار تصميمك مع مستخدمين حقيقيين.
قم بتشغيل اختبار A / B مع مثالين للتصميم.
أحدهما يحتوي على قائمة هامبرغر والآخر به تنقل مرئي مثل شريط التنقل عالي المستوى. قم بقياس وقت إكمال المهمة واطلع على الخيارات التي تعمل بشكل أفضل لمستخدميك.