Hamburger simgesi: onu kullanmanın yeni yolları. Neden hamburger menülerinden kaçınmalısınız ve nasıl yapılır?

Yalnızca kullanıcı başka bir öğe arayan menüyü açtığında görünürse, kullanıcıya belirli bir öğe hakkında bilgi vermeniz daha zor olacaktır.

Olduğu gibi yapılabilir jawbone uygulaması Yukarı: düğmenin yanında bildirimin özünü yansıtan bir simge gösterin yan menü.

Bu yaklaşım, yaratmayı içerdiği kadar iyi ölçeklenmez büyük bir sayı özel simgeler ve bir tasarımcı olarak bazen kullanmak zorundasınız standart simgelerbu daha az anlamlı.

Bunun tersi örnek, kullanıcıya bildirimin içeriğini gösteren ve doğrudan ilgili ekrana gitmelerine izin veren Twitter sekme çubuğudur.

Sorunun farkında olmak

Senin gibi görünebilir mecbur tüm bunları ekran alanından tasarruf etmek için yapın, ancak çoğu zaman insanların gerçekte ne gördüklerini yanlış anlarız. İnsanlar gözlerinin önündeki her şeyi görüyor gibi görünebilir, ancak aslında ekran boyutu minimum olsa bile hepimizin belirli bir konsantrasyon alanına sahibiz ().

Bu nedenle, ekran alanından tasarruf etme sorunu navigasyondan ödün vermeden çözülebilir - ve buna uygun olarak temel prensipler Sağlamamızı gerektiren HCI (İnsan Bilgisayar Etkileşimi) geri bildirim ve uygulamanın durumunu gösterir.

Not: HCI ilkelerine dair anlayışınızı tazelemeniz gerekebilir - eminim ki bu, tasarıma görsel bir yaklaşımı olan insanların yaptığı birçok tasarım hatasından kaçınmanıza yardımcı olacaktır.

Karar

Sorun hakkında çok konuştuk ama çözüm hala net değil.

Hamburger menüsünü ne zaman kullanabilirsiniz?

Bazı çok nadir durumlarda, bu model gerçekten haklıdır, ancak genel olarak kullanımından kaçınmaya değer.

IRCCloud, hamburger düğmesinin (bir dereceye kadar) haklı kullanımına bir örnektir: kanallar ve kanal üyeleri arasında gezinmek için kullanılır.

Ana ekranda hiyerarşik gezinme gerektiren herhangi bir alt ekran bulunmadığından bu kabul edilebilir; tüm içerik kalıcıdır.

Ancak bu durumda bile, arayüzün aşırı yüklü olduğu ve bilgi mimarisinin revize edilmesi gerektiği açıktır.

Kanal üyelerini gösteren yan menü (sağda), altında kanalla ilgili tüm eylemlerin gizlenebileceği bir eylem düğmesinin yerini alır. Bunun yerine, tasarımcılar tüm olası eylemleri (kanallar, ağ ve hesapla ilgili) tek bir eylem menüsünde bir araya getirmek zorunda kaldı:

Bu bizi sorunsuz bir şekilde makalenin bir sonraki bölümüne getiriyor:

Hamburger düğmesi nasıl değiştirilir?

Kenar çubuğu deseni kötü bilgi mimarisi: Hamburger düğmesi, insanlar onu kullanana kadar herhangi bir eylem dizisi göstermeyen başka bir arayüz öğesidir.

"Çözüm, bilgi mimarisini güncellemektir."

Yukarıdaki resimler, yan menüden nasıl kaçınabileceğinize dair bir örnektir. Renkli noktalar, kullanıcı arayüzü öğelerinin nasıl yeniden düzenlendiğini izlemenize yardımcı olur.

Bulgular:

1. Durum, Mesajlar sekmesinde sunulur
2. Arayüz öğeleri her zaman görünür ve erişilebilirdir
3. Gezinme hareketleri arasında çakışma yok

Altta yatan sorunları ele almaya ek olarak, aşağı kaydırırken uygulamanın gezinme çubuğunu gizleyerek biraz dikey alan kazanabiliriz. facebook örneği, ancak bu Safari'de de kullanılır). Sekme çubuğu yerinde kalır ve bu da uygulama gezinme çubuğu gizlendiğinde bile navigasyonu kullanmamızı sağlar.

