Kortit vs. luettelot, miten ne vaikuttavat UX: ään

Kaksi yleisimpiä tapoja järjestää verkkosivujen sisältöä näinä päivinä on korttien ja luetteloiden käyttäminen. Jokaisella on omat edut ja haitat. Vaikka luettelot ovat olleet verkon alkuajoista lähtien, korttipohjainen muotoilu on vasta äskettäin tullut voima, johon on otettava huomioon ja joka on yhä suosittu sisältöorganisaation valinta.

Kortit ja luettelot ovat ainutlaatuisia tapoja näyttää sisältöä, mikä tarkoittaa, että ne ovat parempia ja huonompia tietyissä tilanteissa. Web-suunnittelijoiden avain tietenkin on ymmärrys, kun käytät jokaista, antaa käyttäjille paremman käyttökokemuksen. Vastaukset voivat vain yllättää sinut ja saada sinut tarkastelemaan suunnitteluperiaatteita hieman eri tavalla.

Tässä tutkimme, milloin se on sopiva web-suunnittelussa käyttää kortteja versioita ja päinvastoin.

Mikä kortti on? Mikä on lista?

Auta meitä ymmärtämään, kun käytät korttia tai luetteloa, sopii parhaiten UX-tarkoituksiin. Se auttaa meitä suuresti ymmärtämään, mitä kukin on ja mitä kukin tekee (tai pitäisi tehdä).

Kortti on kontti, joka näyttää eri bittiä liittyvistä tiedoista, joista käyttäjät saavat entistä enemmän tietoa. Vaikka se on edelleen litteän muotoinen tuote, se on oikeutetusti luokiteltu Flat Design 2.0: ksi, koska sillä on tavallisesti vaaleita 3D-tehosteita, kuten pudotusvarjoja, jotka osoittavat napsautettavuutta. 3D-vaikutukset, kuten kyseinen visuaalinen syvyystoiminto käyttäjän merkitsijiksi, kertoivat heille, että he voivat klikata lisätietoja.

Mielenkiintoista on, että kortilla on jotain dikotomia, koska se muistuttaa tavallisesti pelikorttia sekä muodoltaan että kooltaan. Tämä viittaa vanhentuneeseen skitomorfismiin, jossa graafiset elementit muistuttivat todellisia kohteita.

Luettelo on sivu, jossa käyttäjän hakukriteerit tai selaustottumukset vievät ne. Listaussivu sisältää olennaisesti useita eri ehdokkaita tai merkintöjä. Siksi luettelon on helpotettava tehokasta ja nopeaa silmän skannausta oikealle UX: lle. Tämä on tärkeä erottelu, joka auttaa meitä erottamaan, kun luettelo on käyttökelpoisuuden kannalta sopivampi kuin kortti.

Milloin kortteja käytetään

Nyt, kun tunnemme korttien ja luetteloiden tärkeimmät erot, on helppoa tuntea luottamus, kun jokainen käyttö sopii web-suunnitteluun.

Tietojen selaamiseen (toisin kuin haku)

Kortit vaikeuttavat tai jopa mahdottavat käyttäjille helposti havaita sisällön tärkeyttä. Esimerkiksi kortit eivät anna selkeää tietoa järjestystä, jossa sisältöä pitäisi tarkastella sivulta, koska korttien ääriviivat / reunat näyttävät samanlaisilta. Varmasti perusseurantaan liittyvä tutkimus kertoo aina, että käyttäjät alkavat ensin sivun yläosasta ja vasemmasta sisällöstä, mutta listat tekevät siitä intuitiivisemmaksi, jotta käyttäjät voivat noudattaa tätä perustavaa laatua olevaa tapaa absorboida verkko-sisältöä.

Siksi korttien käyttäminen suurien kokoelmien selaamiseen - kuten esimerkiksi Pinterestissä - on ihanteellinen. Kun luet vain hakutuloksia Pinterestissä, sen sijaan, että määrität, missä järjestyksessä se on, kortin perustuvien tulosten äärettömän selauksen avulla selaaminen on houkutteleva, hauska ja helppo. Aina kun näet jotain mielenkiintoista, voit napsauttaa korttia välittömästi saadaksesi lisätietoja. Se on instant-tyydytystä.

Useita eriä varten

Sovelluksesta tai ohjelmasta riippuen lopulta kohtaat kojelaudan, jossa käytetään korttimallia, jotta eri sisältötyyppien välillä olisi helppo erottaa toisistaan. Tämä on esimerkki korttien lujuudesta, jotta käyttäjät voivat nopeasti tunnistaa eri hallitsemaasi sisältötyyppiä.

Koska kortit käyttävät rajoja visuaalisten rajojen luomiseen, he ovat ihanteellisia eri elementtien ryhmittelyssä.

Milloin luetteloita käytetään

Luettelot voivat olla hieman yksinkertaisempia kuin kortit, ehkä siksi, että ne ovat olleet pidempään Web-suunnittelussa. Tuloksena on yleensä helpompi määrittää, milloin niitä käytetään hyvin.

Tehokkaaseen silmäskannaukseen

Luettelot ovat suositeltavia, kun käyttäjien on etsittävä nopeasti haluamaasi sisältöä sivustoon, kun he hakevat hakutulossivua hakutermiensa kirjoittamisen jälkeen. Luettelot, jotka ovat pystysuoria ja joissa yksi elementti sijaitsee yhdellä rivillä seuraavalla yläpuolella, auttaa tarkentamaan käyttäjän silmät paljon paremmin kuin kortit, koska luettelot ovat kiinteät, kun taas kortit eivät ole kiinteissä asemissa riveissä.

Pienemmille näytöille

Yksinkertaisesti sanottuna, kortit ottavat enemmän kiinteistöjä näytölle. Tämä tekee niiden käytöstä mobiililaitteille ja jotkin tabletit ongelmallisiksi, koska se pakottaa käyttäjiä vierittämään sivua alaspäin nähdäksesi enemmän valintoja aikaisemmin kuin käytettäessä listoja. Koska luettelon elementit istuvat vain lyhyillä rivillä sivun pituudella, käyttäjät voivat nähdä enemmän valintoja ilman, että tarvitsisi luottaa lyhytaikaiseen muistiin (jotka korttikohtaisen suunnittelun katsovat joutuisivat tekemään, kun he alkavat vierittää alaspäin katso lisää elementtejä).

Heti kun suunnittelusi vaatii, että käyttäjät muistavat valintoja näytöllä, he kohtaavat kohtaamaan kognitiivinen kuorma , mikä vahingoittaa UX: tä. Kognitiivinen kuorma tarkoittaa sitä, että aivojen on tehtävä töitä muistaa jotain, kun se vielä käsittelee uusia, uusia tietoja. Tämä puolestaan hidastaa tehtävien nopeutta ja mahdollisesti täydellistä käyttäjätehtävän hylkäämistä.

Sovelluskategoriat järjestetään älypuhelimen App Store -sovellukselle siistiksi, pystysuoraan luetteloon, jossa on kahdeksan sivun kohdetta, mutta en ole huolestunut siitä, että sinun on vieritettävä alaspäin nähdäksesi enemmän ja muista aikaisempia valintoja. Jos tämä olisi tehty suunnitelma paljon suurempien korttien kanssa, olisin voinut nähdä vain muutamia valintoja, mikä haittaisi UX: iäni.