Website carousel sliders: Why, how and when to use them (including 13 examples)

Let ‘ s talk about website carousels, aka sliders, aka slideshows, aka galleries.

vaikuttaa siltä, että koko Internetillä on oma variaationsa, mutta kollektiivisesti me kaikki tarkoitamme, että design-elementti liikkuvalla sisällöllä ja usein, näyttää kolme pientä pistettä alareunassa.

karuselleissa ollaan joko joukkueessa 👏 tai joukkueessa 🙅. Ensimmäiseen tiimiin kuuluvat tyypillisesti asiakkaat, toiseen tiimiin verkkosuunnittelijat.

täällä Ycodessa olemme Sveitsi. Uskomme, että karusellit voivat olla keskipisteitä, jotka tekevät web design houkuttelevampi, mutta että niillä on myös mahdollisuus vetää sivuston käytettävyys alas.

tässä artikkelissa tarkastelemme karusellin parhaita käytäntöjä (ja mitä välttää). Koska karuselleja voidaan käyttää moniin tilaisuuksiin, näytämme erilaisia esimerkkejä hyvin tehdyistä liukusäätimistä.

Karusellisuunnittelun parhaat käytännöt (tai enimmäkseen, mitä ei saa tehdä)

vaikka niitä käytetään monilla verkkosivuilla, karusellimallit voivat helposti jäädä huomaamatta. Siihen on muutama hyvä syy. Aloitetaan joitakin asioita välttää ennen kuin kerromme, mitä Karuselli parhaita käytäntöjä kannattaa käyttää.

👎 kiellot: Karusellivirheitä vältettävä

1. sisältö: kun Karuselli haluaa tehdä liian paljon liian lyhyessä ajassa, se voi saada verkkosivujen kävijöiden silmät pyörimään. Tekstiä ei voi kunnolla lukea, tietoa jää huomaamatta ja kävijöiden mielenkiinto katoaa.

2. suunnittelu: Jos liukusäädin on huonosti suunniteltu ja ei sulaudu sivuston suunnitteluun, se voi erehtyä mainokseksi. Tämän seurauksena ihmiset vierittävät suoraan sisällön ohi. Se on nimeltään banner blindness, web design-ilmiö, jossa ihmiset jättävät huomiotta mainosta muistuttavan sisällön-tietoisesti tai tiedostamatta.

3. SEO: SEO näkökulmasta, välttää useita H1 otsikot jos käytät liukusäätimiä kuin ensimmäinen asia sivulla. Jokaisella web-sivulla pitäisi olla yksi H1 sen HTML-koodi. Jos käytät useita H1s koska eri dioja, Google voi olla hämmentynyt siitä, mitkä avainsanat ovat tärkeimmät kyseisen web-sivun. Myöskään sivuston rakenne ei välttämättä ole selkeä. Molemmat tekijät voivat vaikuttaa kielteisesti sijoituksesi.

4. Mobile: mobiililaitteisiin, se on parasta mennä manuaalinen liukusäätimiä. Varmista, että eleet ovat tuettuja (esim.mobiilikäyttäjät pyyhkäisevät näyttääkseen seuraavan dian) ja että nuolet näkyvät selvästi ja ovat riittävän suuria painamaan. Jos diat sisältävät tekstiä, tarkista, onko se luettavissa mobiilinäytöillä.

5. kierto: Meidän rajallinen keskittymiskyky näinä päivinä, se on vaikea pitää käyttäjän kiinnostusta pidempään kuin muutaman sekunnin. Koska meillä kaikilla on paikkoja olla, pitää liukusäädintä määrä pieni (alle viisi) ja antaa vierailijoille mahdollisuuden hallita Karuselli näyttämällä liukusäätimiä. Näin ihmisten ei tarvitse jäädä odottamaan seuraavaa liukumäkeä.

👍 Do ‘ s: parhaat karusellikäytännöt

1. pidä jokainen dia yksinkertaisena, jotta tiedot voidaan sulattaa muutamassa sekunnissa.

2. tee suunnittelu sulautua muun sivuston.

3. anna ihmisten hallita pyörimistä kirkkailla nuolilla.

