Mobilde tablo ve karmaşık bileşenleri uyarlama desenleri

Tablo mobilde neden bozulur?

Tablo, genişlik üzerine kurulu bir bileşendir: sütunlar yan yana dizilir, satırlar karşılaştırma yapmayı sağlar. Dar ekranda bu özellikler çatışır. Sütunları sıkıştırırsanız metin kırılır ve okunmaz hale gelir; sütunları korursanız sayfa yatay taşar. Tarayıcının sunduğu varsayılan davranış bu sorunu çözmez, yalnızca taşmayı olduğu gibi bırakır.

Responsive tablo tasarımının işi bu çatışmayı kullanıcı için en az maliyetle çözmektir. Çözüm tek bir teknik değildir; verinin türüne, kullanıcının ne yapmak istediğine ve sütun sayısına göre değişen bir seçim kümesidir. Önce şu sorulara cevap vermek gerekir: kullanıcı satırları birbirleriyle mi karşılaştırıyor, yoksa tek bir satırı mı inceliyor? Hangi sütunlar olmadan satır anlamsızlaşır? Tabloda eylem düğmeleri ya da düzenleme kontrolleri var mı?

Bu sorulara verilen cevaplar hangi desenin kullanılacağını belirler. Yanlış desen seçilirse teknik olarak çalışan ama kullanışsız bir tablo ortaya çıkar.

Desen seçenekleri: hangisi ne zaman?

Başlıca desenler şunlardır:

• Yatay kaydırma: tablo olduğu gibi kalır, kapsayıcı yatay kaydırılır. Sütunların birbiriyle karşılaştırılması önemliyse en dürüst çözümdür. Kaydırılabildiğini belli etmek (kenarda gölge ya da kısmen görünen sütun) şarttır.
• Sabit ilk sütun: kaydırma sırasında satırı tanımlayan ilk sütunu (ad, kod) ekranda tutmak, kullanıcıyı hangi satırı okuduğunu unutmaktan korur. Sabit sütunun arka planı opak olmalı, aksi halde alttaki metin üstüne biner.
• Kart yığını (stack): her satır kendi kartına dönüşür, sütun başlıkları satır içi etiket olur. Az sütunlu ve satır tek tek incelenen listelerde (siparişler, kullanıcılar) en rahat okunan düzendir. Ancak satırlar arası karşılaştırma zorlaşır.
• Öncelikli sütunlar: önemsiz sütunlar dar ekranda gizlenir, gerekirse "daha fazla" kontrolüyle açılır. Hangi sütunun gizleneceği içerik karar verilerek belirlenmelidir.
• Satır genişletme (disclosure): satırda yalnız anahtar bilgiler görünür; dokununca ayrıntılar altına açılır. Özet-ayrıntı ilişkisi olan verilerde uygundur.

Karar için pratik kural: karşılaştırma önemliyse kaydırma, tek satır inceleme önemliyse kart, çok sütun ama kısa içerik varsa öncelikli sütun, ayrıntı gerektiren satırlarda genişletme.

Teknik uygulama: kart dönüşümü örneği

Kart dönüşümü için HTML tablo yapısı korunur ve CSS ile görünüm değiştirilir. Anlamsal tabloyu terk etmemek, ekran okuyucuların veriyi doğru algılaması için önemlidir. Temel fikir: dar ekranda satırı bloğa çevirmek ve her hücrenin başına veri etiketini eklemektir.

Hücreye kendi sütun başlığını bir öznitelik olarak yazarsınız (örneğin data-label özniteliği). Dar ekran kuralında satır ve hücreler blok olarak gösterilir, tablo başlık satırı görsel olarak gizlenir (erişilebilir biçimde, ekran okuyucuya saklanmadan), her hücrenin önüne bu etiket sahte içerik olarak eklenir:

• td::before { content: attr(data-label); font-weight: bold; }
• tr { display: block; margin-bottom: var(--bosluk); }
• td { display: flex; justify-content: space-between; }

Yatay kaydırma için kapsayıcıya overflow-x: auto verilir; bu kapsayıcı klavye ile odaklanabilir olmalı ve bir etiketle tanımlanmalıdır. Sabit ilk sütun için position: sticky kullanılır ve opak arka plan verilir.

Kırılım noktası seçimi, ekran boyutundan çok içerikten yapılmalıdır: tablo okunmaz hale geldiği genişlikte desen değişir. Bileşen bir kapsayıcı içindeyse (kenar çubuğu yanındaki dar alan gibi) cihaz ekranına değil kapsayıcı genişliğine bağlı kural yazmak daha doğru sonuç verir.

