Yayın öncesi tasarım kontrolü: bulgudan düzeltmeye

Design QA neyi kontrol eder?

Design QA, yayına hazır bir arayüzün tasarım niyetine uygun uygulanıp uygulanmadığını denetleyen kalite kontrolüdür. Yazılım testi işlevin çalışıp çalışmadığını sınar; Design QA ise ekranın görsel ve etkileşim olarak tasarlandığı gibi davranıp davranmadığına bakar. Boşluklar, yazı stilleri, renkler, bileşen durumları, hizalama, animasyon davranışı ve farklı ekran boyutlarındaki görünüm bunun kapsamındadır.

İşlevsel bir hata olmasa bile ekran tasarımla uyuşmuyorsa kullanıcı deneyimi bozulur. Düğme doğru çalışır ama tasarlanandan farklı bir yerde durur, bir bileşenin üzerine gelindiğinde beklenen durum görünmez ya da küçük ekranda metin taşar. Bu tür sorunları test mühendisi çoğu zaman yakalamaz, çünkü ne beklendiğini tasarım dosyası bilir. Bu yüzden Design QA, tasarım dosyasını referans alan bir iştir.

Sürecin yeri: ne zaman, kim yapar?

Design QA, geliştirmenin işlevsel olarak tamamlandığı ancak yayına çıkmadığı aşamada yapılır. Çok erken yapılırsa bitmemiş işlerin bulgusu çıkar, çok geç yapılırsa düzeltmeye zaman kalmaz. İdeal yaklaşım, bileşenleri geliştirme sırasında küçük incelemelerle, ekranı ise bütün olarak yayından önceki bir kapsamlı denetimle kontrol etmektir.

Denetimi genellikle ilgili ekranı tasarlayan ya da tasarım sistemini bilen bir tasarımcı yürütür. Geliştirici bulguları düzeltir, sonuçları tasarımcı yeniden kontrol eder. Bazı ekiplerde ürün sahibi de kabul aşamasında devrededir. Kimin ne yaptığını önceden yazmak, bulguların sahipsiz kalmasını önler.

Denetime başlamadan önce referansı netleştirin: kesinleşmiş tasarım dosyası hangisi, hangi tasarım sistemi sürümü geçerli, hangi ekran boyutları ve tarayıcılar kapsamda. Referans belirsizse bulgu tartışmaya döner.

Kontrol listesini nasıl hazırlarsınız?

İyi bir kontrol listesi kısa, ölçülebilir ve ekibin gerçek sorunlarından beslenen bir listedir. Aşağıdaki başlıklar iyi bir başlangıç noktasıdır: • Yerleşim ve boşluk: dış ve iç boşluklar, hizalama, ızgara uyumu, bileşenler arası mesafe • Tipografi: yazı tipi, boyut, ağırlık, satır yüksekliği, uzun metinde kırılma, çok satırlı ve taşan metin davranışı • Renk: tasarım sistemindeki renk değerleriyle eşleşme, metin ve zemin arasındaki kontrast, bağlantı ve durum renkleri • Bileşen durumları: varsayılan, üzerine gelme, odaklanma, basılı, pasif, hata, yükleniyor ve boş durum • Etkileşim: geçiş ve animasyon süresi ve yönü, kaydırma davranışı, klavyeyle gezinme • Duyarlılık: farklı ekran genişliklerinde yerleşimin bozulmadan uyarlanması • İçerik: gerçek metinle (kısa, uzun, farklı dilde) arayüzün davranışı, görsellerin oranları ve kalitesi • Erişilebilirlik: odak göstergesi, alternatif metin, dokunma alanı büyüklüğü

Listeyi her proje için sıfırdan yazmayın; ekibin ortak bir temel listesi olsun, projeye özgü maddeleri ekleyin. Her madde 'evet ya da hayır' ile yanıtlanabilir olmalı; 'güzel görünüyor mu' gibi öznel sorular listeyi işe yaramaz hale getirir.

Gerçek ekranlarda denetim nasıl yürür?

Denetimi tasarım dosyası ile gerçek uygulamayı yan yana açarak yapın. Önce genel görünüme bakın: sayfanın bütünü tasarıma benziyor mu? Sonra bölüm bölüm inin ve kontrol listesinin başlıklarını sırayla uygulayın.

