Duyarlı bir tablo oluşturma.

Hacimli verileri küçük bir ekranda görüntülemek her zaman bir bulmacadır. Bunu hangi yollarla çözebilirsiniz ve cep telefonunda kullanışlı bir masa nasıl görünmeli?

Tabloların yalnızca mobil cihazlarda değil, genellikle ekranın ötesine uzandığını belirtmekte fayda var: büyük bir monitöre veya hatta birkaçına sığmayacak kadar fazla sütun veya satır içeriyorlar. Ancak ekran ne kadar küçük olursa kullanılabilirlik sorunlarının ortaya çıkma olasılığı da o kadar artar.

Tablo görünümündeki temel öğeler içerik tutarlılığı ve anlamlı niteliklerdir. Her ikisi de mobil masalar için özellikle önemlidir. Öncelikle büyük monitörler için uygun bir tablo oluşturmalı, ardından küçük ekranlar için bir versiyon oluşturmalısınız. Böyle bir ihtiyaç, tablonuzun içeriğini iyileştirmek ve onu tüm kullanıcılar için daha kullanışlı hale getirmek için mükemmel bir neden olabilir.

Mobil ekranda görüntülenecek tablo sütunlarının sayısı, genişliklerine bağlı olup, yakınlaştırma kullanmaya gerek kalmadan içerikleri net olmalıdır.

Karşılaştırma tabloları gibi karmaşık veya uzun metinler için, dar bir mobil ekrana yalnızca 2 sütun sığacaktır. Tablo çoğunlukla sayılarla doluysa sütunlar daha dar yapılabilir ve dolayısıyla daha fazla sığabilir.

Ulusal Rugby Ligi istatistikleri sayılardan oluşur, dolayısıyla 11 sütun yatay kaydırmaya gerek kalmadan mobil ekrana rahatça sığar. Lütfen bu sonucun, ilk sütunda yalnızca rakip takımın logosu ve kısaltmalar kullanılarak elde edildiğini unutmayın; bu, konuya yeni başlayanlar için net olmayabilir. Ancak oyunculara ilişkin bu kadar ayrıntılı istatistiklerle yalnızca ragbi taraftarları ilgileniyor.

Telefonunuzu döndürmek son çaredir

Telefonunuzu yatay olarak döndürürseniz ekrana daha fazla sütun sığar. Bununla birlikte, aynı zamanda satır sayısı da azalır ve kullanıcılar akıllı telefonu döndürmek zorunda kalmayı (özellikle de döndürme kilidi varsa) sinir bozucu bulabilirler. Tablonun geniş genişliğinin bu dezavantajları haklı çıkarıp çıkarmadığını dikkatlice düşünün.

Citi'nin web sitesinde kredi kartlarını karşılaştırmak için kullanıcıların şu talimatları izlemesi gerekiyor: "Kredi kartlarını karşılaştırmaya devam etmek için telefonunuzu yatay çevirin." Aynı zamanda, dönerken ekranın büyük bir kısmı, kaydırma sırasında yerine sabitlenen ve tablo içeriğinin kendisi için çok az yer bırakan devasa kredi kartları görüntüleri tarafından kaplanıyor. Bu, birçok mobil sitenin yaptığı bir hatadır: Masaüstünde resimler bir sütun için iyi bir başlık olabiliyorsa, mobilde bunlara ihtiyaç vardır.

Birden fazla dikey ekrana yayılan herhangi bir tabloda, yapışkan sütun başlıkları, kullanıcının bağlamla ilgili kafa karışıklığını önlemesine yardımcı olur.

Sol tarafta Best.Buy bulunan karşılaştırma tablosunda ne sütunlar ne de başlıklar kaydediliyor ve verilerin okunması zor. Sağda bu tablonun herhangi bir görünür açıklama olmaksızın kaydırıldığında nasıl göründüğü görülmektedir.

Hem mobil hem de masaüstünde genellikle istenmeyen bir durum olsa da, mobil cihazlardaki büyük tablolar için nispeten kabul edilebilirdir. Veriler ekrana sığmadığında ziyaretçiler onu kullanmak zorunda kalabilir. Ancak bu durumda gereklidir: mevcut verilerin tamamının bu olmadığı açık olmalıdır. Kaydırıcılarda olduğu gibi oklar ve kırpılmış öğeler bu bilgiyi en net şekilde iletir. Noktalar bazen kullanılır, ancak bunların fark edilmesi ve anlaşılması genellikle daha zordur.

eBag web sitesinde son ürün sütunu kesiliyor, böylece kullanıcılar yatay kaydırmanın mümkün olduğunu anlıyor.

Subaru'nun web sitesi, kullanıcılara daha fazla içerik ekranının bulunduğunu göstermek için tablonun üzerinde noktalar ve oklar kullanıyor. Noktalar biraz kafa karışıklığı yaratıyor çünkü bunlardan ikisi "mevcut konumu" (yani şu anda görünür olan iki sütunu) gösterecek şekilde vurgulanıyor. Ayrıca okları masanın üzerine değil, tam içine yerleştirmek daha iyidir.

