Peki birleşik giriş kutusu, çoklu seçim, liste kutusu ve açılır menü arasındaki fark nedir? Tüm bu kullanıcı arayüzü bileşenleri benzer görünse de farklı amaçlara hizmet eder. Seçim genellikle mevcut seçeneklerin sayısına ve bunların görünürlüğüne bağlıdır. Gelin bunların nasıl farklılaştığını, hangi amaca hizmet ettiğini ve yol boyunca yanlış anlamalardan ve yanlış beklentilerden kaçınarak doğru olanı nasıl seçeceğimizi görelim.
Tüm Liste Modelleri Aynı Değildir Yukarıda vurgulanan tüm kullanıcı arayüzü bileşenlerinin tam olarak bir ortak noktası vardır: kullanıcıların listelerle etkileşimlerini desteklerler. Ancak bunu biraz farklı yapıyorlar. Her birine tek tek bakalım:
Açılır menü → liste tetiklenene kadar gizlenir. Combobox → filtrelemek için yazın + 1 seçeneği seçin. Çoklu seçim → filtrelemek için yazın + birçok seçeneği seçin. Liste kutusu → tüm liste seçenekleri varsayılan olarak görünür (+ kaydırma). İkili liste kutusu → öğeleri 2 liste kutusu arasında taşıyın.
Başka bir deyişle, Combobox bir metin giriş alanını bir açılır listeyle birleştirir, böylece kullanıcılar filtreleyebilir ve tek bir seçeneği seçebilir. Multiselect ile kullanıcılar birçok seçeneği seçebilir (genellikle hap veya çip olarak görüntülenir). Liste kutuları, varsayılan olarak görünür olan tüm liste seçeneklerini genellikle kaydırmayla görüntüler. Kullanıcıların mevcut tüm seçenekleri hemen görmesi gerektiğinde yararlı olur. İkili liste kutusu (aktarım listesi olarak da bilinir), kullanıcıların öğeleri genellikle toplu seçim için iki liste kutusu (sol ↔ sağ) arasında taşımasına olanak tanıyan bir liste kutusu çeşididir. Sık Kullanılan Seçenekleri Hiçbir Zaman Gizleme Yukarıda belirtildiği gibi, doğru kullanıcı arayüzü bileşeninin seçimi 2 faktöre bağlıdır: kaç tane liste seçeneğinin mevcut olduğu ve tüm bu seçeneklerin varsayılan olarak görünür olmasının gerekip gerekmediği. Tüm listelerde ağaç yapıları, yuvalama ve grup seçimi de bulunabilir.
Yıllardır herhangi bir kullanıcı arayüzü bileşeni için takip ettiğim bir prensip var: Sık kullanılan seçenekleri asla gizlemeyin. Kullanıcılar belirli bir seçime sıklıkla güveniyorsa, bunu onlardan saklamanın çok az değeri vardır. Bunu önceden seçilmiş hale getirebiliriz veya (yalnızca 2-3 sık kullanılan seçenek varsa) bunları çip veya düğme olarak gösterebiliriz ve ardından listenin geri kalanını etkileşimde gösterebiliriz. Genel olarak, kullanıcı arayüzünü karmaşıklaştırsa bile popüler seçenekleri her zaman görüntülemek iyi bir fikirdir. Hangisi Nasıl Seçilir? Her listenin karmaşık bir seçim yöntemine ihtiyacı yoktur. 5'ten az öğe içeren listeler için basit radyo düğmeleri veya onay kutuları genellikle en iyi sonucu verir. Ancak kullanıcıların geniş bir seçenek listesinden (ör. 200'den fazla öğe) seçim yapması gerekiyorsa, daha hızlı filtreleme (ör. ülke seçimi) nedeniyle birleşik giriş kutusu + çoklu seçim yararlı olur.
Liste kutuları, insanların aynı anda birçok seçeneğe erişmesi gerektiğinde, özellikle de o listeden birçok seçeneği seçmeleri gerektiğinde faydalıdır. Sık kullanılan filtreler için yararlı olabilirler.
İkili liste kutusu sıklıkla gözden kaçırılır ve göz ardı edilir. Ancak toplu seçim veya rollerin, görevlerin, sorumlulukların atanması gibi karmaşık görevler için çok yararlı olabilir. Kullanıcıların taahhütte bulunmadan önce tam seçim listesini kaynak listesiyle yan yana incelemelerine olanak tanıyan tek kullanıcı arayüzü bileşenidir ("Aktarım listesi" olarak da bilinir). Aslında ikili liste kutusu genellikle sürükle ve bırak yöntemine göre daha hızlı, daha doğru ve daha erişilebilirdir. Kullanılabilirlik Konuları Akılda tutulması gereken önemli bir not, erişilebilirlik için tüm liste türlerinin klavyede gezinmeyi (ör. ↑/↓ ok tuşları) desteklemesi gerektiğidir. Bazı kişiler yazmaya başladıklarında seçenekleri belirlemek için neredeyse her zaman klavyeyi kullanırlar.
Bunun ötesinde:
7'den fazla seçeneğe sahip listeler için, kullanıcı etkileşimini kolaylaştırmak amacıyla "Tümünü Seç" ve "Tümünü Temizle" işlevlerini eklemeyi düşünün. Birleşik giriş kutusu içeren uzun listeler için, tüm seçenekleri tıklama/dokunma ile kullanıcılara gösterin, aksi halde hiçbir zaman görülemeyebilirler, En önemlisi, karışıklığı önlemek için etkileşimli olmayan öğeleri düğme olarak göstermeyin ve etkileşimli öğeleri statik etiketler olarak göstermeyin.
Özet: Her Şey Bir Açılan Menü Değildir İsimler önemlidir. Dikey seçenekler listesi genellikle "açılır liste" olarak tanımlanır; ancak çoğu zaman anlamlı olamayacak kadar geneldir. “Açılır menü” listenin varsayılan olarak gizlendiğini ima eder. “Çoklu seçim”, bir liste içinde çoklu seçimi (onay kutusu) ifade eder. “Combobox” metin girişini ifade eder. Ve “Listbox” her zaman görülebilen, seçilebilir öğelerin bir listesidir. Amaç yukarıdaki tanımlarla tutarlı olmak değildir. Ancak niyetlerinizi aynı hizaya getirmek yerine, bu kullanıcı arayüzü bileşenlerine karar verirken, tasarlarken, oluştururken ve kullanırken aynı dili konuşun. Bunun için çalışması gerekirStatik etiketler etkileşimli düğmeler gibi görünmediği ve radyo düğmeleri onay kutuları gibi davranmadığı sürece herkes - tasarımcılar, mühendisler ve son kullanıcılar -. “Yapay Zeka Arayüzleri İçin Tasarım Desenleri” ile tanışın Vitaly'nin gerçek hayattaki ürünlerden pratik örneklerin yer aldığı yeni video kursu AI Arayüzleri İçin Tasarım Desenleri ile tanışın; yakında canlı bir UX eğitimi verilecek. Ücretsiz önizlemeye geçin. Vitaly'nin arayüz tasarımı ve kullanıcı deneyimi konulu video kursu olan AI Arayüzleri İçin Tasarım Desenleri ile tanışın.
Video + UX EğitimiYalnızca videoVideo + UX Eğitimi$ 450,00 $ 799,00
Video + UX Eğitimi Alın30 video dersi (10 saat) + Canlı UX Eğitimi.100 gün para iade garantisi.Yalnızca video$ 275,00$ 395,00
Video kursunu edinin30 video dersi (10 saat). Her yıl güncellenir. Ayrıca 3 video kursu içeren UX Paketi olarak da mevcuttur.
Yararlı Kaynaklar
Otomatik Tamamlama: UX Yönergeleri, Vitaly Friedman Combobox, eBay'den 👍 Combobox, Elastic tarafından Combobox, Elisa tarafından Combobox, MongoDB'den 👍 Combobox, Visa'dan 👍 Combobox, Watson tarafından (Docplanner) Combobox, Wikimedia tarafından Combobox, Zendesk tarafından MongoDB'den Multiselect (MongoDB Combobox Tasarım Belgeleri) 👍 Çoklu Seçimli Arama, Wikimedia tarafından Vaadin'den Çoklu Seçim Açılan Kutu Çoklu seçim, Visa tarafından Transfer (Listbox örneği), Ant Design tarafından Liste kutusu, Hopper tarafından Liste Kutusu, Vaadin tarafından Liste kutusu, Visa tarafından İkili Liste Seçici, Red Hat (PatternFly) tarafından Dual Listbox, Salesforce tarafından (Lightning Design System) Transfer Listesi, Mantine Dashlite'dan İkili Liste Kutusu Rozetler, Haplar, Cipsler, Etiketler, Vitaly Friedman Liste Kutuları ve Açılır Listeler, Anna Kaley (NN/g)
