Máte strach, když zjistíte, že váš další projekt má navrhnout složitou a responzivní datovou tabulku? 😨
Nejste sami, viděla jsem několik skvělých designérů, kteří se třásli v botách při pomyšlení na řešení tohoto problému. Ale není třeba se bát! Nedávno jsem se k této designové výzvě postavil já a nyní se s vámi podělím o několik tipů, které mi pomohly vymyslet design, který si naši uživatelé zamilovali.
Existuje mnoho různých možností, jak navrhovat tabulky, natož jak je udělat responzivní. Sloupce a řádky mohou měnit polohu, měnit velikost, sbalovat se, minimalizovat se nebo dokonce zmizet, když se okno prohlížeče zúží.
Stejně jako u všech návrhových řešení závisí nejlepší návrh na tom, jak budou vaši čtenáři data používat. Na začátku tohoto projektu jsme provedli průzkum mezi uživateli, abychom získali určitý směr, a zjistili jsme, že pro náš projekt:
- Tabulkové informace by se používaly stejně na kombinaci stolních počítačů, tabletů a mobilních zařízení.
- Tabulky by mohly obsahovat mnoho sloupců volného textu i čísel.
- Některé důležité části informací by měly zůstat stále viditelné.
Na základě těchto poznatků od našich uživatelů uvádím hlavní věci, kterými jsem se zabýval při vývoji návrhového systému pro tabulky s objemnými textovými údaji.
Nejprve určete, o jaký druh tabulky se jedná. Jde o srovnávací tabulku, kde čtenář porovnává data ve více sloupcích, nebo o obsahovou tabulku, kde jsou soubory dat na sobě nezávislé?
Moje tabulka je spíše obsahová než srovnávací. Identifikace této skutečnosti na počátku mi pomohla pochopit, které informace musí zůstat v těsné blízkosti v úzkém rozměru obrazovky.
Mobilní nejprve
První verze, kterou jsem navrhl, byla verze pro úzkou obrazovku. Záměrně jsem se na ni podíval dříve než na verzi pro širokou obrazovku, protože zobrazení tabulek na mobilu je pro naše uživatele důležité. Proto jsem potřeboval najít způsob, jak složité a nelineární informace vměstnat do vertikálního formátu.
Věděl jsem, že bude mnohem jednodušší návrh škálovat, když je k dispozici dostatek horizontálního prostoru, než navrhovat krásnou tabulku pro stolní počítače a bojovat o to, aby zůstala čitelná na mobilu. Znamenalo to také, že jsem měl od začátku na paměti cílové dotykové velikosti a nespoléhal jsem se na akce jako hover, které informace odhalí.
Rozhodl jsem se zacházet s obsahem spíše jako se seznamem v úzkém zobrazení, aby důležité informace zůstaly dobře viditelné a skenovatelné.
Konzistentní stylování
Řádky musí měnit polohu při změně velikosti obrazovky, takže jsem použil stylování, které pomohlo zachovat spojení mezi nimi. Pokud jsou například záhlaví sloupců tučně a na šedém pozadí, použijte stejný styl i v úzkém zobrazení. To pomůže čtenářům přemapovat nové rozmístění buněk.
Typografie je váš přítel
Je snadné zapomenout na typografické zásady, když máte spoustu omezení, ale vědomé rozhodnutí optimalizovat čitelnost bude pro vaše čtenáře velkou pomocí, zejména v projektu, jako je ten můj, kde tabulky obsahují hodně textu.
Typografie existuje proto, aby ctila obsah. ~ Robert Bringhurst
Skenování
Usnadněte rychlé skenování tím, že udržíte jednoduchý a jasný tok čtení. Rozhodl jsem se, že text v každém sloupci bude viset od stejného okraje, aby čtenář mohl lineárně skenovat text.
Délka řádku
Snažte se neohrozit délku řádku textu tím, že namačkáte mnoho sloupců do úzkého prostoru, jinak se zpomalí rychlost čtení. Nastavím minimální šířku sloupců souvislého textu.
Tabulky
Přemýšlejte o tom, kam umístit popisky, aby nezabíraly příliš mnoho místa, ale přesto poskytovaly určitý kontext informací.
Já jsem popisky umístil nad každý kousek obsahu buňky v seznamu, kde zabíraly méně místa, než na stranu. A také se tak informace lépe skenovaly. Štítky jsem stylizoval jinak, aby bylo snadné rozlišit rozdíl mezi pevným štítkem a proměnlivým obsahem.
.