Bir trend listesi değil, kullanılabilirlik testi kullanın
Figma’nın 2026 genel özeti etkileşimli 3D, deneysel gezinme, canlı paletler, hareket, oyunlaştırma ve yapay zeka destekli deneyimleri kaydeder. Bunlar keşif amaçlı yönelimlerdir; her sitenin bunları kopyalaması gerektiğini kanıtlamaz. Hizmet ve hesap sayfaları genellikle öngörülebilir yollarla daha çok fayda sağlar.
Tedavi (görsel veya etkileşim) seçmeden önce sayfanın işini yazın. Aynı görev ve başarı ölçüsü üzerinde geleneksel ve trend odaklı versiyonları karşılaştırın. Dikkat tek başına başarı değildir.
Ana eylemi adlandırın ve etiketini, yerini ve sonucunu hover, bir jest veya öğretici olmadan anlaşılır kılın.
Çekirdek içeriğe geleneksel bir rota ve geliştirmeyi kanıt zayıfsa kaldıracak kolay bir yol bırakın.
İçerik ve bileşen etrafında uyarlanabilir sistemler inşa edin
Responsive tasarım değeri yüksek olmaya devam ediyor çünkü ekran boyutu niyeti veya giriş yöntemini tahmin etmez. Google içerik-odaklı kırılma noktalarını, yatay taşmayı önlemeyi ve dar bir düzen yüzünden bilgiyi gizlememeyi önerir. Küçükten başlayın, içerik daha fazla alana ihtiyaç duyduğunda genişletin.
Container query'ler bir bileşeni, ebeveyninin sağladığı alana göre uyarlayabildiğinden bir kart hem ana sütunda hem kenar çubuğunda çalışabilir. Bunlar media query'lerin yerini almaz: MDN grid, flex ve viewport media query'leri birer yedek yaklaşım olarak açıklar.
Geniş ekranlarda uzun metin satırlarını sınırlayın ve yakınlaştırmanın kesilmiş sütunlar veya yatay kaydırma oluşturmadığını doğrulayın.
Tarayıcının görsel yüklenmeden önce yer ayırabilmesi ve düzen hareketini azaltmak için görsellere boyut sağlayın.
Erişilebilirliği öncelikleyen etkileşim kalıcı bir yön olmalı
Erişilebilirlik-öncelikli tasarım insanların bir siteyi nasıl kullandığını ele alır, bu yüzden görsel modaya göre daha uzun ömürlüdür. WCAG 2.2 bir W3C Recommendation'dır. Yeni kriterleri somut inceleme vakaları sağlar: klavye odaklanması yazar tarafından oluşturulan içerikle tamamen gizlenmemeli (Seviye AA); sürükleme basit bir gösterge alternatifi gerektirir; pointer hedeflerinin 24 by 24 CSS-pixel asgari boyutu vardır (Seviye AA) istisna uygulanmadıkça.
Bu vakaları sistem kurallarına dönüştürün. Başlıklar, çerez kontrolleri, sohbet başlatıcıları veya bannerlar odak noktasını kapatmasına izin vermeyin. Güçlü bir odak durumunu gösterin. Bir liste sürükleyerek yeniden sıralanabiliyorsa başka basit bir işlem sunun. WCAG 2.2 ayrıca yardım, tekrarlı giriş ve erişilebilir kimlik doğrulamaya değinir. Güvenlikle ilgili istisnalar uygulanabilir; uygun nitelikli güvenlik ve erişilebilirlik incelemesi alın.
Her düzen için ana yolculuklarda Tab ile ilerleyin ve odaklanmış kontrolün görünür ve tanımlanabilir olduğunu doğrulayın.
Özellikle menülerde ve formlarda kompakt simge kontrollerin ve aralarındaki boşluğun ölçümünü yapın.
Parola yöneticilerini ve yapıştırmayı desteklemek bilişsel yükü azaltabilir; nitelikli bir güvenlik incelemesi olmadan kontrolleri zayıflatmayın.
Hareketi (motion) isteğe bağlı rehberlik olarak kullanın
Hareket, kaydetme onayı, genişleyen panel veya sonraki adımı netleştirebilir. Bir seçimi geciktirdiğinde, içeriğin dikkatini sürekli dağıttığında veya durum değişikliğini anlamanın tek yolu olduğunda kullanılabilirliğe zarar verir. Bu deneyimler zorunluluk değil, yönelimdir.
Önemli olmayan hareketleri azaltmak isteyen isteğe saygı gösterin. MDN prefers-reduced-motion ile kullanıcı tercihlerini algılama ve hareketi kaldırma, azaltma veya değiştirme konusunda dokümante eder. Bilgi ve tamamlanma geri bildirimlerini saklayın, ancak büyük ölçekli pan, paralaks veya otomatik oynatılan efektleri sessiz görsel değişikliklerle değiştirin.
Her animasyonun hangi bilgiyi ilettiğini belirtin; bir yanıt yoksa animasyonu kaldırın.
İşletim sistemi düzeyinde reduced motion etkinleştirilmiş olarak sayfanın hâlâ anlamlı olduğunu doğrulayın.
Hız ve kararlılığı tasarım kabul kriteri yapın
Performans bir tasarım kısıtıdır, sonradan yapılacak bir tamamlayıcı görev değil. Google’ın güncel Core Web Vitals'ı yükleme için Largest Contentful Paint, yanıt verme için Interaction to Next Paint ve görsel kararlılık için Cumulative Layout Shift'tir. Önerilen hedefler 75. yüzdelikte mobil ve masaüstü ayrımıyla LCP 2.5 saniye veya daha az, INP 200 milisaniye veya daha az ve CLS 0.1 veya daha azdır. Bunlar kullanışlı hedeflerdir, görev testinin yerine geçmez.
Bir video hero, özel yazı tipi, görsel dizisi, istemci tarafı efekt veya üçüncü taraf asistan eklemeden önce bir bütçe belirleyin. Laboratuvar testleri sürüm öncesi gerilemeleri yakalar, ancak koşullar değiştiği için alandaki gerçek kullanıcı ölçümü esastır.
Görseller, embed'ler, reklamlar ve geç yüklenen arayüz öğeleri için alan ayırın.
Yapım sırasında laboratuvar kontrolleri ve yayın sonrası gerçek kullanıcı verilerini kullanın; mobil ve masaüstünü ayrı ayrı gözden geçirin.
Etkileşimli, deneysel ve AI-odaklı arayüzleri koşullu deneyler olarak değerlendirin
3D, doğrusal olmayan gezinme, görsel hikâyeleştirme ve konuşma tabanlı yardım, statik içeriğin gidermediği belirsizliği azalttığında fayda sağlar. Bir ziyaretçinin bir fiyat, bilinen hedef, form veya cevap gerektiği durumda bunlar kötü varsayılanlardır. Bir geliştirme yüklenirken veya başarısız olursa doğrudan yol, düz metin açıklama ve kullanılabilir bir yol koruyun.
Önce en küçük prototipi geliştirin. Tutmanın gerekçesini tanımlayın; örneğin daha az yanlış seçim veya daha hızlı cevap bulma gibi. Varlık ağırlığını, script yürütmesini, bakım ihtiyacını, satıcı bağımlılığını, gizlilik incelemesini ve erişilebilir alternatifleri kaydedin. Gösterişli bir demo nedenselliği kanıtlamaz.
Çekirdek metin, birincil gezinme ve ana eylemi immersive katman veya asistan olmadan kullanılabilir tutun.
Erken maruziyeti sınırlayın, sonuçları karşılaştırın ve geri alma kararı tutun.
Tasarım değişikliklerini dayanıklı ürün değişiklikleri olarak yönetin
Bir düzen varlık teslimini, JavaScript davranışını, rıza araçlarını ve dış servisleri değiştirebilir. Yeniden tasarımı bir üretim değişikliği olarak ele alın. Status Is UP proaktif kullanılabilirlik optimizasyonu ve müdahaleyi destekler: yayından önce zayıf bağımlılıkları belirleyin, kontroller oluşturun, geri alma hazırlayın ve tekrarlayan teslim risklerini düzeltin. Bu, kullanıcıların etkilenmesinden sonra kesinti beklemekten farklıdır.
Yeni yol, görev, erişilebilirlik ve performans kontrollerini geçene kadar önceki yolu koruyun. Bir özelliği kimlerin durdurabileceğini belirtin. İçerik, tarayıcı, satıcı veya kampanya değişikliklerinden sonra yeniden kontrol edin.
Geniş yayından önce ana yolculukları, varlıkları, formları, rıza davranışını ve bağımlılıkları kontrol edin.
Test edilmiş geri dönüş yolunu, karar sahibi ve beklenen ziyaretçi durumunu belgelendirin.