Kartové komponenty v UI

Při návrhu uživatelských rozhraních existují návrhové vzory, které se běžně používají a jsou zaběhlé. Jedním z těchto návrhových vzorů jsou kartové komponenty.

Co je to kartová komponenta

Kartovou komponentou neboli kartou nazýváme skupinu informací, které spolu úzce souvisí. Karty se jim říká proto, protože tak často i vizuálně vypadají. To ale není podmínkou. Karta může obsahovat textový obsah, mediální prvky nebo akční prvky. Může obsahovat širokou škálu obsahu, podle čehož pak vypadá výsledný vizuální návrh karty.

Karta je většinou samostatná a nezávislá jednotka, kterou když vytrhneme z kontextu, tak bude stále dávat smysl. Dost často taková karta v rozhraní odkazuje na podrobnější obsah.

Karty použijete v případě, když potřebujete atraktivně navrhnout seznam bloků informací, které půjdou jednoduše procházet, filtrovat a budou intuitivní pro případné interakce. Z jakých prvků a informací se karta může skládat?

Prvky karty

Náhledové obrázky

Náhledové obrázky slouží k rychlému skenování obsahu a rozlišení jednotlivých karet. Díky nim se uživatel snadno dozví, jakému tématu se obsah karty věnuje.

Nadpisy a podnadpisy

Nadpisy či podnadpisy slouží po obrázku k nejrychlejšímu sdělení informací, čeho se obsah dané karty týká.

Metainformace

Metainformace jsou malé údaje v podobě textů, čísel nebo třeba akčních prvků, které doplňují hlavní obsah o drobné související informace.

Texty

Texty mohou tvořit hlavní obsahovou část karty. Uživatel se jim věnuje až po zaměření se na kartu a po vyjádření zájmu o další obsah.

Grafické prvky

Karta může obsahovat různé grafické prvky v podobě dalších obrázků, ikon, grafů nebo třeba profilových fotek.

Akční tlačítka

Akční tlačítka vyzývají uživatele k nějaké akci. Díky ním se můžete například odkázat na další stránku, přejít k nákupu, sdílet nebo hodnotit obsah apod.

Oddělovače

Na základě zvoleného designového řešení se používají oddělovače obsahových oblastí karet. Díky nim jste si schopni jednodušeji jednotlivé části vizuálně spojit nebo naopak oddělit. Mohou mít různou formu. Nemusí jít pouze o běžnou linku. Oddělovač může být linka, grafický prvek nebo třeba jen prázdné místo.

Členění karty

Obsah karty můžete členit do několika oblastí. Mnohdy karty obsahují části jako jsou záhlaví, tělo karty a zápatí. To ale není podmínkou. Karta nemusí být členěna vůbec. Oddělení oblastí karty může být vizuální nebo jen pomyslné.

Záhlaví karty

Záhlaví karty slouží k umístění informací, díky kterým jasně a rychle odlišíte obsah karty od ostatních. Typicky tam může patřit nadpis, úvodní text k obsahu nebo metainformace.

Tělo karty

Tělo karty nese hlavní obsah, který vám předá nejvíce informací. Může jít o texty nebo třeba grafiku.

Zápatí karty

Do zápatí karty se umisťují například tlačítka k vyvolání patřičných akcí nebo další informace.

Kontejner obsahu karty

Veškerý obsah karty bývá umisťován do tzv. kontejneru. Pod kontejnerem si představte neviditelný box, který určuje hranice, které vizuálně určují, kde začíná a končí obsah karty. Tento kontejner je zpravidla odsazen od okraje karty. Kontejner může být v kartě jeden a nebo pro každou oblast karty zvlášť. Záleží na vašem designovém řešení.

1) Jeden kontejner pro celou kartu

Pokud zvolíte jeden kontejner, definujete odsazení kontejneru od okraje karty a veškerý obsah pak umístíte do něj.

2) Kontejner pro každou oblast karty

Pokud je karta členěna do více oblastí nebo jsou použity designové prvky přes celou šíři karty (např. oddělovače), které se dotýkají okrajů karty, budete muset počítat se zvláštním kontejnerem pro každou oblast karty.

Klikatelné akční oblasti karty

Karty se většinou řadí k prvkům, pomocí nichž můžete vyvolat nějakou akci. Při návrhu karty jsou tu dvě možnosti.

1) Celá klikatelná karta s jednou hlavní akcí

Pokud existuje pouze jedna akce, kterou lze s kartou provést, je možným a doporučovaným řešením navrhnout kartu tak, aby se provedla patřičná akce po kliknutí do libovolné oblasti karty. Respektive celá karta se stává klikatelnou. Tím ulehčíte uživateli provést požadovanou akci. V podstatě mu podstrčíte velkou plochu, kterou prostě nemůže minout.

2) Více klikatelných akčních oblastí

