weboldal körhinta csúszkák: miért, hogyan és mikor kell használni őket (beleértve a 13 példát)

beszéljünk a weboldal körhintákról, más néven csúszkákról, más néven diavetítésekről, más néven galériákról.

úgy tűnik, hogy az egész internetnek megvan a maga változata, de együttesen mindannyian azt értjük, hogy a mozgó tartalommal rendelkező design elem gyakran három kis pontot jelenít meg az alján.

ha körhintákról van szó, akkor vagy a csapat (team), vagy a csapat (team) (team), vagy a csapat (team) (team). Az első csapat jellemzően az ügyfelek, a második csapat a webes tervezők.

itt, az Ycode-nál, Svájc vagyunk. Úgy gondoljuk, hogy a körhinták lehetnek a középpontok, amelyek vonzóbbá teszik a webdesignot, de képesek arra is, hogy a webhely használhatóságát lefelé húzzák.

ebben a cikkben megvizsgáljuk a körhinta legjobb gyakorlatait (és mit kell elkerülni). Mivel a körhinta számos alkalommal használható, megmutatjuk a jól elvégzett csúszkák különböző példáit.

Carousel design best practices (vagy leginkább, mit ne tegyünk)

bár sok weboldalon használják őket, a carousel designs Könnyen elmulaszthatja a jelet. Van néhány jó oka annak, hogy miért. Kezdjük néhány elkerülendő dologgal, mielőtt elmondanánk, hogy milyen körhinta legjobb gyakorlatokat kell használnia.

ons: körhinta hibák elkerülése

1. tartalom: Ha egy körhinta túl kevés idő alatt túl sokat akar tenni, akkor a weboldal látogatóinak szeme foroghat. A szöveget nem lehet megfelelően olvasni, az információk hiányoznak, a látogatók elveszítik érdeklődésüket.

2. tervezés: ha egy csúszka rosszul van megtervezve, és nem illeszkedik a webhelytervezésbe, akkor tévedhet, mint egy hirdetés. Ennek eredményeként az emberek jobbra görgetnek a tartalom mellett. Banner vakságnak hívják, egy webdesign jelenségnek, ahol az emberek figyelmen kívül hagyják a hirdetésre emlékeztető tartalmat—tudatosan vagy öntudatlanul.

3. SEO: SEO szempontból kerülje a több H1 fejlécet, ha csúszkákat használ az első dologként az oldalon. Minden weboldalnak egy H1-nek kell lennie a HTML-kódjában. Ha több H1-et használ a különböző diák miatt, akkor a Google összezavarodhat abban, hogy mely kulcsszavak a legfontosabbak az adott weboldal számára. Lehet, hogy a weboldal felépítése sem egyértelmű. Mindkét tényező negatívan befolyásolhatja rangsorolását.

4. Mobil: Mobil eszközök esetén a legjobb a kézi csúszkák használata. Győződjön meg arról, hogy a kézmozdulatok támogatottak (pl. a mobil felhasználók ellop a következő dia megjelenítéséhez), és hogy a nyilak jól láthatóak és elég nagyok ahhoz, hogy megnyomják. Ha a diák szöveget tartalmaznak, ellenőrizze, hogy olvasható-e a mobil képernyőkön.

5. forgás: A mi korlátozott figyelmet span ezekben a napokban, nehéz tartani a felhasználó érdeklődését hosszabb, mint néhány másodperc. Mivel mindannyiunknak van helye, tartsa alacsonyan a csúszka összegét (kevesebb, mint öt), és adjon lehetőséget a látogatóknak a körhinta vezérlésére a csúszka vezérlőinek bemutatásával. Ez biztosítja, hogy az embereknek ne kelljen ülniük és várniuk a következő diára.

👍 Do ‘ s: körhinta legjobb gyakorlatok

1. tartsa minden diát egyszerű, így az információ másodperceken belül emészthető.

2. a design keveredjen a webhely többi részével.

