web-gelistirme-sc.com

3x3 9 nokta simgesini bir uygulama menüsü olarak kullanmalı mıyız?

Web gelişmeye devam ettikçe ve daha karmaşık uygulamalar ortaya çıktıkça, kullanıcının uygulamalar arasında hızlı bir şekilde gezinmesine izin verilmesi gerekmektedir. Bu eylem, uygulamaların içinde gördüğümüz gezinme menüsünden farklıdır, daha küçük ekranlarda küresel gezinme için bir kongre haline gelen tartışmalı hamburger menü simgesi. Burada uygulamalar arasındaki navigasyona bakıyoruz.

enter image description here

Google, bunu Google Haritalar, Google Play, Google Drive ve diğer birçok Google Uygulaması uygulamaları arasında gezinmek için kullanır.

enter image description here

Microsoft ayrıca, kullanıcıların OneDrive, Word Online, Sway ve diğer Microsoft Uygulamaları uygulamaları arasında gezinmesini sağlamak için bunu kullanır.

enter image description here

Ancak aynı mesajı iletmenin başka yolları da var. Bazıları 4x4 16-nokta simgesini, diğerleri 4-nokta daha fazla menünün bir uzantısı gibi görünen 4 nokta kullanır. Soru, 3x3 9 noktalı uygulamalar menü simgesinin kullanılıp kullanılmayacağıdır, çünkü daha büyük oyuncular bu simgeyi uygulamalar arasında geçiş yapmak için metafor olarak kullanıyor gibi görünüyor.

enter image description here

Not: Bu soru hamburger menüsü ile ilgili değildir. Bir uygulama menüsünün kullanımı ile ilgilidir.

42
Benny Skogberg

BURGER VS GRID - aynı veya farklı bağlam?

Bence burger ve ızgara genellikle farklı anlamlara sahiptir, ancak henüz hiçbir yerde resmileştirilmemiştir (en azından ISO veya W3 standartları gibi yaygın olarak bilinmemektedir).

Burger menüsü genellikle bir bağlamdaki içerikte gezinmeyle ilgilidir. Bir web sitesindesiniz ve sayfanın farklı alt bölümlerine gidin. Aynı site, farklı metin/resimler. Veya bir uygulama içindesiniz ve bir dosyayı yüklemek/kaydetmek istiyorsunuz; hala çalıştığınız uygulama ile aynı.

Ancak ızgara menüsü bağlamınızı değiştirmekle ilgilidir. Sadece içeriği değiştirmiyorsunuz, tamamen yeni bir uygulama, arayüz ve bir çeşit etkileşim açıyorsunuz. Sağladığınız resimlerde aynı paketteki diğer uygulamalara bağlanıyor ve Android menüsünde işletim sisteminden uygulamaya gidiyor.

Listelerin ızgaralara karşı bölünmesi henüz evrensel bir yere yakın değil ( örneğin Android share ), ancak belirli bir düzenin nerede kullanıldığı dengesizliği ve bence simgeler bunu desteklemeli. Elbette Android paylaşımında <simgesi tan = veya # eylemini daha iyi temsil eder, ancak fikri anlarsınız.


3X3 ve 4X4 simgeleri

Hem 3x3 hem de 4x4 simgeleri kullanıcılar tarafından aynı şekilde yorumlanır, ancak mavi simge oldukça farklıdır ve ios'a dayalı 'ana ekran' gibi okunur.

3x3 ızgarasının 4x4 üzerinde bazı faydaları vardır; daha basit, daha küçük yapılabilir ve grafik/simge boyutlarına daha iyi uyum sağlar (8x8 piksel vs en az 18x18): 3x3 grid vs 4x4 gridve hamburgerin 'üçünü' koruyor, bu yüzden tüm dünyaların arayüzleriyle biraz daha tutarlı. Yani varsayılan olarak 3x3 kullan diyebilirim.

Ancak menünüzde varsayılan Android uygulama çekmecesi gibi 4 öğe sütunu veya satır (4x5, 6x4 vb.) Kullanılıyorsa, 4x4 ızgarasını kullanmak için oldukça iyi bir nedeniniz var. gerçek menü.

Ama kişisel olarak, bu benim gidebildiğim kadarıyla (yani 5x5,6x6 vb.)

18
PixelSnader

Düzenle

İnsanlar hamburger menüsü hakkında bu makale okumalıdır. Hamburger menüsü işe yarıyor, ancak genellikle daha iyi çözümler var. Facebook ve NBC gibi büyük şirketler bunun doğru olduğunu gördüler ve hamburger navicon'undan TAB BAR , simgeler + kelimeler içeren bir sekme çubuğu olarak değiştiler en iyi dönüşüm oranlarını veriyor gibi görünüyor. Karmaşık gezinmeler yuvalanabilir.

Uzun versiyon:

Şimdi 3x3 9 nokta simgesini ve hamburger simgesini (navicons) aynı anda tartışalım çünkü ikisi de şu anda Web'deki en tartışmalı teknikler. Simgeler mobil tasarım uygulamalarıdır ve bu nedenle kolayca ölçeklenebilir, bize bir ton ekran gayrimenkul tasarrufu sağlar ve tekdüzelik anlamına gelir. Web kullanıcılarının çoğunluğu tarafından tanınırlar. (Simge 30+ yaşında!). Çok uzak çok iyi.

Burger icon 1981

