suwaki karuzelowe witryny: dlaczego, jak i kiedy ich używać (w tym 13 przykładów)

porozmawiajmy o karuzelach witryny, czyli suwakach, pokazach slajdów, galeriach.

wydaje się, że cały internet ma swoją własną odmianę, ale łącznie wszyscy mamy na myśli, że element projektu z ruchomą treścią i często wyświetla trzy małe kropki na dole.

jeśli chodzi o karuzele, jesteś albo w drużynie 👏, albo w drużynie 🙅. Pierwszy zespół zazwyczaj obejmuje klientów, drugi zespół projektantów stron internetowych.

tutaj w Ycode jesteśmy Szwajcarią. Wierzymy, że karuzele mogą być centralnym elementem, który sprawia, że twój projekt jest bardziej atrakcyjny, ale mają również potencjał, aby obniżyć użyteczność Twojej witryny.

w tym artykule przyjrzymy się najlepszym praktykom karuzeli (i czego unikać). Ponieważ karuzele mogą być używane na wiele okazji, pokażemy Ci różne przykłady dobrze wykonanych suwaków.

najlepsze praktyki projektowania karuzeli (lub głównie, czego nie robić)

chociaż są one używane na wielu stronach internetowych, projekty karuzeli mogą łatwo przegapić znak. Jest kilka dobrych powodów. Zacznijmy od kilku rzeczy, których należy unikać, zanim powiemy ci o najlepszych praktykach karuzeli, z których powinieneś korzystać.

Don Don ‘ ts: błędy karuzeli, których należy unikać

1. treść: gdy Karuzela chce zrobić za dużo w zbyt krótkim czasie, może spowodować, że oczy odwiedzających witrynę zaczną się kręcić. Tekst nie może być poprawnie odczytany, informacje są pominięte, a odwiedzający tracą zainteresowanie.

2. projekt: jeśli suwak jest źle zaprojektowany i nie wpasuje się w projekt witryny, może zostać mylony z reklamą. W rezultacie ludzie przewijają zawartość w prawo. Nazywa się to ślepota banerowa, zjawisko projektowania stron internetowych, w którym ludzie ignorują treści przypominające reklamę-świadomie lub nieświadomie.

3. SEO: z punktu widzenia SEO unikaj wielu nagłówków H1, jeśli używasz suwaków jako pierwszej rzeczy na stronie. Każda strona internetowa powinna mieć jeden H1 w swoim kodzie HTML. Jeśli używasz kilku H1 z powodu różnych slajdów, Google może być zdezorientowany, które słowa kluczowe są najważniejsze dla tej strony internetowej. Ponadto struktura strony internetowej może nie być jasna. Oba czynniki mogą negatywnie wpłynąć na ranking.

4. mobilny: w przypadku urządzeń mobilnych najlepiej wybrać suwaki ręczne. Upewnij się, że gesty są obsługiwane (np. użytkownicy mobilni przesuwają, aby pokazać następny slajd) i że strzałki są wyraźnie pokazane i wystarczająco duże, aby nacisnąć. Jeśli slajdy zawierają tekst, sprawdź, czy jest czytelny na ekranach mobilnych.

5. rotacja: Przy naszym ograniczonym zakresie uwagi w dzisiejszych czasach trudno jest utrzymać zainteresowanie użytkownika dłużej niż kilka sekund. Ponieważ wszyscy mamy miejsca do odwiedzenia, utrzymuj ilość suwaków na niskim poziomie (mniej niż pięć) i daj odwiedzającym możliwość kontrolowania karuzeli, pokazując elementy sterujące suwakami. Dzięki temu ludzie nie muszą siedzieć i czekać na następny slajd.

👍 Do ‘ S: najlepsze praktyki karuzeli

1. Zachowaj każdy slajd prosty, aby informacje mogły być trawione w ciągu kilku sekund.

2. spraw, aby projekt komponował się z resztą witryny.

