Web sitesi tasarımında hamburger menüleri

İnterneti kullanan herkes muhtemelen internette onlarca Hamburger menü örneği görmüştür. Bu basit, üç çizgili simge, günümüzde en çok tanınan düğmeler arasındadır. Birçok web sitesi, genellikle sağlam gezinme öğelerini gizlemek ve yerden tasarruf etmek için bunu kullanır. Ancak kullanışlı olmalarına rağmen web sitesi tasarımında Hamburger menüler hala en tartışmalı web tasarım seçenekleri arasında yer alıyor . Bazıları için, tüm duyarlı tasarımlarda yolunu bulması gereken gerçek bir çözüm. Diğerleri için, pratik yapısal tasarımın yanlış yorumlanmasından kaynaklanan talihsiz bir yan etki.

Web sitesi tasarımında Hamburger menülerine giriş

Sadece değil, hamburger menüleri genellikle duyarlı web sitelerinde ve uygulamalarda küçük ekran görüntülerine uyum sağladıklarında bulunur. İster sol ister sağ tarafta olsunlar, profesyonel tasarımcılar ve geliştiriciler, değerli alandan tasarruf etmek için hamburger manusunu kullanır. Bu popüler bir çözümdür çünkü içeriğin geri kalanına daha fazla yer bırakmak için ana gezinmeyi gizlerler . Ancak herkes bunun uygun bir çözüm olduğunu düşünmüyor. Birçoğu tam tersini iddia ediyor.

Hamburger menüsünü daha iyi anlamanıza yardımcı olmak için burada tartışacağız:

• Hamburger menüleri nelerdir
• Web sitesi tasarımında Hamburger menüleri konsepti
• Arkasındaki tartışma
• Alternatif uygulama
• Web sitesi tasarımında Hamburger menülerinin Genel Artıları ve Eksileri

Hamburger menüleri nelerdir?

Basitçe söylemek gerekirse, bir hamburger menüsü, büyük gezinme çubuklarına basit ve daha küçük bir alternatiftir . Temel olarak, web sitenizi karıştıran gezinmeden her şeyi yerleştirebileceğiniz bir çekmece görevi görür. Hamburger menüleri genellikle üst üste üç satır gibi görünür. Adı, hamburgerlere bariz benzerliğinden geliyor.

Her şey 1981'de Xerox Star iş istasyonunda başladı. Zamanın grafiksel kullanıcı arayüzü tasarımcısı Norm Cox, gizli öğelerin listesini açmak için bir simge yaptı. Amaç, uzun seçenek listeleri için yerden tasarruf sağlayan alternatif bir çözüm sunmaktı . Masaüstü bilgisayarlarda sağ tıklama kavramsal menüsüne benzer bir şey. Ancak, 2009 yılına kadar hamburger menüsü çok fazla ihtişam görmedi. Ancak Facebook ve diğer birkaç web sitesi onu tekrar tanıttığında, hamburger menüsü yolculuğuna başladı. O zamanlar ortaya çıkan mobil cihazlarda değerli ekran alanından tasarruf etmek için neredeyse mükemmel bir çözümdü.

Ama öyle miydi?

Hamburger menüsü hakkında bitmeyen tartışma

Orijinal yaratıcının amacı basit ama etkili bir şey yaratmaktı. Sağ tıklama menüsünün arkasındaki aynı prensibi izleyerek dağınıklığı azaltacak küçük bir düğme . Benzer, akılda kalıcı ve kullanımı kolay olması gerekiyordu. Ve başlangıçta amaçlanmadığı mevcut haliyle bile öyle.

Ancak konu hamburger menüleri olduğunda herkes aynı coşkuyu paylaşmıyor . Birçok tasarımcı, web sitesinde gezinmenin en önemli bölümünü gizlediği için eleştiriyor. Sonuç olarak, ziyaretçiler onu bulmakta zorlanacaklar. Hamburger menüsünü yalnızca menüde dörtten fazla gezinme öğesi olduğunda kullanmanızı önerirler. Öte yandan, çoğu insan hamburger menülerinin görünümüne ve işleyişine şimdiden alıştığı için bu iddialar gelecekte değişebilir.

Alternatif kullanım ve uygulama

“Dört unsur” kuralının yanı sıra, hamburger menüsünün kullanılabilirliğini nasıl geliştireceğinize dair başka öneriler de var.

