To av de vanligste måtene å organisere nettstedinnhold i disse dager er ved å bruke kort og lister. Hver har sine egne fordeler og ulemper. Mens lister har eksistert siden de tidlige dagene på nettet, har kortbasert design først nylig blitt en kraft som skal regnes med, og en som i økende grad er et populært valg for innholdsorganisasjon.

Kort og lister er unike måter å vise innhold på, som betyr at de er henholdsvis bedre og dårligere, for bestemte situasjoner. Nøkkelen til webdesignere er selvfølgelig forstå når nøyaktig bruk av hver enkelt gir brukerne en bedre brukeropplevelse. Svarene kan bare overraske deg og føre til at du ser på designprinsipper litt annerledes.

Her undersøker vi når det er hensiktsmessig i webdesign å bruke kort versus lister og omvendt.

Hva er et kort? Hva er en liste?

For å hjelpe oss å forstå når du bruker et kort eller en liste, er mer hensiktsmessig for UX-formål, hjelper det oss sterkt å først forstå hva hver er og hva hver gjør (eller skal).

Et kort er en beholder som viser ulike biter av relatert informasjon, hvorfra brukere kan få enda mer informasjon. Selv om det fortsatt er et produkt av flat design, er den mer riktig klassifisert som Flat Design 2.0 siden det vanligvis har lette 3D-effekter som drop shadows for å indikere klikkbarhet. 3D-effekter som den visuelle dybdefunksjonen som signifier til brukerne, forteller dem at de kan klikke for ytterligere informasjon.

Interessant, det er noe av en dikotomi med et kort, siden det vanligvis ligner et faktisk spillkort både i form og størrelse. Dette tyder på den utdaterte skeuomorfismen, hvor grafiske elementer lignet faktiske elementer.

En liste er en side der brukerens søkekriterier eller vaner bruker dem. Oppføringssiden inneholder i hovedsak en rekke ulike kandidatartikler eller oppføringer. Derfor må en liste forenkle effektiv og rask øyeskanning for riktig UX. Dette er et viktig skille som hjelper oss å skille når en liste er mer hensiktsmessig enn et kort, når det gjelder brukervennlighet.

Når skal du bruke kort

Nå som vi kjenner de viktigste forskjellene mellom kort og lister, er det lettere for oss å vite med selvtillit når du bruker hver som passer med webdesign.

For å bla gjennom informasjon (i motsetning til søk)

Kort gjør det vanskelig eller til og med umulig for brukerne å enkelt skille rangeringens betydning av innholdet. For eksempel gir kortene ingen åpenbare opplysninger om hvilken rekkefølge innholdet skal vises på en side siden skissene / kantene til kortene ser ut som de samme. Sikkert, grunnleggende eye-tracking forskning tyder alltid på at brukerne først begynner med innhold øverst og til venstre på en side, men lister gjør det mye mer intuitivt for brukerne å følge med denne grunnleggende måten å absorbere innhold på nettet.

cards03

Derfor bruker du kort til å bla gjennom store samlinger, som de som på Pinterest, for eksempel, er ideelle. Når du bare surfer søkeresultatene på Pinterest, i stedet for å bestemme i hvilken rekkefølge du vil se den, gjør den uendelige rulle av kortbaserte resultater surfing attraktivt, morsomt og enkelt. Når du ser noe interessant, kan du umiddelbart klikke på kortet for mer info. Det er øyeblikkelig tilfredsstillelse.

For grupperinger av ulike elementer

Avhengig av appen eller programmet du bruker, vil du til slutt møte en med et dashbord som bruker kortbasert design for å gjøre det enkelt å skille mellom ulike typer innhold. Dette er et eksempel på styrken på kortene, slik at brukerne raskt kan identifisere ulike typer innhold de administrerer.

cards02

Siden kort bruker grenser for å etablere visuelle grenser, er de ideelle når det gjelder å gruppere ulike elementer.

cards04
cards01

Når skal du bruke lister

Lister kan være litt mer enkle enn kort, kanskje fordi de har vært lengre i webdesign. Som et resultat, har det en tendens til å være lettere å bestemme når de skal bruke dem godt.

For effektiv øyeskanning

Lister foretrekkes når brukere må søke etter noe de vil ha på et nettsted, som når de leser søkeresultatsiden etter at de har skrevet inn søkeordene sine. Lister som er vertikale og hvor ett element sitter på en rad over det neste, bidrar til å fokusere brukerens øyne mye bedre enn kort, da lister er faste mens kortene ikke sitter i faste posisjoner i rader.

list04

For mindre skjermer

Enkelt sagt, kortene tar opp mye mer eiendom på skjermen. Dette gjør deres bruk på mobile enheter og noen tabletter problematisk fordi det tvinger brukerne til å bla ned på siden for å se flere valg raskere enn når lister blir brukt. Ettersom elementene i en liste bare sitter i korte rader ned langs en side, kan brukerne se flere valg uten å måtte stole på korttidshukommelse (som de som ser på et kortbasert design, må gjøre når de begynner å rulle ned til se flere elementer).

Så snart designen krever at brukerne husker valg lenger opp på skjermen, begynner de å møte kognitiv belastning , som skader UX. Kognitiv belastning betyr at hjernen din må jobbe hardere for å huske noe mens den fremdeles behandler tilleggsinformasjon, ny informasjon. Dette fører igjen til å redusere oppgavens hastighet og potensielt fullstendig forlatelse av en brukeroppgave.

list03a

På app-appen til smarttelefonen er appkategorier organisert i en pen, vertikal liste som viser åtte elementer på en side, uten at jeg bekymrer meg om å måtte bla ned for å se mer og huske de tidligere valgene. Hvis dette hadde blitt gjort i et layout med de mye større kortene, hadde jeg bare kunnet se noen valg på det meste, hindre min UX.

list02
list01

Kort vs. lister

Kort er ganske enkelt et organisatorisk system for å vise biter av relatert informasjon som er knyttet til ytterligere informasjon, dypere inn i nettstednavigasjonen. De er flotte for å la brukerne bla gjennom mye informasjon og for å gruppere elementer.

Lister er sider som viser søkeresultater og oppføringer som er kandidatelementer som samsvarer med søket. De er ideelle for å organisere lignende innhold i vertikal justering.

Husk dette viktige skillet mellom de to, og du vil organisere innhold mesterlig med flott design.