Minimalist bir ruh halindeyseniz, belki bir araç çubuğu yeterli olacaktır. Önemli olan, navigasyonu belirgin bir yere getirmek, işlevlere doğrudan erişim sağlamak, gezinme hareketleri arasındaki çatışmaları önlemek ve atıfta bulundukları simgeler üzerinde uyarıları görüntülemektir.

[Güncelleniyor] Web siteleri söz konusu olduğunda, bilgi mimarisini de yeniden düşünmelisiniz, ancak bu iOS modellerini kullanmak yerine, gezinmeyi bir listede, en üstte görüntülemenizi tavsiye ederim: örnek. Bunun bir site gezintisi olduğu açıksa, insanlar kesinlikle daha fazla kaydıracak ve mevcut diğer tüm seçenekleri hemen görecek.

Ayrıca, adresindeki web siteleri konusuna geri dönersek mobil cihazlar: Bu ipuçlarıyla veya dokunma olaylarını kullanarak 300 milisaniyelik dokunma gecikmesini kaldırmayı unutmayın.

Her şey nasıl ölçekleniyor?

Burada iOS arayüzlerinden örnekler veriyorum - en iyi çözüm üzerlerinde sekmeler veya araçlar içeren bir panelin kullanılmasıdır.

Peki ya sekme çubuğunuzda 5'ten fazla öğe varsa?

Bu durumlarda yapmanız gereken ilk şey uygulamanın bilgi mimarisini yeniden düşünmektir. Ancak yine de beş sekmenin ötesine geçmeniz gerekiyorsa, bu yöntem genellikle kullanılır: son sekme kalan seçeneklerin listesine erişim sağlar.

Bu uygulama başka bir sorunla karşı karşıyadır: kaydırdıktan sonra araç çubuğu tanımlanmamış bir durumda kalır. Çaylaklar, kullanıcı eylemlerden birini (kırpma, döndürme vb.) Seçtikten sonra paneli gizler. Böylece, panelin tanımlanmamış durumu "sıfırlanır" ve ne zaman yeniden açılıyor orijinal durumunda görüntülenir.

Sonuç

Öyleyse, en başından itibaren sisteme yerleşik olan iOS çerçevesindeki kenar çubuğu deseninin sorunları ve çözümleri hakkındaki makaleyi okudunuz.

Umarım makale sizin için yararlı ve anlaşılır olmuştur. Herhangi bir yorumunuz varsa bana yazın

Hamburger simgesi her yerde. Çevremizdeki her yerde. Web uygulamalarında, mobil ve masaüstü sitelerde, yazılım... Bu her yerde bulunan üç çizgili simge artık o kadar yaygındır ki, gezinme menüleriyle benzersiz bir şekilde ilişkilendirilmiş gibi görünür. Ama öyle mi?

İÇİNDE son zamanlar hamburger ikonunun etkinliği konusundaki tartışmalar yeni boyutlara ulaştı. Seçkin tasarımcıların ve The Atlantic, TechCrunch, The Next Web ve Nielsen Norman Group gibi çeşitli sitelerde yazdıkları makalelerde, bunun bir UX antipattern olduğu, daha basitten bir gerileme olan modaya uygun ve uygulaması kolay bir simge olduğu sonucuna vardılar. daha etkileyici alternatifler. ... Ancak modelin tersi olsun ya da olmasın, simgenin kullanımı o kadar arttı ki çoğu web sitesi için, özellikle küçük ekranlarda neredeyse vazgeçilmezdir.

M.booking.com ekibindeki bir tasarımcı olarak konumum ve bu simgeyi bir açılır menüyü görüntülemek için kullandığımızdan dolayı, bu nesneyi araştırmaya karar verdim. Ve ben de onun utanç yolunu anlamaya çalışmak için ikonun kökenini inceleyerek başladım.

Bu umut verici görünüyor. Ancak simge klasik olmasına ve her zaman var olmasına rağmen, web tasarımcıları onu kullanırken daha az tutarlı davrandılar. Simge; listeler, sürükle ve bırak, yeniden sıralama, hizalama ve daha fazlası için kullanılmıştır. Belki de bu yanlış kullanım, eleştirisini bir menü ikonu olarak açıklıyor. Belki de yaygın ve çeşitli kullanımından dolayı, bu simge tek bir metaforu ifade etme yeteneğini kaybetti ve karşılığında kullanıcıların kafasını karıştırdı.

Bütün bu hikaye beni sorular sormaya sevk etti: "Gerçekten yanılıyor muyuz ve diğer herkes haklı mı? Bu, kullanıcılarımız için herhangi bir rahatsızlığa neden olur mu? Web sitemizde bu üç küçük satırın ne olduğunu gerçekten anlayan insanlar var mı? "

Bu blogun düzenli okuyucuları, bizim sonraki adım bu soruları bir A / B testi şeklinde sormaktı. Her şey gibi, hamburger ikonu da, menü ile etkileşim yoluyla bu ikonun en iyi çözüm olup olmadığını belirlemesi gereken birçok müşterimizden etkilenmiştir. Bu zamana kadar, fikir birliği eksikliğinin veya diğer sonuçların tasarımın geliştirildiği alıcıların davranışlarından kaynaklanmadığından emin olmak için yeterince makale ve veri okudum. Tarif edilen yöntemi izlemeye karar verdim James Foster En iyi mobil uzmanlarımızdan biri de dahil olmak üzere birçok kişi tarafından başvurulan - Luke Wroblewski.

Daha önce birkaç yerleşimi ve simge stilini (kenarlıksız, kenarlıksız, ikonik, farklı renkler vb.) Test ettik, ancak "Menü" kelimesini hiç test etmedik - bizim tarafımızdan desteklenen kırk bir dilde test etme isteğinin karmaşıklığı nedeniyle . Ancak, dil uzmanlarından oluşan ekibimizin yardımıyla çeviri bulmaya devam ettik ve testi yaptık:

Orijinal hamburger menü simgemiz, başlığın solunda ve sağında beyaz bir ayırıcı çubukla.

Beyaz kenarlıklı bir kutunun içindeki "Menü" kelimesi yuvarlatılmış köşelerayrıca sola hizalıdır.

Tüm kullanıcı tabanımızda bir deney yaptık. Ve ayrıca, bu öğenin şöhreti ve her yerde olması göz önüne alındığında, kullanıcı arayüzü, dünyanın her yerinden milyonlarca müşterimizi desteklenen dillerin her birinde test etmenin uzun sürmeyeceğini umuyorduk ve büyük bir sayı cihazlar.

Peki sonuç nedir? James Foster'ın deneyinde olduğu gibi, kelime fast food üzerinde mi kazandı, yoksa çörek ve pirzola kazandı mı?

Sonuçlar

Bu deney sırasında, simgeyi "Menü" kelimesiyle değiştirmenin kullanıcılarımızın davranışları üzerinde önemli bir etkisi olmadı. Büyük kullanıcı tabanımızın yardımıyla, çok yüksek bir olasılıkla, özellikle Booking.com ziyaretçileri için hamburger simgesinin, metin açıklama sürümüyle aynı şekilde rolünü yerine getirdiğini belirtebiliriz.

Elbette, bu verileri her şeye yansıtamayız. Bazı ülkelerde, bazı dillerde veya cihazlarda daha iyi veya daha kötü çalışmış olabilir. Ancak küresel olarak, "hamburger" in çok fazla alay edildiği sonucuna varabiliriz. Genel olarak, "Menü" kelimesi kadar tanınırdı. Tasarımın tanıtımını yönetme ruhuyla, muhtemelen diğer seçenekleri göz önünde bulundurmalıyız ve hamburger simgemize peynir, domuz pastırması ve patates kızartması eklemeyi denemeliyiz, ancak şimdi "üç hatlı arkadaşımızın" sıkıştığını duyurmaktan mutluluk duyuyoruz. her yerde. Gerçek yerleşimi, şekli, boyutu, konumu ve rengi elbette gelecekteki testler için bir konudur.

