Duyarlı tablolar nasıl tasarlanır

Duyarlı tablo tasarımı, kullanılabilir genişlik değiştiğinde tablonun yararlı ilişkilerini koruma işidir. Bütün sütunları sığdırmak olası çözümlerden yalnızca biridir. Okunaklı, kaydırılabilir bir tablo; karşılaştırılacak değerleri ayıran düzenli kart yığınından daha iyi hizmet edebilir.

Görevle başlayın. Kişinin birkaç kaydı karşılaştırması mı, tek kayıt bulması mı, ayrıntılarını incelemesi mi yoksa grup üzerinde işlem yapması mı gerekiyor? Bu yanıt hangi bilgilerin birlikte kalacağını ve hangilerinin kontrol arkasına taşınabileceğini belirler. Yanıt yoksa duyarlı tasarım kararları küçük yazılar, gizlenen sütunlar ve gittikçe sıkışan düğmeler dizisine dönüşür.

İşlenmiş örneklerde proje adı, sorumlu, durum, bitiş tarihi ve açık yorum sayısı içeren kurgusal inceleme kuyruğu kullanılıyor.

Korunması gereken ilişkiyi bulun

Tablo yararlıdır; çünkü konum anlam taşır. Değerleri karşılaştırmak için tek sütunu aşağı tarayabilir veya kaydı nitelikleriyle ilişkilendirmek için satır boyunca ilerleyebilirsiniz. Duyarlı değişiklikler bu ilişkilerden birini korurken diğerini zayıflatabilir.

Proje inceleme örneğinde yönetici, hâlâ çözülmemiş yorumları olan ve bitiş tarihi en yakın projeyi bulmak isteyebilir. Bitiş tarihi, yorum sayısı ve proje kimliği birlikte görünmelidir. Yorum sayısını sırf son sütun olduğu için gizlemek, ekran daha temiz görünse bile görevi bozar.

Kendisine atanmış projeyi açan inceleyenin ihtiyacı farklıdır. Proje adı, durum ve açık eylem önemli olabilir; diğer ayrıntılar sonra erişilebilir olabilir. Kısa özet ve genişletme iyi çalışabilir. Temel veri kümesi aynıdır, ama gerekli ilk görünüm farklıdır.

Ardından her görevi tamamlamak için gereken bilgileri işaretleyin. Her görevde kullanılan sütun çekirdek görünümde yer alır. Yalnızca öğe seçildikten sonra kullanılan alan, açılır ayrıntı adayı olabilir. Bu, kullanıcının işi hakkında editoryal karardır; daha az önemli veriyi silme talimatı değildir.

Tablonun genişliğini sayfanın genişliğinden ayırın

Geniş tablonun bütün sayfayı yana kaydırması gerekmez. CSS’te overflow-x: auto sarmalayıcısı, başlık, açıklama, filtreler ve çevre metni görünüm alanına sığarken duyarlı tabloya kendi kaydırılabilir bölgesini verebilir. Sarmalayıcının kendisinin de sayfa düzeni içinde küçülmesine izin verilmelidir; katı ızgara sütunundaki tam genişlikli alt öğe bütün sayfayı yine genişletebilir. Böylece iki boyutlu alan yalnızca ona ihtiyaç duyan içerikte kalır.

W3C’nin Yeniden Akış ölçütü açıklaması, veri tabloları dahil, anlamı veya kullanımı iki boyut gerektiren içerikler için istisna tanır. Tabloyu, tekil hücrelerin hâlâ uygun biçimde yeniden akması gereken içeriğinden de ayırır. Bu istisna, her etiketi veya çevre paragrafını taşırmak için gerekçe değildir. W3C’nin Yeniden Akış açıklaması.

Pratikte uzun proje adının makul hücre genişliğinde satıra kaymasına izin verin. Masaüstü tasarımı kullandı diye büyük boş genişliği korumayın. Tablo sütun ilişkileri için yatay harekete ihtiyaç duyarken düşünülmüş hücre boyutlandırmasından yine de yararlanabilir.

