UX/UI tasarım / DIJION
Alt panel açılınca odak nereye gitmeli?
Modal ve modal olmayan alt panelleri ayıran; odak, kapatma ve klavye durumlarını tek görev üzerinden inceleyen tasarım planı.
Ekranın altından açılan panel küçük görünebilir ama gezinme düzenini değiştirebilir. Örnek bir filtre panelinde kullanıcı arkadaki listeyle etkileşmeye devam edebiliyor mu, yoksa önce paneli kapatması mı gerekiyor? Bu karar verilmeden yalnız yükseklik ve köşe yarıçapına odaklanmak, klavye ve ekran okuyucu davranışını belirsiz bırakır.
Önce panelin türünü belirleyin
Modal panel arka planla etkileşimi sınırlar; modal olmayan panel başka bir düzen gerektirir. W3C modal diyalog örüntüsü, açılışta içeriye odak taşımayı, Tab gezinmesini içeride tutmayı ve kapanınca uygun yere dönmeyi açıklar. Bu web örüntüsünü native uygulamaya aynı kodla taşımayın; platform araçlarıyla karşılığını değerlendirin.
İlk odak görünen işe hizmet etsin
Tüm sütunlar için tabloyu yatay kaydırabilirsiniz.
| Panel | Başlangıç odağı | Kapanış hedefi |
|---|---|---|
| Kısa seçim | Uygun seçim veya başlık | Açan düğme |
| Uzun açıklama | İçeriğin başlangıcı | Önceki bağlam |
| Açan kart silindi | Görevin güvenli başlangıcı | Yaşayan komşu veya liste |
Klavye panelin içeriğini örtmesin
Arama alanına otomatik odak vermek klavyeyi açıp panelin büyük kısmını kapatabilir. Kullanıcının önce seçenekleri görmesi gerekiyorsa bu tercih uygun olmayabilir. Klavye açıkken başlık, hata ve uygulama düğmesine ulaşılabildiğini kontrol edin. Sabit yükseklik yerine içerik ve güvenli görünüm alanıyla uyumlu bir düzen değerlendirin.
Kapatma yollarının anlamı tutarlı olsun
Aşağı sürükleme, kapat düğmesi, geri hareketi ve dışarı dokunma farklı sonuçlar üretmemelidir. Değişiklikler anında mı uygulanıyor, yoksa Uygula seçilene kadar taslak mı? Bu kararı bütün kapatma yollarıyla eşleştirin. Kaybolacak düzenleme varsa kapsamını açıklayın; yalnız kapatmanın her üründe kaydetmek olduğunu varsaymayın.
Paneli bütün giriş yöntemleriyle gezin
- Dokunma, klavye ve ekran okuyucuyla açıp kapatın.
- Tab ve ters Tab ile arka plana kaçışı inceleyin.
- Büyük metin ve açık klavyeyle Uygula eylemine ulaşın.
- Panel açıkken açan öğeyi kaldırıp dönüş odağını kontrol edin.
Teslim çıktısına panel türü, ilk odak, değişiklik politikası ve kapanış hedefini yazın. Bu dört karar, görsel olarak aynı panelin neden farklı davranabildiğini açıklığa kavuşturur.