Vytvorenie responzívnej tabuľky.

Zobrazenie objemných údajov na malej obrazovke je vždy hádankou. Akými spôsobmi to môžete vyriešiť a ako by mal vyzerať pohodlný stolík na mobilnom telefóne?

Stojí za zmienku, že tabuľky často presahujú obrazovku, a to nielen na mobilných zariadeniach: stáva sa, že obsahujú viac stĺpcov alebo riadkov, ako sa zmestí na obrovský monitor alebo dokonca niekoľko. Čím je však obrazovka menšia, tým je pravdepodobnejšie, že sa vyskytnú problémy s použiteľnosťou.

Kľúčovými prvkami v zobrazení tabuľky sú obsahová súdržnosť a zmysluplné atribúty. Obe sú obzvlášť dôležité pre mobilné stoly. Najprv by ste mali vytvoriť pohodlný stôl pre veľké monitory a potom vytvoriť verziu pre malé obrazovky. Takáto potreba môže byť skvelým dôvodom na spresnenie obsahu vašej tabuľky a jej pohodlnejšie pre všetkých používateľov.

Počet stĺpcov tabuľky, ktoré sa majú zobraziť na obrazovke mobilu, závisí od ich šírky a ich obsah by mal byť prehľadný bez nutnosti použitia zoomu.

Pri zložitých alebo dlhých textoch, napríklad v porovnávacích tabuľkách, sa na úzku obrazovku mobilu zmestia len 2 stĺpce. A ak je tabuľka vyplnená prevažne číslami, stĺpce môžu byť užšie, a preto sa do nich zmestí viac.

Štatistiky National Rugby League pozostávajú z čísel, takže 11 stĺpcov sa pohodlne zmestí na obrazovku mobilu bez potreby horizontálneho rolovania. Upozorňujeme, že tento výsledok sa dosiahne použitím iba loga súperovho tímu v prvom stĺpci a skratiek, ktoré nemusia byť pre nezasvätených jasné. Takéto podrobné štatistiky o hráčoch však zaujímajú len fanúšikov rugby.

Otočenie telefónu je posledná možnosť

Ak otočíte telefón vodorovne, na obrazovku sa zmestí viac stĺpcov. Zároveň sa však znižuje počet riadkov a používateľom môže byť nepríjemné otáčať smartfón (najmä ak má zámok otáčania). Dobre si premyslite, či veľká šírka stola ospravedlňuje tieto nevýhody.

Ak chcete porovnať kreditné karty na webovej stránke Citi, používatelia musia postupovať podľa pokynov: „Ak chcete pokračovať v porovnávaní kreditných kariet, otočte telefón vodorovne.“ Zároveň pri otáčaní väčšinu obrazovky zaberajú obrovské obrázky kreditných kariet, ktoré sú pri posúvaní zafixované na svojom mieste a na samotný obsah stola zostáva veľmi málo miesta. Toto je chyba mnohých mobilných webov: ak na počítači môžu byť obrázky dobrým nadpisom stĺpca, potom na mobilnom zariadení sú potrebné.

V každej tabuľke, ktorá sa rozprestiera na viac ako jednej vertikálnej obrazovke, nalepovacie hlavičky stĺpcov pomáhajú používateľovi vyhnúť sa nejasnostiam v súvislosti s kontextom.

V porovnávacej tabuľke s Best.Buy vľavo nie sú zaznamenané stĺpce ani ich nadpisy a údaje sú ťažko čitateľné. Vpravo je, ako táto tabuľka vyzerá pri rolovaní, bez akéhokoľvek viditeľného vysvetlenia.

Aj keď je to vo všeobecnosti nežiaduce na mobilných zariadeniach aj stolných počítačoch, je relatívne prijateľné pre veľké stoly na mobilných zariadeniach. Keď sa údaje nezmestia na obrazovku, návštevníci ich možno budú musieť použiť. V tomto prípade je však potrebné: malo by byť zrejmé, že toto nie sú všetky dostupné údaje. Rovnako ako v prípade posúvačov, šípky a orezané prvky vyjadrujú tieto informácie najjasnejšie. Niekedy sa používajú bodky, ale zvyčajne je ťažšie ich postrehnúť a pochopiť.

Na webovej stránke eBag je posledný stĺpec produktov odrezaný, takže používatelia chápu, že je k dispozícii horizontálne posúvanie.

Webová stránka Subaru používa bodky a šípky nad tabuľkou, aby používateľom ukázala, že je k dispozícii viac obrazoviek obsahu. Bodky spôsobujú určitý zmätok, pretože dve z nich sú zvýraznené, aby zobrazovali „aktuálnu polohu“ (to znamená dva stĺpce, ktoré sú momentálne viditeľné). Okrem toho je lepšie umiestniť šípky nie nad stôl, ale priamo v ňom.

