Kaarten versus lijsten, hoe ze invloed hebben op UX

Twee van de meest gebruikelijke manieren om website-inhoud te ordenen, is door kaarten en lijsten te gebruiken. Elk heeft zijn eigen voor- en nadelen. Waar lijsten al bestaan sinds de begintijd van het web, is kaartenontwerp pas sinds kort een kracht waarmee rekening moet worden gehouden en een kaart die steeds vaker een populaire keuze is voor de inhoudsorganisatie.

Kaarten en lijsten zijn unieke manieren om inhoud weer te geven, wat betekent dat ze respectievelijk beter en slechter zijn voor specifieke situaties. De sleutel voor webontwerpers is natuurlijk inzicht in het feit dat wanneer u ze allemaal precies kunt gebruiken gebruikers een betere gebruikerservaring hebben. De antwoorden zullen je misschien verbazen en ervoor zorgen dat je de ontwerpprincipes een beetje anders bekijkt.

Hier onderzoeken we wanneer het geschikt is in webdesign om kaarten te gebruiken versus lijsten en omgekeerd.

Wat is een kaart? Wat is een lijst?

Om ons te helpen begrijpen wanneer een kaart of lijst gebruikt wordt, is dit meer geschikt voor UX-doeleinden, het helpt ons enorm om eerst te begrijpen wat elk is en wat elk doet (of zou moeten doen).

Een kaart is een container die verschillende stukjes gerelateerde informatie weergeeft, van waaruit gebruikers nog meer informatie kunnen krijgen. Hoewel het nog steeds een product van plat ontwerp is, is het beter geclassificeerd als Flat Design 2.0, omdat het doorgaans lichte 3D-effecten heeft, zoals slagschaduwen om klikbaarheid aan te geven. 3D-effecten zoals die visuele dieptefunctie zijn de betekenende factor voor gebruikers en vertellen hen dat ze kunnen klikken voor meer informatie.

Interessant genoeg is er iets van een dichotomie met een kaart, omdat het meestal lijkt op een echte speelkaart, zowel in vorm als in grootte. Dit duidt op het verouderde skeuomorfisme, waarbij grafische elementen op werkelijke items lijken.

Een lijst is een pagina waar de zoekcriteria of surfgewoonten van een gebruiker ze gebruiken. De listingpagina bevat hoofdzakelijk een aantal verschillende kandidaatitems of items. Daarom moet een lijst een efficiënte en snelle oogscanning voor de juiste UX mogelijk maken. Dit is een belangrijk onderscheid dat ons helpt te differentiëren wanneer een lijst meer geschikt is dan een kaart, in termen van bruikbaarheid.

Wanneer kaarten gebruiken

Nu we weten wat de belangrijkste verschillen zijn tussen kaarten en lijsten, is het voor ons gemakkelijker om met vertrouwen te weten wanneer elk gebruik geschikt is voor webontwerp.

Voor informatie browsen (in tegenstelling tot zoeken)

Kaarten maken het moeilijk of zelfs onmogelijk voor gebruikers om eenvoudig het rankingbelang van inhoud te onderscheiden. Kaarten bieden bijvoorbeeld geen voor de hand liggende informatie over de volgorde waarin inhoud op een pagina moet worden bekeken, omdat de omtrekken / randen van kaarten er allemaal hetzelfde uitzien. Zeker, fundamenteel eye-tracking onderzoek suggereert altijd dat gebruikers eerst beginnen met inhoud bovenaan en links van een pagina, maar lijsten maken het veel intuïtiever voor gebruikers om mee te gaan met deze fundamentele manier om online content te absorberen.

Dat is waarom het gebruik van kaarten voor het bladeren door enorme collecties, zoals die op Pinterest, bijvoorbeeld ideaal is. Wanneer u alleen zoekresultaten bekijkt op Pinterest, in plaats van te bepalen in welke volgorde u deze bekijkt, maakt de oneindige scroll van kaartgebaseerde resultaten bladeren aantrekkelijk, leuk en gemakkelijk. Wanneer u iets interessants ziet, kunt u direct op de kaart klikken voor meer info. Het is onmiddellijke bevrediging.

Voor groepen van verschillende items

Afhankelijk van de app of het programma dat u gebruikt, komt u er uiteindelijk een tegen met een dashboard dat op kaarten gebaseerd ontwerp gebruikt om het gemakkelijk te maken om onderscheid te maken tussen verschillende soorten inhoud. Dit is een voorbeeld van de sterkte van kaarten waarmee gebruikers snel de verschillende typen inhoud kunnen identificeren die ze beheren.

Omdat kaarten grenzen gebruiken om visuele grenzen te leggen, zijn ze ideaal als het gaat om het groeperen van ongelijksoortige elementen.

Wanneer lijsten gebruiken

Lijsten kunnen iets eenvoudiger zijn dan kaarten, misschien omdat ze al langer bezig zijn met webontwerp. Hierdoor is het gemakkelijker om te bepalen wanneer u ze goed moet gebruiken.

Voor efficiënt scannen van de ogen

Lijsten hebben de voorkeur wanneer gebruikers snel iets moeten zoeken op een site, zoals wanneer ze de pagina met zoekresultaten doorlezen na het invoeren van hun zoektermen. Lijsten die verticaal zijn en waarbij één element op één rij boven de volgende hulp staat om de ogen van de gebruiker veel beter te richten dan kaarten, omdat lijsten vastliggen terwijl kaarten niet op vaste posities in rijen zitten.

Voor kleinere schermen

Simpel gezegd, kaarten nemen veel meer onroerend goed op het scherm in. Dit maakt hun gebruik op mobiele apparaten en sommige tablets problematisch omdat het gebruikers dwingt om op de pagina naar beneden te bladeren om meer keuzes eerder te zien dan wanneer lijsten worden gebruikt. Omdat de elementen van een lijst gewoon in korte rijen over de lengte van een pagina zitten, kunnen gebruikers meer keuzes zien zonder te hoeven vertrouwen op kortetermijngeheugen (wat degenen die naar een ontwerp op kaart kijken zouden moeten doen wanneer ze naar beneden scrollen) zie meer elementen).

Zodra uw ontwerp vereist dat gebruikers keuzes verderop op het scherm onthouden, zullen ze beginnen tegen te komen cognitieve belasting , wat schadelijk is voor UX. Cognitieve belasting betekent dat uw hersenen harder moeten werken om iets te onthouden terwijl het nog steeds aanvullende, nieuwe informatie verwerkt. Dit leidt op zijn beurt tot een vertraging van de snelheid van taken en mogelijk tot volledige stopzetting van een gebruikerstaak.

In de App store-app van mijn smartphone zijn app-categorieën georganiseerd in een nette, verticale lijst die acht items op één pagina weergeeft, zonder dat ik me zorgen hoef te maken dat ik naar beneden moet scrollen om meer te zien en de eerdere keuzes te onthouden. Als dit was gedaan in een lay-out met de veel grotere kaarten, had ik hoogstens een paar keuzes kunnen zien, waardoor mijn UX werd belemmerd.