3. pozwól ludziom kontrolować obrót za pomocą wyraźnych strzałek.

4. mają wystarczająco dużo czasu między slajdy (5-10 sekund), a nawet lepiej, porzucić autoplay całkowicie.

5. mniej znaczy więcej (zarówno w projektowaniu, jak i ilości prowadnic).

6. zanim wstawisz karuzelę, zapytaj: czy to doda więcej wartości niż zawartość statyczna?

masz wątpliwości?

w razie wątpliwości przetestuj obie opcje i sprawdź, która z nich generuje wyższy współczynnik konwersji. Często klienci proszą o pokazy slajdów, ponieważ nie są pewni, co do przesłania, które chcą promować. Dlaczego nie pokazać wszystkiego? Myślą.

jeśli tak, praca polega na tworzeniu bardziej skoncentrowanej wiadomości—nie za pomocą suwaka. Lub wybierz ważny USP (Unique selling Point) i wymień pozostałe na dalszej stronie. Ludzie częściej przewijają niż przeglądają slajdy.

jeśli zdecydujesz, że to piekło tak, wybierz każdy slajd celowo. Nie dodawaj tylko wszystkich nowych blogów lub produktów, ale starannie wybieraj najważniejsze treści, które mogą wygenerować największą interaktywność od użytkowników.

13 przykłady karuzeli

teraz, gdy wiesz, czego nie robić, spójrzmy na przykłady karuzeli, które go przybijają. Oto przykłady karuzeli 13, od strony głównej po pokazy slajdów produktów i obrazów.

Strona główna karuzele

jeśli uważasz, że obozy są już wystarczająco podzielone, nie spotkałeś suwaków strony głównej. Niektóre root do umieszczania ich bezpośrednio na górze (często widoczne w szablonach blogów), podczas gdy inni nie chcą, aby je zaimplementowane gdziekolwiek powyżej krotnie.

powodem, dla którego ludzie unikają umieszczania karuzeli strony głównej bezpośrednio na górze, jest to, że uważają, że to miejsce powinno być zarezerwowane dla jasnego komunikatu, który zachęca czytelnika do przewinięcia w dół i dowiedzenia się więcej. Z karuzelami trudno przekazać jeden mocny przekaz. Dodatkowo, nie jesteś pewien, czy ludzie widzą wszystkie slajdy lub przewijają obok.

jednak istnieje również wiele osób, które uwielbiają witać odwiedzających karuzelą strony głównej, aby natychmiast pokazać polecane historie lub produkty.

przykład 1: Nicole Gibbons Studio

Karuzela Główna Nicole Gibbons Studio działa naprawdę dobrze! To dobre z kilku powodów.

• ma dobrą funkcjonalność i wartość dodaną. Projektantka Nicole szybko pokazuje różne przykłady wnętrz bezpośrednio, gdy ludzie wchodzą na jej stronę internetową

• slajdy są ręczne, więc użytkownik decyduje, czy i w jakim tempie chce je przerzucić

• nie ma nakładania się tekstu na obraz

przykład 2: Urban Skin RX

uwielbiamy tę kompaktową karuzelę od Urban Skin RX, ponieważ ma świetną dostępność.

zawiera dwa slajdy, oba atrakcyjnie zaprojektowane w tym samym stylu, co reszta strony. Czas obrotu jest ustawiony na tyle długo, aby odczytać tekst. Duże czcionki i wyraźne przyciski wezwania do działania (CTA) ułatwiają strawienie tego, o czym jest slajd.

Uwaga: Jeśli przejdziesz przez stronę główną marki, zobaczysz, że jest ona dostosowana do osób, które już znają Urban Skin RX. Nacisk kładziony jest na prezentowanie produktów, bez wyjaśniania, dlaczego ktoś ich potrzebuje w pierwszej kolejności. Dlatego suwak produktu pasuje do strony—nie potrzebują miejsca na nagłówek, aby pokazać jeden wyraźny komunikat, który motywuje odwiedzających do odkrywania więcej.

