Arayüz Tutarlılığını Dokümanla Değil Kodla Korumak

Tutarlılık tartışması genelde bir stil kılavuzu hazırlamakla başlar ve orada biter. Oysa kılavuz yazıldığı gün doğrudur, altı ay sonra arayüzün gerçekte ne yaptığıyla pek ilgisi kalmaz. Ekip büyürken tutarlılığı ayakta tutan şey belge değil, renkleri ve bileşenleri tek yerden okuyan kod.

Tutarlılık asıl neyi ucuzlatır

Kullanıcı tarafındaki kazanç açık: bir ekranda öğrenilen düzen ikinci ekranda tekrar öğrenilmez. Asıl fark ekip tarafında çıkar. Aynı görünen iki buton aslında iki ayrı bileşense, her değişiklik iki yerde yapılır ve er geç biri unutulur. Destek taleplerinin bir kısmı doğrudan buradan gelir: kullanıcı aynı işi iki yerde farklı biçimde yapmak zorunda kaldığı için soruyor.

Kılavuz değil, tek kaynak

Tutarlılığı doküman denetimine bağlamam. Okunmasını umduğunuz bir PDF yerine, sapmayı doğrudan ölçebileceğiniz bir yer lazım. Projenin stil dosyalarında kaç farklı renk değeri dolaştığını saymak bunun en ucuz hali:

grep -rho '#[0-9a-fA-F]\{3,6\}' src/ | tr 'A-Z' 'a-z' | sort -u | wc -l

Paletinizde sekiz renk varsa çıkan sayı sekize yakın olmalı. Kırk çıkıyorsa kılavuz okunmuyor demektir ve bunu bir sonraki tasarım incelemesini beklemeden öğrenmiş olursunuz. Aynı mantık gölge, köşe yarıçapı ve boşluk değerleri için de işler. Renkleri CSS değişkenlerine taşıyın, ham hex kullanımını derleme adımında uyarıya çevirin; tutarlılık o andan sonra kimsenin iyi niyetine kalmaz.

Trend takibi ile tutarlılık aynı anda olmaz

Sık verilen iki tavsiye birbirini yer: bir yandan sektör standartlarına uyun denir, diğer yandan en yeni tasarım trendlerini sürekli uygulayın. Yeni bir bileşen dili benimseyecekseniz kararı bütün olarak verin ve tüm ekranları taşıyın. Yarım kalan göç, içinde iki ayrı tasarım dili barındıran bir arayüz bırakır; bu, eski tasarımda kalmaktan daha kötü bir sonuçtur. Taşıma bütçeniz yoksa göçe hiç başlamayın.

Çok dilde tutarlılık ölçüde değil kuralda

Arayüz birden fazla dile çıkacaksa, tutarlılığı piksel değerine bağlamak baştan kaybedilmiş bir iştir. İngilizce "Done" dört karakter, Türkçe karşılığı "Tamamlandı" on. Sabit genişlikli butonlarla kurulmuş bir düzen ilk çeviride kırılır. Kuralı şöyle tanımlayın: butonun yatay iç boşluğu sabittir, genişliği içeriğe göre büyür, minimum bir değeri vardır. Böylece diller arasında değişen şey buton boyutu olur, tasarım dili değil.

İstisnaya izin vermek

İstisnayı tamamen yasaklamak işe yaramıyor, sadece kaçak çözüm üretiyor: kimse kütüphaneyi değiştirmek istemediği için sayfaya özel bir CSS dosyası açılıyor ve tutarsızlık gözden uzak bir yerde birikiyor. Daha iyi kural şu: istisna bileşen kütüphanesine varyant olarak girer. İkinci kez ihtiyaç duyulan bir istisna zaten varyanttır, bir kez kullanılanı silmek de kolaydır. Kütüphanenin dışına çıkan her satır ise ileride kimsenin haberi olmadan bozulacak bir borçtur.