Tasarım sistemi: Tutarlı bileşen, token ve ekran davranışları
· PoolByte Technology
Bir sitede her kartın farklı boşluğu, her formun başka hata rengi ve her sayfanın ayrı düğme boyutu varsa sorun yalnız estetik değildir. Kullanıcı aynı işlemi farklı yerlerde yeniden öğrenir, ekip de aynı düzeltmeyi birçok dosyada tekrarlar. Tasarım sistemi, ortak kararları ve bileşen davranışlarını bir arada tutmak için kullanılır.
Renk listesinden fazlası gerekir
Tasarım token’ları; renk, boşluk veya köşe yarıçapı gibi kararların adlandırılmış değerleridir. “Mavi” yerine “ana eylem” gibi anlam taşıyan isimler, temalar arasında aynı rolü korumaya yardımcı olabilir. Design Tokens biçim dokümanı, değerleri yapılandırılmış biçimde paylaşma yaklaşımını tanımlar.
Ancak aynı rengi kullanmak aynı davranışı sağlamaz. Düğmenin yüklenme, devre dışı ve odak durumları; formun hata ve başarı açıklamaları da bileşenin parçasıdır. Bir kartın başlığı uzadığında veya fiyat alanı boş kaldığında nasıl görüneceği tasarlanmalıdır. Sadece güzel bir örnek ekran, gerçek veri çeşitliliğini temsil etmez.
Envanteri gerçek sayfalardan çıkarın
Önce sitede kullanılan kartları, formları, menüleri ve bildirimleri listeleyin. Aynı görevi yapan ama farklı görünen örnekleri karşılaştırın. Hepsini tek bileşende birleştirmek yerine hangi farklılığın iş ihtiyacından, hangisinin tesadüften geldiğini belirleyin. Yönetim paneli ile tanıtım sitesi aynı yoğunluğa ihtiyaç duymayabilir.
GOV.UK bileşen kütüphanesi, bileşenlerin yalnız görünüm değil kullanım rehberiyle de sunulmasına iyi bir örnektir. Kendi sisteminizde de bir bileşenin ne zaman kullanılacağını ve ne zaman uygun olmadığını açıklayın. Bu belge, yeni ekip üyesinin benzer ekranı yeniden icat etmesini önler.
Mobil ve çok dilli içerik başlangıçta sınansın
Kısa bir Türkçe başlıkla kusursuz görünen kart, uzun İngilizce metinde taşabilir. Arapça görünümde simge ve metin sırası farklı ihtiyaçlar doğurabilir. Sabit yükseklikler yerine içeriğe uygun sınırlar ve tutarlı hizalama kuralları belirleyin. Fiyat, düğme ve yardımcı metnin hangi öncelikle yerleşeceği açık olsun.
Deneme içerikleri yalnız ideal örneklerden oluşmamalıdır. Uzun isim, eksik görsel, çok haneli fiyat, hata mesajı ve metin büyütme birlikte test edilmelidir. Boşluk değerlerini rastgele küçültmek, taşmayı yalnız bir cihazda gizleyebilir. Bileşenin hangi koşulda kırıldığını tanımlamak kalıcı çözüm sağlar.
Sistemi yöneten kurallar
- Her ortak bileşene bir sahip ve kullanım örneği verin.
- Yeni varyant eklemeden önce mevcut ihtiyacı karşılayıp karşılamadığını kontrol edin.
- Değişikliklerde etkilenen sayfaları ve temaları birlikte inceleyin.
- Erişilebilirlik davranışını görsel örnekle beraber belgeleyin.
- Kullanılmayan varyantları kaldırmak için geçiş planı oluşturun.
Tasarım sistemi bütün sayfaları aynılaştırmak için değil, aynı görevi tutarlı biçimde çözmek içindir. Erişilebilirlik kontrolleriyle birlikte sürdürüldüğünde, yeni özellikler arttıkça görünüm ve kullanım hatalarının yayılmasını azaltabilir. Profesyonel görünüm, tekrar edilebilir kararların sonucudur.