Tasarım geçişi: beş arayüz, tek cetvel
Siteyi ve dört uygulamanın arayüzünü aynı sekiz ölçüte göre ölçtük. Yazı boyutları azaldı, emoji ve karakter ikonlar çizgisel ikonlara döndü, okunmayan etiketler düzeldi.
Dört uygulamayı ayrı zamanlarda, ayrı araçlarla kurduk: Takvim bir web arayüzü, Habit Tracker ve Dosya Dolabı Flutter, Pati Electron. Her biri kendi içinde tutarlı görünüyordu. Yan yana koyunca aynı hataların her yerde tekrarlandığı görüldü.
Bu yüzden hepsini aynı cetvelle ölçtük: yazı hiyerarşisi, satır uzunluğu, boşluk ritmi, renk ve kontrast, gölge ve köşeler, düğmeler, hizalama, ikonlar. Her bulgu bir ölçüme dayanıyor; “güzel olmamış” diye bir madde yok.
Üç hata her yerde vardı
Fazla yazı boyutu. Sitenin ana sayfasında 13 ayrı yazı boyutu vardı; 13 ile 13,68 ya da 17 ile 18,72 gibi gözün ayıramadığı farklar. Takvim’de 12, Habit Tracker’ın panelinde 7, Pati’nin ayar penceresinde 5. Sitede 6’ya, Takvim ve Pati’de 3’e, Habit Tracker’da 4’e indi.
Karışık ikon dili. Habit Tracker’da emoji, Takvim’de yazı tipinden gelen ok, büyüteç ve dişli karakterleri, Dosya Dolabı’nda dolu ve çizgisel ikonlar yan yana. Emoji ve karakterler her işletim sisteminde farklı çizilir. Takvim ve Pati’de karakterler, Habit Tracker’da emojiler çizgisel ikonlara döndü; Dosya Dolabı’nın kenar çubuğu artık baştan sona çizgisel.
Renkli küçük yazı. Habit Tracker’ın “Son 30 gün” kartında alışkanlık adları kendi renginde yazılıyordu; lacivert ve mor olanlar koyu zeminde yaklaşık 3:1 kontrasttaydı. Dosya Dolabı’nda turuncu “Slayt” etiketi de öyle. Okunabilir metin için alt sınır 4,5:1. Adlar artık metin renginde, alışkanlığın rengi yanındaki noktada; Slayt, Tablo ve Diğer etiketleri de 4,5:1’in üstüne çıktı.
Uygulama uygulama
- Takvim: İkonlar tek setten satır içi SVG oldu. Hafta başlığı 15 pikselden 20’ye çıktı; hangi haftaya baktığın artık ilk okunan şey. “Takvimler” başlığı kendi listesine yaklaştı, açılışta 07:00 etiketi artık yarısı kesik görünmüyor.
- Habit Tracker: Panelin üç sütunu artık aynı boyda biter; ortadaki kartın altında kalan boşluk gitti. Kart aralıkları her yönde 16 piksel.
- Dosya Dolabı: Kartta dosya adı ile boyut ve tarih tek grup oldu, “Kategoriye koy” kartın altına indi. Gelen Kutusu’ndaki açıklama artık tek satırda 118 karakter değil.
- Pati: Ayar penceresinde API anahtarı alanı stil kuralının dışında kalmıştı: diğer alanlar 30 piksel ve çerçeveliyken o tarayıcının varsayılanıyla, 21 piksel ve çerçevesiz duruyordu. Düzeldi. Sil ve yukarı taşı düğmeleri de karakter yerine ikon; ekran okuyucu artık ne yaptıklarını söylüyor.
Bu sitede
Sitede de aynı geçiş yapıldı ve şu an yayında. Yazı ölçeği altı değere indi, üç ayrı kayıp gri ton tek renge bağlandı. Ana sayfanın ilk ekranında iki yeşil “indir” düğmesi yarışıyordu; menüdeki çerçeveli oldu. Telefonda altbilgi bağlantıları 22 pikseldi, artık 44: parmakla yanlış bağlantıya basmak zorlaştı. Pati’nin görselindeki gri çizgili sahte pencereler yüklenmemiş içerik gibi duruyordu; kaldırıldı.
Uygulamalardaki değişiklikler de yayında: Takvim 1.7.2, Habit Tracker 1.3.2, Dosya Dolabı 1.1.3 ve Pati 0.4.1. Hepsi önceki sürümün üstüne kurulur, verilerin aynen kalır. Her değişiklikten sonra o uygulamanın testleri yeniden çalıştırıldı.