Tasarım Sistemi Kurmak: Ortak Düğmeden Sürdürülebilir Bileşene

Görsel kütüphane ile çalışan sistemi ayırın

Bir tasarım dosyasında düğme çizmek başlangıçtır. Düğmenin yüklenirken ne yaptığı, devre dışı durumunun nasıl anlatıldığı ve klavyeyle nasıl kullanıldığı da tanımlanmalıdır. Kod örneği tasarımdan farklı davranıyorsa tek bir doğru kaynak yoktur; iki ayrı kütüphane oluşmuştur.

GOV.UK Design System bileşenleri, tekrar kullanılabilir arayüz parçaları için kullanım açıklamaları ve kod örneklerini birlikte sunar. Buradan alınan yöntem ilkesi, yalnızca şekli değil kullanım bağlamını da belgelemektir. Ganz için aynı görsel kimliği kopyalamak veya kamu hizmeti markasını kullanmak önerilmiyor. [1]

İlk sürümü en çok tekrarlanan akıştan çıkarın

Bütün ekranları yeniden tasarlayarak başlamayın. En çok kullanılan form, tablo, hata mesajı ve işlem durumu örneklerini toplayın. Her birinin gerçekten farklı ihtiyacı karşılayıp karşılamadığını inceleyin. Aynı davranış için ayrı bileşenler varsa birleştirin; farklı davranışları sırf benziyor diye tek parçada zorlamayın.

Örneğin ürün silme düğmesiyle listeyi filtreleme düğmesinin görsel ağırlığı aynı olabilir, fakat riskleri aynı değildir. Silme işleminde onay ve geri alma davranışı, filtrelemede ise sonuç güncellemesi önemli olabilir. Bileşen açıklaması bu ayrımı uygulayıcıya göstermelidir.

Durumlar kataloğu oluşturun

Boş, yükleniyor, başarılı, hatalı ve yetkisiz durumları tasarımın parçası yapın. Bir tablo boşken neden boş olduğunu açıklıyor mu? Sonuç bulunamadı mı, veri henüz yüklenmedi mi, yoksa kullanıcı erişemiyor mu? Tek bir “kayıt yok” metni bu durumları yanlış biçimde birleştirebilir.

W3C form bildirimleri rehberi, başarının ve hatanın anlaşılır biçimde iletilmesini ele alır. [2] Uygulama önerimiz, bileşen paketine yalnızca normal görünümü değil hata sonrası odak ve düzeltme davranışını da eklemektir. Böylece erişilebilirlik sonradan bütün ekranlara ayrı ayrı yapıştırılan bir iş olmaktan çıkar.

Bileşen kabul tablosu

Örnek tabloyu tasarım onayıyla teknik test arasında köprü olarak kullanın. Bir bileşen için “hazır” demek, tüm kullanım senaryolarında uygun olduğu anlamına gelmez. Belgede hangi durumların desteklenmediği de açıklansın.

Sürüm ve değişiklik sorumluluğunu belirleyin

Merkezî kütüphanede yapılan bir değişikliğin hangi ürünleri etkileyeceğini bilmeden yayınlamayın. Bileşen sürümü, değişiklik notu ve geçiş örneği hazırlayın. Kırıcı değişiklikler için eski kullanımın nasıl taşınacağını gösterin. Tasarım dosyasıyla kod paketinin hangi sürümlerinin eşleştiği görülebilsin.

İstisna talebini yasaklamak yerine gerekçesini kaydedin. Aynı istisna birçok üründe çıkıyorsa kütüphanenin eksik bir ihtiyacı vardır. Ancak tek ekrana özel kısa yolun ortak bileşene yerleştirilmesi de herkesi karmaşık bir arayüze mahkûm edebilir. Ortaklaştırma kararı kullanım kanıtıyla verilsin.

Sık sorulan sorular

Küçük bir proje için tasarım sistemi gereksiz mi?

Büyük bir platform kurmak gerekmeyebilir. Temel alanlar, düğmeler ve durumlar için küçük ama tutarlı bir bileşen seti yeterli olabilir.

Hazır bileşen kullanmak özgün tasarımı engeller mi?

Hayır. Marka dili ve içerik özgün olabilir. Asıl karar, ortak davranışın hangi noktalarda korunacağı ve hangi ihtiyaçlarda uyarlanacağıdır.