4. on tarpeeksi aikaa välillä dioja (5-10 sekuntia), tai vielä parempi, Oja autoplay kokonaan.

5. vähemmän on enemmän (sekä muotoilussa että diojen määrässä).

6. ennen kuin lisäät karusellin, Kysy: tuoko tämä enemmän arvoa kuin staattinen sisältö?

tulitko toisiin ajatuksiin?

jos olet epävarma, testaa molemmat vaihtoehdot ja katso kumpi vaihtoehto tuottaa korkeamman muuntokurssin. Usein asiakkaat pyytävät diaesityksiä, koska he eivät ole selkeitä viestin He haluavat edistää ennen kaikkea. Miksi et näytä kaikkea? He ajattelevat.

jos näin on, työ on keskittyneemmän viestin askartelua—ei liukusäädintä. Tai valitse tärkeä USP (ainutlaatuinen myyntivaltti) ja mainitse muut alempana sivulla. Ihmiset todennäköisemmin vierittävät kuin selaavat diojasi.

jos päätät, että se on helvetti Kyllä, valitse jokainen dia tarkoituksella. Älä vain lisää kaikkia uusia blogeja tai tuotteita, vaan valitse huolellisesti tärkein sisältö, joka voisi tuottaa eniten vuorovaikutteisuutta käyttäjiltä.

13 verkkosivujen karuselliesimerkit

nyt kun tiedät, mitä ei kannata tehdä, katsotaan karuselliesimerkkejä, jotka naulaavat sen. Tässä on 13 sivuston Karuselli esimerkkejä, kotisivulta tuote-ja kuvaesityksiä.

Kotikarusellit

jos luulit, että leirit on jo jaettu tarpeeksi, et ole tavannut kotikaruselleja. Jotkut root asettamalla ne suoraan alkuun (usein nähty blogipohjat), kun taas toiset eivät halua nähdä niitä toteutetaan missä tahansa yläpuolella kertaiseksi.

syy siihen, miksi ihmiset välttävät kotisivukarusellin sijoittamista suoraan yläreunaan, on se, että heidän mielestään tämä tila pitäisi varata selkeälle viestille, joka houkuttelee lukijaa vierittämään alaspäin ja oppimaan lisää. Karuselleilla on vaikea välittää yhtä vahvaa viestiä. Plus, et ole varma, jos ihmiset näkevät kaikki diat tai vierittää oikealle ohi.

on kuitenkin myös paljon ihmisiä, jotka rakastavat vierailijoiden tervehtimistä kotisivukarusellilla, jossa esitellään heti esillä olevia tarinoita tai tuotteita.

Esimerkki 1: Nicole Gibbons Studio

Nicole Gibbons Studion kotisivukaruselli toimii todella hyvin! Se on hyvä parista syystä.

• se on hyvä toiminnallisuus ja lisäarvoa. Suunnittelija Nicole näyttää nopeasti erilaisia sisustusesimerkkejä suoraan, kun ihmiset tulevat hänen sivuilleen

• diat ovat käsikäyttöisiä, joten käyttäjä päättää, haluaako ja millä tahdilla he kelata läpi

• ei ole tekstin päällekkäisyyttä poistaa kuvia

Esimerkki 2: Urban Skin RX

rakastamme tätä kompaktia karusellia Urban Skin RX: stä, sillä se on erittäin saavutettavissa.

siinä on kaksi diaa, jotka molemmat on suunniteltu viehättävästi samaan tyyliin kuin muukin sivusto. Kiertoaika on asetettu riittävän pitkäksi tekstin lukemiseksi. Isojen fonttien ja selkeiden call to action (CTA) – painikkeiden avulla on helppo sulattaa, mistä diassa on kyse.

Huomaa: Jos selaat brändin kotisivuja, huomaat, että se on räätälöity ihmisille, jotka ovat jo tuttuja Urban Skin RX: stä. Fokus on tuotteiden esittelyssä selittämättä, miksi joku niitä ylipäätään tarvitsee. Siksi tuote liukusäädintä sopii sivulle-he eivät tarvitse otsikkotilaa näyttää yksi selkeä viesti, joka motivoi kävijöitä löytää lisää.

