site-ul carusel sliders: de ce, cum și când să le folosească (inclusiv 13 Exemple)

să vorbim despre site-ul carusele, aka sliders, aka slideshow-uri, aka galerii.

se pare ca întregul internet are propria variație, dar în mod colectiv ne referim cu toții că elementul de design cu conținutul în mișcare și de multe ori, afișează trei puncte mici pe partea de jos.

Când e vorba de carusele, ori esti pe echipa 👏 sau echipa 🙅. Prima echipă include de obicei clienții, a doua echipă designerii web.

aici, la Ycode, suntem Elveția. Credem că carusele pot fi piesele centrale care fac designul dvs. web mai atrăgător, dar că au și potențialul de a reduce gradul de utilizare a site-ului dvs. web.

în acest articol, vom analiza cele mai bune practici carusel (și ce să evităm). Deoarece carusele pot fi folosite de mai multe ori, vă vom arăta diferite exemple de glisoare făcute bine.

cele mai bune practici de design carusel (sau mai ales, ce să nu faci)

deși sunt utilizate pe multe site-uri web, desenele carusel pot rata cu ușurință marca. Există câteva motive bune de ce. Să începem cu câteva lucruri de evitat înainte de a vă spune despre ce cele mai bune practici carusel ar trebui să utilizați.

interdicții: carusel greșeli pentru a evita

1. conținut: atunci când un carusel dorește să facă prea mult în prea puțin timp, poate provoca ochii vizitatorilor site-ului să se rotească. Textul nu poate fi citit corect, informațiile sunt ratate și vizitatorii își pierd interesul.

2. Design: dacă un glisor este slab conceput și nu se va amesteca în designul site-ului dvs. web, acesta poate fi confundat cu un anunț. Drept urmare, oamenii derulează chiar dincolo de conținut. Se numește orbire banner, un fenomen de design web în care oamenii ignoră conținutul care seamănă cu un anunț—conștient sau inconștient.

3. SEO: din perspectiva SEO, evitați mai multe anteturi H1 dacă utilizați glisoarele ca primul lucru pe pagină. Fiecare pagină web ar trebui să aibă un H1 în codul său HTML. Dacă utilizați mai multe H1-uri din cauza diferitelor diapozitive, Google poate fi confuz cu privire la cuvintele cheie care sunt cele mai importante pentru acea pagină web. De asemenea, structura site-ului poate să nu fie clară. Ambii factori ar putea avea un impact negativ asupra clasamentului dvs.

4. mobil: pentru dispozitivele mobile, cel mai bine este să mergeți pentru glisoare manuale. Asigurați-vă că gesturile sunt acceptate (de exemplu, utilizatorii de telefonie mobilă glisând pentru a afișa diapozitivul următor) și că săgețile sunt afișate clar și suficient de mari pentru a apăsa. Dacă diapozitivele dvs. conțin text, verificați dacă acesta poate fi citit pe ecranele mobile.

5. rotație: Cu durata noastră limitată de atenție în aceste zile, este greu să păstrăm interesul utilizatorului mai mult de câteva secunde. Din moment ce avem toate locurile de a fi, să păstreze slider-suma scăzută (mai puțin de cinci) și să ofere vizitatorilor posibilitatea de a controla Caruselul prin afișarea de control slider. Acest lucru face ca oamenii să nu fie nevoiți să stea și să aștepte următorul diapozitiv.

👍 Do ‘ s: cele mai bune practici carusel

1. păstrați fiecare diapozitiv simplu, astfel încât informațiile pot fi digerate în câteva secunde.

2. faceți designul să se amestece cu restul site-ului dvs. web.

3. lăsați oamenii să controleze rotația cu săgeți clare.

4. aveți suficient timp între diapozitive (5-10 secunde), sau chiar mai bine, renunțați complet la Redare automată.

5. mai puțin este mai mult (atât în design, cât și în cantitatea de diapozitive).

6. înainte de a introduce un carusel, întrebați: acest lucru va adăuga mai multă valoare decât conținutul static?

te-ai răzgândit?

când aveți dubii, testați ambele opțiuni și vedeți ce opțiune generează o rată de conversie mai mare. Deseori, clientii solicita slideshow-uri, deoarece acestea nu sunt clare cu privire la mesajul pe care doresc să promoveze în primul rând. De ce nu arătați totul? Ei cred.

dacă acesta este cazul, lucrarea este în crafting un mesaj mai concentrat—nu folosind un slider. Sau, alege importante USP (punct de vânzare unic) și menționează celelalte mai jos pagina. Oamenii au mai multe șanse să deruleze decât să răsfoiască diapozitivele.

dacă decideți că este un iad da, alegeți fiecare diapozitiv în mod intenționat. Nu adăugați doar toate blogurile sau produsele noi, ci alegeți cu atenție cel mai important conținut care ar putea genera cea mai mare interactivitate din partea utilizatorilor.

13 site-ul Exemple carusel

