Zanim przejdę do konkretów i przedstawię Ci wady i zalety sliderów to w jednym akapicie określę co kryje się pod pojęciem ‘slider’ abyś wiedział o czym piszę.
Bardzo ogólnie rzecz ujmując “slider” czasem nazywany “karuzelą” to element, którego elementy podrzędne (np.: banery graficzne) zmieniają się. Zazwyczaj jest to animacja przesuwania lub przenikania. Najczęściej spotykane slidery dotyczą banerów reklamowych oraz sekcji z produktami.
Wykorzystanie sliderów w sklepie jest tematem budzącym żywe dyskusje. Zarówno właściciele sklepów oraz designerzy są podzieleni na zwolenników i przeciwników. Po stronie jednych i drugich padają słuszne argumenty. Przedstawię Ci mój punkt widzenia, który opieram na wieloletnim doświadczeniu w zakresie projektowania sklepów internetowych oraz ich optymalizacji,a także pozycjonowania w Google. Według mnie mój punkt widzenia jest wystarczająco szeroki abym mógł wyczerpująco opisać ten temat … a więc, do rzeczy.
Dlaczego chcesz użyć slidera w swoim sklepie internetowym?
Skorzystanie z jakiegoś rozwiązania lub wprowadzenie funkcjonalności zawsze jest czymś determinowane. Poniżej zamieściłem najczęściej słyszane przeze mnie przyczyny wprowadzenia slidera w widoku na desktopach i laptopach.
Chcę pokazać użytkownikowi kilka bardzo ważnych informacji
Jeśli chcesz pokazać kilka istotnych informacji to dlaczego nie umieścisz ich obok siebie? Wtedy użytkownik zobaczy wszystkie informacje i wybierze dla niego najciekawszą, a w przypadku użycia slidera pojawiają się problemy:
- użytkownik może zacząć przewijać stronę zanim załadują się wszystkie grafiki slidera i nie zauważy, że są kolejne banery do ‘obejrzenia’
- banery po za pierwszym mają współczynnik kliknięć na poziomie mniejszym niż 3% czyli są bezużyteczne pod względem informacyjnym (E. Runyon przeprowadził badanie dotyczące kliknięć kolejnych banerów w sliderze https://erikrunyon.com/2013/07/carousel-interaction-stats/)
Chcę ożywić i unowocześnić mój sklep – zmieniające się elementy będą super
Nie. Slidery nie są tak trendy jak Ci się wydaje. Były hitem 2-3 lata temu i wcześniej gdy biblioteka jQuery dała możliwość animacji i przesuwania elementów DOM. Serwisy internetowe przez lata były przeładowane reklamami zawierającymi animacje co spowodowało, że użytkownicy mają obecnie “ślepotę banerową” i wszelkie zmieniające się grafiki są odbierane jako nie do końca pożądane reklamy (SPAM) przez co mózg pomija te elementy podczas przeglądania zawartości.
Umieszczę w sliderze (karuzeli) produkty żeby zajmowały mało miejsca
Jestem skłonny zgodzić się z argumentem dotyczącym zajmowanego miejsca na ekranie – 15 produktów w karuzeli w jednym rzędzie zajmie mniej miejsca niż 3 rzędy po 5 produktów obok siebie. Ale czy slider będzie miał właściwy odbiór wśród użytkowników? Czy produkty będą dobrze się prezentowały? Czy użytkownik zobaczy wszystkie produkty?
Sekcja z produktami na stronie głównej ma za zadanie pokazanie produktów, a ograniczenie jej wielkości po przez uruchamianie slidera może mieć negatywny wpływ na użyteczność i prezentację produktów. Może zdarzyć się, że część użytkowników nie zauważy kolejnych produktów.
Kiedy i dlaczego nie warto używać animowanych sliderów i karuzel?
Poniżej przedstawione argumenty będą dotyczyły głównie widoku sklepu na desktopach i laptopach, gdzie dostępne jest stosunkowo dużo miejsca na zmieszczenie informacji.
Slider z dużymi banerami
W mojej ocenie jedno z najgorszych rozwiązań. Dlaczego?
- duże banery dużo ważą, a przez to, że zazwyczaj występują na pierwszym ekranie (Above The Fold) to wpływają negatywnie na szybkość ładowania strony i parametry Google Core Web Vitals i jest złe dla SEO 🙂
- duży baner długo się ładuje i użytkownik może przewinąć stronę bez zapoznania się z informacjami
- panoramiczne banery źle wyglądają na telefonach – informacje na nich są nieczytelne, a dodatkowo dużo ważące grafiki negatywnie wpływają na użyteczność
- pojedynczy duży baner na laptopie wypełnia często 70% wysokości okna przeglądarki przez co ważne elementy sklepu są zepchnięte poniżej dolnej krawędzi przeglądarki – ważniejsza jest informacja o darmowej dostawie, twoich certyfikatach, obsłudze, produktach w promocji itp
Zastanów się czy informacja, która jest zawarta na dużym banerze niekiedy o rozmiarze 1900 x 840 pikseli nie zmieści się na banerze o połowę mniejszym.
Istnieje wiele dużo efektywniejszych alternatywnych dla slidera rozwiązań, które zapewniają lepsze dotarcie z informacjami do użytkowników.
Karuzela z produktami
W wersji desktopowej może przysporzyć wielu problemów.
Część użytkowników nie zauważy, że można przewinąć produkty.
Jeśli wykorzystasz automatycznego przewijania produktów to w przypadku gdy przewijanie zostanie uruchomione zaraz po załadowaniu strony użytkownik może nie zobaczyć kilku pierwszych produktów.
Jeśli użyjesz zapętlonej karuzeli to użytkownik może także się zapętlić i obejrzy kilkukrotnie te same produkty co u jednego wywoła uśmiech, a u innego frustrację i może wyjść ze sklepu.
Poruszające lub zmieniające się elementy odwracają uwagę użytkownika od innych
Ruch przykuwa uwagę co mogłoby się wydawać dobre dla banerów ale czy w sklepie baner jest najważniejszy?
Niestety w środowisku internetu ruch (animacja) banerów często ma odwrotny skutek i zamiast skupiać uwagę użytkownika zniechęca go do zapoznania się z informacją. Wynika to ze zbyt dużej ilości reklam w serwisach internetowych.
No dobrze. To teraz zapewne zastanawiasz się czy w ogóle warto korzystać ze sliderów lub karuzel? Warto.
Kiedy i do czego wykorzystać slidery i karuzele w sklepie internetowym
Pomimo, że należę do osób z umiarkowanie sceptycznym zapatrywaniem na slidery to czasem po nie sięgam i właściwie użyte poprawiają użyteczność sklepu.
Podstawowa zasada jaką się kieruję to nie umieszczam w telefonach sliderów ani karuzel na pierwszym ekranie widzianym po załadowaniu sklepu (tzw. Above The Fold). Pierwszy ekran musi być załadowany szybko i zbędne oczekiwanie na Javascript, generowanie i manipulacja DOM czy kolejne zdjęcia wpływa negatywnie na użyteczność i na optymalizację SEO (po przez niższe oceny Core Web Vitals).
Karuzela produktów na urządzeniach mobilnych
Uważam, że to jest właściwe zastosowanie tego elementu. W odróżnieniu do desktopów w telefonach oraz tabletach staramy się maksymalnie ograniczać obszar zajmowany przez sekcje sklepu. Wynika to ze stosunkowo małej ilości miejsca na wyświetlaczu. W zależności od typu produktu stosuję karuzelę:
widocznymi dwoma produktami – gdy wygląd produktu jest drugorzędny podczas decydowania o zakupie
widocznym jednym produktem – gdy wygląd produktu jest najważniejszym determinantem zakupu np.: w odzież, obuwie torebki, plakaty, itp
Na urządzeniach mobilnych przesuwanie elementów jest “naturalnym” zachowaniem i niektóre osoby odruchowo próbują przesunąć element na wyświetlaczu. Ważne jest aby karuzela nie była zapętlona czyli po przesunięciu wszystkich produktów nie ma automatycznego przesunięcia do pierwszego oraz użytkownik musi mieć pełną kontrolę czyli nie należy używać automatycznego przesuwania (autoplay).
Karuzela miniatur w galerii na stronie produktu
Zarówno w wersji desktopowej jak i mobilnej warto wykorzystać karuzelę do prezentacji dużej ilości miniatur w galerii. Czasem spotykam się z sytuacją gdy produkt musi zawierać kilkanaście zdjęć i wyświetlanie ich w postaci kilku rzędów może być niezbyt estetyczne.
W wersjach mobilnych proponuję wprowadzanie zdjęcia głównego po kliknięciu, którego uruchamia się karuzela z pozostałymi zdjęciami. Użytkownik może dokładnie obejrzeć zdjęcia produktu, zdjęcia galerii nie muszą być ładowane, a duże zdjęcia są ładowane niezależnie po kliknięciu co wpływa pozytywnie na czas generowania strony.
Mam nadzieję, że po przeczytaniu powyższego artykułu spojrzysz na swój sklep internetowy i przeanalizujesz wykorzystane w nim slidery i karuzele jQuery. Jeśli twój sklep działa na oprogramowaniu KQS.store i będą potrzebne zmiany w szablonie to zachęcam do skorzystania z