esimerkki 3: Mejuri

rakastamme tässä koruliike Mejurin karusellissa sitä, että se näyttää kaksi eri asiaa yhtä aikaa, tuntematta oloaan ylivoimaiseksi.

koko Karuselli sisältää kolme diakuvaa, joista jokaisessa on kaksi vaihtoehtoa—katso kampanja tai shoppaa korut. Eteneminen linjat ovat hienovaraisesti näkyy alareunassa, vaikka saatat tarvita kotkan silmät havaita tämän. Tämä voisi olla optimointipiste.

esimerkki 4: Fresh Brothers Pizza

Kuka sanoo, että liukusäätimen pitää ulottua sivun koko leveydelle? Osioita voi myös pilkkoa ruudukoiksi ja käyttää pienempiä slidereitä, kuten Fresh Brothers-pizzan kotisivuilla.

myönnettäköön, että tällä web design-layoutilla asiat voivat mennä vähän överiksi. Vaikka liukusäätimet näyttävät kävijöille tietoa, katse kiinnittyy vasemmalla näkyvään isoon kuvaan. Kaikki eivät näe liukusäädintä koskevia tietoja. Koska tieto koskee COVID-toimenpiteitä ja uusia pizzoja, joita ihmiset joka tapauksessa näkevät tilausta tehdessään, tämä ei ole iso juttu.

Tuotekarusellit

Tuotekarusellit ovat olemassa houkutellakseen ihmisiä visuaalisesti oppimaan lisää tuotteesta ja No, toivottavasti ostamaan sitä!

tällaiset karusellityypit sijoitetaan yleensä jommallekummalle verkkokauppasivustojen kahdesta kohdasta: kotisivulle tai tuotesivulle. Liukusäädin voi näyttää eri tuotteita tai yksi tuote eri tavoin (osoittaa sen ominaisuuksia).

esimerkki 5: Keys Soulcare

tällä Keys Soulcare-tuotesivulla näytetään karusellilla jokainen Harmony ritual-pakettiin kuuluva esine. Liukusäädin sopii sivuston suunnitteluun täydellisesti,koska sen avulla kävijät näkevät kaikki olennaiset tiedot tarvitsematta vierittää.

esimerkki 6: KeepCup

tämä keepcupin tuotekaruselli on sijoitettu keskelle verkkokauppasivustoa ja sen avulla voit helposti selata brändin suosituimpia to-go-kuppeja. Huomaa, miten nimi, hinta, osta-painike ja nuolet on sijoitettu-super tyylikäs (rekvisiitta graafisille suunnittelijoille).

esimerkki 7: koti-ikävä

Kynttiläyhtiön koti-ikävä käyttää verkkokauppasivustollaan erilaisia liukusäätimiä, jotka esittelevät kynttilöitään sekä brändien arvosteluja ja lainauksia.

kotisivujen puolivälissä on tämä diaesitys-liikuttava Galleria heidän myydyimmistä kynttilöistään (we love the scent concept!). Kun viet kuvan liukusäädintä, se pysähtyy ja näytetään hieman erilainen kuva (esimerkiksi näyttää kynttilän syttymistä).

esimerkki 8: maitobaari

Maitobaarin tuotesivuja on ilo selata, eikä vain siksi, että kuvat ovat suussa sulavia. Ota Cheerleader web-sivu alla, liukusäädintä Elementti vasemmalla ja kaikki tuotetiedot oikealla, kävijät näkevät kaiken ensi silmäyksellä.

kuitenkin, kun vierität alaspäin, näet interaktiivisia bannereita ja lisää tuotetietoja, kuten toimituksia, ainesosia, vastaavia herkkuja ja toisen karusellin, jossa näkyy asiakasarvosteluja.

Sisältökaruselli

jos haluat lisätä sivullesi sisältökarusellin, muista, että arvokkaimman sisällön on oltava ensimmäisessä diassa. Ensimmäinen dia saa aina eniten altistusta, ja vaikutelmat vähenevät jokaisen ylimääräisen dian jälkeen.