Tarayıcı geliştirici araçları denetimin en önemli yardımcısıdır. Bir öğeyi seçip hesaplanmış boşluk, yazı boyutu ve renk değerlerini tasarım dosyasındaki değerlerle karşılaştırabilirsiniz. Ekran genişliğini değiştirerek yerleşim değişimlerini gözlemleyebilir, elemanın üzerine gelme ve odaklanma durumlarını zorlayabilirsiniz. Yalnız masaüstü tarayıcıyla yetinmeyin; gerçek mobil cihazda ve farklı tarayıcıda da bakın, çünkü yazı render'ı ve dokunma davranışı farklılaşabilir.

Gerçekçi içerikle test edin. Tasarım dosyasındaki kusursuz kısa başlık yerine uzun bir ürün adı, uzun bir kullanıcı adı ya da çeviri sonrası uzayan bir metin koyun; arayüzün gerçek davranışı burada ortaya çıkar. Boş durum, hata durumu ve yükleniyor durumu da mutlaka gezilmelidir, çünkü bunlar tasarım dosyasında en sık atlanan ekranlardır.

Bulguları raporlama: geliştiricinin çözebileceği biçimde

İyi bir bulgu, geliştiricinin tahmin yürütmeden düzeltebileceği kadar nettir. Her bulgu şunları içermelidir: ekran ya da bileşenin adı, görsel kanıt (ekran görüntüsü, tasarım dosyasına bağlantı), beklenen davranış, gözlenen davranış ve önem derecesi.

Örnek bulgu: 'Ürün kartı başlığı uzun adlarda taşıyor. Tasarımda belirli bir satırdan sonra kısaltma işaretiyle kırılması bekleniyor; uygulamada kart dışına taşıyor. Tarayıcı geliştirici araçlarında kart genişliği sabit, başlık için taşma kuralı tanımlı değil.' Bu bulguda nerede, ne ve neden net olduğu için geliştirici hemen işe başlayabilir.

Önem derecesi ayrımı ekibi hızlandırır. Yayını engelleyen bulgular (kırık yerleşim, okunamayan metin), yayından sonra düzeltilebilecek küçük sapmalardan ayrılmalıdır. Her küçük farkı engelleyici saymak ekibi yorar ve Design QA'in itibarını düşürür.

Düzeltme döngüsü ve sık yapılan hatalar

Bulgular tek bir listede toplanır, sahibi atanır ve düzeltmeler tamamlandıkça tasarımcı tarafından yeniden doğrulanır. Aynı bulguyu birden fazla kanalda dolaştırmak, durumu takip edilemez hale getirir. Döngü, tüm engelleyici bulgular kapanana kadar sürer; kalan küçük bulgular bilinçli kararla sonraki sürüme aktarılır.

En sık yapılan hatalar şunlardır: • Yayından hemen önce, düzeltme zamanı kalmadığında denetim yapmak • Referans tasarımın kesinleşmediği durumda denetlemek • Yalnızca varsayılan durumu kontrol edip diğer durumları atlamak • Bulguları 'bozuk görünüyor' gibi belirsiz ifadelerle yazmak • Her pikselin farkını aynı ciddiyetle raporlamak • Tekrar eden bulguları tasarım sistemine geri bildirmemek: aynı sapma her projede çıkıyorsa sorun bileşenin tanımında olabilir

Son madde Design QA'in öğrenme değerini gösterir. Bulgular zamanla desen oluşturur; bu desenler kontrol listesini, tasarım sistemini ve devir sürecini iyileştirme girdisidir.

Mindset'te Design QA

Mindset'in Design QA: Yayın Öncesi Görsel ve Etkileşim Kontrolü programı, Design QA'in süreçteki yerini, kontrol listesi tasarımını, gerçek ekranlarda denetim uygulamasını ve bulgu raporlama ile düzeltme döngüsünü kapsar. UX/UI tasarımcıları, ön yüz geliştiricileri, ürün sahipleri ve tasarım ile geliştirme arasındaki devri iyileştirmek isteyen ürün ekipleri için uygundur.

Programın gerçek ekran denetimi modülü, sizin kendi ürününüzdeki kontrol listesini sınayabileceğiniz bir çalışma zemini sunar. Kurumsal ekipler için bu içerik, ortak bir Design QA standardı oluşturmaya başlangıç noktası olabilir.