web-gelistirme-sc.com

Çoklu seçenek ve tek seçenek kullanıcı arayüzü

Yaptığımız kontrol panelinde, kullanıcıların seçebileceği 2 seçenek var:

Birden çok seçenek (onay kutuları) enter image description here

ve tekli seçenekler (radyo düğmeleri davranışı)

enter image description here

bileşenlerin görünümü benzer olmakla birlikte, kullanımları farklıdır.

Kullanılabilirlik testlerinde, kullanıcılar bu bileşenleri herhangi bir zorluk çekmeden veya kullandıktan sonra ürünün diğer bölümlerinde kullanmak için herhangi bir sorun yaşamadıkları işlevleri anladılar.

Ancak, tasarımcı arkadaşlarım bileşenlerin farklı görünmesi gerektiğini ve kullanıcıların ilk bakışta bir onay kutusu veya radyo kutusu olup olmadığını anlamaları gerektiğini savundu.

Amacım tutarlılığı korumak ve bilişsel yükü azaltmaktı.

Düşünceleriniz veya girdileriniz var mı?

Düzenleme 1: Kullanıcı arayüzünü güncelledi, geri bildirim için @ 200_success'e teşekkür ederiz

33
Deniz Erdal

Değişir. Kullanıcılarınız bu formu/bölümü/ayarları ne sıklıkta görüyor?

Sık kullanılan, uzun oturum uygulamaları kullanıcılara kontrollerin, özellikle de sık kullanılanların nasıl çalıştığını hatırlama şansı verir.

Bunun bir kısmı ygulama Duruş .

Egemen bir uygulama, kullanıcının dikkatini uzun süre tekelleştiren bir programdır.

Google dokümanları ve Microsoft Word, Egemen Duruş Uygulamalarının harika örnekleridir: Kullanıcılar dokümanları işlemek için uzun süre harcarlar.

Hedef kullanıcılar genellikle uzun süreli kullanımlarda bu kontrollerle tekrar tekrar karşılaşan ara ürünlerdir.

Aynı görünen ancak farklı davranan bazı kontroller, tekrarlanan uzun süreli maruziyetten sonra çok fazla zorluk yaratmaz.

Çoğumuz başka bir gönderinin işaret ettiği gibi araç çubuğuna alıştık:

enter image description here Başka bir örnek, görev yönetimi uygulaması OmniFocus.

Müfettiş paneli, tekrarlanan ve planlanan etkinlikler için ayrıntıları görüntüler. Haftanın hangi günlerinde bir etkinlik ekleneceğini gösteren çok seçmeli bir geçişe sahiptir. Onay kutuları ile aynı etkiye sahiptir:

enter image description here

Olaylar için zihinsel model ile başlamak daha açıktır, bu da muhtemelen bu kontrolleri kullanmaya yardımcı olur:

Olaylar:

  • Başlangıç ​​tarihleri
  • Bitiş tarihleri
  • Frekanslar
  • Tekrarlama

Örneğin, Pazar, Pazartesi ve Çarşamba günü Karate dersine gidebileceğim açık. Gerektiğinde birden fazla gün seçebilirim.

Bir zaman formları, nadiren erişilen 'Ayarlar' sayfalarına ve nadiren karşılaşılan kullanıcı arayüzü açık etiketler ve/veya denetimler olmadan zor olabilir.

Daha geniş bağlamınızda net değilim, ancak formunuzla ilk kez karşılaşan kullanıcılar için veya nadiren net etiketleme çok önemlidir:

enter image description here

Kullanıcı testi ile onaylandığı için iyi bir yerdesiniz gibi görünüyor. Bazı bağlamlarda, bilmediğiniz bölgelere girmeye devam eden sürekli 'ilk zamanlayıcılar' için tasarım yapacağınızı unutmayın.

33
Mike M

Bu bileşenler için farklı görünümler yapmanız gerekmez.

Durumunuz, Word gibi metin işlemcilerin araç çubuğundaki iyi bilinen geçişlere benzer. Bu yazı tipi ayarları arasında geçiş onay kutuları gibi çalışır:

enter image description here

Ve bu Word’ün hizalama kontrolleri radyo düğmeleri gibi çalışır:

enter image description here

Unutmayın, aynı görünüyorlar ve herhangi bir karışıklık veya zorluk üretmiyorlar çünkü zihinsel modelimizde (kullanıcının sistemin nasıl çalışması gerektiğine dair görüşü), bir metnin aynı anda kalın, altı çizili ve el yazısı olabileceğini anlıyoruz. geçişler onay kutuları gibi davranmalıdır. Ve metnin aynı anda sağ ve sol hizalanamayacağını biliyoruz, bu nedenle hizalama kontrollerinin radyo düğmeleri gibi davranması bizim için sürpriz değildir. Bunu biliyoruz ve bunun için ek hatırlatmalara ihtiyacımız yok.

Kullanılabilirlik testlerinde, kullanıcıların bu bileşenleri sorunsuz bir şekilde kullandığını yazdınız. Bu, bileşenlerin davranışının kullanıcının zihinsel modeliyle eşleştiği anlamına gelir, yani kullanıcılar birkaç yaş aralığı ve yalnızca bir görünüm (listeler veya küçük resimler) seçebileceklerini anlar ve bekler.

Word'ün geçiş örneklerini A. Cooper'ın "Yüz Hakkında 3. Etkileşim Tasarımının Temelleri" nden aldım. Onay kutusu veya radyo düğmelerine daha grafiksel ve daha az yer kaplayan bir yaklaşım örneği olarak yazdı (bkz. Bölüm 21: Kontroller, Onay kutuları (s. 443) ve Radyo düğmeleri (s. 446)). Ayrıca Cooper, bu iki tür geçişin farklı görünmesi gerektiğini söylemedi.

52
Lana

Tasarımcı meslektaşlarınızın haklı olduğunu düşünüyorum.

Şimdi seçeneklere bakacak olursam, onlarla nasıl etkileşime girebileceğim ve ne için kullanıldıkları hakkında doğrudan bir fikrim var.

enter image description here

enter image description here

Onay kutuları için kareler ve radyo düğmeleri için daireler kullanmak çok eski, yaygın ve çoğu kullanıcı tarafından tanınabilir. Yani, bu durumda probleminizi basitleştirir.

6
Asqan

Çoğu normal kullanıcı, bir radyo düğmesi ile bir onay düğmesi arasındaki farkı bilmez. Çoğu zaman, mantıklı olacağı birden fazla radyo düğmesini etkinleştiremediğinizde bazen üzülürler.

Görsel bir fark olmadan yapmak tek bir kullanıcıyı karıştırmaz - bazı durumlarda bir şey seçmenin diğer seçimi kaldırdığını ve diğer durumlarda kaldırmayacağını görürler. Ve umursamazlar, özellikle mantıklıysa.

Bir farklarının olmasını istiyorsanız, radyo düğmeleri (hatta seçenekler arasında bile) için yuvarlak köşeler ve onay kutuları ile açılı köşeler kullanmaya ne dersiniz? Tasarım basit kalır ve 'bilenler' farkı hemen görebilir.

1
Carl Dombrowski