esimerkki 9: Art of Tea

alla olevalla Art of Tea-sivustolla näet monia eri asioita yhdessä koko näytön liukusäätimessä.

avauskiitäjä on CTA, joka liittyy heidän kumppaniohjelmaansa. Seuraavaksi on dioja, joissa näkyy uusia teepurkkeja, pusseja, nippuja ja shakereita. Yksi slide on myös omistettu liittyä heidän kuukausittain teekerho.

tämän karusellin web-designin tekee hyvin se, että kuvakieli näyttää, mistä kukin dia kertoo, ja sitä tukeva teksti on pidetty minimissä. Yksi parannettava asia on nappulat. Kun valitset painikkeita, joissa on vain ääriviivat, on vaikea nähdä niitä selvästi kuvassa.

Example 10: Canvan muotoilukoulu

Canvan muotoilukoulun sivu on hyvä esimerkki tapauksesta, jossa karuselli on tehokkaampi kuin mikään muu sivuston Elementti.

koska aloitussivulla näkyy paljon sisältöä, Karuselli auttaa näyttämään eri kurssit tiiviimmin. Esimerkiksi alla oleva opetusohjelma-osio vie paljon enemmän tilaa diaesitykseen verrattuna.

Blogikarusellit

monesti blogien WordPress-Mallit tulevat interaktiivisella liukusäätimellä, joka näyttää automaattisesti uusimmat artikkelit.

vaikka tämä on hieno ominaisuus, pysy tietoisena siitä, mitkä artikkelit näkyvät. Jotkut eivät ehkä ole yhtä klikkauksen arvoisia, mutta näytetään ensin kotisivusi liukusäädintä, koska ne ovat viimeksi julkaistu. Tässä tapauksessa, se on parempi manuaalisesti valita blogit luulet houkutella kävijöitä klikkaa.

esimerkki 11: COCOCOZY

Sisustusbloggaaja Colette Shelton avaa blogiaan liukusäätimellä, jossa näkyy valikoima hänen blogejaan. Kun leijut yli, blogin otsikko näkyy. Mobiilissa kuva näkyy otsikon alla.

Kuvakaruselleja

Kuvakaruselleja näkee usein portfoliomaisilla sivustoilla, joilla esitellään taiteilijan töitä. Varmista, että kuvat ovat laadukkaita ja puhuvat puolestaan, ilman ylimääräistä tekstiä.

esimerkki 12: Mix Design Collective

Mix Design Collective on muotoilualan yritys. Koska heidän työnsä on hyvin visuaalista, on järkevää avata verkkosivusto navigoinnin ja valokuva liukusäädintä suoraan alla.

diaesityksessä on sekoitus kuvia keittiöistä kylpyhuoneisiin ja olohuoneisiin, joten kävijät saavat käsityksen kollektiivin muotoilutyylistä ja palveluista.

Vertailukarusellit

liukusäätimet toimivat hyvin, kun käyttäjien on nopeasti skannattava läpi erilaisia sisältöjä tai tuotteita. Näin on juuri silloin, kun ihmiset vertailevat kohteita. Katsotaanpa joitakin esimerkkejä.

esimerkki 13: Amazon

luultavasti tunnetuin vertailuesimerkki tulee Amazonista. Jokaiselta tuotesivulta löydät karusellin, jossa on kaikki siihen liittyvät tuotteet, joita voit myös ostaa. Tässä tapauksessa liukusäädin on tehokkaampi kuin staattiset kuvat, koska sen avulla käyttäjät voivat nopeasti selata monia samanlaisia tuotteita.

mitä mieltä olet verkkosivujen karuselleista?

kuten olet lukenut, web-liukusäätimet voivat olla kyllä kiitos tai ole hyvä ei. Kaikki riippuu siitä, miten elementtiä käytetään web-suunnittelussa ja kuinka käyttäjäystävällinen liukusäädin on navigoida. Varmista, että jokainen dia palvelee selkeä tarkoitus ja yleinen käyttökokemus on loistava. Jos voit luottavaisesti sanoa, että liukusäädin on paras elementti sisällön näyttämiseen, olet hyvä mennä.