3. hagyja, hogy az emberek tiszta nyilakkal ellenőrizzék a forgatást.

4. van elég idő a diák között (5-10 másodperc), vagy még jobb, árok automatikus lejátszás összesen.

5. a kevesebb több (mind a tervezés, mind a diák mennyisége).

6. mielőtt beszúrna egy körhintát, kérdezze meg: ez több értéket fog hozzáadni, mint a statikus tartalom?

meggondolta magát?

ha kétségei vannak, tesztelje mindkét opciót, és nézze meg, melyik opció generál magasabb konverziós arányt. Gyakran az ügyfelek diavetítéseket kérnek, mert nem egyértelműek az üzenet, amelyet elsősorban hirdetni akarnak. Miért nem mutat meg mindent? Azt hiszik.

ha ez a helyzet, akkor a munka egy fókuszáltabb üzenet elkészítésén alapul—csúszka használata nélkül. Vagy válassza ki a fontos USP-t (egyedi értékesítési pont), és említse meg a többieket az oldalon. Az emberek nagyobb valószínűséggel görgetnek, mint átlapozzák a diákat.

ha úgy dönt, hogy ez egy pokol igen, válasszon minden diát szándékosan. Ne csak adja hozzá az összes új blogot vagy terméket, hanem gondosan válassza ki a legfontosabb tartalmat, amely a legtöbb interaktivitást generálhatja a felhasználóktól.

13 weboldal körhinta példák

most, hogy tudja, mit ne tegyen, nézzük meg a körhinta példákat, amelyek szegezik. Íme 13 weboldal körhinta példa, a kezdőlaptól a termékig és a diavetítésekig.

honlap körhinták

ha azt gondoltad, hogy a táborok már eléggé megosztottak, akkor még nem találkoztál honlap csúszkákkal. Néhány gyökér, amely közvetlenül a tetejére helyezi őket (gyakran a blogsablonokban látható), míg mások nem akarják, hogy a hajtás felett bárhol megvalósítsák őket.

az ok, amiért az emberek nem helyezik el a honlap körhintáját közvetlenül a tetején, az az, hogy úgy vélik, hogy ezt a helyet egy világos üzenet számára kell fenntartani, amely arra csábítja az olvasót, hogy görgessen lefelé és tudjon meg többet. A körhintákkal nehéz egy erős üzenetet közvetíteni. Ráadásul nem biztos abban, hogy az emberek látják-e az összes diát, vagy jobbra görgetnek-e.

ugyanakkor rengeteg olyan ember is van, aki szereti a látogatókat egy honlap körhintával üdvözölni, hogy azonnal bemutassák a kiemelt történeteket vagy termékeket.

1. példa: Nicole Gibbons Studio

A Nicole Gibbons Studio Kezdőlap körhinta nagyon jól működik! Ez jó néhány okból.

• jó funkcionalitással rendelkezik és hozzáadott értéket képvisel. Nicole tervező gyorsan megmutatja a különböző belső példákat közvetlenül, amikor az emberek belépnek a weboldalára

• a diák kézi, így a felhasználó eldönti, hogy milyen ütemben akarnak átlapozni

• nincs olyan szöveg átfedés, amely elvenné a képeket

2.példa: Urban Skin RX

szeretjük ezt a kompakt körhintát az Urban Skin RX-től, mivel nagyszerű hozzáférhetőséggel rendelkezik.

két diát tartalmaz, mindkettőt vonzóan tervezték, ugyanolyan stílusban, mint a weboldal többi részét. A forgatási idő elég hosszú ahhoz, hogy elolvassa a szöveget. A nagy betűtípusok és a clear call to action (CTA) gombok segítségével könnyen megemészthető, hogy mi a dia.

Megjegyzés: Ha végiggörgeti a márka honlapját, látni fogja, hogy olyan emberekre van szabva, akik már ismerik az Urban Skin RX-et. A hangsúly a termékek bemutatására irányul, anélkül, hogy elmagyarázná, miért van szüksége valakinek. Ezért illeszkedik egy termékcsúszka az oldalhoz—nincs szükségük a fejlécterületre egy egyértelmű üzenet megjelenítéséhez, amely motiválja a látogatókat, hogy többet fedezzenek fel.

