Karty kontra listy, jak wpływają na UX

Dwoma najpopularniejszymi sposobami organizowania treści na stronie są obecnie karty i listy. Każdy ma swoje wady i zalety. Podczas gdy listy pojawiły się już od początków istnienia sieci, projektowanie oparte na kartach stało się dopiero ostatnio siłą, z którą trzeba się liczyć, i która jest coraz popularniejszym wyborem do organizacji treści.

Karty i listy są unikalnymi sposobami wyświetlania treści, co oznacza, że są odpowiednio lepsze i gorsze w określonych sytuacjach. Kluczem dla projektantów stron internetowych jest oczywiście zrozumienie, kiedy dokładne użycie każdego z nich zapewnia użytkownikom lepsze wrażenia. Odpowiedzi mogą cię tylko zaskoczyć i sprawić, że spojrzysz na zasady projektowania nieco inaczej.

Tutaj badamy, kiedy w projektowaniu stron internetowych warto używać kart zamiast list i odwrotnie.

Co to jest karta? Co to jest lista?

Aby pomóc nam zrozumieć, kiedy korzystanie z karty lub listy jest bardziej odpowiednie dla celów UX, pomaga nam w znacznym stopniu zrozumieć, co każdy jest i co każdy robi (lub ma robić).

Karta to kontener wyświetlający różne fragmenty powiązanych informacji, z których użytkownicy mogą uzyskać jeszcze więcej informacji. Choć wciąż jest to produkt o płaskiej konstrukcji, jest on lepiej klasyfikowany jako Flat Design 2.0, ponieważ zwykle ma lekkie efekty 3D, takie jak cienie, które wskazują na klikalność. Efekty 3D, takie jak funkcja głębi wizualnej, są znaczące dla użytkowników, mówiąc im, że mogą kliknąć, aby uzyskać dalsze informacje.

Co ciekawe, jest coś w rodzaju dychotomii z kartą, ponieważ zwykle przypomina prawdziwą kartę do gry, zarówno pod względem kształtu, jak i wielkości. Sugeruje to przestarzały skeomomorfizm, w którym elementy graficzne przypominały rzeczywiste przedmioty.

Lista to strona, na którą przechodzą kryteria wyszukiwania lub nawyki użytkownika. Strona aukcji zawiera zasadniczo wiele różnych pozycji lub wpisów. Dlatego lista musi ułatwiać wydajne i szybkie skanowanie oka dla właściwego UX. Jest to ważne rozróżnienie, które pomaga nam odróżnić, kiedy lista jest bardziej odpowiednia niż karta, pod względem użyteczności.

Kiedy używać kart

Teraz, gdy znamy kluczowe różnice między kartami i listami, łatwiej jest nam poznać z przekonaniem, że każdy z nich jest odpowiedni w projektowaniu stron internetowych.

Do przeglądania informacji (w przeciwieństwie do wyszukiwania)

Karty utrudniają, a nawet uniemożliwiają użytkownikom łatwe rozpoznanie ważności ważności treści w rankingu. Na przykład karty nie dostarczają oczywistych informacji o kolejności, w jakiej zawartość powinna być wyświetlana na stronie, ponieważ obrys / granice kart wyglądają podobnie. Z pewnością podstawowe badania śledzące wzrok zawsze sugerują, że użytkownicy zaczynają od treści na górze i na lewo od strony, ale listy sprawiają, że jest on bardziej intuicyjny dla użytkowników, którzy mogą śledzić ten podstawowy sposób wchłaniania treści online.

Dlatego wykorzystanie kart do przeglądania ogromnych kolekcji - na przykład tych na Pinterest - jest idealne. Gdy przeglądasz wyniki wyszukiwania na Pinterest, zamiast określać, w jakiej kolejności je przeglądać, nieskończony zwój wyników opartych na kartach sprawia, że przeglądanie jest atrakcyjne, przyjemne i łatwe. Gdy zobaczysz coś interesującego, możesz od razu kliknąć kartę, by uzyskać więcej informacji. To natychmiastowe zaspokojenie.

Do grup różnych przedmiotów

Zależnie od aplikacji lub programu, z którego korzystasz, w końcu natkniesz się na jeden z panelem, który korzysta z projektów opartych na kartach, aby ułatwić rozróżnianie różnych typów treści. Jest to przykład siły kart, aby szybko umożliwić użytkownikom identyfikowanie różnych typów zarządzanych treści.

Ponieważ karty wykorzystują granice do określenia granic wizualnych, są one idealne, jeśli chodzi o grupowanie różnych elementów.

Kiedy używać list

Listy mogą być nieco prostsze niż karty, być może dlatego, że już od dłuższego czasu zajmują się projektowaniem stron internetowych. W rezultacie łatwiej jest określić, kiedy należy je dobrze stosować.

Do efektywnego skanowania oka

Listy są preferowane, gdy użytkownicy muszą szybko wyszukiwać coś, co chcą w witrynie, np. Gdy przeglądają stronę wyników wyszukiwania po wprowadzeniu wyszukiwanych haseł. Listy, które są pionowe i gdzie jeden element znajduje się w jednym wierszu powyżej następnej pomocy, aby skupić wzrok użytkownika znacznie lepiej niż karty, ponieważ listy są stałe, podczas gdy karty nie siedzą w ustalonych pozycjach w wierszach.

Dla mniejszych ekranów

Mówiąc najprościej, karty zajmują więcej miejsca na ekranie. To sprawia, że ich używanie na urządzeniach mobilnych i niektórych tabletach jest problematyczne, ponieważ zmusza użytkowników do przewijania strony, aby zobaczyć więcej wyborów wcześniej niż wtedy, gdy są używane listy. Ponieważ elementy listy są rozmieszczone w krótkich wierszach wzdłuż całej strony, użytkownicy mogą zobaczyć więcej opcji bez konieczności korzystania z pamięci krótkoterminowej (które będą musieli wykonać osoby przeglądające projekt oparty na karcie, gdy zaczną przewijać w dół do zobacz więcej elementów).

Gdy tylko Twój projekt wymaga od użytkowników zapamiętywania wyborów na ekranie, zaczną się napotykać ładunek kognitywny , który szkodzi UX. Ładunek poznawczy oznacza, że twój mózg musi ciężej pracować, aby coś zapamiętać, podczas gdy wciąż przetwarza dodatkowe, nowe informacje. To z kolei prowadzi do spowolnienia szybkości zadań i, potencjalnie, całkowitego zaniechania zadania użytkownika.

W aplikacji App Store w moim smartfonie kategorie aplikacji są uporządkowane w uporządkowaną, pionową listę, która wyświetla osiem pozycji na jednej stronie, bez obawy o konieczność przewijania w dół, aby zobaczyć więcej i zapamiętać wcześniejsze wybory. Gdyby to zrobiono w układzie z dużo większymi kartami, byłbym w stanie zobaczyć tylko kilka opcji, utrudniających mój UX.