przykład 3: mejuri

to, co kochamy w tej karuzeli ze sklepu jubilerskiego Mejuri, to to, że pokazuje dwie różne rzeczy na raz, bez uczucia przytłaczającego.

Cała Karuzela zawiera trzy slajdy, z których każdy ma dwie opcje-zobacz kampanię lub kup biżuterię. Linie postępu są subtelnie pokazane na dole, ale możesz potrzebować oczu orła, aby to zauważyć. To może być punkt do optymalizacji.

przykład 4: Fresh Brothers Pizza

kto mówi, że suwak musi rozciągać się na całą szerokość strony? Możesz również podzielić sekcje na siatki i użyć mniejszych suwaków, jak na stronie głównej Fresh Brothers Pizza.

przyznaję, z tym układem strony internetowej może być trochę za dużo. Chociaż suwaki pokazują informacje o odwiedzających, oko przyciąga duży obraz po lewej stronie. Nie wszyscy zobaczą informacje o suwaku. Ponieważ jednak informacje dotyczą środków COVID i nowych pizz, które ludzie i tak zobaczą podczas składania zamówienia, nie jest to wielka sprawa.

karuzele produktowe

karuzele produktowe są po to, aby wizualnie zachęcić ludzi do poznania więcej o produkcie i cóż, miejmy nadzieję, że go kupisz!

tego typu karuzele są zazwyczaj umieszczane na jednym z dwóch miejsc w witrynach e-commerce: stronie głównej lub stronie produktu. Suwak może pokazywać różne produkty lub jeden produkt na różne sposoby (pokazując jego cechy).

przykład 5: Keys Soulcare

na tej stronie produktu Keys Soulcare, karuzela jest używana do wyświetlania każdego elementu, który jest zawarty w pakiecie Harmony ritual. Suwak idealnie pasuje do projektu strony, ponieważ pozwala odwiedzającym zobaczyć wszystkie istotne informacje bez konieczności przewijania.

przykład 6: KeepCup

ta Karuzela produktów od KeepCup jest umieszczona pośrodku strony e-commerce i pozwala łatwo przeglądać najpopularniejsze kubki marki to-go. Zwróć uwagę na to, jak nazwa, cena, przycisk Kup i strzałki są umieszczone-super eleganckie (rekwizyty dla grafików).

przykład 7: tęsknota za domem

Candle company tęsknota za świecami wykorzystuje różne elementy suwaka na swojej stronie internetowej e-commerce, aby zaprezentować swoje świece, a także recenzje i cytaty marek.

w połowie strony głównej znajduje się pokaz slajdów—poruszająca Galeria ich najlepiej sprzedających się świec (uwielbiamy koncepcję zapachów!). Po najechaniu kursorem na suwak obrazu zatrzymuje się i wyświetla się nieco inny obraz (na przykład pokazujący zapaloną świecę).

przykład 8: Bar Mleczny

strony produktów w barze mlecznym są przyjemnością do przewijania, i to nie tylko dlatego, że zdjęcia są przepyszne. Weź stronę Cheerleaderki Poniżej, z elementem suwaka po lewej stronie i wszystkie szczegóły produktu po prawej stronie, odwiedzający widzą wszystko na pierwszy rzut oka.

jednak po przewinięciu w dół zobaczysz interaktywne banery i więcej informacji o produkcie, takich jak dostawa, składniki, podobne smakołyki i kolejna Karuzela wyświetlająca opinie klientów.

karuzele treści

jeśli chcesz dodać karuzelę treści do swojej witryny, pamiętaj, że najcenniejszy fragment treści musi znajdować się w pierwszym slajdzie. Pierwszy slajd zawsze uzyska największą ekspozycję, a wrażenia maleją po każdym kolejnym slajdzie.

przykład 9: Art of Tea

na poniższej stronie z Art of Tea zobaczysz wiele różnych rzeczy w jednym suwaku pełnoekranowym.

otwierający suwak jest CTA, aby dołączyć do ich programu partnerskiego. Następne są slajdy pokazujące nowe puszki po herbacie, torby, wiązki i shakery. Jeden slajd jest również poświęcony dołączeniu do ich miesięcznego klubu herbacianego.

to, co ten projekt karuzeli robi dobrze, to to, że obrazy pokazują, o czym jest każdy slajd, a tekst pomocniczy jest ograniczony do minimum. Jedną z rzeczy do poprawy są przyciski. Po wybraniu przycisków, które mają tylko kontur, trudno je wyraźnie zobaczyć na obrazie.

przykład 10: Canva Design School

strona Szkoły Projektowania z Canva jest dobrym przykładem wystąpienia, w którym karuzela jest bardziej skuteczna niż jakikolwiek inny element strony internetowej.

ponieważ na stronie docelowej jest dużo treści, Karuzela pomaga wyświetlać różne kursy w bardziej zwięzły sposób. Na przykład sekcja tutorial poniżej zajmuje dużo więcej miejsca w porównaniu do pokazu slajdów.

karuzele blogów

wiele razy Szablony WordPress dla blogów są wyposażone w interaktywny element suwaka, który automatycznie pokazuje najnowsze artykuły.

chociaż jest to świetna funkcja, pamiętaj o tym, które artykuły są wyświetlane. Niektóre mogą nie być tak warte kliknięcia, ale pokazane jako pierwsze w suwaku strony głównej, ponieważ są ostatnio publikowane. W takim przypadku lepiej jest ręcznie wybrać blogi, które Twoim zdaniem zachęcą odwiedzających do kliknięcia.

przykład 11: COCOCOZY

blogerka zajmująca się projektowaniem wnętrz Colette Shelton otwiera swojego bloga suwakiem pokazującym wybór jej blogów. Po najechaniu kursorem wyświetlany jest tytuł bloga. Na telefonie komórkowym zdjęcie jest wyświetlane z tytułem pod nim.

karuzele obrazów

karuzele obrazów są często widoczne w portalach podobnych do portfolio, gdzie służą do wyświetlania dzieł artysty. Upewnij się, że Twoje zdjęcia są wysokiej jakości i mówią same za siebie, bez potrzeby dodatkowego tekstu.

przykład 12: Mix Design Collective

Mix Design Collective to firma projektowa. Ponieważ ich praca jest bardzo wizualna, warto otworzyć stronę internetową za pomocą nawigacji i suwaka zdjęć bezpośrednio poniżej.

pokaz slajdów ma mieszankę obrazów, od kuchni po łazienki i salony, więc odwiedzający mają pojęcie o stylu projektowania i usługach kolektywu.

porównanie karuzel

suwaki działają dobrze, gdy użytkownicy muszą szybko skanować różne treści lub produkty. Tak jest dokładnie w przypadku, gdy ludzie porównują przedmioty. Rzućmy okiem na kilka przykładów.

przykład 13: Amazon

prawdopodobnie najbardziej znany przykład porównania pochodzi z Amazon. Na każdej stronie produktu znajdziesz karuzelę ze wszystkimi powiązanymi produktami, które możesz również kupić. W tym przypadku suwak jest bardziej skuteczny niż obrazy statyczne, ponieważ pozwala użytkownikom szybko przeglądać wiele podobnych produktów.

co sądzisz o karuzelach na stronie?

jak czytałeś, suwaki WWW mogą być tak lub proszę nie. Wszystko zależy od tego, w jaki sposób element jest używany w Twoim projektowaniu stron internetowych i jak przyjazny dla użytkownika jest suwak do nawigacji. Upewnij się, że każdy slajd służy wyraźnemu celowi, a ogólne wrażenia użytkownika są świetne. Jeśli możesz śmiało powiedzieć, że suwak jest najlepszym elementem do wyświetlania treści, możesz iść.