Karty Vs. Seznamy, jak ovlivňují UX
Dvě nejběžnější způsoby, jak uspořádat obsah webových stránek v těchto dnech, je používání karet a seznamů. Každý má své vlastní pro a proti. Zatímco seznamy jsou již od prvních dnů webových stránek, design založený na kartách se nedávno stal silou, s níž je třeba počítat, a ten, který je stále populárnější volbou pro obsahovou organizaci.
Karty a seznamy jsou jedinečné způsoby zobrazení obsahu, což znamená, že jsou pro konkrétní situace lepší a horší. Klíčem pro webových designérů je samozřejmě pochopení, kdy přesně každé z nich umožňuje uživatelům lepší uživatelskou zkušenost. Odpovědi vás možná překvapí a způsobí, že se podíváte na principy návrhu trochu jinak.
Zde zkoumáme, kdy je vhodné, pokud jde o webový design, používat karty versus seznamy a naopak.
Co je to karta? Co je to seznam?
Abychom nám pomohli pochopit, kdy je použití karty nebo seznamu vhodnější pro účely UX, pomáhá nám velmi pochopit, co je a co každý dělá (nebo má dělat).
Karta je kontejner, který zobrazuje různé bity souvisejících informací, od kterých mohou uživatelé získat ještě více informací. Zatímco je to stále produkt plochého designu, je vhodněji klasifikován jako Flat Design 2.0, protože obvykle má světlé 3D efekty, jako jsou stíny, které indikují kliknutí. 3D efekty, jako je tato vizuální hloubka, slouží jako signifikant pro uživatele a říkají jim, že mohou kliknout na další informace.
Je zajímavé, že s kartou existuje něco jako dichotomie, protože se obvykle podobá skutečné hrací kartě jak ve tvaru, tak i velikosti. To naznačuje zastaralý skejomorfismus, kde grafické prvky připomínají skutečné položky.
Seznam je stránka, ve které jsou vyhledávací kritéria uživatele nebo návyky procházení. Na stránce výpisu se v podstatě nachází řada různých kandidátských položek nebo položek. Proto seznam musí usnadnit efektivní a rychlé oko pro správné UX. To je důležitý rozdíl, který nám pomáhá rozlišovat, pokud je seznam vhodnější než karta, pokud jde o použitelnost.
Kdy používat karty
Nyní, když známe klíčové rozdíly mezi kartami a seznamy, je pro nás jednodušší vědět s jistotou, když je každá z nich vhodná pro návrh webových stránek.
Pro procházení informací (na rozdíl od vyhledávání)
Karty ztěžují nebo dokonce znemožňují uživatelům snadno rozlišovat důležitost obsahu. Karty například neposkytují žádné zřetelné informace o pořadí, v jakém by měl být obsah zobrazen na stránce, protože obrysy a ohraničení karet vypadají podobně. Základní výzkum zaměřený na sledování oka jistě vždy naznačuje, že uživatelé nejprve začínají obsahem v horní a levém okraji stránky, ale seznamy způsobují, že uživatelé mohou sledovat tento základní způsob absorpce obsahu online mnohem intuitivněji.
Proto je pro vás ideální použít karty pro procházení obrovských sbírek - například ti na Pinterestu. Když právě procházíte výsledky vyhledávání v aplikaci Pinterest, místo toho, aby bylo možné určit, v jakém pořadí je může zobrazit, nekonečné posouvání výsledků založených na kartách činí prohlížení atraktivní, zábavné a snadné. Kdykoli vidíte něco zajímavého, můžete okamžitě kliknout na kartu a získat další informace. Je to okamžité uspokojení.
Pro seskupení různých položek
V závislosti na aplikaci nebo programu, který používáte, se nakonec setkáte s panelem, který používá design založený na kartách, aby bylo možné snadno rozlišit různé typy obsahu. Toto je příklad síly karet, které uživatelům umožňují rychle určit různé typy obsahu, který spravují.
Vzhledem k tomu, že karty používají hranice pro vytvoření vizuálních hranic, jsou ideální pro seskupování nesourodých prvků.
Kdy používat seznamy
Seznamy mohou být poněkud jednodušší než karty, možná proto, že v webdesignu už byly delší. Výsledkem je, že je snazší zjistit, kdy je používat dobře.
Pro efektivní oční skenování
Seznamy jsou upřednostňovány, když uživatelé potřebují rychle vyhledávat něco, co chtějí na webu, jako když při zadávání vyhledávacích dotazů vyhledávají stránku s výsledky vyhledávání. Seznamy, které jsou vertikální a kde jeden prvek sedí na jednom řádku nad další nápovědu, zaměřuje oči uživatele mnohem lépe než karty, protože seznamy jsou pevné, zatímco karty neumísťují v pevných pozicích v řádcích.
U menších obrazovek
Jednoduše řečeno, karty na obrazovce zaujmou více nemovitostí. Díky tomu je jejich používání v mobilních zařízeních a v některých tabletech problematické, protože přinutí uživatele, aby procházeli dolů na stránce, aby viděli více možností dříve než při použití seznamů. Vzhledem k tomu, že prvky seznamu se nacházejí pouze v krátkých řádcích po délce stránky, uživatelé mohou vidět více možností, aniž by museli spoléhat na krátkodobou paměť (kterou ti, kteří se dívají na design založený na kartě, budou muset dělat, když začnou posouvat dolů viz další prvky).
Jakmile váš návrh vyžaduje, aby si uživatelé vzpomněli na další volby na obrazovce, začnou se setkat kognitivní zatížení , což poškozuje UX. Kognitivní zatížení znamená, že váš mozek musí pracovat lépe, aby si něco pamatoval, zatímco stále zpracovává další nové informace. To zase vede ke zpomalení rychlosti úkolů a případně dokončení opuštění uživatelského úkolu.
V aplikaci App Store v smartphonu jsou kategorie aplikací uspořádány do čistého, vertikálního seznamu, který zobrazuje osm stránek na jedné stránce, aniž bych se musel starat o to, abych musel posunout dolů, abych viděl více a pamatoval na předchozí volby. Pokud by to bylo provedeno v rozvržení s mnohem většími kartami, bylo by jen možné vidět jen několik možností, což by bránilo mému UXu.
Karty vs. seznamy
Karty jsou prostě organizační systém, který zobrazuje bity souvisejících informací, které jsou propojeny s dalšími informacemi hlouběji do navigace na webu. Jsou skvělé, protože umožňují uživatelům procházet spoustu informací a seskupovat položky.
Seznamy jsou stránky, které zobrazují výsledky vyhledávání a položky, které jsou kandidátskými položkami, které odpovídají vyhledávacímu dotazu. Jsou ideální pro organizaci podobného obsahu do vertikálního uspořádání.
Nezapomeňte na tento zásadní rozdíl mezi těmito dvěma tématy a budete obsahovat mistrovsky s velkým designem.