Sürükle Bırak (Drag and Drop) Tasarımında Doğru Kurgu

Sürükle bırak kullanıcıdan aynı anda üç şey ister: nesneyi basılı tutmak, doğru yere götürmek, tam orada bırakmak. Üçünden biri kaçarsa işlem baştan başlar. Bu yüzden sürükleme arayüzdeki en pahalı etkileşimlerden biridir ve tek başına asla yeterli değildir; sürüklemeden yapılabilen bir karşılığı yoksa o arayüz bir kısım kullanıcıya kapalıdır.

Dört adım var, üçü genelde tasarlanmamış

Sürükleme dört aşamada yaşanır: öğenin taşınabilir olduğunun anlaşılması, tutma hareketiyle seçilmesi, hedefe götürülmesi, bırakılması. Çoğu uygulamada yalnızca birinci aşama düşünülmüş oluyor. Grab handle ikonu konmuş, sonrası şansa bırakılmış: sürükleme başladığında nesnenin seçildiği belli olmuyor, hedef alan vurgulanmıyor, bırakma başarılı mı başarısız mı anlaşılmıyor.

Bu üç adımın her biri ayrı bir görsel duruma karşılık gelir ve hepsi ayrı ayrı çizilmelidir. Tasarım dosyasında yalnızca "varsayılan" ve "sürükleniyor" hâli varsa iş yarım demektir.

Taşınabilir olduğu nasıl anlaşılır

Masaüstünde imleç değişimi işi büyük ölçüde çözer: tablo kolonları arasındaki ince çizgi, pencere köşesindeki çapraz işaret, tutma sırasında el ikonuna dönen imleç. Altı noktalı grab handle artık yerleşik bir işaret, onu kullanın. Kebab ya da hamburger ikonu bu işi görmez; ikisi de menü açar, taşıma anlamı taşımaz ve karıştırıldığında kullanıcı ikonu tutup bekler, hiçbir şey olmaz.

Mobilde hover yok, dolayısıyla keşfedilebilirlik sıfıra yakın. Uzun basmaya bağlanan sürükleme, kullanıcı o hareketi denemedikçe var olmaz. Dikey listelerde ikinci bir sorun daha çıkar: dikey sürükleme sayfanın kendi kaydırmasıyla çakışır. Ayrım basma süresiyle yapılır, bu da işlemin başlamasını yavaşlatır. Mobilde sürükleme, dokunma hedefi 24×24 CSS pikselin altına düşmeyen bir tutamakla verilmediği sürece hataya açık kalır.

Sürükleme sırasında ne göstermeli

• Seçilen nesnenin yarı saydam bir kopyası imleçle birlikte gider, aslı yerinde soluk kalır.
• Geçerli bırakma bölgeleri sürükleme başlar başlamaz belirginleşir; geçersiz olanlar aynı anda sönümlenir.
• Hedefe yaklaşınca snap devreye girer, böylece kullanıcı piksel hassasiyetiyle uğraşmaz.
• Liste elemanları yer açarken kısa bir geçişle kayar. Bu animasyonu uzun tutmayın; iki yüz milisaniyeyi geçen yer değiştirme, sürüklemeyi ağır hissettirir.
• Hedef ekranın dışındaysa kenara yaklaşınca otomatik kaydırma başlar. Bu olmadan uzun listelerde sıralama yapılamaz.

Sürükleme süresi mesafeyle birlikte artar, hedef küçüldükçe de artar. Uzun bir listede elemanı otuz sıra yukarı taşımak, ekranı kaydıra kaydıra sürüklemek anlamına gelir ve bu iş her denemede yeniden yapılır. Sıralamanın kendisi doğru çözüm olabilir ama aracı sürükleme olmayabilir.

Native API klavyeyle çalışmaz

HTML5'in draggable özelliği ve ona bağlı dragstart/dragover/drop olayları yalnızca işaretçiyle tetiklenir. Klavyeden başlatılamaz, ekran okuyucuya durum bildirmez, mobil tarayıcıların büyük kısmında dokunmayla hiç çalışmaz. Yani "klavye desteği de ekleriz" denen şey, native API'nin üstüne eklenebilecek bir katman değil; API'yi bırakıp pointer olayları üzerine kurulmuş bir çözüme geçmek demektir. Ciddi projelerde dnd-kit, SortableJS benzeri kütüphanelerin tercih edilmesinin sebebi görsel şıklık değil, tam olarak bu (native draggable'ı üretimde kullanmaya değer bulmuyorum).

Klavye kurgusu şöyle işler: tutamak Tab ile odaklanabilir, Space veya Enter taşıma kipini açar, yön tuşları elemanı bir basamak oynatır, Enter bırakır, Esc iptal eder. Her adımda ne olduğu bir aria-live bölgesine metin olarak yazılır: "Üçüncü sıradan ikinci sıraya taşındı."

aria-grabbed kullanmayın

Eski kaynaklarda geçen aria-grabbed ve aria-dropeffect nitelikleri WAI-ARIA'da kullanımdan kaldırıldı ve ekran okuyucularda güvenilir karşılıkları yok. Sürükleme durumunu bunlarla duyurmaya çalışmak sessizce başarısız olur. Canlı bölgeye yazılan düz metin, bugün işe yarayan tek yöntem.

Alternatif zorunlu, tercih değil

WCAG 2.2, 2.5.7 Dragging Movements ölçütüyle sürükleme gerektiren her işlevin sürüklemesiz bir karşılığını şart koşuyor: tek işaretçiyle, basılı tutmadan yapılabilen bir yol. Sağ tık menüsündeki "Yukarı taşı", elemanın yanındaki ok düğmeleri, "Şuraya taşı" diyaloğu, sıra numarasının doğrudan yazılabildiği bir alan. Hangisi olduğu size kalmış, olmaması size kalmış değil.

Aynı mantık dosya yüklemede de geçerli. Bırakma bölgesi hızlı bir kısayoldur, arayüzün tek yolu değildir; yanında her zaman bir "Dosya seç" düğmesi durmalı. Klasörden dosya sürükleyemeyen kullanıcı sayısı sandığınızdan fazla.

Nerede kullanmamalı

Sürükle bırak, konumun kendisi anlam taşıdığında doğru araçtır: pano üzerinde kartı bir sütundan diğerine almak, tuvalde nesne yerleştirmek, galeriyi görsel olarak sıralamak. Konum yalnızca bir sıra numarasıysa ve liste uzunsa, sürükleme zahmetten ibarettir; numarayı yazdırmak daha hızlı biter. Telefonda tek elle kullanılan uzun listelerde sürüklemeyi birincil yol yapmak ise doğrudan hata.

Karar şu soruyla verilir: kullanıcı nesneyi gözüyle takip etmek zorunda mı, yoksa sadece sonucu mu istiyor? İkincisiyse sürüklemeye gerek yok.