- Bağlam menüleri, görsel gürültüyü azaltır ve etkileşim maliyetini düşürür; ancak düşük bilgi kokusu ve zayıf keşfedilebilirlik gibi bir ödünleşim taşır
- Gönderi, fotoğraf, takvim etkinliği gibi belirli nesnelere bağlı ikincil ve ek eylemleri bir arada sunmak için uygundur; kebab (⋮) ve meatball (⋯) simgeleri genellikle “daha fazla/seçenekler/ek işlemler” olarak algılanır
- Simge boyutu, kontrastı ve konumu kötü olduğunda simgenin kendisi fark edilmeyebilir veya anlamı yanlış yorumlanabilir; önemli eylemler gizlenirse bulunması zor temel işlevlere dönüşerek kullanıcı deneyimini kötüleştirir
- Etkili kullanım için yalnızca ikincil eylemleri koymak, ilgili içeriğin yakınına yerleştirmek, yalnızca bir-iki eylemi gizlememek, hamburger simgesinden rolünü ayırmak ve erişilebilirliği sağlamak gibi tutarlı kurallar gerekir
- İyi tasarlanmış bağlam menüleri yerleşimi sadeleştiren ve odağı artıran bir araç olabilir; ancak aşırı veya yanlış kullanım durumunda karışıklık, ek tıklamalar ve öğrenme yükü yaratabileceğinden dikkatli kullanılmalıdır
Bağlam menüsüne genel bakış
- Bağlam menüsü, belirli bir UI öğesi, ekran bölgesi, veri parçası veya uygulama görünümüne bağlı ilgili eylemler kümesini bir araya toplayan menüdür
- Bir gönderi için Edit, Pin, Delete; bir fotoğraf için Share, Download, Set as Background; bir takvim etkinliği için Delete, Reschedule, Duplicate, Invite gibi eylemler içerebilir
- Bu menüler genelde ara sıra gereken ama sürekli görünmesi gerekmeyen ikincil işlevleri el altında tutmak için kullanılır
- Masaüstünde genellikle sağ tık ve trackpad’de iki parmakla tıklama, dokunmatik ortamlarda uzun basma ve giderek daha sık biçimde kebab (⋮) ve meatball (⋯) simgeleri tetikleyici olarak kullanılır
Kebab ve meatball simgelerinin algısı ve sınırları
- Araştırma katılımcıları kebab (⋮) ve meatball (⋯) simgelerini genel olarak “daha fazla seçenek/farklı eylemler burada gizli” anlamında algıladı
- Bu algı hem mobilde hem masaüstünde korunuyor ve kılavuzlara iyi uyulduğunda daha tutarlı hale geliyor
- Bu simgeler, “geçici olarak gizlenmiş işlev veya simge setini açan anahtar” gibi kabul ediliyor
- Aynı zamanda bu simgeler düşük bilgi kokusuna sahip; kullanıcılar arkalarında tam olarak hangi seçeneklerin olduğunu neredeyse bilmeden tıklıyor
- Simge içerikten çok uzakta, çok küçük ya da düşük kontrastlı tasarlandığında, bağlam menüsünün varlığının hiç fark edilmediği durumlar da gözlemleniyor
Bağlam menülerinin avantajları ve ödünleşimleri
- Avantaj tarafında bağlam menüleri görsel gürültüyü azaltma, yerleşimi sadeleştirme ve odağı koruma açısından yararlıdır
- Buna karşılık şu tür kullanılabilirlik sorunları da getirir:
- Bulunabilirliğin azalması (findability): Simge küçük ve silikse ya da işin odağındaki alandan uzaktaysa tamamen gözden kaçabilecek bir öğe haline gelir
- Bilgi kokusunun (Information Scent) zayıf olması: Menüde ne olduğunun tahmin edilmesini zorlaştırır ve basmaya değip değmeyeceğini değerlendirmeyi güçleştirir
- Yanlış yorumlanma olasılığı: Yerleşim veya kullanım biçimi iyi değilse, kullanıcılar bunu progress indicator ya da carousel kontrolü sanabilir
- Bu nedenle bağlam menüsü kullanılıp kullanılmayacağına yerleşim kısıtları, kullanıcı beklentileri ve görev öncelikleri dengelenerek karar verilmelidir
1. Bağlam menüsüne yalnızca ikincil ve çekirdek olmayan eylemleri koyun
- Bağlam menüleri, sık kullanılan temel eylemler için değil, ek ve daha düşük öncelikli eylemler için uygun yerdir
- Ana akışın parçası olmayan ama belirli ölçüde sık kullanılan işlevleri, araştırma temelli değerlendirmeyle seçip gizlemek önerilir
- Sık kullanılan zorunlu eylemleri bağlam menüsünün arkasına gizlememek önemlidir
- Örneğin AT&T sohbet arayüzünde End Chat seçeneğinin bağlam menüsünün içinde olması, temel bitirme eylemini gizleyen kötü bir örnektir
- Önemli görevleri menü arkasına gizlerseniz, kullanıcılar işlevi bulamayabilir veya sık yaptıkları işlerde sürekli ek sürtünme yaşayabilir
2. Bağlam menüsünü etkilediği içeriğin yakınına yerleştirin
- Kullanıcılar öğeler arasındaki ilişkiyi mekânsal yakınlık üzerinden yorumlar; bu yüzden bağlam menüsü simgesinin yeri, hangi nesneye ait eylemler sunduğunu açıkça göstermelidir
- Menü yalnızca belirli bir öğe için geçerliyse, simge o öğenin içinde veya hemen yanında olmalıdır
- Tüm alan ya da tüm işlem için geçerli eylemlerse, ilgili bilgilerin toplandığı bölgenin yakınına konumlandırılmalıdır
- Simgeyi rastgele bir yere koymaktan veya hiçbir öğeyle bağlantısı görünmeyen alakasız bir noktaya yerleştirmekten kaçınılmalıdır
- Ramp.com örneğinde olduğu gibi, küçük ve düşük kontrastlı kebab simgesinin ekranın sağ altına dağınık biçimde yerleştirilmesi, hangi öğeye ait olduğunun anlaşılamadığı; bu yüzden hem keşfedilebilirliği hem ilişkiselliği zayıflatan bir örnektir
3. Görünürlüğü garanti etmek için yeterli simge boyutu ve kontrast sağlayın
- Bağlam menüsü simgeleri, özellikle yoğun ekranlarda veya karmaşık uygulamalarda, çoğu zaman fark edilmeyecek kadar silik gösterilir
- Simge yeterli boyut ve kontrasta sahip olmalı; mümkünse hover olmadan da sürekli görünür kalmalıdır
- Kanıtlanmış görsel tasarım kılavuzlarına uyarak net renk kontrastı ile belirgin kenarlık ve arka plan kullanılması önerilir
- Simgeyi yalnızca hover durumunda göstermek veya minimalizm adına aşırı silikleştirmek, keşfedilebilirliği düşürür
- Ramp örneğindeki gibi küçük, düşük kontrastlı ve uzakta duran kebab simgesi kolayca kaçırılabilir
- Buna karşılık Rippling mobil uygulamasındaki gibi çerçeve içine alınmış, siyah noktalar ve beyaz arka planla kontrastı yükseltilmiş örnekler, dokunulabilirlik ve bilgi kokusu açısından olumlu bir örnektir
4. Bağlam menüsünü yalnızca ilgili eylemlerden oluşturun
- Bağlam menüsündeki seçenekler, tek bir nesne/öğe/hiyerarşiyle mantıksal olarak ilişkili eylemler olarak gruplanmalıdır
- Örneğin bir dosya için yalnızca Duplicate, Share, Delete gibi dosyayla ilgili eylemler yer almalıdır
- Mümkünse, menü simgesinin yanında bazı eylemleri doğrudan göstererek “burada daha hangi tür eylemler gizli olabilir” konusunda ek bir bilgi kokusu yaratmak da önerilir
- Genel eylemlerle belirli öğe eylemlerini tek bir menüde karıştırmaktan veya birbiriyle ilgisiz eylemleri aynı menüye koymaktan kaçının
- Bu tür karışımlar açıklık, bulunabilirlik, mekânsal bellek ve bilişsel yük açısından olumsuzdur
- Slack masaüstü uygulamasındaki gibi, mesaja ait menüde yalnızca mesajla ilgili eylemleri gizleyip, tüm thread’e ilişkin eylemleri ayrı bir yerde sunan yapı iyi bir örnektir
5. Simgeyi ve davranışını arayüz genelinde tutarlı tutun
- Bağlam menüsü simgesi, ürün genelinde aynı işlevi, davranışı ve görünümü korumalıdır
- Meatball ya da kebab simgesini bağlam menüsü için kullanmaya karar verdiyseniz, başka amaçlarla yeniden kullanmadan yalnızca bu anlamda kullanmalısınız
- Bir yerde gizli içeriği genişletmek, başka bir yerde popup çağırmak, başka bir yerde yan panel açmak için aynı simgeyi kullanmaktan kaçının
- Bu tür kullanım, kullanıcının zihinsel modeline ve güvenine zarar verir; öğrenilebilirliği ve hatırlanabilirliği düşürür
- Google arama sonuçlarında, sponsorlu sonuçlardaki kebab simgesinin My Ad Center modalını açması, normal sonuçlardaki kebab simgesinin ise sağ panel açması gibi davranış ve konum farkları görülebilir
- Bunun sonucunda Like/Block/Report/Share/Save gibi yararlı eylemler gizli kalıp zor bulunur ve kullanıcı aynı simgeye tıkladığında ne olacağını öngörmekte zorlanır
6. Simge belirsizse tooltip veya etiketle anlamı güçlendirin
- Kebab ve meatball simgeleri kendi başına anlamı zayıf, soyut simgeler olduğundan, küçük bir metin ipucu bile kullanılabilirliği ciddi biçimde artırabilir
- Mümkünse görünür bir etiket veya hover sırasında tooltip ekleyerek, menüde hangi tür eylemlerin bulunduğunu daha somut biçimde anlatın
- Örneğin Post Actions, Message Options gibi, hedef öğeyi de içeren açık ifadeler kullanın
- Basitçe Options gibi belirsiz ifadelerden veya Ellipses gibi yalnızca simgenin şeklini anlatan etiketlerden kaçının
- Patagonia örneğinde, görsel büyütme eyleminin meatball simgesine atanması ve hover sırasında etiketin Ellipses olarak gösterilmesi, anlam aktarımında başarısız bir örnektir
- Buna karşılık Notion masaüstü uygulamasındaki gibi, hover sırasında “Style, Export, and more…” biçiminde menüdeki eylem ailesini somut biçimde ima eden tooltip güçlü bir olumlu örnektir
- Bu tooltip, menü içeriğine göre bağlama özel şekilde değişir
7. Bağlam menüsü simgelerini yalnızca eylem göstermek için kullanın; içerik genişletme için kullanmayın
- Meatball ve kebab simgeleri ek eylem/seçenek açma işareti olarak algılandığından, metni veya görseli genişletmek için kullanılmaması daha iyidir
- Kısmi metni açmak veya görseli büyütmek gerektiğinde Read more, Expand gibi açık metin etiketleri kullanılması önerilir
- Etsy inceleme örneğinde olduğu gibi, inceleme altındaki meatball simgesiyle tam metni açmak bilgi kokusu zayıf olan kötü bir örnektir
- Aynı işlevin Google yorumlarında More metin bağlantısı olarak verilmesi, bağlamsal genişletme eylemi için daha uygundur
- Google yorumlarının üst kısmındaki kebab simgesinin yalnızca Report eylemini sunması, aşağıdaki “bir-iki eylemi gizlemeyin” kılavuzunu da ihlal eder
8. Sadece bir-iki eylem için bağlam menüsü kullanmayın
- Mümkünse, yalnızca bir veya az sayıda eylem sunulan durumlarda bu eylemleri doğrudan arayüzde göstermek daha iyidir
- Bir-iki seçeneği gereksiz yere menü arkasına gizlemek, neredeyse hiç alan kazandırmaz; buna karşılık tıklama sayısını ve keşfedilebilirlik maliyetini artırır
- Özellikle “x”, çöp kutusu, rapor bayrağı gibi iyi bilinen standart simgeler varken, bunları yeniden meatball/kebab altına gizlemek fayda sağlamaz
- Weather.com örneğinde kebab simgesine tıklayınca yalnızca Delete düğmesi içeren siyah bir düğmeye dönüşen yapı görülür
- Bu durumda Delete baştan doğrudan gösterilse de ekran alanı kullanımı neredeyse aynı olacağından, gizlemenin anlamı yoktur
- Buna karşılık Pinterest örneğinde, pine hover edildiğinde Save (sağ üst düğme) ve Share (sağ alt simge) gibi önemli eylemler doğrudan görünür
- Bu yaklaşım, çekirdek eylemleri bağlam menüsüne gizlemeyip gerektiğinde hemen kullanılabilir kılan olumlu bir desendir
9. Hamburger simgesini bağlam menüsü tetikleyicisi olarak kullanmayın
- Hamburger simgesi (☰), genel/ana gezinmeyi temsil eden bir işaret olarak yaygın biçimde tanınır
- Kebab ve meatball simgeleri (⋮·⋯) ise belirli öğe veya ögelere ait bağlamsal eylemleri ifade eden yerleşik bir desendir
- Hamburger simgesini yalnızca site/uygulamanın genel gezinmesi için kullanmak; bağlamsal eylemlerde ise kebab/meatball kullanmak önerilir
- Hamburger simgesini içeriğin yakınına koyup bağlamsal eylemleri onun içine taşımaktan veya tersine kebab/meatball içine hesap ayarları ya da site geneli tercihleri gibi küresel eylemler yerleştirmekten kaçınılmalıdır
- Bu karışım, her iki desenin anlamını da bulanıklaştırır ve kullanıcının zihinsel modelini bozarak tereddüt ve gözden kaçırmaya yol açar
- Banana Republic sohbet örneğinde, sohbet penceresinin sol altındaki hamburger simgesine basıldığında yalnızca Save Transcript adlı tek bir bağlamsal eylemin çıkması görülür
- Bu, hamburger simgesini genel gezinim yerine bağlam menüsü olarak kullanmakla kalmaz; aynı zamanda tek bir eylemi gizlediği için 8. kılavuzu da ihlal eder
10. Klavye ve ekran okuyucu erişilebilirliğini mutlaka sağlayın
- Bağlam menüleri yalnızca fare veya dokunma kullanan kişiler için değil, başkaları için de kullanılabilir olmalı; klavye ve ekran okuyucuyla da açılıp gezinilebilen bir yapı sunmalıdır
- Menü Tab, Enter ve ok tuşlarıyla açılıp kullanılabilmeli; içindeki öğeler de ekran okuyucu tarafından okunabilmeli, odak alabilmeli ve çalıştırılabilmelidir
- Yalnızca tıklama veya dokunmayla erişilebilen menülerden ya da standart erişilebilirlik desenlerini bozan özel etkileşimlerden kaçınılmalıdır
- Erişilebilirliği önceleyen tasarım, yalnızca engelli kullanıcılara değil, ileri düzey kullanıcılara da verimlilik sağlar ve kapsayıcı tasarım standartlarına uyuma katkıda bulunur
Sonuç
- Bağlam menüleri, arayüzü sade tutarken ek eylemleri gerektiğinde sunabilen güçlü bir araçtır
- Özellikle yerleşimi toparlamak ve göreve odaklı durumda yalnızca gerektiğinde ek seçenek açmak açısından yararlıdır
- Ancak keşfedilebilirlik ve açıklık açısından sınırlı bir yapı oldukları için kullanımları her zaman dikkat gerektirir
- Yalnızca gerçekten ikincil eylemler için kullanılmalı; konum, tutarlılık, bilgi kokusu ve erişilebilirlik birlikte düşünülmelidir
- Temel mesaj, görsel minimalizm ile gerçek kullanılabilirlik arasında dengeli bir uyum kurmaktır
- Bağlam menüleri, ana akışı gizlemeden arayüzü düzenleyen bir araç olarak kullanıldığında en büyük faydayı sağlar
Henüz yorum yok.