acum, că știi ce să nu faci, să ne uităm la exemple carusel care sunt cuie-l. Aici sunt 13 site-ul carusel Exemple, de la pagina de start la produs și imagine slideshow-uri.

Homepage carusels

dacă ați crezut că taberele erau deja suficient de împărțite, nu ați întâlnit glisoarele homepage. Unele rădăcini pentru plasarea lor direct în partea de sus (adesea văzute în șabloanele de blog), în timp ce altele nu vor să le vadă implementate nicăieri deasupra pliului.

motivul pentru care oamenii evita plasarea unui carusel homepage direct în partea de sus este pentru că ei cred că acest spațiu ar trebui să fie rezervat pentru un mesaj clar care atrage cititorul pentru a derula în jos și de a afla mai multe. Cu carusele, este greu să transmiți un mesaj puternic. În plus, nu sunteți sigur dacă oamenii văd toate diapozitivele sau derulează chiar pe lângă.

cu toate acestea, există și o mulțime de oameni care adoră să întâmpine vizitatorii cu un carusel de pagină pentru a afișa instantaneu povești sau produse prezentate.

Exemplul 1: Nicole Gibbons Studio

pagina de start carusel de Nicole Gibbons Studio funcționează foarte bine! Asta e bine pentru câteva motive.

• are funcționalitate bună și adaugă valoare. Designerul Nicole arată rapid diferite exemple de interior direct atunci când oamenii intră pe site-ul ei

• slide-urile sunt manuale, astfel încât utilizatorul decide dacă și în ce ritm doresc să flip prin

• nu există nici o suprapunere de text pentru a lua departe de imagini

Exemplul 2: Urban Skin RX

ne place acest carusel compact de la Urban Skin Rx, deoarece are o mare accesibilitate.

include două diapozitive, ambele proiectate atractiv în același stil ca restul site-ului web. Timpul de rotație este setat suficient de lung pentru a citi textul. Fonturile mari și butoanele clear call to action (CTA) facilitează digerarea a ceea ce este diapozitivul.

Notă: dacă parcurgeți pagina principală a mărcii, veți vedea că este adaptată persoanelor care sunt deja familiarizate cu Urban Skin Rx. Accentul este pus pe prezentarea produselor, fără a explica de ce cineva are nevoie de ele în primul rând. De aceea, un glisor de produs se potrivește paginii—nu au nevoie de spațiul antetului pentru a afișa un mesaj clar care îi motivează pe vizitatori să descopere mai multe.

Exemplul 3: Mejuri

ceea ce ne place la acest carusel de la magazinul de bijuterii Mejuri este că arată două lucruri diferite simultan, fără a se simți copleșitor.

întregul carusel conține trei diapozitive, dintre care fiecare are două opțiuni—consultați campania sau cumpărați bijuteriile. Liniile de progresie sunt afișate subtil în partea de jos, deși este posibil să aveți nevoie de ochi de vultur pentru a observa acest lucru. Acesta ar putea fi un punct pentru optimizare.

Exemplul 4: Fresh Brothers Pizza

Cine spune că un cursor trebuie să se întindă pe toată lățimea unei pagini? De asemenea, puteți împărți secțiunile în grile și puteți utiliza glisoare mai mici, cum ar fi pe pagina de pornire a fresh Brothers Pizza.

desigur, cu acest aspect de web design, lucrurile pot obține un pic mai mult. Deși glisoarele arată informații vizitatorilor, ochiul este atras de imaginea mare din stânga. Nu toată lumea va vedea informațiile despre glisor. Cu toate acestea, deoarece informațiile sunt despre măsuri COVID și pizza noi pe care oamenii le vor vedea oricum atunci când își fac comanda, acest lucru nu este mare lucru.

carusele de produse

carusele de produse sunt acolo pentru a atrage vizual oamenii să învețe mai multe despre produs și, sperăm, să-l cumpere!

aceste tipuri de carusele sunt de obicei plasate pe unul dintre cele două locuri de pe site-urile de comerț electronic: pagina de pornire sau pagina produsului. Glisorul poate afișa diferite produse sau un produs în moduri diferite (arătând caracteristicile sale).

exemplul 5: Keys Soulcare

pe această pagină de produs Keys Soulcare, un carusel este utilizat pentru a afișa fiecare element care este inclus în pachetul Harmony ritual. Un glisor se potrivește perfect designului site-ului web, deoarece permite vizitatorilor să vadă toate informațiile relevante fără a fi nevoie să deruleze.

exemplul 6: KeepCup

acest carusel produs de la KeepCup este plasat în mijlocul site-ului de e-commerce și vă permite să răsfoiți cu ușurință prin brand cele mai populare pentru a-go cupe. Luați notă de modul în care sunt plasate numele, prețul, butonul de cumpărare și săgețile—super elegant (recuzită pentru designerii grafici).

exemplul 7: dor de casa

Candle Company dor de casa foloseste o varietate de elemente slider pe site-ul lor de e-commerce, pentru a prezenta lumânări lor, precum și comentarii și citate de la branduri.