Kapsayıcının tanınabilir sınırı olmalıdır. Son görünür sütun daha fazla içeriğe dair işaret olmadan ekran kenarında bitiyorsa kullanıcı tabloyu tamamlanmış sanabilir. Sonraki sütunun bir kısmı, ortam destekliyorsa görünür kaydırma çubuğu veya kısa yönlendirme devamı daha açık kılabilir. Tek açıklama olarak dekoratif solmaya güvenmeyin.

Mümkünse tablo başlığını ve görev bağlamını kaydırma alanının dışında tutun. “İnceleme bekleyen projeler” başlığı kayıtların ortak noktasını açıklar. Kısa not başlangıç sırasını veya ilgili saat dilimini açıklayabilir. Bunlar yön bulma yardımlarıdır; yer için yarışacak ek sütunlar değildir.

USWDS gerçekten farklı iki duyarlı örüntü gösterir

ABD Web Tasarım Sistemi tablo bileşeni, kaydırılabilir ve üst üste düzenlenen sürümler sunar. Kaydırma örneği matrisi korur; üst üste örnek dar genişlikte tekil kayıtların içinde etiketli değerler sunar. Çalışan örnekler farkı görünür kılar.

Bu fark bileşen adlarından daha önemlidir. Matris, iki sütun arasındaki ilişkiyi konumla erişilebilir kılar. Üst üste kayıt, tek öğenin bağımsız okunması için etiketleri tekrarlar. Veri aynı olabilir; karşılaştırmak için gereken iş ise önemli ölçüde değişebilir.

İnceleme kuyruğunda şunu deneyin: beşten fazla yorumu olan projeler arasında en geç bitiş tarihini bulun. Tabloda sayı ve tarih sütunlarını birlikte tarayabilirsiniz. Kartlarda her kayıttan geçip önceki adayı hatırlamanız gerekebilir. Şimdi görevi “Cedar Lodge’un sorumlusunu ve son tarihini oku” olarak değiştirin. Karşılaştırma artık merkezde olmadığı için üst üste sürüm rahat olabilir.

Dönüşümü okura maliyetine göre seçin

Uygulama teslimatı için birkaç değişmez belirleyin: satır kimliği erişilebilir kalır, birim değere bağlıdır, sıralanan alan anlaşılırdır ve boyut değişiminden sonra seçim aynı kapsamı korur. Bunlar her masaüstü sütununun telefona sığmasını istemekten daha kalıcıdır. Uygulayıcının görevi sessizce değiştirmeden sunumu değiştirmesine izin verir.

Örüntünün rahatsız ucunu test edin. Uzun satır etiketiyle tamamen sağa kaydırın. İçerik uzunlukları farklı komşu kayıtları açın. Öğeyi seçin, görünüm alanını değiştirin ve aynı eyleme devam edin. Temiz varsayılan görüntü; güncelliğini yitirmiş seçim sayısını, değerleri örten sabit sütunu veya yanlış kayda bağlı ayrıntı panelini göstermez.

Dört duyarlı örüntü ve ödünleşimleri

1. Tabloyu koruyup yatay kaydırın

Hizalı değerleri karşılaştırmak ana görevse ve her sütun anlamlı kalıyorsa yatay kaydırma güçlü adaydır. Matrisi başka bilgi yapısına dönüştürmek yerine korur. Kişinin genişlik boyunca gezinmesini gerektirir; bu yüzden gezinmeyi bilinçli tasarlayın.

İnceleme tablosunda proje adını başa yakın yerleştirin; uygulama güvenilir sabit sütun destekliyorsa görünür tutun. Yoksa bitiş tarihine kaydıran kullanıcı okuduğu satırın kimliğini kaybedebilir. Sabit ad sütunu, kalan veri için yararlı alan bırakacak kadar dar olmalıdır.

Tablonun yarısını sabitlemeyin. Dar ekranda iki veya üç sabit sütun görünüm alanının neredeyse tamamını tüketip hareketli içeriğe ince bir şerit bırakabilir. Bağlamı koruyan en küçük kimlikle başlayın. Proje adları uzunsa büyük bloğu sabitlemek yerine satıra kaymaya izin verin veya ikincil kimliği düşünerek kullanın.

Sabit kesişimler dikkatli görsel sunum ister. Sol üst hücre hem sabit başlık satırının hem ilk sütunun üstünde durabilir. Açık katman sırası ve opak arka plan yoksa değerler içinden görünebilir veya üst üste binebilir. Bu, durağan görselde iyi görünüp kaydırırken bozulabilecek ayrıntıya iyi örnektir.

Dokunma hareketlerinin ötesindeki gezinmeyi kontrol edin. Klavye kullanıcısı gerektiğinde bölgeye ulaşıp onu kullanabilmeli; etkileşimli içerikte odak görünür kalmalıdır. Uygulanan davranışı ilgili tarayıcı ve yardımcı teknolojilerde doğrulayın; taslakta çerçeve eklemek klavye erişimini kanıtlamaz.

2. Öncelikli sütunları gösterip kalanını açılır tutun

Günlük kararların çoğu küçük bir alan alt kümesine dayanıyorsa öncelikli sütunlar işe yarar. Bu alt kümeyi görünür tutun, ek veriyi incelemek için açık yol sağlayın. Öncelik kararı doğruysa ana görevi feda etmeden genişlik azalabilir.

İnceleyen için proje adı, durum ve bitiş tarihi yararlı kısa görünüm olabilir. Sorumlu ve yorum sayısı genişletilen satırda görünebilir. Çözülmemiş yorumlu gecikmiş işleri bulan yönetici için sayıyı gizlemek kötü seçimdir. Kullanıcının görevinden bağımsız, evrensel olarak doğru “mobil sütunlar” listesi yoktur.

Genişletilmiş durumu açık bir açma kontrolü kullanın. Özellikle komşu satırlar benziyorsa açılan içerik doğru kayda görsel olarak ait olmalıdır. Panelin konumu ilişkiyi belirsizleştiriyorsa proje adını ayrıntı panelinde tekrarlayın. Kontrolün ayrıntı mı menü mü yeni sayfa mı açtığını tahmin ettiren belirsiz etiketlerden kaçının.

Neredeyse her kayıtta gereken eylemi bulmak için genişletmeyi zorunlu kılmayın. Tablo inceleme kuyruğuysa inceleme açmak görünür kontrolü hak edebilir. Onu nadir kullanılan üstverilerle gömmek, tekrarlanan iş karşılığında genişlik kazandırır. Yalnızca hangi alanların yer kapladığını değil, hangi etkileşimlerin sık olduğunu değerlendirin.

Çıkarılan sütunlar konusunda açık olun. Masaüstü kullanıcılarının beklediği sorumlu alanı dar genişlikte kayboluyorsa arayüz ona anlaşılır yol sunmalıdır. Erişilebilir ayrıntı görünümü, sütun seçici veya genişletilmiş özet bu işe yarayabilir. Sessiz kaldırma, kullanıcının erişebildiği bilgiyi değiştirir.

3. Her kaydı etiketli karta dönüştürün

Kişiler tek seferde bir öğe okuyorsa üst üste kayıtlar yararlıdır. Her değer görünür etiket alır ve satır küçük dikey özete dönüşür. Kayıtlar arası karşılaştırmanın ikincil olduğu sipariş ayrıntıları listesinde veya randevu dizisinde çalışabilir.

Kurgusal proje tablosunda kartın başlığı Cedar Lodge olabilir; ardından durum, bitiş tarihi, sorumlu ve açık yorumlar gelir. Tek kayıt olarak okumak kolaydır. Ama on projenin yorum sayılarını karşılaştırmak, artık çok daha uzun sayfada aynı etiketi tekrar tekrar bulmayı gerektirir.

Bu örüntüyü seçmeden önce birinden birkaç kayıtta tek niteliği karşılaştırmasını isteyin. Değerleri hatırlamak için ileri geri kaydırması gerekiyorsa kartlar yatay hareketi daha büyük dikey hafıza göreviyle değiştirmiştir. Bu yine de kabul edilebilir olabilir; ancak takas bilinçli yapılmalıdır.

Kartlarda etiket-değer sırasını tutarlı tutun. Değer eksik diye durumu bir kartın üstüne, diğerinde sorumludan sonraya koymayın. Yapının öngörülebilir kalması için eksik durumu anlamlı metinle temsil edin.

Erişilebilir sonucu kontrol etmeden etiketleri yalnızca dekoratif üretilmiş içerik olarak eklemeyin. Görünür “Bitiş tarihi” etiketi ile programatik olarak erişilebilen ilişki ayrı konulardır. Son işaretleme, görsel karta bakmayan kişilere veriyi tutarlı iletmelidir.

Masaüstü sürümü anlamsal tabloysa ve dar sürüm görsel gösterimini değiştiriyorsa tablo ilişkilerinin amaçlandığı gibi erişilebilir kalıp kalmadığını inceleyin. Sayfada ayrı sunumlar varsa gizli içeriğin mükerrer kontroller veya tekrar okuma yaratmadığından emin olun. Dönüşüm yalnızca duyarlı stil değil, uygulama incelemesi de gerektirir.

4. İnsanların neyi karşılaştıracağını seçmesine izin verin

Bazı tablolarda çok sayıda geçerli sütun vardır, ama kullanıcının hepsine aynı anda nadiren ihtiyacı olur. Sütun seçici yararlı görünüm oluşturmaya yardım edebilir. Özel karşılaştırma modu küçük kayıt kümesi seçip ilgili nitelikleri birlikte incelemeyi sağlayabilir.

Bu kontroller kendi işlerini de ekler. Yeni kullanıcı hangi sütunların önemli olduğunu bilmeyebilir veya varsayılanı eksiksiz sanabilir. Mantıklı ilk görünüm sağlayın ve sütunların gizlendiğini açık kılın. Özelleştirme, temel anlayışı kuruluma bağımlı yapmak yerine uzmanlığı desteklemelidir.

İnceleme tablosunda varsayılan proje, durum, bitiş tarihi ve yorumları içerebilir. Koordinatör sorumluyu ekleyebilir, bireysel inceleyen kaldırabilir. Kayıtlar kopuk sayılardan oluşan satırlara dönüşmesin diye proje kimliği erişilebilir kalmalıdır.

Karşılaştırma modu, uzun kuyrukta çalışmaktan çok birkaç alternatif arasından seçmeye uygundur. Üç ürünü karşılaştırmak için seçmek makul olabilir. Hangisinin geciktiğini öğrenmek için her projeyi seçmek gereksiz dolambaçtır. Sırf tablo geniş diye karşılaştırma kontrolü eklemeyin.

Kullanıcı görünüm kaydedebiliyorsa neyin kaydedildiğini tanımlayın. Sütun görünürlüğü, sıra, sıralama ve filtreler farklı tercihlerdir. Kaydedilmiş sütun düzeni beklenmedik biçimde eski filtreyi koruyup yeni kayıtları gizlememelidir. Görsel prototipte kaydet düğmesi çizildi diye kalıcılığın var olduğunu ima etmek yerine bu davranışları gereksinim olarak kaydedin.

Etiketlerin, sayıların ve boş hücrelerin anlamını koruyun

Duyarlı değişiklikler zayıf içerik alışkanlıklarını açığa çıkarır. “04/05” gibi tarih büyük ekranda da belirsizdir; ama çevre açıklamasına yer kalmayınca sorun daha belirgin olur. Kitleye uygun biçimi tercih edin, görevi etkiliyorsa saat dilimi veya göreli tarih bağlamı verin.

Sayısal sütunlarda tutarlı birimler kullanın. Başlık ve biçim farkı açıklamıyorsa yorum sayısı metinsel durumla aynı alanı paylaşmamalıdır. Farkları kolay incelemek için karşılaştırılabilir sayıları tutarlı hizalayın. Değerlerin aynı anlamı koruyup korumadığını düşünmeden yalnızca dar ekranda kesinliği azaltmayın veya birimleri atmayın.

Boş veriyi nasıl temsil edeceğinize karar verin. “Atanmadı”, “Yorum yok” ve “Kullanılamıyor” farklı durumlardır. Boş hücre bunları anlatmaz. İnceleme örneğinde henüz atanmamış sorumlu, yüklenemeyen alanla aynı görünmemelidir.

Anlamı koruyorsa uzun etiketler satıra kaymalıdır. Araç ipuçları ek bağlam verebilir, ama sürekli keşfedilmesi gereken zorunlu etiketin zayıf ikamesidir. Sütun başlığı hiçbir yerde çalışmayacak kadar uzunsa hemen kırpmak yerine ifadenin daha kesin yapılıp yapılamayacağını düşünün.