3.példa: Mejuri

amit szeretünk ebben a körhintában a mejuri ékszerboltból, az az, hogy egyszerre két különböző dolgot mutat, anélkül, hogy elsöprő érzés lenne.

a teljes körhinta három diát tartalmaz, amelyek mindegyikének két lehetősége van—nézze meg a kampányt vagy vásárolja meg az ékszereket. A progressziós vonalak alul finoman jelennek meg, bár ennek észleléséhez szükség lehet sas szemekre. Ez lehet az optimalizálás pontja.

4. példa: Fresh Brothers Pizza

ki mondja, hogy egy csúszkának át kell terjednie az oldal teljes szélességére? A szakaszokat rácsokra is bonthatja, és kisebb csúszkákat is használhat, mint például a Fresh Brothers Pizza honlapján.

megadott, ezzel a web design elrendezés, a dolgok egy kicsit sok. Bár a csúszkák a látogatók adatait mutatják, a szemet a bal oldali nagy kép vonzza. Nem mindenki fogja látni a csúszka adatait. Mivel azonban az információ a COVID intézkedésekről és az új pizzákról szól, amelyeket az emberek egyébként is látni fognak megrendelésük során, ez nem nagy ügy.

termék körhinta

termék körhinta vannak, hogy vizuálisan csábítják az embereket, hogy többet megtudjanak a termékről, és remélhetőleg megveszik!

az ilyen típusú körhintákat általában az e-kereskedelmi webhelyek két pontjának egyikére helyezik: a kezdőlapra vagy a termékoldalra. A csúszka különböző termékeket vagy egy terméket különböző módon jeleníthet meg (bemutatva annak jellemzőit).

5.példa: Keys Soulcare

ezen a Keys Soulcare termékoldalon egy körhinta jelenik meg a Harmony ritual csomag minden egyes elemében. A csúszka tökéletesen illeszkedik a weboldal kialakításához, mivel lehetővé teszi a látogatók számára az összes releváns információ megtekintését anélkül, hogy görgetniük kellene.

6. példa: KeepCup

ez a KeepCup termék körhinta az e-kereskedelmi webhely közepén helyezkedik el, és lehetővé teszi a márka legnépszerűbb to-go csészéinek egyszerű böngészését. Vegye figyelembe, hogy a név, az ár, a Vásárlás gomb és a nyilak kerülnek—super sleek (kellékek a grafikusok).

7.példa: honvágy

Candle company honvágy használ különböző csúszka elemek az e-kereskedelmi honlapján, hogy bemutassa a gyertyák, valamint vélemények és idézetek márkák.

a honlap közepén van ez a diavetítés-mozgó galéria a legkelendőbb gyertyáikról (szeretjük az illatkoncepciót!). Ha az egérmutatót egy Képcsúszka fölé viszi, az megáll, és egy kissé eltérő kép jelenik meg (például a gyertya meggyújtása).

8.példa: Milk Bar

Milk Bar termékoldalait öröm végiggörgetni, és nem csak azért, mert a képek ínycsiklandóak. Vegyük az alábbi pompomlány weboldalt, a bal oldali csúszka elemmel, a jobb oldalon pedig az összes termékadattal, a látogatók első pillantásra mindent látnak.

ha azonban lefelé görget, interaktív szalaghirdetéseket és további termékinformációkat láthat, mint például a szállítás, az összetevők, a hasonló finomságok és egy másik körhinta, amely megjeleníti az ügyfelek véleményét.

tartalom körhinta

ha tartalom körhintát szeretne hozzáadni a webhelyéhez, ne feledje, hogy a legértékesebb tartalomnak az első dián kell lennie. A kezdeti dia mindig a legnagyobb expozíciót kapja, a megjelenítések pedig minden további dia után csökkennek.