Kullanıcıların yatay kaydırmaya başvurması gerekiyorsa, kullanıcıların her zaman satır başlıklarını görebilmesi için genellikle satır başlıklarını içeren en soldaki sütun dondurulmalıdır.

Fidelity, ek adlarını ve sütun başlıklarını düzeltti. Sağdaki son sütun, kullanıcıların yatay kaydırmanın kullanılabildiğini anlamalarına yardımcı olmak için kırpılmıştır.

Officeworks.com.au, kullanıcıların diğer tüm seçenekleri onunla karşılaştırabilmesi için ilk ürün sütununu düzeltti. İlk sütundaki ürün karşılaştırma için bir referans noktası görevi görüyor ve kullanıcılar onu başka bir şeyle değiştirebiliyor. Doğrudan tabloya yerleştirilen oklar, verilerin sola ve sağa kaydırılabileceğini açıkça belirtir.

Veriler ekrana sığmazsa, kullanıcıların muhtemelen onu tamamen keşfetmeye zamanı veya isteği olmayacaktır. Dolayısıyla asıl soru, onlara yalnızca ihtiyaç duydukları bilgilerin nasıl sağlanacağıdır. Bu sorunun cevabı göreve ve veri türüne bağlıdır. Farklı durumlarda veri miktarını sınırlamak için iki strateji aşağıda verilmiştir:

• Kullanıcı ilgilendiği verileri görmeden önce seçer.
• Kullanıcı ilgi duyduğu verileri görüntülerken seçer.

İlk yaklaşım, kullanıcının verileri görmesi ancak karşılaştırması gerekmediğinde işe yarar ve veriler yüklenmeden önce yalnızca ihtiyaç duyduğu şeyi seçer. Örneğin, yalnızca belirli bir arabanın özellikleri, belirli bir yemeğin beslenme özellikleri veya belirli bir oyuncunun istatistikleri ile ilgilenebilir ve kullanıcı bunları diğer seçeneklerle karşılaştırmaz.

Jamba Juice'in beslenme bilgilerini görüntülemek için ziyaretçilerin, ilgili bilgileri görüntülemek üzere ilgilendikleri içeceği seçmeleri gerekir. Küçük/Orta/Büyük anahtarı istediğiniz seçeneği belirlemenize olanak tanır ancak bunları karşılaştırmanıza izin vermez. Örneğin, küçük ve orta boy bir bardak arasındaki kalori farkını anlamak için kullanıcının önce küçük bardağın kalori sayısını hatırlaması, ardından orta boy bardağa geçmesi, bunun için kalori sayısına bakması ve bir çıkarması gerekir. diğerlerinin kendisinden - çoğu insanın yapamayacak kadar tembel olduğu birçok zihinsel çalışma.

İkinci strateji, verilere göz atarken kullanıcıya incelemenin kontrolünü vermektir. Örneğin, bir kullanıcı iki seçenek arasındaki benzerlikleri veya farklılıkları görmek isterken, bir diğeri ürünlerin bagaj kapasitesi veya güvenlik özellikleri gibi belirli özelliklerini bilmek istiyor ancak iki araba arasındaki gürültü seviyelerindeki farkla ilgilenmiyor. Görüntülenecek satır ve sütunların seçilebilmesi, kullanıcıların kendileri için önemli olan özelliklere odaklanmasına olanak tanır.

Dell web sitesinde kullanıcılar, sayfanın üst kısmındaki menüden ilgilerini çeken ürün özelliklerini seçerler. Sol: Varsayılan olarak tüm özellikler görüntülenir. Ortada: Kullanıcı ihtiyacı olanı seçer. Sağ: Yalnızca onun seçtiği şey görüntülenir.

Tablo, kategoriye göre gruplandırılabilecek veriler içeriyorsa bunu yapın ve mobil kullanıcıların şunları yapmasına izin verin:

• tabloda mevcut olan veri türleri hakkında genel bir anlayışa sahip olmak;
• İlgilendiğiniz bilgilere doğrudan erişim sağlayın.

Samsung.com'daki karşılaştırma tabloları, tüm özellikleri veya yalnızca ürünler arasındaki benzerlikleri, yalnızca farklılıkları veya kullanıcı tarafından seçilebilen kriterleri görüntüleyebilir. Site, benzer özelliklere sahip verileri gruplandırarak ilgilendiğiniz veri kümelerini seçmenize olanak tanır. Veri grupları aynı zamanda sayfa içeriğine ilişkin genel bir bakış sunarak kullanıcılara hangi ürün bilgilerinin mevcut olduğunu bildirir.

Aspro: Next'te 1.1.7 sürümünden itibaren tabloları mobil sürüme uyarlayabilirsiniz. Sayfanın kaynak kodunda değişiklik yapmak gerekir - tabloların uyarlanabilirliğinden sorumlu bir sınıf ekleyin.

Mobil versiyonda basit bir tablo sayfanın ötesine geçer.

Tabloyu duyarlı hale getirmek için tablonun eklendiği sayfayı düzenlemeye gidin. Daha sonra kaynak kodu düzenleme moduna gidin.

Açılış etiketinden önce