Tablodaki eylemler, seçim ve düzenleme

Karmaşık tablo yalnız veri göstermez: satır seçimi, toplu işlem, satır içi düzenleme, menüler barındırır. Bu kontroller dar ekranda ayrı düşünülmelidir.

Satır seçim kutusu kart görünümünde kartın köşesine taşınır; toplu eylem çubuğu ekranın altında yapışık bir çubuk olarak belirir. Satır başındaki eylem düğmeleri tek bir "Daha fazla" menüsüne toplanır. Hover ile görünen eylemler mobilde çalışmaz; her zaman görünür bir erişim noktası gerekir.

Satır içi düzenleme küçük ekranda zordur. Bunun yerine satıra dokununca ayrıntı sayfası ya da alt panel açıp düzenlemeyi orada yapmak daha güvenlidir. Hata mesajları ve doğrulama da kartın içinde okunur olmalıdır.

Dokunma alanı yeterince büyük olmalı; yan yana duran küçük simgeler yanlışlıkla tıklanır. Eylem düğmeleri arasında bırakılan boşluk, yanlış dokunma oranını belirgin biçimde düşürür.

Karmaşık bileşenler: filtre, grafik, form

Tablo dışında panolar, çok adımlı formlar ve veri filtreleri de mobilde yeniden düşünülmelidir. Filtre panelini tablonun üzerinde sabit bırakmak yerine alt çekmeceye taşımak yer açar. Pano grafikleri küçük ekranda tek sütun halinde akar, etiketler kısaltılır, değerler dokununca tooltip ile gösterilir; dar ekranda çok seri içeren çizgi grafik yerine özet sayı ve seçilebilir seri tercih edilebilir.

Çok alanlı formlar kısa gruplara bölünür ve tek sütunda akar. Yan yana duran alanlar (ad-soyad, tarih aralığı) dar ekranda alt alta gelir; ancak tarih aralığı gibi birbirine bağlı alanlar birbirine yakın ve ilişkili görünmelidir.

Bütün bu bileşenlerde ortak ilke: önce içeriğin önceliğini belirleyin, sonra düzeni ona göre kurun. Masaüstü tasarımını küçültmek responsive tasarım değildir.

Test, performans ve erişilebilirlik

Gerçek cihazlarda test şarttır. Tarayıcıdaki cihaz simülasyonu genişliği doğru gösterir ama dokunma, kaydırma ivmesi, klavye açılması ve sistem yazı boyutu gibi etkenleri yakalamaz. Özellikle büyük yazı boyutu ayarında tabloların taştığı sık görülür.

Performans açısından çok satırlı tabloda yüzlerce satırı birden çizmek yavaşlık yaratır; sayfalama ya da sanal liste kullanılır. Kart dönüşümü her satırda ek öğe üretir, bu da büyük listelerde maliyetlidir.

Erişilebilirlik kontrol listesi: tablo anlamsal etiketlerle kurulmuş mu, başlıklar hücrelerle ilişkili mi, kaydırma alanı klavye ile odaklanabiliyor mu, sıralama durumu ekran okuyucuya bildiriliyor mu, renk tek başına bilgi taşıyor mu, dokunma hedefleri yeterince büyük mü? Bu sorulara tasarım aşamasında da bakılmalıdır, çünkü sonradan eklenen düzeltmeler çoğu zaman düzen bozar.

Mindset programlarında bu beceri nerede çalışılır?

Responsive ve Çoklu Ekran Arayüz Tasarımı programının "Zor Bileşenlerin Uyarlanması" ve "Kırılım Noktası Stratejisi" modülleri, tablo gibi dar ekranda sorunlu bileşenlerin uyarlanmasını ele alır; "Test, Belgeleme ve Devir" modülü de tasarımın geliştirmeye aktarılmasını kapsar. Ürün tasarımcıları ve frontend geliştiriciler için uygundur.

Veri Yoğun Arayüz Tasarımı programının "Tablo Mimarisi" ve "Eylemler ve Toplu İşlemler" modülleri ise yönetim panellerindeki karmaşık ekranların yapısını anlatır. İç yazılım ekiplerinin yönetim paneli ve raporlama ekranlarının mobil sürümünü planlarken bu programları birlikte değerlendirebilirler.