زر الهمبرغر، أيقونة الهمبرغر، أو زر القائمة المضغوطة لا علاقة له بالطعام ولكن هو وصف لشكل القائمة المضغوطة الموجودة ضمن واجهة المستخدم.
تعالوا معنا ضمن هذا المقال لنتعرف أكثر على هذه الأيقونة وتاريخها وماهو استخدامها.
ما هو زر الهمبرغر Hamburger button؟ ?
قبل كل شيء يعتبر شكل القائمة المضغوطة ?المؤلفة من 3 أو 4 خطوط أفقية متوازية مشابهة تماماً لطبقات الساندويش المعروف بـ اسم (الهمبرجر).
غالباً ما تتواجد هذه القائمة أعلى اليسار أو اليمين ضمن واجهة المستخدم. وعادة ما تكون وظيفتها إعطاء خيارات متعددة.
بمعنى أبسط وأوضح زر الهمبرغر هو ما يسمى “القائمة”، ومن خلاله يمكننا التنقل بسهولة ضمن الموقع أو التطبيق.
أصل تصميم زر الهمبرغر Hamburger button. ?
يعود تصميم هذه الأيقونة للمصمم نورم كوكس، الذي اختار أشكال عديدة مثل السهم للأسفل ورمز النجمة لحين استقراره على القائمة الثلاثية؛ ليبدأ استخدام هذا الزر عام 1981من قِبل Xerox Star. لكنه لم يحصل على شهرته الواسعة إلا في عام 2008 عندما استخدمته شركة تويتر. وبعدها بعام استخدمته شركة ios. ليصبح هذا التصميم الأشهر استخداماً على المواقع والتطبيقات الإلكترونية.
بعبارة أخرى انتصر التصميم البسيط؛ وثلاث خطوط صغيرة متوازية حققت الهدف بكونه مرئياً بكل سهولة ومميز بشكله، مع مقاسات صغيرة يفرضها عالم التصميم.
من ناحية أخرى لم يأخذ هذا التصميم حقه ولم ينتشر بسرعة هائلة إلا بعد انتشار الهواتف المحمولة وانتشار تصميم التطبيقات عليها، ليأتي هذا الزر مكتسحاً ويأخذ مكانه ليستطيع الدلالة بكل بساطة على خيارات مخفية ضمن القائمة.
ما هو عمل زر القائمة المضغوطة؟ ?
كما ذكرنا سابقاً، كان الغرض الأساسي منه كـ قائمة تحتوي على خيارات متعددة؛ تنسدل على شكل عامودي، لذلك نرى أن الشكل الأساسي لها خطوط فوق بعضها البعض.
بالإضافة إلى ذلك؛ خاصة بعد تطوير المواقع والتطبيقات والأجهزة الإلكترونية، أصبح استخدامها يتضمن قوائم جانبية والتي تسمى “الشريط الجانبي”.
كمثال على ذلك تطبيق Gmail لنظام الـ الأندرويد، نرى فيه أن زر القائمة المضغوطة ينسدل بشكل جانبي، وليس بشكل عامودي.
كما يمكن أن نراه ضمن قائمة تشغيل ويندوز 10. حيث يؤدي النقر عليها إلى إعطاء خيارات كثيرة جداً، حتى إنها تعطي اختصارات لجميع القوائم.
بمجرد البحث عن زر الهبرغر ستكون قادراً على ملاحظته في كل مكان. ولكن يبقى الغموض حول تسمية هذا الزر بالهمبرغر؛ أو من هو هذا العبقري الذي أطلق عليه هذا الأسم. مع إن المصمم الأصلي له أعطاه تشبيه مختلف وهو فتحات التهوية للنافذة. لكنه لم ينتشر كـ انتشار اللقب الثاني وهو “زر الهمبرغر”.
لكن عالم التصميم يتطور يومياً، وتصبح متطلبات المستخدم قائمة على سهولة الاستخدام أكثر وأكثر. على الرغم من شهرة هذا التصميم “زر الهمبرغر” وبساطته؛ لكنه أحياناً لا يلبي الغرض منه بسبب عدم معرفة بعض المستخدمين له. لذا، لجأ بعض المصممين لتبسيطه أكثر ليمنح المستخدم تجربة سهلة الاستخدام وواضحة بشكل كبير. من خلال تسمية العناصر بمسمياتها بشكل واضح أو بوضع نقاط أفقية للدلالة على القائمة وتوفير مساحة أكبر.
في الختام، اكتشفنا أهمية زر الهمبرغر في واجهات المستخدم. نأمل أن تكون هذه المقالة قد زودتك بفهم أفضل لكيفية ولماذا يتم استخدامه، بالإضافة إلى آثارها على إنشاء تجربة مستخدم أكثر سهولة. هل صادفت استخدامات أخرى لأيقونة الهمبرغر؟ نود أن نسمع منك والتعرف على تجاربك!
هل أنت مستعد لصقل مهارات التصميم التي تمتلكها؟
يمكنك متابعة معلوماتنا المقدمة عن تصميم الواجهات التي تركز على تصميم واجهات المستخدم وتقدمّها منصة UX Writing بالعربية باللغة العربية، تهدف إلى تطوير وتحسين مهارات مصمّم الواجهات وتهيئته لسوق العمل بشكل احترافي وفعّال نكتب لك مقالات متخصصة من الصفر حتى مرحلة الاحتراف.
هذه المقالات موجهة لكل مصمّم يرغب بتكوين وتصميم شاشات فعالة وسهلة الاستخدام وفي غاية الجمال، سواء كنت في أول مسارك المهني أو تحتاج إلى تطوير مهاراتك في هذا المجال الهام للمشروعات الرقمية. يمكنك حجز مقعدك الآن في دوراتنا لاكتشاف المزيد.
المقال- ترجمة- وبتصرّف من المصدر: