Geniş teknik tablolar telefonda nasıl okunur kalır?
Bir üreticinin teknik tablosu masaüstünde altı modelin değerlerini yan yana gösteriyor. Telefonda sütunlar sıkışınca yazı küçültülüyor, fakat artık bir değerin hangi modele ait olduğunu takip etmek zorlaşıyor. Alternatif tasarımda her satır karta çevriliyor; bu kez modelleri karşılaştırmak uzun bir kaydırmaya dönüşüyor. Tek çözümü bütün tablolara uygulamak yerine, okuyucunun tek kayıt mı inceleyeceğini yoksa değerler arasında mı karşılaştırma yapacağını belirlemek gerekir. Buradaki ürün kodları ve sayılar yalnız yerleşim örneğidir.
Önce tablonun sorusunu yazın
Varsayımsal katalogda görev “A ve B modellerinin ölçülerini karşılaştır” olsun. Satır başlığı model, sütun başlığı ise ölçü veya güç gibi anlamlı bir özellik taşır. Tasarımcıdan yalnız güzel bir tablo değil, bu görevi telefonda tamamlayan bir düzen isteyin. Tek modelin ayrıntıları okunacaksa kartlar işe yarayabilir. Aynı özelliği modeller arasında kıyaslamak gerekiyorsa ilişkileri birlikte görmek daha önemli hale gelir.
Başlık ilişkilerini görsel çizgilerden ayırın
W3C tablo rehberi, başlık ve veri hücrelerinin HTML içinde ilişkilendirilmesini açıklar. Kalın yazı veya koyu arka plan bu yapının yerine geçmez. Örneğimizde “A modeli” ile “Genişlik, mm” bir değerin anlamını birlikte verir. Geliştiriciden bu ilişkilerin yardımcı teknolojilerle de anlaşılır olduğunu kontrol etmesini isteyin. Karmaşık birleşik hücreler kullanılıyorsa daha basit bir tablo düzenini ayrıca değerlendirin.
Kaydırmayı yalnız gerekli bölgede tutun
W3C yeniden akış açıklaması, anlamı için iki boyutlu düzen gerektiren veri tablolarını özel olarak ele alır. Buradan bütün sayfayı yana taşırma izni çıkarmayın. Tasarım önerimiz, geniş tabloyu kendi alanında kaydırırken çevresindeki başlık ve açıklamayı ekran genişliğine uyarlamaktır. Sağda devam eden içerik anlaşılmalı; klavye kullanan kişi de gerekli sütuna ulaşabilmelidir.
Kartlara çevirirken etiketleri eksiltmeyin
Her satır ayrı karta dönüştüğünde değerlerin yanında özellik adları yeniden görünmelidir. “240” tek başına yeterli değildir; hangi birime ve modele ait olduğu korunmalıdır. İki görünüm üretilecekse veriyi iki ayrı yerde elle yönetmeyin. Aynı kaynaktan üretilen tablo ve kartların eşleşmesini kontrol edin. Uzun ürün adı, boş değer ve “uygulanmaz” gibi durumları örneğe ekleyin; yalnız kısa ve dolu hücrelerle karar vermeyin.
Önemli farkı özetleyin, veriyi saklamayın
Tablonun üstünde kısa bir açıklama, okuyucunun neyi karşılaştıracağını anlamasına yardım edebilir. Ancak mobilde bazı sütunları sessizce kaldırmak yerine ayrıntının nerede bulunduğunu gösterin. Bir özellik gerçekten gereksizse bunu içerik kararı olarak kayıt altına alın. Sayısal değerlerin anlaşılması için ölçü ve sayı biçimi rehberi ayrı konuyu açıklar; bu yazı ise aynı verinin dar ekrandaki düzenine odaklanır.
İki ölçekte aynı cevabı buldurun
Bir deneme katılımcısına iki modelin aynı özelliğini masaüstünde ve telefonda buldurun. Yanlış satırdan değer okuma, başlığı kaybetme ve sütuna ulaşamama gibi gözlemleri not edin. Yazı büyütülünce içerik kaybı olup olmadığını ayrıca kontrol edin. Kapsamlı erişilebilirlik değerlendirmesinin yerine geçmeyen bu görevleri web tasarım teslim listesine ekleyin. En dar ekran görüntüsünde her sütunun aynı anda görünmesi tek başarı ölçütü değildir.
Sık sorulan sorular
Yatay kaydırma her zaman hata mı?
Hayır. Anlamı için iki boyut gerektiren tablo ayrı değerlendirilir. Çevre metni, hücre okunurluğu ve kontroller yine incelenmelidir.
Mobilde yazıyı küçültmek en kolay çözüm mü?
Kolay olabilir ama okumayı zorlaştırabilir. Önce görev, başlık ilişkileri ve kaydırma veya kart düzeni üzerinden karar verin.