Bu şüphesiz hepimiz için A / B testinin özü hakkında bir ders. Genel olarak kullanıcı arabirimi öğelerini, modelini veya işlevini asla test etmezsiniz. Bunları belirli ve belirli senaryolar altında çok özel bir kullanıcı kitlesiyle test ediyorsunuz. Booking.com için işe yarayanlar siz veya kullanıcılarınız için işe yaramayabilir. Bu, kendi A / B testimizi yapmamızın nedenlerinden biridir. Diğer uzmanlardan alınan sonuçlar, diğer sitelerden alınan veriler veya bir barda hamburger yerken icat edilen hipotezler, müşterilerimiz ve platformumuz üzerinde test edilene kadar kanıtlanmamış olacaktır.

Kendi metaforumuzda kaybolmak değil, ama bu iyi bir hamburger tarifi gibidir. Tüm malzemeleri tam olarak benden sonra yazsanız bile, tamamen farklı bir hamburger elde edersiniz. Bu, elbette piyasada bulunan etin kalitesinden, ekmek için kullanılan undan ve diğer binlerce faktörden etkilenecektir. Şahsen bizim için Booking.com için iyi olup olmaması iyi bir fikirdir. Bunu web sitemizde tekrarlayabilirsek ve tüm müşterilerimiz için işe yarayacaksa.

Fikrimiz

Her zaman fikirlerinizi test etmeli ve verilerin size ne söylediğini ve hangi soruların ortaya çıktığını görmelisiniz. Benim tavsiyem? Bir ısırık al ve ne olacağını gör.

Mobil uygulamada gezinmeyi düzenlemek için hamburger menüsüne beş alternatif sundu.

"Dijital ürünler üzerinde çalışıyorsanız, muhtemelen hamburger menülerinin nasıl ve neden zararlı olduğuna dair düzinelerce makale okumuşsunuzdur. kullanıcı deneyimi anlaşılmazlığı ve verimsizliği nedeniyle mobil cihazlarda. Daha fazla daha fazla proje ile denemek alternatif seçenekler Menüyü sunan ”diye yazıyor Zoltan Collin.

Tasarımcı, malzemede listelenen alternatiflerin hiçbirinin diğerlerinden açık bir şekilde daha uygun ve etkili olmadığını belirtiyor - hepsi farklı durumlar için uygun.

1. Sekmeler

Colleen'in de belirttiği gibi, sekmeler uygun çözümmobil uygulamanın birkaç ana bölümü varsa ve kullanıcılar bu bölümler arasında hızla geçiş yapabilmelidir.

Colleen, geliştiriciler sık \u200b\u200bsık sekmelerin en basit gezinme modellerinden biri olduğunu düşünüyor. Ancak böyle bir menü oluştururken bile, birkaç kurala uymaya değer:

• Beşten fazla bölüm olmamalıdır.
• Sekmelerden biri (aktif) görsel olarak vurgulanmalıdır.
• İlk sekme "ana sayfa" olmalıdır. Sekmelere öncelik verilmeli veya kullanılmaları beklenen sıraya göre verilmelidir.
• Bağlama ve platforma bağlı olarak sekmeler ekranın üstüne veya altına yerleştirilebilir.
• Sekmeleri belirlemek için etiketler yerine simgeler kullanmaya değer, ancak kullanıcı her bir simgenin tam olarak anlamını biliyorsa ve olası eylemler (örneğin, sosyal medya uygulamaları için uygundurlar).

2. "Diğer" seçeneğine sahip sekmeler

Uygulamanın beşten fazla ana bölümü varsa, Colleen birinci menü türünün değiştirilmiş bir versiyonunun kullanılmasını önerir - "Diğer" seçeneğiyle sekmeler. Bu durumda, geliştirici panele en öncelikli dört bölümü yerleştirebilir ve geri kalanını ek bir sekmede gizleyebilir.

Colleen, "Bu bir hamburger menüsünden daha iyi görünmüyor, ancak sekmeleri, kullanıcının ihtiyaç duyduğu neredeyse tüm bilgilerin ilk dört bölümde yer alacağı şekilde seçerseniz, UX neredeyse etkilenmez" diye açıklıyor Colleen.

3. Açılır menü

"Diğer" bölümü ile sekmelerin bir varyasyonu - ekran boyutuna uyarlanan ve gösterilen bir menü farklı miktar her çözünürlükte sekmeler. Ekrana sığmayan sekmeler "Diğer" bölümündedir.

4. Kaydırma menüsü

"Birkaç bölümünüz varsa ve aralarında ana bölümleri ayırt edemiyorsanız, sekmeleri kullanın. ek bölüm etkili bir çözüm olmayabilir. Ardından menüdeki tüm öğeleri listeleyebilir ve paneli kaydırılabilir hale getirebilirsiniz ”diye yazıyor Collin.

Bu çözümün dezavantajı, tasarımcıya göre, başlangıçta sekmelerin yalnızca bir kısmının kullanıcı tarafından görülebiliyor olması ve geri kalanını görüntülemek için menüde gezinmeniz gerekiyor. Bununla birlikte, kullanıcılar, ürün kategorilerinin panelde listelendiği bir çevrimiçi mağaza uygulamasındaysa veya sekmeli kategorileri olan bir haber uygulamasındaysa, bu bir sorun olmayacaktır.

Bununla birlikte, tasarımcılar, kullanıcıların kaydırmayı nasıl kullanacakları konusunda net olduklarından ve görsel ipuçları belirlediklerinden emin olmalıdır. Örneğin, son öğeye bir "solma" efekti uygulayın.

5. Açılır menü

Tasarımcıya göre ilginç, ancak bölümlerin görünürlüğü ve erişilebilirliği gerekli olmadığında kullanılan en yaygın model değil - bir açılır menü.

Basit, işlevsel, sezgisel ve akılda kalıcı, herhangi bir yol işareti gibi, hamburger simgesi geçen yıl gerçek bir trend haline geldi ve herhangi bir modern web sitesinin ve mobil uygulama tasarımının ayrılmaz bir parçası oldu.

Bu basit simge taklit eder görünüm menü listesi, aşağıdaki özelliklere sahip cihazlar için idealdir: küçük ekranlar görsel tarafın önemli olduğu ve gezinmenin yolun dışında tutulması gereken web siteleri. Günümüz dünyasının taleplerini karşılayan oldukça etkili ve uygulanabilir bir çözümdür.

Diğer herhangi bir arayüz öğesi gibi, hamburger simgesi de her bir projenin ihtiyaçlarına bağlı olarak orijinal versiyondan bazı sapmalara sahip olabilir.

Projeye ve temaya bağlı olarak hamburger simgesi alabilir çeşitli formlartasarımı tamamlayan veya bağımsız, ayırt edici özelliği haline gelebilen.

Bugünün koleksiyonu, hamburger simgesinin 20 farklı varyasyonunu içeriyor.

Tasarımcı Dave Games'in hamburger simgesi hemen çok fazla ılık enerji veriyor. Karikatür tarzı oynaklık katar ve yalnızca en olumlu duyguları yaratır. Bu simgeyi, resimli modern arayüzlerin çoğunda güvenle kullanabilirsiniz.

Bu okyanus dalgası simgesi Matt Walker tarafından tasarlandı. Denize adanmış çeşitli projelerde kendini harika hissedecek. Ana renk olarak açık mavi ve etrafındaki bir bordür bu rozeti özel kılar.

Temiz, canlı ve esprili bir uygulama, bu yapının mutfak sitelerinde bir menü simgesi gibi çalışmasına izin verecektir. Bu durumda, arayüz hoş bir sanatsal dokunuşa sahip olacak.

Tasarımcı, tutkuyla hazırlanmış hamburger rozetlerinin 10 ilginç versiyonunu sunuyor. Seri kapakları farklı çeşit burgerler: biri peynirli, diğeri pastırmalı, üçüncüsü hindi ve diğerleri. Bir web siteniz varsa veya mobil uygulamarestorana adanmış fast foodo zaman kesinlikle işe yarayacaklar. Görsel olarak o kadar ilgi çekicidirler ki neredeyse her konuda yer bulabilirler.

Ve bu proje gerçekçi bir vektör hamburger sunuyor. Bu durumda kapatma düğmesi, "X" şeklini alan, soslu veya sossuz patates kızartması şeklinde yapılır. Bu, sayfa tasarımınıza egzotizm katabilecek yaratıcı bir çözümdür.

Resmi Star Wars web sitesi, dönen ilginç bir hamburger simgesi içerir. Bir ışık yansıması vektörü elde etmek için her çizgi iki parçaya bölünmüştür. lazer kılıçları... Çözüm, sitenin genel deneyimini geliştirir ve markayı güçlendirir.

Peter Twauri tarafından hazırlanan Burger Menu, simgenin güzel bir şekilde resmedilmiş bir versiyonudur. Anahtar özellik Bu simge, kesilmiş çörek ve et pirzolasını taklit eden bir dizi renkten oluşur.

Dizi var Çeşitli seçenekler çizgi stili kullanılarak gerçekleştirilen hamburgerler. Burada bir duble hamburger, bir peynir ve salata hamburgeri, açık bir sandviç ve birkaç tane daha bulacaksınız. Bulmak mükemmel çözüm temiz, düz arayüzünüz için baharat ve lezzet katmak kolay olacaktır.

Sanatçı, düğmenin üç eğlenceli versiyonunu sergiliyor: klasik hamburger, çizburger ve sosisli sandviç. Her biri bir veya iki renge dayalıdır, bu da onu çeşitli küçük arabirimler için uygun kılar. Burada renk doğru sandviç türünü yaratır.

Sanatçı, yalnızca bir menü simgesi içeren küçük bir animasyon ve normal bir "X" e (kapat düğmesi) dönüştürmeye eşlik eden birkaç yumuşak geçiş sunar. Fare hareket ettirildiğinde veya basıldığında ortaya çıkan özel efektler vardır.

Yukarıdaki örneklerin çoğundan farklı olarak, bu örnek, renkten ziyade ustaca ağırlık manipülasyonunu göstermektedir. Üst ve alt çizgiler ortadan daha kalın ve doğru hamburger görünümünü yaratıyor. Sanatçı görevle başarıyla başa çıktı.

Andrew Kovardakov'un ninja simgesi animasyon menüsü, çoğu hamburger düğmesinden farklıdır ve gizemli ve çekici bir alt metinle ilginç ve alışılmadık bir çözüm sunar. Burada her çizgi bir vektör ninjadır.

Ve bu simge, salata ve peynirli burgerin bir örneğidir. Herhangi bir sıkıcı arayüze lezzet katabilir. Bir restoran veya kafe web sitesi için mükemmel bir çözüm.

Bu, modaya uygun menü simgesi hakkında bazı ilginç gerekçeler bulabileceğiniz makale. Hamburger düğmesinin üç varyasyonunu gösteren bir resimle işaretlenmiştir. Birincisi birinci sınıf düz bir örnek, ikincisi renkli üç çizgili bir simge ve üçüncüsü ikinci örneğin tek renkli bir versiyonudur - bu en çok popüler seçim tasarımcılar arasında.

GIF şovları yumuşak geçişler bu minimalist ve zarif ikonun ilk hali ile son hali arasında. Animasyon ile başladığından beri sonuç olarak, diğerlerinden daha kısadır.

Liam Spradlin'in hamburger menüsü, kitaplar için bir dizi okul yer imine benziyor. Bu uygulama cesur ve biraz kaba. Böyle bir simge hemen fark edilir, ancak buna uygun bir ortam bulmak zor olabilir.

Şimdiye kadar simgelere ayrı ayrı baktık, ancak özellikle kelime "Menü" olduğunda kelimelerle iyi çalışıyorlar. Aşırı gibi görünse de, birlikte sofistike görünüyorlar. Bu durumda kullanılan 1 piksellik ultra ince çizgiler, yapboz parçaları gibi birbirine uyar.

Proje, bir hamburger simgesinin çerçevelendiğinde daha parlak ve daha çekici görünebileceğini kanıtlıyor. o mükemmel seçim için küçük cihazlarböyle bir simgenin dokunmatik gezinme için uygun olacağı yer.

Tasarımcı, çeşitli metamorfozlardan geçen, bir çarpıya veya bir oka dönüşen basit, şık üç çizgili bir simge görüntüler. Animasyon, herhangi bir proje için kullanışlı olabilecek çeşitli çözümler içerir.

Sonuçlar

İlk bakışta, menü simgesi gibi küçük şeylere fazla dikkat edilmemesi gerektiği anlaşılıyor. Ancak biraz hayal gücü gösterirseniz, bunu arayüzünüz için bir çeşit zevke dönüştürebilirsiniz. Özellikle geliştiriciler anlamıyla oynamaya başlarsa ve sanatsal tekniklerdaha alışılmadık ve dikkat çekici hale getirmek için.