la jumătatea paginii de pornire, există această prezentare de diapozitive—o galerie în mișcare a celor mai bine vândute lumânări (ne place conceptul de parfum!). După ce treceți peste un glisor de imagine, acesta se oprește și este afișată o imagine ușor diferită (de exemplu, arătând lumânarea aprinsă).

exemplul 8: Milk Bar

pagini de produse Milk Bar sunt o bucurie pentru a defila prin, și nu doar pentru că imaginile sunt gura-adăpare. Luați pagina web a majoretelor de mai jos, cu elementul glisant din stânga și toate detaliile produsului din dreapta, vizitatorii văd totul la prima vedere.

cu toate acestea, atunci când derulați în jos, veți vedea bannere interactive și mai multe informații despre produs, cum ar fi livrarea, ingredientele, tratamentele similare și un alt carusel care afișează recenziile clienților.

caruseluri de conținut

dacă doriți să adăugați un carusel de conținut pe site-ul dvs. web, rețineți că cel mai valoros conținut trebuie să fie în primul diapozitiv. Diapozitivul inițial va avea întotdeauna cea mai mare expunere, iar afișările scad după fiecare diapozitiv suplimentar.

exemplul 9: Art Of Tea

pe site-ul de mai jos de la Art Of Tea, veți vedea multe lucruri diferite într-un singur glisor pe tot ecranul.

cursorul de deschidere este un CTA să se alăture programului lor de afiliere. Următoarele sunt diapozitive care prezintă noi cutii de ceai, pungi, pachete și agitatoare. Un diapozitiv este, de asemenea, dedicat aderării la clubul lor lunar de ceai.

ceea ce face bine acest design web carusel este că imaginile arată despre ce este vorba în fiecare diapozitiv, iar textul de susținere este menținut la minimum. Un lucru de îmbunătățit sunt butoanele. Când alegeți butoane care au doar o schiță, este greu să le vedeți clar pe imagine.

exemplu 10: Canva Design School

pagina școlii de Design de la Canva este un bun exemplu de instanță în care un carusel este mai eficient decât orice alt element al site-ului web.

deoarece există o mulțime de conținut care trebuie afișat pe pagina de destinație, un carusel ajută la afișarea diferitelor cursuri mai compact. De exemplu, secțiunea tutorial de mai jos ocupă mult mai mult spațiu în comparație cu prezentarea de diapozitive.

Blog carusele

de multe ori template-uri WordPress pentru blog-uri vin cu un element de slider interactiv care arată în mod automat cele mai recente articole.

deși aceasta este o caracteristică excelentă, rămâneți la curent cu articolele care sunt afișate. Unele s-ar putea să nu fie la fel de demne de clic, dar afișate mai întâi în glisorul paginii dvs. de pornire, deoarece sunt publicate cel mai recent. În acest caz, este mai bine să selectați manual blogurile despre care credeți că vor atrage vizitatorii să facă clic.

exemplul 11: COCOCOZY

blogger de design Interior Colette Shelton își deschide blogul cu un glisor care arată o selecție a blogurilor sale. După ce treceți peste, este afișat titlul blogului. Pe mobil, imaginea este afișată cu titlul de sub ea.

Carusele Image

Carusele Image sunt adesea văzute în site-uri de tip portofoliu, unde este folosit pentru a afișa piese ale operei artistului. Asigurați-vă că imaginile dvs. sunt de înaltă calitate și vorbesc de la sine, fără a fi nevoie de text suplimentar.

exemplul 12: Mix Design Collective

Mix Design Collective este o companie de design. Deoarece munca lor este extrem de vizuală, este logic să deschideți site-ul web cu navigarea și un glisor foto direct mai jos.

prezentarea are un amestec de imagini, de la bucătării la băi și camere de zi, astfel încât vizitatorii să-și facă o idee despre stilul și serviciile de design ale colectivului.

Carusele comparație

Sliders funcționează bine atunci când utilizatorii au nevoie pentru a scana rapid printr-o varietate de conținut sau produse. Acesta este exact cazul când oamenii compară elemente. Să aruncăm o privire la câteva exemple.

exemplul 13: Amazon

probabil cel mai cunoscut exemplu de comparație vine de la Amazon. Pe fiecare pagină de produs, veți găsi un carusel cu toate produsele conexe pe care le-ați putea cumpăra. În acest caz, un glisor este mai eficient decât imaginile statice, deoarece permite utilizatorilor să navigheze rapid prin multe produse similare.

ce este luați pe site-ul carusele?

după cum ați citit, glisoarele web pot fi un da vă rog sau un vă rog nu. Totul depinde de modul în care elementul este utilizat în designul dvs. web și de modul în care este ușor de utilizat glisorul. Asigurați-vă că fiecare diapozitiv servește unui scop clar și că experiența generală a utilizatorului este excelentă. Dacă puteți spune cu încredere că un glisor este cel mai bun element pentru a afișa conținutul, sunteți bine să mergeți.