9. példa: Art of Tea

az Art of Tea alábbi weboldalán sok különböző dolgot láthat egy teljes képernyős csúszkában.

a nyitó csúszka egy CTA, amely csatlakozik az affiliate programjukhoz. Következik a diák mutatja az új tea konzervdobozok, táskák, kötegek és shakers. Az egyik diát a havi teaklubjukhoz való csatlakozásnak is szentelik.

amit ez a körhinta webdesign jól csinál, az az, hogy a képek megmutatják, miről szól az egyes diák, és a támogató szöveg minimális. Az egyik dolog, amit javítani kell, a gombok. Ha olyan gombokat választ, amelyeknek csak vázlata van, nehéz tisztán látni őket a képen.

10. példa: Canva Design School

a Canva Design School oldala jó példa arra, hogy egy körhinta hatékonyabb, mint bármely más weboldal elem.

mivel sok tartalom jelenik meg a céloldalon, a körhinta segít a különböző kurzusok kompaktabb megjelenítésében. Például az alábbi bemutató szakasz sokkal több helyet foglal el a diavetítéshez képest.

Blog carousels

sokszor WordPress sablonok blogok jön egy interaktív csúszka elem, amely automatikusan megjeleníti a legújabb cikkeket.

bár ez egy nagyszerű funkció, ne feledje, hogy mely cikkek jelennek meg. Lehet, hogy egyesek nem olyan kattintásra méltóak, de először a Kezdőlap csúszkájában jelennek meg, mert legutóbb közzétették őket. Ebben az esetben jobb, ha manuálisan választja ki azokat a blogokat, amelyekről úgy gondolja, hogy a látogatókat kattintásra csábítják.

11. példa: COCOCOZY

Colette Shelton belsőépítészeti blogger egy csúszkával nyitja meg blogját, amely a blogjainak válogatását mutatja. Ha az egérmutatót fölé viszi, megjelenik a blog címe. Mobilon a kép az alatta lévő címmel jelenik meg.

Image caroussels

Image caroussels gyakran látható portfolió-szerű honlapok, ahol ez használt megjelenítéséhez darab a művész munkáját. Győződjön meg arról, hogy a képek kiváló minőségűek és magukért beszélnek, anélkül, hogy további szövegre lenne szükség.

12. példa: Mix Design Collective

Mix Design Collective egy tervező cég. Mivel munkájuk rendkívül vizuális, érdemes megnyitni a weboldalt a navigációval és egy fotó csúszkával közvetlenül alatta.

a diavetítés képek keverékét tartalmazza, a konyhától a fürdőszobáig és a nappaliig, így a látogatók képet kapnak a kollektíva tervezési stílusáról és szolgáltatásairól.

összehasonlítás körhinta

a csúszkák jól működnek, ha a felhasználóknak gyorsan át kell vizsgálniuk a különféle tartalmakat vagy termékeket. Pontosan ez a helyzet, amikor az emberek összehasonlítják az elemeket. Vessünk egy pillantást néhány példára.

13.példa: Amazon

vitathatatlanul a legismertebb összehasonlító példa az Amazon-tól származik. Minden termékoldalon talál egy körhintát az összes kapcsolódó termékkel, amelyet meg is vásárolhat. Ebben az esetben a csúszka hatékonyabb, mint a statikus képek, mivel lehetővé teszi a felhasználók számára, hogy gyorsan böngészhessenek sok hasonló termék között.

mi a véleménye a weboldal körhintáiról?

ahogy olvastad, a webes csúszkák lehetnek igen kérem vagy kérem nem. Minden attól függ, hogy az elemet hogyan használják a webdesignban, és mennyire felhasználóbarát a csúszka a navigáláshoz. Győződjön meg róla, hogy minden dia egyértelmű célt szolgál, és az általános felhasználói élmény nagyszerű. Ha magabiztosan mondhatja, hogy a csúszka a legjobb elem a tartalom megjelenítéséhez, akkor jó.