Card
Seskupuje několik krátkých souvisejících informací do jedné karty a nabádá uživatele, aby na ni klikl. Díky univerzální velikosti dobře funguje napříč různými obrazovkami.
Card Grid
Card grid slouží k efektivnímu a přehlednému prezentování obsahu, který je snadno pochopitelný a přístupný pro různé typy zařízení.
Použití
- Používá se pro hierarchické seskupování nejdůležitějších informací do jednoho menšího celku. Vhodná je např. pro: prezentaci článku, novinek nebo akcí, zobrazení produktů nebo služeb či vizualizaci karet s kontaktními údaji.
- Podobá se fyzické kartě. Je ohraničená, liší se od barvy pozadí, často se používá mírný vržený stín k zobrazení hloubky a zaoblenost rohů.
- Láká k prokliku. Je navržena tak, aby uživatel věděl, že na ní může kliknout. Click area je typicky na celé ploše.
- Umožňuje flexibilní rozložení. Karty mohou mít různou výšku, aby vyhovovaly různému typu obsahu. Vhodná je pro vertikální i horizontální obsahy, k tomu jsou připraveny varianty orientace karty.
- Jsou vhodné pro případy, když uživatelé prochází informace, než když hledají konkrétní výsledek, kdy je lepší prezentace do seznamů.
- V případě heterogenního obsahu je vhodné rozložení karet do podoby dashboardu, pro homogenní obsah je naopak lepší vertikální seznam položek nebo mřížka. K těmto účelům je možné využít dílčí layoutovací organizmus Card Grid.
Doporučení
- Omezte délku textového obsahu, který do karty umísťujete pro zajištění čitelnosti.
- Tam, kde je to možné, využívejte pro zvýšení vizuální přitažlivosti různé fotografie či ikony.
- Dle organizace / seskupení obsahu v kartě volte vhodnou variantu orientace karty.