Kort vs. Listor, hur de påverkar UX
Två av de vanligaste sätten att organisera webbinnehåll idag är att använda kort och listor. Varje har sina egna fördelar och nackdelar. Listor har funnits sedan webbens tidiga dagar, kortbaserad design har bara nyligen blivit en kraft att räkna med och en som alltmer är ett populärt val för innehållsorganisation.
Kort och listor är unika sätt att visa innehåll, vilket betyder att de är bättre och sämre för respektive situation. Nyckeln till webbdesigners är förstås att förstå när exakt användandet av varje användare ger användarna en bättre användarupplevelse. Svaren kan bara överraska dig och få dig att titta på designprinciperna lite annorlunda.
Här undersöker vi när det är lämpligt i webbdesign att använda kort jämfört med listor och vice versa.
Vad är ett kort? Vad är en lista?
För att hjälpa oss att förstå när du använder ett kort eller en lista är mer lämplig för UX-ändamål, hjälper det oss mycket först att förstå vad varje är och vad varje gör (eller ska göra).
Ett kort är en behållare som visar olika bitar av relaterad information, från vilken användare kan få ännu mer information. Medan det fortfarande är en produkt med platt design, är det mer korrekt klassificerat som Flat Design 2.0 eftersom det vanligtvis har lätta 3D-effekter som drop-skuggor för att indikera klickbarhet. 3D-effekter som den visuella djupfunktionen som signifierare för användare, säger att de kan klicka för mer information.
Intressant är att det finns något av en dikotomi med ett kort eftersom det oftast liknar ett verkligt spelkort både i form och storlek. Detta tyder på den föråldrade skeuomorfismen, där grafiska element liknade faktiska föremål.
En lista är en sida där användarens sökkriterier eller surfvanor tar dem. Listningssidan innehåller i huvudsak ett antal olika kandidatobjekt eller poster. En lista måste därför underlätta effektiv och snabb ögonskanning för korrekt UX. Detta är en viktig skillnad som hjälper oss att skilja när en lista är mer lämplig än ett kort, vad gäller användbarhet.
När ska man använda kort
Nu när vi känner till de viktigaste skillnaderna mellan kort och listor, är det lättare för oss att veta med självförtroende när vi använder var och en som är lämplig för webbdesign.
För informationssökning (i motsats till sökning)
Kort gör det svårt eller till och med omöjligt för användarna att enkelt urskilja rangordningens betydelse för innehållet. Till exempel ger kort inga uppenbara uppgifter om den ordning i vilken innehåll ska ses på en sida eftersom konturerna / gränserna på korten liknar varandra. Självklart föreslår grundläggande eye-tracking-forskning alltid att användarna först börjar med innehåll längst upp och till vänster på en sida, men listor gör det väldigt intuitivt för användarna att följa med detta grundläggande sätt att absorbera onlineinnehåll.
Det är därför som använder kort för att surfa på stora samlingar, som exempelvis på Pinterest, är idealisk. När du bara bläddrar sökresultat på Pinterest, istället för att bestämma i vilken ordning du vill visa den, gör den oändliga bläddringen av kortbaserade resultat surfning attraktiv, rolig och lätt. När du ser något intressant kan du genast klicka på kortet för mer info. Det är omedelbar tillfredsställelse.
För grupperingar av olika föremål
Beroende på vilken app eller program du använder, kommer du så småningom att stöta på en med en instrumentpanel som använder kortbaserad design för att göra det enkelt att skilja mellan olika typer av innehåll. Detta är ett exempel på styrkan på kort så att användarna snabbt kan identifiera olika typer av innehåll som de hanterar.
Eftersom kort använder gränser för att skapa visuella gränser, är de idealiska när det gäller att gruppera olika element.
När ska man använda listor
Listor kan vara lite mer enkla än kort, kanske för att de har varit runt längre i webbdesign. Som ett resultat tenderar det att vara lättare att bestämma när man ska använda dem bra.
För effektiv ögonskanning
Listor föredras när användarna snabbt behöver söka efter något de vill ha på en webbplats, som när de prövar sökresultatsidan efter att de har skrivit in sina sökord. Listor som är vertikala och där ett element sitter i en rad ovanför nästa hjälper till att fokusera användarens ögon mycket bättre än kort, eftersom listorna är fasta medan korten inte sitter i fasta positioner i rader.
För mindre skärmar
Enkelt uttryckt, kort tar upp sätt mer fastigheter på skärmen. Detta gör deras användning på mobila enheter och vissa tabletter problematiska eftersom det tvingar användarna att rulla ner på sidan för att se fler val tidigare än när listor används. Eftersom listans element bara sitter i korta rader ner längden på en sida kan användarna se fler val utan att behöva förlita sig på korttidsminnet (som de som tittar på en kortbaserad design skulle behöva göra när de börjar rulla ner till se fler element).
Så fort din design kräver att användarna kommer ihåg valen längre upp på skärmen, börjar de möta dem kognitiv belastning , vilket skadar UX. Kognitiv belastning betyder att din hjärna måste arbeta hårdare för att komma ihåg något medan det fortfarande behandlar ytterligare, ny information. Detta leder i sin tur till att sänka hastigheten på uppgifterna och eventuellt fullständigt överge en användaruppgift.
På min smartphone App Store app, är app kategorier organiserade i en snygg, vertikal lista som visar åtta objekt på en sida, utan att jag oroa mig för att behöva rulla ner för att se mer och komma ihåg de tidigare valen. Om detta hade gjorts i en layout med de mycket större korten, hade jag bara kunnat se några val på det mesta, vilket hindrade min UX.
Kort vs listor
Kort är helt enkelt ett organisationssystem för att visa bitar av relaterad information som är kopplad till ytterligare information djupare i sidnavigering. De är bra för att låta användare bläddra mycket information och för att gruppera objekt.
Listor är sidor som visar sökresultat och poster som är kandidatobjekt som matchas med sökfrågan. De är idealiska för att organisera liknande innehåll i vertikal anpassning.
Kom ihåg denna viktiga skillnad mellan de två, och du kommer att organisera innehåll mästerligt med bra design.