Pokud existuje akcí víc, je potřeba navrhnout v kartě více akčních prvků, jako jsou tlačítka nebo tlačítkové ikony. Celý zbytek karty pak může nebo nemusí zůstat také klikatelný. To záleží na situaci.

Vzhled karty

Pozadí

Pokud mají karty pozadí, zpravidla se navrhují v kontrastní barvě vůči pozadí celého UI. Cílem je, aby karty vypadaly opravdu jako karty, aby byly kontrastní a uživatelovo oko se o ně zastavilo. Pozadí karty může být i průhledné. Vždy záleží na designovém konceptu.

Ohraničení

Ohraničení karty může být zvýrazněno rámečkem. To se hodí, je-li pozadí karty méně kontrastní než pozadí celého UI.

Stínování a vystoupnutí karty „nad povrch“

Kartě můžete nastavit vhodný stín za účelem optického vysunutí karty do popředí. Tím vizuálně docílíte toho, že karta bude blíže k uživateli, bude pro něj zřetelnější, čímž posílíte jeho motivaci provést na kartě patřičnou akci.

Styl „neviditelné karty“

Karta nemusí mít ani pozadí ani ohraničení. Skupina informací nemusí na první pohled vypadat jako karta. Principiálně však o kartu jde. Takové kartě pak můžete nebo nemusíte dle konceptu nastavit vnitřní odsazení.

Karta a její stavy

Pokud se podíváte na karty v praxi, mnohdy je s nimi spojená nějaká interakce. Pokud se nad nimi pohybujete kurzorem, málokdy zůstane vzhled karty nebo jejího obsahu stejný. Karta je živý prvek a existují 4 stavy, na které při návrhu karty můžete myslet. Návrhy těchto stavů se pak hodí kodérům. Proto myslete i na jejich návrh. Ne vždy jsou v praxi navrhnuty, ale je dobré o nich vědět.

Výchozí stav karty (default)

Výchozí neboli klidový stav karty je takový, který uživatel vidí při průchodu UI, přičemž s kartou nijak nemanipuluje.

Stav po najetí kurzorem na kartu (hover)

Pokud uživatel přejede myší nebo prstem přes kartu, spustí se interakce. Tou může být zobrazení dalšího obsahu karty nebo její vizuální zvýraznění.

Označení / zaměření karty (focus)

Jde o stav, který slouží ke správné přístupnosti rozhraní. Nastává, označí-li uživatel kartu klávesnicí nebo třeba hlasem. Zkuste na nějakém webu mačkat klávesu „Tab“. Začnou se vám označovat prvky jako tlačítka, odkazy nebo právě karty, jsou-li správně navrhnuty a technicky realizovány.

Aktivní karta

Aktivní stav karty přichází na řadu, kliknete-li na kartu. V tu chvíli je prvek (karta) aktivní.

Další stavy

Zmíněné stavy patří mezi ty základní. Samozřejmě existuje i více stavů, které můžete navrhnout. Například stav, kdy na kartu nelze kliknout (disabled) nebo stav karty, kdy ji budete chtít přetáhnout na jiné místo (dragged). V momentě, kdy ji „uchytíte“ a budete ji chtít přetáhnout jinam, může se vizuálně změnit a do původního stavu se vrátí až ve chvíli, kdy ji pustíte.

Uspořádání obsahu v kartové komponentě

Při návrhu karty je důležité, jaké informace do ní zahrnete. Vždy se řiďte pravidlem „méně je více“. Karta nesmí působit přeplácaně a rušně. Vždy zahrňte pouze nezbytné informace. Položte si otázku, zda je daný prvek opravdu v kartě nutný a zda přinese uživateli hodnotu.

Určete si, které informace jsou v kartě nejdůležitější a které by měl uživatel při skenování očima zahlédnout jako první. Vizuálně kartu připravte tak, aby ho vedla od prvku k prvku. Vytvořte informační a vizuální hierarchii.

Interakce s kartou

Karta nemusí být pouze statická. Při jejím prohlížením se mohou vyvolat různé interakce. Interakce mohou být pouze vizuální nebo i informačně přínosné.

Pokud se nad kartou budete pohybovat kurzorem, může se vizuálně změnit leccos. Tyto změny můžete obohatit i o animace. Náhledový obrázek v kartě se může například přiblížit, karta se může nadnést, aby se dostala „nad povrch“ nebo se může změnit její barva. Vizuálních hrátek je spousta.

Při pohybu kurzorem přes kartu se nemusí měnit pouze vizuálně. Pokud uživatel s kartou přijde do styku, můžete odkrýt třeba i další obsah.

Rozbalování karet

Pokud je obsah karty delší než potřebujete, můžete navrhnout tzv. „rozbalovací“ kartu. To znamená, že po kliknutí na případné místo karty se skrytý obsah rozbalí a karta se buď zvětší nebo umožní skrolování celým obsahem.

Skupiny karet a jejich vzájemné zarovnání

