To af de mest almindelige måder at organisere indhold på internettet i disse dage er ved at bruge kort og lister. Hver har sine egne fordele og ulemper. Hvor lister har eksisteret siden de tidlige dage af internettet er kortbaseret design først for nylig blevet en kraft, der skal regnes med, og en der i stigende grad er et populært valg for indholdsorganisation.

Kort og lister er unikke måder at vise indhold på, hvilket betyder, at de er bedre og værre for henholdsvis bestemte situationer. Nøglen til webdesignere er selvfølgelig forståelse, når nøjagtig at bruge hver enkelt bruger giver brugerne en bedre brugeroplevelse. Svarene kan bare overraske dig og få dig til at se designprincipper lidt anderledes.

Her undersøger vi, hvornår det er hensigtsmæssigt i webdesign at bruge kort versus lister og omvendt.

Hvad er et kort? Hvad er en liste?

For at hjælpe os med at forstå, når du bruger et kort eller en liste, er mere hensigtsmæssigt til UX-formål, hjælper det os meget til først at forstå, hvad hver enkelt er, og hvad hver gør (eller skal).

Et kort er en container, der viser forskellige bits relateret information, hvorfra brugerne kan få endnu flere oplysninger. Selvom det stadig er et produkt af fladt design, er det mere korrekt klassificeret som Flat Design 2.0, da det normalt har lyse 3D-effekter som drop skygger for at indikere klikbarhed. 3D-effekter som den visuelle dybdefunktion som signifikant til brugerne, fortæller dem, at de kan klikke for yderligere information.

Interessant nok er der noget af en dichotomi med et kort, da det normalt ligner et ægte spillekort både i form og størrelse. Dette tyder på den forældede skeuomorphism, hvor grafiske elementer lignede faktiske elementer.

En liste er en side, hvor en brugers søgekriterier eller browsevaner tager dem. Listingssiden indeholder hovedsageligt en række forskellige kandidatartikler eller poster. Derfor skal en liste lette effektiv og hurtig øjenscanning for korrekt UX. Dette er en vigtig skelnen, der hjælper os med at skelne mellem, når en liste er mere passende end et kort, hvad angår brugervenlighed.

Hvornår skal du bruge kort

Nu hvor vi kender de vigtigste forskelle mellem kort og lister, er det lettere for os at vide med tillid, når du bruger hver, der passer til webdesign.

Til informationsbrowsing (i modsætning til søgning)

Kort gør det svært eller endog umuligt for brugerne at let skelne indholdets rangordnede betydning. Kort giver f.eks. Ikke nogen tydelige oplysninger om rækkefølgen, hvor indhold skal ses på en side, da kortets kontur / grænser alle ser ens ud. Det er klart, at grundlæggende øjenopfølgningsforskning altid viser, at brugerne først begynder med indhold øverst og til venstre på en side, men lister gør det mere intuitivt for brugerne at følge med denne grundlæggende måde at absorbere onlineindhold på.

cards03

Derfor bruger du kort til at gennemse store samlinger, som f.eks. Pinterest, er ideel. Når du blot gennemsøger søgeresultater på Pinterest, i stedet for at bestemme i hvilken rækkefølge at se den, gør den uendelige rulle af kortbaserede resultater surfing attraktivt, sjovt og nemt. Når du ser noget interessant, kan du straks klikke på kortet for mere info. Det er øjeblikkeligt tilfredsstillelse.

Til grupperinger af forskellige elementer

Afhængigt af det program eller program, du bruger, vil du til sidst møde en med et dashboard, der bruger kortbaseret design, så det er let at skelne mellem forskellige typer indhold. Dette er et eksempel på styrken af ​​kort for hurtigt at give brugerne mulighed for at identificere de forskellige typer indhold, de administrerer.

cards02

Da kort bruger grænser for at etablere visuelle grænser, er de ideelle til at gruppere forskellige elementer.

cards04
cards01

Hvornår skal du bruge lister

Lister kan være lidt mere ligetil end kort, måske fordi de har eksisteret længere i webdesign. Som følge heraf er det lettere at bestemme, hvornår de skal bruges godt.

Til effektiv øjenscanning

Lister foretrækkes, når brugerne hurtigt skal søge efter noget, de ønsker på et websted, som når de gennemgår søgeresultatsiden efter indtastning af deres søgeord. Lister, der er lodrette, og hvor et element sidder på en række over det næste, hjælper med at fokusere brugerens øjne meget bedre end kort, da listerne er faste, mens kortene ikke sidder i faste positioner i rækker.

list04

Til mindre skærme

Kort sagt, kort tager op på flere ejendomme på skærmen. Dette gør deres brug på mobile enheder og nogle tabletter problematisk, fordi det tvinger brugerne til at rulle ned på siden for at se flere valg hurtigere end ved brug af lister. Da en liste elementer kun sidder i korte rækker ned langs en side, kan brugerne se flere valg uden at skulle stole på korttidshukommelse (som de, der kigger på et kortbaseret design, skulle skulle gøre, når de begynder at rulle ned til se flere elementer).

Så snart dit design kræver, at brugerne husker valg længere op på skærmen, begynder de at støde på kognitiv belastning , hvilket skader UX. Kognitive belastninger betyder, at din hjerne skal arbejde hårdere for at huske noget, mens det stadig behandler yderligere, ny information. Dette fører igen til at nedsætte opgavens hastighed og muligvis fuldstændig opgave af en brugeropgave.

list03a

På min smartphone App Store app, er app kategorier organiseret i en pæn, lodret liste, der viser otte elementer på en side, uden at jeg bekymrer mig om at skulle rulle ned for at se mere og huske de tidligere valg. Hvis dette var sket i et layout med de meget større kort, havde jeg kun kunnet se et par valg på det meste, hæmmende min UX.

list02
list01

Kort vs. lister

Kort er simpelthen et organisationssystem, der viser bit af relateret information, der er knyttet til yderligere oplysninger, dybere ind i sidens navigation. De er gode til at lade brugerne gennemse masser af oplysninger og til gruppering af varer.

Lister er sider, der viser søgeresultater og poster, der er kandidatobjekter, der matcher søgningen. De er ideelle til at organisere lignende indhold i lodret justering.

Husk denne afgørende skelnen mellem de to, og du vil organisere indhold mesterligt med godt design.