Ak sa používatelia musia uchýliť k horizontálnemu posúvaniu, stĺpec úplne vľavo, ktorý zvyčajne obsahuje nadpisy riadkov, by mal byť zmrazený, aby používatelia vždy videli nadpisy riadkov.

Fidelity opravil názvy príloh a nadpisy stĺpcov. Posledný stĺpec vpravo je orezaný, aby pomohol používateľom pochopiť, že je k dispozícii horizontálne posúvanie.

Officeworks.com.au opravil prvý stĺpec produktu, aby používatelia mohli porovnávať všetky ostatné možnosti s ním. Produkt v prvom stĺpci slúži ako referenčný bod na porovnanie a používatelia ho môžu nahradiť niečím iným. Šípky umiestnené priamo v tabuľke ozrejmujú, že údaje je možné posúvať doľava a doprava.

Ak sa údaje nezmestia na obrazovku, používatelia pravdepodobne nebudú mať čas ani chuť ich úplne preskúmať. Otázkou teda je, ako im poskytnúť len tie informácie, ktoré potrebujú. Odpoveď na túto otázku závisí od úlohy a typu údajov. Tu sú dve stratégie na obmedzenie množstva údajov v rôznych situáciách:

• Používateľ si vyberie údaje, ktoré ho zaujímajú, predtým, než ich uvidí.
• Používateľ si pri prezeraní vyberá údaje, ktoré ho zaujímajú.

Prvý prístup funguje, keď používateľ potrebuje vidieť dáta, ale nie ich porovnávať, a pred načítaním dát si vyberie len to, čo potrebuje. Môže ho napríklad zaujímať len charakteristika konkrétneho auta, nutričné ​​vlastnosti konkrétneho jedla alebo štatistiky pre jedného konkrétneho hráča a používateľ ich neporovnáva s inými možnosťami.

Na zobrazenie nutričných informácií o džúse Jamba si návštevníci musia vybrať nápoj, o ktorý majú záujem, aby si o ňom mohli pozrieť informácie. Prepínač Small/Medium/Large umožňuje vybrať požadovanú možnosť, ale neumožňuje ich porovnanie. Aby napríklad pochopil rozdiel v kalóriách medzi malým a stredným pohárom, musí si používateľ najprv zapamätať počet kalórií pre malý pohár, potom prepnúť na stredný, vyhľadať v ňom počet kalórií a odpočítať jednu. od druhých samých - veľa duševnej práce, na ktorú je väčšina ľudí príliš lenivá.

Druhou stratégiou je poskytnúť používateľovi kontrolu nad recenziou počas prehliadania údajov. Jeden používateľ chce napríklad vidieť podobnosti alebo rozdiely medzi dvoma možnosťami, zatiaľ čo iný chce poznať špecifické vlastnosti produktov, ako je kapacita kufra alebo bezpečnostné prvky, ale nezaujíma ho rozdiel v hladinách hluku medzi dvoma autami. Schopnosť vybrať riadky a stĺpce na zobrazenie umožňuje používateľom zamerať sa na funkcie, ktoré sú pre nich dôležité.

Na webovej lokalite spoločnosti Dell si používatelia vyberajú špecifikácie produktu, ktoré ich zaujímajú, z ponuky v hornej časti stránky. Vľavo: Štandardne sa zobrazujú všetky charakteristiky. V strede: používateľ si vyberie tie, ktoré potrebuje. Vpravo: Zobrazí sa iba to, čo vybral.

Ak tabuľka obsahuje údaje, ktoré možno zoskupiť podľa kategórie, urobte tak a povoľte používateľom mobilných zariadení:

• získať všeobecný prehľad o typoch údajov dostupných v tabuľke;
• získať priamy prístup k informáciám, ktoré vás zaujímajú.

Na stránke Samsung.com môžu porovnávacie grafy zobraziť všetky špecifikácie alebo len podobnosti medzi produktmi, alebo len rozdiely, či užívateľsky voliteľné kritériá. Stránka zoskupuje údaje s podobnými atribútmi, čo vám umožňuje vybrať množiny údajov, ktoré vás zaujímajú. Skupiny údajov zároveň poskytujú prehľad o obsahu stránky a informujú používateľov o tom, aké informácie o produkte sú k dispozícii.

V Aspro: Next môžete od verzie 1.1.7 prispôsobiť tabuľky pre mobilnú verziu. Je potrebné vykonať zmeny v zdrojovom kóde stránky – pridať triedu, ktorá je zodpovedná za prispôsobivosť tabuliek.

Jednoduchá tabuľka v mobilnej verzii presahuje stránku.

Ak chcete, aby bola tabuľka responzívna, prejdite na úpravu stránky, na ktorú bola tabuľka pridaná. Potom prejdite do režimu úpravy zdrojového kódu.

Pred úvodným štítkom