Karty se většinou nevyskytují osamoceně. Obvykle tvoří skupinu karet s různým obsahem. Karty se mohou řadit do sloupců, řádku nebo pravidelných či nepravidelných mřížek.

Kaskádově zarovnané karty

Kaskádově zarovnané karty znamenají, že se řadí za sebe v optimální pozici podle obsahu karty. Toto zarovnání karet připomíná zdivo (masonry).

Karty zarovnané do řádků

Nejčastěji se setkáte s kartami zarovnanými do řádků. Z hlediska designu se můžete na zarovnání dívat dvěma způsoby.

1) Stejná výška karet

Pokud je v kartách zaručen podobný šablonovitý obsah s definovaným maximálním rozsahem, můžete karty zarovnat do stejně vysokých řádků.

Během navrhování je ale potřeba myslet na to, co se stane, když část obsahu v kartě bude kratší případně delší, přičemž chcete zachovat stejnou výšku karet.

První z možností je řadit prvky karty za sebe a pokud je její obsah kratší než ve zbylých kartách, konec karty bude obsahovat pouze prázdné místo tak, aby svojí výškou dorovnala ostatní karty.

Druhou možností je řadit prvky karty za sebe a pokud je obsahu v kartě méně, ponecháte v kartě prázdné místo a vypíchnete z karty část prvků, kterou zarovnáte až na konec karty. Většinou to bývá zápatí karty.

2) Různá výška karet

Každá z karet zarovnaná do řádku může obsahovat různé prvky o různém obsahu. Obsah karet tedy není pravidelný. V tom případě se nabízí možnost řadit karty do řádků s tím, že každá karta bude vysoká tak, jak je potřeba. Tím však vznikne „zubatý“ řádek. Potom už záleží na situaci, jestli je to správné řešení.

Slidery / carousely

Další možností, jak zobrazit více karet na malém prostoru je použití sliderů či carouselů. Jde o řešení, kdy uživateli zobrazíte jednu kartu a další mu dovolíte zobrazit pomocí stránkování nebo přetáhnutím prstem. Jde o efektivní řešení, máte-li v návrhu více skupin karet a nechcete, aby karty zabíraly příliš místa.

Zarovnání karet a skenování obsahu

Pokud rovnáte karty do skupin, je dobrou strategií, aby karty byly vůči sobě v kontrastu. Lépe se pak veškerý obsah skenuje očima a uživatel pak snáž vybere tu správnou kartu se správným obsahem.

Zarovnání karet na míru

Pokud dopředu znáte obsah karet, které mají různý obsah, nabízí se možnost navrhnout zarovnání karet na míru přesně podle jejich výsledných velikostí.

Zvýraznění karet v 3D prostoru

Vzhled karet v UI vychází z karet fyzických. Můžete vytvořit iluzi, aby karty v rozhraní vypadaly podobně jako v reálném světě. Navíc můžete jednotlivé karty zvýraznit tím, že je posunete blíže k uživateli do prostoru. Díky tomu můžete vytvořit určitou hierarchii karet a zdůraznit tak jejich informační důležitost.

Responzivní řešení karet

Z pohledu rozložení celého UI můžete řešit, jak budou karty řazeny na různých velikostech obrazovky. Budou karty stále v řádcích nebo v jednom sloupci? Kolik karet bude existovat v jednom řádku?

Z pohledu samotné karty můžete řešit, jak v ní budou jednotlivé prvky rozloženy. Návrh karty řešíte jako samostatný celek.

Výhody použití karet

Karty jsou jednotky, které slouží pro lepší organizaci obsahu. Velké množství informací jste schopni rozkouskovat a tím tyto informace snadněji procházet. Karty jsou dobře čitelné a protože existují jako samostatné jednotky, velmi lehce se s nimi můžete pracovat při responzivním designu.

Kdy karty nepoužívat

Karty se nehodí pro bloky informací, které potřebujete mezi sebou porovnávat.

Ve skupině karet vyhodnocujete každou kartu zvlášť a každá nese vlastní obsah, který většinou nesouvisí s jinou kartou. Vždy se zaměříte pouze na jednu kartu, prohlédnete si informace v ní a pak se teprve vrhnete na další.

Pokud by karty měly obsahovat takový obsah, který je podobný s obsahem v jiných kartách a chcete, aby uživatel měl možnost tyto obsahy porovnávat, je potřeba mu to ulehčit. Vhodnějším řešením je pak použití běžných tabulkových řádků.

Případy užití karet

Možností užití a výskytů karet je nespočet. Na webech mohou být karty použity pro blogové příspěvky, články, zprávy, projekty. Na e-shopech se s nimi setkáte v podobě výpisů produktů. V aplikacích pak mohou karty obsahovat třeba statistiky nebo grafy.

Pro demonstraci jsem navrhl velmi obyčejné karty sloužící k vysvětlení. V praxi se pak můžete setkat s nádhernými a vyladěnými kartami. Pro ukázku přidávám pár příkladů, jakých v online prostředí najdete mraky.