İnternet üzerinden alışveriş yapmak için cep telefonunu kullanan insanların sayısı giderek arttığından, web sitelerinin mobil uyumlu ve kullanımı kolay olması artık şart. Ancak bir sorun var: telefon ekranlarında yer oldukça kısıtlı. Sitenizin gezinme öğeleri iç içe geçmişse ya da kafa karıştırıcıysa, ziyaretçiler büyük olasılıkla siteden çıkıp başka yerden alışveriş yapar.
İşte bu yüzden birçok web sitesi ve uygulama, mobil gezinmeyi kolaylaştırmak için hamburger menüyü kullanıyor. Üç çizgiden oluşan bu basit simge, "daha fazla gezinme seçeneği tam olarak burada" anlamına gelen evrensel bir sembol haline geldi. Sitenin gezinme seçeneklerini tek bir düğme altında topluyor.
Hamburger menünün avantajları ve dezavantajları hakkında daha fazlasını okuyun: tarihçesi, temel özellikleri ve mobil web sitesi tasarımında onu nasıl etkili şekilde kullanacağınız.
Hamburger menü nedir?
Yıllarca standart web sitesi gezinme yöntemi yatay bir menüydü: her kategorinin ekranın üst kısmında uzandığı bir kelime dizisi. Ancak 2000'lerin sonu, 2010'ların başında akıllı telefon teknolojisi ve mobil internet bağlantısındaki gelişmelerle mobil internet kullanımı hızla yaygınlaştı. Bu durumda web tasarımcılarının alandan daha çok tasarruf eden bir çözüme ihtiyacı vardı.
İşte tam da bu noktada hamburger menü (☰) devreye girdi: paralel yatay çizgilerin (isterseniz ekmek diyelim) üst üste dizildiği, ortadaki çizginin (hamburger köftesi) araya sıkıştığı basit bir simge. Kullanıcıların gerektiğinde gezinme seçeneklerini açıp kapatmasına imkân tanıyor. Hamburger menü düğmesini genellikle web sitesinin ya da uygulamanın sol ya da sağ üst köşesinde bulursunuz.
Hamburger menünün tarihçesi
Hamburger menü aslında mobil cihazlardan daha eskiye dayanıyor. 1980'lerin başında tasarımcı Norm Cox, orijinal Apple Macintosh arayüzünün öncüsü olan Xerox Star iş istasyonunun grafik kullanıcı arayüzü için hamburger menü ikonu tasarladı. Cox, bir tıklamayla işlem seçeneklerinin listesini açan, basit ve kolayca tanınabilen bir simge istiyordu.
İlk kez tanıtıldıktan sonra sınırlı ölçüde kullanılan hamburger menü, 2009’a kadar büyük ölçüde unutuldu. Küçük ekranlarda menü seçeneklerini kullanıcıları bunaltmadan sunmanın verimli yollarına duyulan ihtiyaç, hamburger menü simgesinin kompakt yapısını ideal bir çözüm haline getirdi.
Twitter ve diğer mobil uygulamaların hamburger menüyü benimsemesiyle simgenin popülerliği iyice arttı. Ardından iPhone 3GS'teki Sesli Notlar'da ve ona eşlik eden iOS 4'te kullanılması, hamburger menünün gizli gezinme seçeneklerini temsil eden tanıdık bir simge haline gelmesini sağladı.
Hamburger menünün avantajları ve dezavantajları
Hamburger menüler mobil cihazlar için idealdir, ancak gezinme çubukları ve sekmeli menüler masaüstü kullanıcılarına daha iyi hizmet edebilir. İşte nedeni:
Avantajları
Hamburger simgesinin en önemli avantajlarından biri kompakt yapısıdır. Değerli ekran alanından tasarruf sağlar ve web sitesi tasarımını sadeleştirir, özellikle de akıllı telefonlar gibi küçük ekranlarda. Hamburger simgesine tıkladığınızda ya da dokunduğunuzda, sitenin gezinme seçenekleri kayan menü, açılır menü veya tam ekran görünüm şeklinde açılır. Böylece mobil müşteri deneyimi iyileştirilebilir.
Dezavantajları
Alandan tasarruf avantajı yadsınamaz olsa da bazıları masaüstü sitelerindeki hamburger menülerin keşfedilebilirliği engelleyebileceğini savunuyor. Kullanıcılar menü simgesine aşina değilse onu tamamen kaçırabilir veya önemli bir site içeriğini ya da gezinme seçeneklerini fark etmeyebilir.
Bunu çözmek için farklı cihazlara farklı menü yapıları sunan duyarlı tasarım şablonları uygulamayı düşünebilirsiniz. Bir web sitesi masaüstünde geleneksel yatay bir gezinme çubuğu gösterebilir, ancak ekran alanından tasarruf etmek için mobil cihazlarda hamburger menüye dönebilir.
Hamburger menü kullanım örnekleri
Duyarlı tasarıma sahip web sitelerinde hamburger menü genellikle yalnızca mobil sürümde görünürken masaüstünde farklı bir menü stili kullanılır. Hamburger menüleri etkili şekilde kullanan birkaç e-ticaret web sitesini inceleyelim:
TCB Jeans
TCB Jeans, mobil sitesinin üst kısmındaki standart üç çizgili hamburger menü düğmesiyle sade bir gezinme deneyimi sunuyor. Düğmeye dokunduğunuzda, sol taraftan Ana Sayfa, Ürünler ve Hakkımızda gibi bağlantıların yer aldığı bir liste açılıyor. Ürünler bağlantısının yanında küçük bir artı işareti var ve bu işaret, dokunulduğunda ek seçeneklerin açılacağını gösteriyor.
TCB'nin masaüstü web sitesinde de bir hamburger menü var. Bu sayede tam genişlikte bir fotoğraf arka planı ve dikkat çeken promosyonlar öne çıkıyor. Mobil sürümde hamburger menü bir katman olarak açılıyor, kullanıcılara menünün gizlenebileceğine dair görsel bir ipucu veriyor ve arkasındaki sayfayı gösteriyor. TCB'nin hamburger menü tasarımı şu özelliklere sahip:
- Sade. Küçük bir telefon ekranında çok sayıda menü öğesini aynı anda göstermek ekranı kalabalıklaştırabilir. Onları hamburger menünün altına gizlemek daha iyi.
- Alışıldık. Hamburger, mobil sitelerde yaygın olduğundan çoğu kullanıcının kafasını karıştırmıyor.
- Ürünlerin öne çıkmasını sağlıyor. Menü hamburger düğmesinin altında gizlendiğinde ürün fotoğrafları daha çok dikkat çekiyor ve ürünler ön plana çıkıyor.
Gymshark
Gymshark'ın web sitesi, bir masaüstü web sitesinin mobil için optimize edilmiş sürümünden nasıl farklılaşabileceğinin harika bir örneği. Masaüstünde hamburger menü yok; ancak mobilde hamburger menü sol üst köşede beliriyor. Üzerine dokunulduğunda bir arama kutusunu ve ürün kategorisi alt menülerini ortaya çıkarıyor. Ana sayfaya dönmek için sağ üstteki X simgesine dokunmanız yeterli.
Gymshark'ın hamburger menüsü oldukça etkili çünkü kullanıcıların ilgisini hemen çekmek için fırsatları ve yeni ürünleri öne çıkarıyor. Ayrıca oldukça alışıldık bir yapıya sahip; menü düğmesi beklediğiniz yerde bulunuyor ve ardından basit, anlaşılır bir liste açılıyor.
Başarılı bir hamburger menü için ipuçları
Hamburger menü kullanan web sitesi sahipleri, kullanıcı deneyimini geliştirmek ve dönüşüm oranlarını iyileştirmek için şu altı ipucunu akılda tutabilir:
Kolayca görünür olmasını sağlayın
Çoğu durumda hamburger menüler küçüktür. Yine de kolayca fark edilebilir olduğundan emin olun. Onu, kullanıcıların bakma eğiliminde olduğu ekranın sol üst köşesine ya da sağ üst köşesine yerleştirin. Ayrıca konumunu sitenizin tüm sayfalarında tutarlı şekilde koruyun.
Standart hamburger simgesine bağlı kalın
Hamburger menünüz için yaygın olarak tanınan üç paralel yatay çizgiyi (☰) kullanın. Bu simgeler yaygındır, çoğu kullanıcı amaçlarını hemen anlar.
Menü öğelerini önem sırasına göre düzenleyin
Menü öğelerini mantıklı bir şekilde düzenleyin. Bir arama kutusu ekleyebilir, ardından en önemli, en sık erişilen kategorileri ya da sayfaları yukarıdan aşağıya sıralayabilirsiniz.
Mobil uyumluluğu ve erişilebilirliği sağlayın
Menünüzün tüm mobil cihazlarda ve dokunmatik ekranlarda sorunsuz işlediğinden emin olun. Menü öğeleri parmakla kolayca dokunulacak kadar büyük olmalı.
Animasyonlar ve görsel ipuçlarından yararlanın
Kullanıcı menüyle etkileşime girdikçe hafif efektler görsel ipuçları sunar. Örneğin çizgiler dönüp bir X ya da + haline gelerek açılmayı ve kapanmayı gösterebilir. Çizgiler kalınlığını değiştirebilir ya da hafifçe genişleyebilir. Menü açılıp kapanırken kullanılan solma ve kayma efektleri, arayüze derinlik hissi katar. Ayrıca dokunulduğunda rengini değiştirebilir veya hafifçe zıplamasını sağlayabilirsiniz.
Test edin ve geribildirim alın
Hamburger menünüzü tamamlamadan önce onu gerçek kullanıcılar üzerinde test edin. Onunla nasıl etkileşime girdiklerini gözlemleyin ve geribildirim alın.
Hamburger menüyü diğer gezinme araçlarıyla kullanmak
Bazen site kullanılabilirliğini iyileştirmenin en iyi yolu, farklı gezinme araçlarını birlikte kullanmaktır. Her türün kendi güçlü ve zayıf yönleri vardır, ancak birlikte kullanıldıklarında daha akıcı ve etkili bir kullanıcı deneyimi yaratılabilir.
E-ticaret web tasarımcıları, ürünleri keşfetmeyi kolaylaştırırken sepete ve ödeme sürecine de doğrudan erişim sağlayan gezinme araçlarını birlikte kullanabilir. Tüm gezinme öğelerinin dokunmatik ekranlarda kolayca kullanılabildiğinden emin olun. Hedef kitlenize en uygun seçeneği belirlemek için farklı kombinasyonları test edin:
- Üst gezinme çubuğu + hamburger menü. Mağaza ve sepet gibi temel kategoriler ve işlevler için üst gezinme çubuğunu kullanın; hamburger menüyü ise Hakkımızda, İletişim, Müşteri Hizmetleri ve Politikalar gibi daha seyrek ziyaret edilen sayfalara erişmek için ayırın. Böylece ana ekran sade kalır ve yine de gerekli sayfalara hızlı erişim sağlanır.
- Sekmeli gezinme + hamburger menü. Bir ürün kategorisi sayfasının içinde ürünleri filtrelemek ya da sıralamak için sekmeli gezinmeyi kullanın; Yeni Gelenler, En Çok Satanlar ve Fiyata Göre Sırala gibi. Böylece kullanıcılar genel site gezinmesi için hamburger menünüzü kullandıktan sonra ürün aramalarını kolayca daraltabilir.
- Sabit üst çubuk + hamburger menü. Sabit üst çubuk, ana kategorilere hızlı erişim sağlayan bağlantıları içerir ve kaydırdıkça ekranın üst kısmında kalır. Hamburger menü ise daha seyrek ziyaret edilen sayfalar için kullanılır.
Örneğin Fly by Jing'in web sitesi genel gezinme seçenekleri için hamburger menü kullanırken mağaza sayfasında ürünleri daha ayrıntılı kategorilere ayıran dört seçenekli bir sekmeli menü bulunuyor: "Soslar", "Setler", "Kiler", "Markalı Ürünler".
Hamburger menü, SSS
Neden hamburger menü deniyor?
Hamburger menü terimi, simgenin bir hamburgere görsel olarak benzemesini ifade eder. Üst üste dizilmiş üç yatay çizgiden oluşur.
Web sitesindeki hamburger menü nedir?
Hamburger menü, tıklandığında ya da dokunulduğunda bir web sitesi veya web sayfası için bir gezinme menüsünü ortaya çıkaran basit bir simgedir.
Üç noktalı menünün adı nedir?
Üç dikey noktayla temsil edilen bir menü genellikle "daha fazla seçenek" menüsü, "dikey üç nokta" ya da bazen "kebap menüsü" olarak adlandırılır.
