Aynısından daha fazlası
Bir UI kalıbını hiç duymadıysanız, işte hızlı bir açıklama: çoğu şeyde olduğu gibi, özellikle yazılım geliştirme sırasında, tanınabilir bir kalıp oluşturdukları için büyük bir öğe kümesi genellikle birlikte gruplandırılabilir. Yazılım için bir örnek, belirli bir programlama diliyle ilgili mimari kalıpların veya kalıpların tanımı olabilir.
Yine de, kullanıcı arayüzü tasarlarken ortak kalıplar da vardır. Bu makaleyi okuduğunuz cihazdaki bazı uygulamalara hızlıca göz attığınızda, bazı şeyler sonunda tekrar eder:
- kaydetme, iptal etme ve/veya silme eylemiyle kalıcı görünümler
- metin içeren öğelerin bölümleri, örneğin her liste öğesi için kaydırma eylemi içeren listeler
Bir adım daha ileri giderek, bir kullanıcı arayüzü tasarlarken yararlanabileceğiniz herhangi bir kaynak var mı? Belki diğer tasarımcıların zaten tanıdığı ve resmileştirdiği bir desen koleksiyonu? Zaten cevabım olmasaydı bu soruyu sormazdım! İkinci bölüm zamanı!
İkinci bölüm (açıklanan)
Resmi bir tanım arayan IBM'in Karbon Tasarım ekibinin harika bir tanımı var: Kalıplar, bir kullanıcının bir hedefe nasıl ulaştığı konusunda en iyi uygulama çözümleridir. Sıralar ve akışlarla ortak kullanıcı hedeflerine hitap eden yeniden kullanılabilir bileşen ve şablon kombinasyonlarını gösterirler.
Bazı örneklere bir göz atalım. Aşağıdaki girişler, IBM'in Carbon Design sitesinden ve Google'ın Material UI model sayfasından alınmıştır. Microsoft'un Fluent Design için bir site bulamadım, ancak başlangıç sayfalarını yine de ekte bağladım.
Arama
İçerik aramak, çoğu uygulama için temel yapı taşlarından biridir, bu nedenle onun için bir UI kalıbı tanımlamak için mükemmel bir seçimdir. Nihai kullanımından bağımsız olarak (genel bir arama veya bir içerik sayfasındaki belirli bir arama), arama kullanıcı arayüzünün sunması gereken
- bir metin girişi
- henüz giriş yoksa metinsel bir yer tutucu
- örneğin bir büyüteç kullanarak ve yeni bir arama için tetikleyici olarak işlev görerek metin girişinin amacını açıkça belirten bir simge
Bazı durumlarda, bir ipucu etiketi, farklı içerik türleri arasında ayrım yapılmasına yardımcı olabilir veya geçersiz giriş konusunda yardım sağlayabilir. Bir aramanın ele alması gereken daha fazla koşul, açık filtre menüleri ekleyerek aramanın bu gereksinime daha iyi uyum sağlamasıdır.
iletişim kutusu
Çok belirgin UI kalıplarından biri. İletişim kutuları, bir uygulamanın bir sitenin genel bağlamını kaybetmeden bir bilgi parçasını göstermesine olanak tanır. Bu, tüm pencereyi değil, sadece daha küçük bir kısmını kaplayarak gerçekleştirilir. İletişim kutuları kullanıcının mevcut iş akışını keser ve bu nedenle yalnızca iş akışındaki bir durdurma gerçekten geçerli olduğunda gerekli kabul edilmelidir. Sadece küçük görevleri yerine getirmeli ve neyi başaracaklarına net bir şekilde odaklanmalıdırlar. Örneğin, kaydedilmemiş değişiklikleri geri alın veya önemli bir eylemi gerçekleştirin.
Boş durumlar
İlk başta garip gelse de, uygulamalarda boş durumlar çok yaygındır. Kullanıcıya hiçbir veri bulunmadığını bildirmek ve ideal olarak bunun neden böyle olduğunu açıklamak önemlidir. Bağlama bağlı olarak, boş durumun nasıl çözüleceğine dair bir ipucu, iyi bir UX oluşturmak için çok yardımcı olabilir. Örneğin, bir kullanıcı bir şey aradı ancak hiçbir şey bulamadı. Bu, farklı bir arama sorgusu önermenin kullanıcının görevi başarmasına yardımcı olabileceği bir kullanım durumu olabilir. Her durumda, boş bir durumu temsil eden her görüş bağlamsal olmalıdır. Olumsuz bir örnek, “Bu işe yaramadı. Daha sonra tekrar deneyin".
UI tasarım sürecinizde boş durumları sonradan akla gelen bir düşünce olarak ele almayın. Doğru uygulanırsa, kullanıcıların iş akışına sorunsuz bir şekilde devam etmelerini sağlar. Tüm iş akışını durma noktasına getiren boş durumlar, uygulama çökmeleri dışında aslında en kötü durum senaryosudur.
sadece bir başlangıç
Bu, IBM'in Carbon Design'ından ve Material UI'nin desen sayfasından seçtiğim bazı UI modellerine hızlı bir bakıştı. Kullanıcı arabirimi kalıplarını uygulamanıza da uygulamak, görevi gerçekleştirmek için kullanıcının iş akışı ile kullanıcı arabirimi arasındaki sürtünmeyi azaltmaya büyük ölçüde yardımcı olabilir. UI tasarlamak oldukça zor olabilir, bu nedenle mevcut UX çalışmalarından öğrenerek devlerin omuzlarında durmak, kullanıcılarınızın uygulamanızın davranışına ilişkin algısını iyileştirmede çok yardımcı olur.