FAKAT

  • Kullanılabilirlik testleri sonuçsuz kaldı

    Tasarımcılar, simgelerin daha genç bir demografi tarafından kolayca tanındığını savunuyor, diğerleri ise daha eski bir demografinin bunu ancak web okuryazarsa tanıdığını öne sürüyor. Paralel testler genellikle çelişkili sonuçlar döndürür.

  • Daha fazla tıklama. Ew. Kullanıcıların simgeleri tek bir bağlantı olarak tanımaması kabul ediliyor - muhtemelen bir grup bağlantıya benzeyecek şekilde tasarlandığından. Hamburger simgesi navigasyonunuza fazladan bir eylem ekler; belirli bir sayfaya ulaşmak için tek bir tıklama gerektiğinde, şimdi iki tane alacaktır. * İpucu: Simgeleri bir kenarlıkla çevrelemek veya bir arka plan vermek, daha çok bir düğmeye (skeuomorfik) benzeyecek şekilde daha fazla tıklama ile sonuçlanır.

Word 'menü' eklemek için en iyisi.

Burger menu variation conversion rates

Morten Rand-Hendriksen burger metinle değiştirilmeli . Bu, daha fazla tıklama ile sonuçlanır, ancak sorunu çözmez. Ayrıca, başka simgeler kullanmayın ( Ataç , ew gibi).

  • İçeriği gizleyin . UX açısından, kullanıcıların hangi işlemleri yapabileceğini bulmak için bir işlem yapmaları gerekmez. Kullanıcılar basitçe bilmedikleri bir bağlantı aramayacaklar.

TL; DR.

HAYIR.

"‘ Normal ’bir site istiyorsunuz, ancak büyükbabanızın telefonuna sıkıştınız."

Simgeler, mobil ilk yaklaşımın tüm yönlerini yürekten kucaklamamıza yönelik ortak başarısızlığımızın bir belirtisidir.

Bir çözüm

OP 'daha büyük oyuncular' anlamına gelir, hadi Facebook'un bu sorunu nasıl çözdüğüne bir göz atalım.

  • Facebook’un uygulaması, hamburger simgelerini sekme çubuğu için değiştirdi ve sonuç olarak dönüşümlerde iyileşme oldu.
  • Messenger uygulaması. Evet. Yani? Bununla ilgili en önemli şey, mesajlaşmayı entegre edebilecekleri mükemmel bir işlevsel ve popüler uygulamaya sahip olmalarıdır. Facebook, her uygulamanın rolünü karmaşık bir uygulama yerine iki basit uygulamaya ulaştırarak işlevlerini bölümlere ayırdı .

Bölümlere ayırma işlevselliği, azaltılmış menü seçenekleri setine ve daha az bir navicon menüsüne ihtiyaç duyulmasına neden olur.

Temel olarak basitleştirmeli ve bölümlere ayırmalısınız.

Not: Gerçek şu ki, iş ihtiyacına bağlı olarak en iyi çözüm.

14
RobSeg

Görüntüler size menünün hangi formatta olacağını söyler. Bu durumlarda, bugün web uygulamaları arasında yaygın olan ızgara düzeni, üç satır durumunda, bu genellikle bir tür liste stiline sahip bir menüdür. Ben 4 nokta kesinlikle overkill olduğunu düşünüyorum, 3 ile nokta alabilirsiniz.

İçerikle ilgisi yoktur ve mizanpajla ilgisi vardır.

4
insidesin

Bence bu belirli simge "ygulama Çekmecesi Simgesi" Yanılmıyorsam, trend Android ve Blackberry, özellikle Nexus ve Samsung cep telefonlarında (ilk günlerde) uygulamaların başlatıcısı olarak işlev gören uygulama çekmecesi simgesi O zamandan beri, bir liste için başlatıcı simgesi olarak kabul edildi. uygulamaların.

Düzenleme (yorumlarıma ve diğer önerilerime dayanarak) - Bence simge kullanılabilirliğinin temellerinden biri, bir kullanıcının bir simgeyi anlama biçiminin deneyim. Yıllar geçtikçe, uygulama çekmecesi simgesi uygulama başlatıcısı olarak daha tanınabilir hale geldi. Ancak yine de tanınabilirlik testi yapardım. Ve mümkünse, içine bir metin etiketi ekleyin.

3
Adit Gupta

Bundan kaçınırdım ... şimdilik

Çünkü...

  • Izgara simgesi hamburger simgesi kadar iletişimsiz. Hamburger, ızgara bir ikon matrisini belirsiz bir şekilde ilettiği gibi, bir menü listesini belirsiz bir şekilde iletir. İletişimsel tasarım açısından her ikisi de sorunludur, çünkü kullanıcının temel menünün UI düzenini bildiğini ve bunu simgenin tasarımı ile doğru bir şekilde ilişkilendirebileceğini varsayarlar.

  • Bu iletişim sorunları nedeniyle, simgenin amacını aktarmak için birincil araç olarak kongre ve evrensellik/her yerde konusuna güveniyorsunuz. Ancak simge bugün yeterince evrensel değildir, bu nedenle konvansiyon, kullanıcıların simgenin ne anlama geldiğini anlamalarını sağlamak için henüz güvenilir bir araç değildir.

Izgara simgesinin kullanımı genişledikçe bu zamanla değişebilir, ancak yalnızca zaman söyleyebilir. Şimdilik, ızgaranın artıları/eksileri ile hamburger simgesinin iyi belgelenmiş artıları/eksileri arasında önemli bir fark görmüyorum.

2
tohster