Güçlü görsel tasarım ile hızlı ve erişilebilir kullanım birlikte planlanabilir. Öncelik, ziyaretçinin hizmeti anlaması ve istediği işlemi yapabilmesidir. Hareketin amacı, yükleme sırası, sade alternatif ve ölçüm koşulları tasarım aşamasında belirlenmelidir.
Her hareketin kullanıcıya katkısını tanımlayın
Bir 3D sahne markanın karakterini taşıyabilir; bir geçiş, sayfadaki bölümler arasındaki ilişkiyi anlatabilir. Tasarım incelemesinde her hareket için neyi açıkladığını, ne kadar sürdüğünü ve kullanıcı hareketsiz bir görünüm seçtiğinde hangi bilginin kalacağını yazın. Dekoratif sahnenin açılmasını beklemek, hizmet metnine ve iletişim bağlantısına ulaşmanın koşulu olmamalıdır.
Örnek kabul senaryosu: ziyaretçi düşük güçlü bir telefonla gelir, hizmeti okur ve teklif bağlantısına dokunur. Görsel henüz hazır olmasa da metin ve bağlantı kullanılabilmelidir. Aynı senaryoyu klavyeyle ve hareket azaltma tercihi açıkken deneyin. Bu senaryo bir tasarım hedefidir; mevcut sitenin her cihazda bunu sağladığına ilişkin sonuç değildir.
Temel ölçümü alın
İlk ekranı, etkileşimi ve yerleşim kararlılığını belirli cihaz ve ağ koşulunda kaydedin.
En etkili işi önceliklendirin
Yükleme sırası, dosya boyutu, sürekli hesaplama ve hareket alternatifini kullanıcı akışıyla değerlendirin.
Aynı koşulda tekrar sınayın
Değişiklikten sonra ölçümü yineleyin; menü, form, klavye ve azaltılmış hareket akışını kontrol edin.
İlk ekran ile sonraki sahnelerin yükünü ayırın
İlk ekranda gerekli yazı, ana görsel ve temel gezinme önce kullanılabilir hale gelmelidir. Ekranın çok altındaki büyük video veya 3D varlıkları aynı anda yüklemek ağ ve işlem gücünü gereksiz yere paylaşır. Görselleri gösterilecek boyuta uygun hazırlamak, alanlarını önceden ayırmak ve görünmeyen animasyonları durdurmak bu yükü azaltmaya yardımcı olur.
Her sahne için indirilen varlıkları, çalıştırdığı kodu ve görünür olmadığı sıradaki davranışı inceleyin. Mobilde yalnızca görsel çözünürlüğünü düşürmek yeterli olmayabilir: sürekli hesaplama, efekt sayısı ve kaydırma sırasında yapılan işler de etkileşimi etkiler. Kalite tercihini gerçek cihaz gözlemiyle belirleyin; tüm ziyaretçiler için rastgele bir dosya boyutu sınırını başarı garantisi gibi kullanmayın.
Hareketi azaltma tercihini tasarımın bir parçası yapın
Hareket hassasiyeti olan kullanıcılar için kaydırmayla büyüyen nesneler, paralaks ve sürekli dönme zorlayıcı olabilir. Sistemin hareket azaltma tercihi için sakin bir görünüm hazırlayın. Bu görünümde başlık, açıklama, bağlantı ve bilgi sırası korunmalı; yalnızca boş bir alan bırakılmamalıdır. Tercih açıkken efektleri görsel olarak gizleyip hesaplamayı sürdürmek performans sorununu çözmez.
W3C, etkileşimle tetiklenen zorunlu olmayan hareketin kapatılabilmesini ayrı bir erişilebilirlik ölçütü olarak ele alır. Ayrıca otomatik başlayan ve diğer içerikle birlikte sunulan belirli hareketli içerikler için duraklatma, durdurma veya gizleme kontrolleri tanımlar. Hareket azaltma tercihi, gereken kullanıcı kontrollerinin veya klavye ve odak testlerinin yerine geçmez. Bu kontroller tek başına tam WCAG uyumluluğu iddiası oluşturmaz.
Laboratuvar ölçümüyle gerçek kullanım verisini birlikte okuyun
LCP ana içeriğin yüklenmesini, INP etkileşim yanıtını, CLS beklenmedik yerleşim kaymalarını izler. Google’ın iyi deneyim eşikleri sırasıyla 2,5 saniye, 200 milisaniye ve 0,1 değeridir; değerlendirme mobil ve masaüstü ayrılarak ziyaretlerin yüzde 75’lik diliminde yapılır. Bunlar bir tasarım stilini yasaklayan kurallar değildir.
Geliştirme sırasında laboratuvar testi gecikmenin nedenini bulmaya yardım eder. Tek bir Lighthouse puanı tüm ziyaretçilerin deneyimini veya gerçek INP sonucunu kanıtlamaz. Gerçek kullanıcı verisi oluşmadığında bunu açıkça belirtin; aynı cihaz, ağ koşulu ve sayfa akışında yapılan önce/sonra testlerini ayrı raporlayın. Değişiklik sonrasında menü, form ve içerik erişimini yeniden kontrol edin.
| Özellik | Kontrol edilecek davranış | Sade alternatif |
|---|---|---|
| 3D sahne | Metin ve bağlantı sahneyi beklemiyor | Sabit görsel veya hafif kompozisyon |
| Kaydırma animasyonu | Okuma ve klavye odağı korunuyor | Hareketsiz, doğal belge akışı |
| Otomatik hareket | Gereken durdurma kontrolü erişilebilir | Kullanıcı başlatmalı veya sabit içerik |
| Büyük medya | Alanı ayrılmış, boyutu uygun | Anlamı koruyan önizleme |
UYGULAMA LİSTESİ
Yayın öncesi deneyim kontrolü
- Ana metin ve iletişim bağlantısı görsel yüklenmeden kullanılabiliyor.
- Hareket azaltma tercihinde tüm bilgi ve bağlantılar korunuyor.
- Gereken duraklatma kontrolleri klavyeyle kullanılabiliyor.
- Görsel yüklenirken içerik beklenmedik biçimde yer değiştirmiyor.
- Düşük güçlü mobil cihazda menü ve form denenmiş.
- Laboratuvar sonuçları ile gerçek kullanıcı verisi ayrı raporlanıyor.
Birincil kaynaklar
Uygulamaya geçmeden önce güncel ürün ve arama motoru belgelerini kendi koşullarınız için yeniden kontrol edin.
