شرح معنى زر الهمبرغر Hamburger button ضمن واجهة المستخدم🍔

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

تعالوا معنا ضمن هذا المقال لنتعرف أكثر على هذه الأيقونة وتاريخها وماهو استخدامها.

 

ما هو زر الهمبرغر Hamburger button؟ 🤔

 

ما هو زر الهمبرغر Hamburger button؟ 🤔
ما هو زر الهمبرغر Hamburger button؟ 🤔

قبل كل شيء يعتبر شكل القائمة المضغوطة 🪧المؤلفة من 3 أو 4 خطوط أفقية متوازية مشابهة تماماً لطبقات الساندويش المعروف بـ اسم (الهمبرجر).

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

 

بمعنى أبسط وأوضح زر الهمبرغر هو ما يسمى “القائمة”، ومن خلاله يمكننا التنقل بسهولة ضمن الموقع أو التطبيق.

 

أصل تصميم زر الهمبرغر Hamburger button. 🧐

 

يعود تصميم هذه الأيقونة للمصمم نورم كوكس، الذي اختار أشكال عديدة مثل السهم للأسفل ورمز النجمة لحين استقراره على القائمة الثلاثية؛ ليبدأ استخدام هذا الزر عام  1981من قِبل Xerox Star. لكنه لم يحصل على شهرته الواسعة إلا في عام 2008 عندما استخدمته شركة تويتر. وبعدها بعام استخدمته شركة ios. ليصبح هذا التصميم الأشهر استخداماً على المواقع والتطبيقات الإلكترونية.

 

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

 

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

 

ما هو عمل زر القائمة المضغوطة؟ 🪟

 

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

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

 

كمثال على ذلك تطبيق Gmail لنظام الـ الأندرويد، نرى فيه أن زر القائمة المضغوطة ينسدل بشكل جانبي، وليس بشكل عامودي.

شرح معنى زر الهمبرغر Hamburger button ضمن واجهة المستخدم🍔
تطبيق Gmail لنظام الـ الأندرويد

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

شرح معنى زر الهمبرغر Hamburger button ضمن واجهة المستخدم🍔
قائمة تشغيل ويندوز

بمجرد البحث عن زر الهبرغر ستكون قادراً على ملاحظته في كل مكان. ولكن يبقى الغموض حول تسمية هذا الزر بالهمبرغر؛ أو من هو هذا العبقري الذي أطلق عليه هذا الأسم. مع إن المصمم الأصلي له أعطاه تشبيه مختلف وهو فتحات التهوية للنافذة. لكنه لم ينتشر كـ انتشار اللقب الثاني وهو “زر الهمبرغر”.

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

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

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

هل أنت مستعد لصقل مهارات التصميم التي تمتلكها؟

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

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

المقال- ترجمة- وبتصرّف من المصدر:

What Is a Hamburger Menu Button?

اشترك في النشرة البريدية وستصلك هدايا 🎁 وخصومات حصرية وقوالب جاهزة مجانًا

شارك المعرفة

اقرأ أيضًا 👇

نمّي مهاراتك وطوّر مسارك المهني بدورات مقدمّة من خبراء

الدورة التأسيسية في كتابة تجربة المستخدم

ابدأ في تعلّم أساسيات كتابة تجربة المستخدم، وتأهل لتصبح كاتب تجربة مستخدم في سوق العمل.

الدورة العملية في تصميم الواجهات – UI (جـديـد)

تركز على تصميم UI، تهدف لتطوير وتحسين مهارات مصمّم الواجهات وتهيئته لسوق العمل بشكل احترافي.

الدورة المتقدّمة في كتابة تجربة المستخدم

احترف كتابة تجربة المستخدم وتصميم المحتوى، وانضم إلى نخبة من المميزين في سوق العمل.

دورة تخطيط وتنفيذ دراسة قابلية الاستخدام​ – Usability Study (جـديـد)

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