• Hamburger menüsünü diğer özelliklerle birleştirin . Örneğin, arama fonksiyonu ile hamburger menüsünü yan yana yerleştirebilirsiniz.
• "Hamburgeri" daha ayırt edilebilir hale getirmek için farklı şekillerde, kenarlıklarda ve renklerde yer tutucular kullanın .
• Köşelerden biri olması gerekmeyen alternatif konumlandırma bulun .
• Ziyaretçiler sayfayı kaydırmaya başladığında sabit bir konuma sahip yüzen bir hamburger menüsü oluşturun .

Buradaki fikir, cihazlarının ekranının boyutundan bağımsız olarak mobil kullanıcılar için uygun, temiz ancak ayırt edilebilir bir tasarım sağlamaktır.

Web sitesi tasarımında Hamburger menülerinin Genel Artıları ve eksileri

UX (kullanıcı deneyimi) açısından, hamburger menüleri iki ucu keskin bir kılıç olabilir. Çoğu durumda işe yarayabilirken, diğerlerinde kafa karışıklığı yaratabilir. Ne zaman kullanılacağını anlamak için Hamburger menülerinin tüm Artılarını ve Eksilerini kontrol etmek daha iyidir.

Artıları:

• Hamburger menüsü dağınıklığı azaltır - en önemli olduğu anda çalışır. Alanın doğru kullanımı bazen mobil web siteleri ve uygulamalar için her şey anlamına gelebilir. Elinizin altındaki ekranın boyutu göz önüne alındığında, size daha fazla alan sağlayabilecek her şey iyidir. Ayrıca, ekrandaki çok fazla öğe, yalnızca ziyaretçilerin dikkatini doğru içeriğe vermekten alıkoyabilir.
• Navigasyonu anlaşılır kılar - Bugün hemen hemen herkes hamburger menüsünü gördüklerinde bunun ne için kullanıldığını anlıyor. Bizler görsel varlıklarız ve bir sütunda üç yatay çizgiye benzeyen bir simgeyi fark etmek kolaydır. Özellikle de bize en sevilen fast foodlardan birini hatırlatıyorsa. Sadece adıyla kaç farklı simge ve marka logosu bildiğinizi bir düşünün.
• İkincil navigasyon öğesini yoldan uzak tutmak için harika bir seçenek olabilir – Tüm navigasyonunuzu hamburger menüsüne yerleştirmeniz gerektiğini söyleyen bir kural yoktur. Çoğu zaman, en iyi çözümlerden biri, ana gezinme öğelerini web sitesinde bırakmak ve diğer tüm ikincil seçenekleri hamburger menüsüne yerleştirmektir. Bu temelde her iki dünyanın da en iyisini alır ve yine de amacına hizmet eder.

Eksileri:

• Önemli navigasyon görünmüyor – Navigasyonunuzu bir hamburger menüsüne dönüştürdüğünüzde onu neredeyse görünmez hale getiriyorsunuz. Birkaç araştırma, bu nedenle web sitesi katılımının önemli ölçüde düşebileceğini doğrulamaktadır. Başka bir deyişle, bazı insanlar hemen dikkatlerini çekmediği için daha fazla tıklamazlar.
• Herkes anlamıyor - daha az olası, ancak yine de hamburger menüleriyle ilk kez karşılaşan ziyaretçiler var. Tanıdık görünebilir, ancak eylemi yapmaları için yeterince motive edici veya açıklayıcı olmayabilir. Ne için kullanıldığına dair başka bir gösterge olmadığı için olduğu gibi bırakacaklar. Bu değişiyor, ancak bazen sezgisel olmayabilir. Özellikle tasarımcılar çok fazla özgürlük kullanıp tamamen soyut hale getirdiğinde. Veya "hamburger" görsel olarak yeterince ayırt edici değildir.
• Hamburger menüsü kullanmak için ek "çaba" gerektirir - Aptalca gelse de, teknik olarak bir hamburger menüsü, tipik gezinmeden birkaç adım daha fazlasını gerektirir. Bir yandan telefonlarını tutarken herkesin başparmaklarıyla ulaşamayacağı gerçeğinden bahsetmiyorum bile.

Sübjektif görüşünüz ne olursa olsun, kullanıcılarınız için en iyi seçeneğin ne olduğunu düşünmeyi asla unutmayın. Hamburger menülerini beğenebilirsiniz, ancak yine de koşullar doğru görünmüyorsa onları kullanmazsınız. Veya tamamen nefret edebilirsiniz, ancak web siteniz veya uygulamanız için en iyi çözüm olabilir. Web sitesi tasarımında hamburger manusunun doğru uygulanmasının duruma bağlı ve duruma göre farklı olabileceğini unutmayın. Size uygun olup olmadığını anlamak için birkaç A/B testi yapın ve kitlenizin bu konuda ne düşündüğünü görün.