W3C’nin tablo eğitimi, başlık ve veri hücrelerinin yapısal işaretlemeye ve uygun ilişkilendirmelere ihtiyaç duyduğunu açıklar. Bu, görsel hizalamanın ötesinde bağlamı koruyan gezinmeyi destekler. Özellikle hem satır hem sütun başlıkları anlama katkı veriyorsa seçilen örüntüyü uygularken bu rehberi kullanın. W3C’nin erişilebilir tablolar eğitimi.

Kontrolleri doğru kapsama bağlı tutun

Sıralama koleksiyonu, ayrıntı açmak tek kaydı, toplu eylem seçili kayıtları etkiler. Düzen daraldığında bu kapsamlar ayrı kalmalıdır. Bütün kontrolleri aynı menüye sıkıştırmak, eylemin neyi değiştireceğini belirsizleştirebilir.

Satır eylemini kaydıyla görsel olarak ilişkili tutun. Geniş tablonun en sağındaki menü yatay kaydırmada görünümden çıkabilir. Projeyi açmak ana görevse bağlantılı ad sabit yol sağlayabilir; menü daha seyrek eylemleri içerebilir. En iyi düzen, hangi eylemin anında erişim istediğine bağlıdır.

Seçim ekstra özen ister. Sabit ilk sütundaki onay kutusu kullanışlı olabilir, ama satır kimliğini yerinden etmemelidir. Birkaç kayıt seçildikten sonra sayıyı gösterin ve seçimin geçerli sayfayı mı bütün filtreli sonuç kümesini mi kapsadığını açıklayın. Duyarlı sürüm anlamı sessizce değiştirmemelidir.

Sıralama kontrolü, tamamen küçük oka dayanmadan etkin yönü açıklamalıdır. Sütunu gizlenirse sıralanan alanın anlaşılır kaldığını kontrol edin. Bazen sıralama seçimini görünmez başlığa bağlı tutmak yerine tablonun üzerindeki etiketli kontrole taşımak daha açıktır.

Filtreleri ve sayfalamayı da dar genişlikte inceleyin. Tablo okunurken filtre araç çubuğu sayfadan taşabilir veya sayfalama kontrolleri sıkışabilir. Izgaranın dışında olsalar bile aynı göreve aittirler. Kayıt bulmaktan üzerinde işlem yapmaya kadar bütün yolu test edin.

Zor içerikle ve gerçek görevlerle inceleyin

Düzeni zorlayan içerik kullanın: uzun proje adı, atanmamış sorumlu, büyük yorum sayısı, eksik tarih ve satıra kayan durum etiketi. Örüntünün desteklediği yönde hareket gerektirecek kadar satır ekleyin. Kusursuz tekdüze üç kayıt duyarlı tablo hakkında çok az şey gösterir.

Kaydırmalı sürümde inceleyenden yana hareket ettikten sonra geç bitiş tarihini proje adıyla eşleştirmesini isteyin. Genişletilebilir sürümde ayrıntı bulup sonraki kayda dönmesini isteyin. Üst üste kartlarda birkaç projede tek değeri karşılaştırmasını isteyin. Bu görevler, korunan ilişkinin kullanıcının gerçekten ihtiyaç duyduğu ilişki olup olmadığını gösterir.

Dar cihaz genişliklerinin yanı sıra tarayıcı yakınlaştırmasını da deneyin. İçeriği büyüten masaüstü kullanıcısı farklı nedenle aynı sınırlı düzenle karşılaşabilir. Metnin okunur, kontrollerin erişilir kaldığını ve sabit alanların kullanılabilir alanın çoğunu örtmediğini kontrol edin.

OpenDesign’da HTML tablo düzenini farklı görünüm alanı hazır ayarlarında önizleyebilir, sıkışık bölgeye yorum ekleyebilir ve metin veya stilleri iyileştirebilirsiniz. Örnek kayıtları ve seçilen görevi tasarım bağlamında tutun. Anlamsal işaretlemeyi, klavyeyle kaydırmayı, sıralamayı ve kaydedilen durumu uygulanan tabloda test edin.