Hamburger İkon Problemini Çözme
Hamburger simgesi - bir menüye bir bağlantıyı belirtmek için kullanılan üç küçük çubuk - şu anda Web'deki en tartışmalı teknikler. Tasarımcılar, hepimizin nefret ettiği söylendi; Müşteriler, herkese söylüyoruz, ondan da nefret ediyoruz. Neden o zaman, her yer mi?
Hamburger simgesi kolayca ölçeklenebilir ve temiz bir şekilde piksel ızgarasına sığar. Başlangıçta mevcut rolüne basılmış bir liste simgesiydi, ancak bir menü yalnızca bir seçenekler listesi olduğu için liste öğesini bu şekilde kullanmak anlamsal olarak doğrudur.
Konuyla ilgili çok sayıda tartışma, A / B testi, blog yazarı ve kullanıcı çalışmaları yapıldı, ancak bu çalışmalar neredeyse her zaman uygulama tasarımına odaklanıyor. Web tasarımında hamburger simgesi kullanıldığında çok daha önemli bir sorun olduğunu gösterir.
Hamburger simgesi ile ilgili sorun
Hamburger ikonunun değerini sorgulayan birçok tasarımcı var. Apple'ın benimsemesinden önce bu şekilde kullanılmasına rağmen, sıklıkla iOS stili bir simge olarak görülür.
Aslında, hamburger ikonunun bir menünün bir göstergesi olarak kullanılabilir olup olmadığı konusunda çok fazla çelişkili kanıt var. Bazı tasarımcılar, ikonun daha genç bir demografik tarafından kolayca tanındığını öne sürüyor, bazıları ise eski bir demografinin web-okuryazarlığı olarak onu tanıdığını öne sürüyor. Bu kanıtlardan gerçekten yararlanabileceğimiz tek sonuç, kullanılabilirlik testlerinin sonuçsuz kaldığını, paralel testlerin çoğu zaman çelişen sonuçları geri getirdiğini göstermektedir.
Evrensel olarak kabul edilen şey, kullanıcıların hamburger ikonunu tek bir bağlantı olarak tanımadıklarıdır - muhtemelen tek bir şeyden ziyade bir grup bağlantıya benzeyecek şekilde tasarlandığından. Desteklenen bir şey, bir sınır ile hamburger simgesini çevreleyen ya da bir arka plan vererek, daha fazla düğme gibi görünüyor - daha fazla skeuomorphic diyorum - daha fazla tıklama ile sonuçlanacaktır.
Hamburger simgesiyle daha fazla sorun
İkonun kendisinin tasarımı dışında, bir hamburger ikonu kullanma yaklaşımı da problemlerle dolu.
Birincisi, ve belki de en önemlisi, hamburger simgesi navigasyonunuza ekstra bir hareket ekler; Belirli bir sayfaya ulaşmak için tek bir tıklama aldığında, şimdi iki tane alacak. Web tasarımcıları için başparmak kuralı her zaman en fazla üç tıklama (mümkün olan her yerde) olmuştur, bir navigasyon probleminin çözümünden şu ana kadar, hamburger simgesi tekniği bir problemi diğeriyle değiştirir. Tabii ki, bu sadece hamburger simgesi için bir sorun değil, bu şekilde ortaya konulan herhangi bir navigasyon için bir sorun. Hamburger ikonu yerine 'Menü' sözcüğünü kullanabilir ve aynı engele sahip olursunuz, fark şu ki, hamburger simgesi başka bir şekilde kullanılamaz.
Hamburger tekniği de içeriğini gizliyor. Bir UX bakış açısından, kullanıcıların hangi eylemleri gerçekleştirebileceklerini öğrenmek için bir işlem yapmaları gerekmemelidir. Bu seçeneklerin hemen önünüzde olmadığı durumlarda 'Twitter'da paylaşmayı' veya 'Ödeme'ye git' öğelerini unutmak çok kolay. Kullanıcılar var olmadıkları bir bağlantı aramayacaklar.
Son olarak, hamburger simgesi tekniği sitenizin mevcut durumunu ve kullanıcının pozisyonunu gizler. Bir menüdeki durumları, hamburger simgesi tekniğinin engellediği bir kullanıcıya bağlamsal bilgi sağlar.
Hamburger simgesi ne işe yarar?
Hamburger simgesinin evrensel olarak nefret edildiği ve bir dizi problemle sonuçlandığı düşünüldüğünde, neden her yerde kullanılıyor?
Deneyimlerime göre, kesinlikle belirli demografikler arasında, hamburger simgesi kısa süre önce kolayca tanınabilme noktasına ulaştı. Bunun bir yıl veya daha eski ve bir yıl olma eğiliminde olan araştırmalar, birbirleriyle uzun bir zaman arasıdır.
Aslında bağlantı simgesi, kesin formları henüz ortaya çıkmayan bağlantı simgesi veya paylaşım simgesinden çok daha tanınabilir. Hamburger simgesi, farklı tasarımlarda sayısızdır.
En önemlisi hamburger simgesi yapması gerekenleri yapar: bize bir ton ekran mülkünü kazandırır. Bir müşteri size bir menüye eklenecek bir gagillion öğesinin listesini sunarsa, ekrandan onları kaydırmak ve onlara bağlantı vermek, kaba bir davranıştır, ancak istemcinin istediği içeriğe yer açmak için etkili bir yöntemdir.
Hamburger simgesinin sorunu diğer çözümlerden daha iyi çözdüğünü söylemek isterim, fakat bu doğru değil. Bunun yerine hamburger ikonunun sorunu diğer çözümlerden daha az çözdüğünü söyleyeceğim.
Sorunun kökü
Hamburger simgesi işe yaramıyor çünkü tasarımcılar ya da daha sıklıkla müşteriler mobil bir ilk yaklaşıma tam olarak bağlı değiller. 'Düzenli' bir site istiyorlar, ancak onların torunlarının telefonuna sıkışmışlar.
Hamburger simgesinin muhalifleri, onu 'Menu' kelimesiyle değiştirmeye meyilliydi - bunu yaparken, noktayı tamamen kaçırdılar. Hamburger ikonu, beğenmiş ya da beğenmemiş, şu anki anlamını elde etmiştir, ancak kullanıcılar, düğmenin ne olduğunu anlayabilen en büyük sorunu çözmüyorlar, bu da navigasyonumuzu gizlemek, kullanıcılarımızın seçeneklerini gizlemek, korkunç bir davranış -sabotaj.
Kısacası, hamburger simgesi, mobil ilk yaklaşımın tüm yönlerini bütün kalbiyle kucaklamak için kolektif başarısızlığımızın bir belirtisidir.
Daha iyi bir çözüm
Hamburger sorununu çözmek için, bildiğimiz gibi Web’in çalışmadığını kabul etmeliyiz. Mobil web’in yükselişi, kullandığımız sütun sayısını azaltmaktan ve daha ağır resim dosyalarından bazılarını düşürmekten çok daha fazlasını ifade ediyor.
Mobil ağ, eski ağa farklı bir şekilde kullanılmaktadır. Mobil web, özel uygulamalar bağlamında mevcuttur ve kullanıcılar, Web'in benzer şekilde deneyimlenmesini bekler.
Facebook'un uygulaması, bir sekme çubuğu için ünlü hamburger simgesini değiştirdi ve sonuç olarak daha iyi dönüşümler elde etti. Ancak Facebook, takas menü tasarımlarından çok daha önemli bir şey yaptı. Son zamanlarda Messenger uygulamasını yayınladılar ve bununla ilgili büyük bir sorun, zaten mesajlaşmayı entegre edebildikleri mükemmel bir işlevsel ve popüler uygulamaya sahip olmalarıydı. Facebook, her uygulamanın, tek bir karmaşık yerine iki basit uygulamaya ulaştığı role odaklanarak işlevlerini bölümlere ayırdı. Azaltılmış işlevsellik, azaltılmış menü seçenekleri kümesi ve bir hamburger menüsü için daha az gereksinim ile sonuçlanır.
İyi uygulamalar son derece odaklıdır ve Web'e tabi olmaktan çok daha titiz bir kullanıcı testi ile bu şekilde gelişmiştir. Uygulama stili bir deneyim oluşturmak için sitelerimizi basitleştirmemiz, tekrar basitleştirmeniz ve biraz daha basitleştirmeniz gerekir. Gerekirse, mimarinizi hemen hemen yönetilebilir ısırık büyüklükteki parçalara, mikrositlere ayırın. Kullanıcılarımıza basit bir seçenekler grubu sunduğumuz zaman, karmaşık bir menü problemi asla ortaya çıkmaz.
Hamburger ikonundan faydalanmak, yaralanmaya yara bandı yardımı yapmak gibi bir şeydir: onu sarar, ama bir şeyin altında hala kırık.
Sadece mobil ilk yaklaşımını tam olarak benimsiyor ve onu sadece tasarımımıza değil, içeriğimize ve bilgi mimarimize de uygularsak, hamburger menüsünü tarihe taşıyacağız.
Öne çıkan görsel / küçük resim, kullanımlar Hamburger resmi Mononc 'Paul ile