1. Hareket tercihinin bir nedeni var
Bazı kullanıcılar büyük yakınlaşma, kayma ve paralaks hareketlerinden rahatsız olabilir. Bazılarıysa daha sakin bir arayüzü tercih eder. İşletim sistemindeki azaltılmış hareket seçeneği, bu tercihi tarayıcıya iletebilir. prefers-reduced-motion medya özelliği ile tasarımını buna göre uyarlayabilirsin.
Bir animasyonun tasarımda güzel görünmesi, her kullanıcı için uygun olduğu anlamına gelmez. Özellikle içerik okumak isteyen bir ziyaretçinin karşısında sürekli hareket eden dekoratif bir sahne, dikkat ve konfor açısından gereksiz olabilir. Önce hareketin hangi işlemi anlaşılır kıldığını sorgula.
2. Varsayılanı sakin seç
Arayüzdeki geçişleri kısa ve amaçlı tut. Menü açılmasının veya kaydetme durumunun anlaşılması için bazen küçük bir değişim yeterlidir. Ekranın tamamını hareket ettiren bir animasyon yerine rengi veya opaklığı değiştirmek farklı bir görsel etki sağlar; yine de her etkiyi kullanıcı tercihiyle değerlendirmek gerekir.
Aşağıdaki örnek yalnızca dekoratif kart hareketini kapatır ve sayfa kaydırmasını anlık hale getirir. Bütün animasyonları kör bir genel seçiciyle neredeyse sıfıra indirmek, animasyon olayına bağlı uygulama kodunu veya önemli durum göstergelerini bozabilir. İlgili bileşenin davranışını açıkça seç.
.guide-card {
transition: transform 180ms ease;
}
.guide-card:hover {
transform: translateY(-3px);
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.guide-card {
transition: none;
transform: none;
}
.guide-card:hover { transform: none; }
}3. Tercihi algılamak tek başına yeterli değil
CSS kuralının çalıştığını kontrol ettikten sonra arayüzü gerçekten kullan. Menü açılıyor mu, durum değişikliği hâlâ anlaşılır mı, odak göstergesi görünür mü? Hareketi kapatırken bilgi de kayboluyorsa bileşeni yeniden düşün. Tercih, işlemin sonucunu saklamak için bir neden değildir.
JavaScript ile yürütülen animasyonlarda matchMedia üzerinden tercihi okuyabilirsin. Uzun süre açık kalan sayfalarda tercih değişikliğini de ele almak gerekebilir. Kullanıcının ayarını bir kez okuyup her yeni animasyonda yok saymak tutarlı bir deneyim sunmaz.
4. Test için gerçek kullanıcı ayarını taklit et
Tarayıcı geliştirici araçlarında azaltılmış hareket tercihini emüle etmek hızlı bir kontrol sağlar. Ardından işletim sistemi ayarıyla da denemek, sayfanın gerçek kullanıcı ortamında nasıl davrandığını görmene yardımcı olur. Her iki durumda da otomatik kayan alanların ve büyük ölçek hareketlerinin değişimini incele.
Yakınlaştırma, klavye kullanımı ve odak sırası gibi kontrolleri ayrıca yap. Azaltılmış hareket desteği genel erişilebilirliğin tamamı değildir. Bir menü artık hareket etmese de klavyeyle açılmıyorsa ana problem devam eder.
5. Hareket bütçesi koy
Bir sayfada bütün bileşenlere bağımsız geçiş eklemek kolaydır; fakat ortaya toplamda yoğun bir hareket çıkabilir. Tasarımda hareketi birkaç anlamlı noktaya ayır: durum değişimi, konum ilişkisi ve geri bildirim. Sürekli dekoratif hareketleri ayrı değerlendirmeye tabi tut.
KodBilgini'nin yayın tasarımında okuma alanını sakin tutuyoruz. İnce hover geçişleri azaltılmış hareket tercihinde kapanır; rehber içeriğine ulaşmak için animasyon bitmesini beklemek gerekmez. Bu yaklaşım bir performans iddiasından çok bilinçli bir okuma deneyimi kararıdır.
Kaynaklar ve kontrol notu
Bu rehber yapay zekâ desteğiyle hazırlanmış özgün bir editoryal içeriktir. Kaynak kontrolü: 30 Eylül 2026. Örnekleri kendi proje koşullarına uyarlayarak doğrula.
Bir hata fark ettiysen editörlüğe bildir; düzeltmeleri güncelleme tarihiyle işleriz.
