Slider na stronie WWW
Jak to jest z tymi sliderami na stronach WWW? Czy na prawdę są takie złe jak wszyscy mówią? A może, te wszystkie negatywne zdania i badania sprzed lat nie mają odzwierciedlenia w dzisiejszej rzeczywistości?
Na podstawie wielu artykułów, analizie przeprowadzonych badań i własnego doświadczenia razem z zespołem Studio Kreacja zebraliśmy dla Państwa wiedzę o sliderach na stronach WWW. Przygotowaliśmy listę argumentów ZA i PRZECIW, 11 kluczowych zasad, o których musimy pamiętać jeśli zdecydujemy się na slider, a także opisaliśmy kilka przypadków gdzie skutecznie zastosowano slider.
Argumenty ZA:
- Użytkownik zostaje zaangażowany w jednym miejscu aby obejrzeć zawartość, a efekty wizualne zapewniają przerwę, zanim przejdzie dalej w dół strony.
- Dobrze zaprojektowany i zoptymalizowany slider może podnieść konwersję (61% większa niż przy statycznym obrazku)
- Pomagają szczególnie kiedy oferowany przez nas produkt lub usługa jest bardzo wizualna.
- Są świetnym sposobem na zaoszczędzenie miejsca. Przykładowo slider produktów i usług wykorzystywany od dłuższego czasu przez np. Amazon, a zaadaptowany przez Allegro podczas ostatnich zmian na ich stronie.
- Bardzo dobra, jeśli nie najlepsza forma pokazywania galerii zdjęć, np. w portfolio (wiele zdjęć o tej samej tematyce, w tej samej kategorii) “Czasem zdjęcie lub kilka to wszystko czego trzeba, żeby pokazać wszystko to, co potrzebujesz powiedzieć o swojej marce”
- Skuteczny, kiedy naszym głównym celem jest zaprezentowanie czegoś wizualnie. Dobrym przykładem jest Apple – ich produkty są bardzo wizualne, uzupełniane tylko kilkoma zwięzłymi hasłami, dzięki czemu przekaz jest łatwy do zrozumienia w zaledwie kilka sekund.
- Są przydatne, dodają wartości i wzmacniają branding danej marki
- w E-commerce slider będzie świetnym wyborem kiedy chcemy pokazać pełną gamę produktów lub przedstawić najnowszy produkt w lini. Przykład z artykułu.
- Slider dobrze sprawdzi się też, kiedy trzeba wyświetlić opinie klientów (zarówno te tekstowe, video lub ich kombinacje) lub też logotypy firm z którymi współpracujemy. Przykład z artykułu. Inny przykład.
Argumenty PRZECIW
- Slider jest często ignorowany przez użytkownika, kiedy jego wygląd jest zbliżony do reklamy. (tzw. Zjawisko ślepoty banerowej)
- Szczególnie animowane slidery skupiają na sobie uwagę, przez co mogą odwrócić uwagę użytkownika od innych treści na stronie
- Musimy pogodzić się z tym, że spora część użytkowników nie zobaczy nawet drugiego slajdu, ponieważ szukając interesujących ich treści od razu przescrollują slider
- Badania strony University of Notre Dame wykazały, że tylko około 1% odwiedzających wykonuje akcję na slajderze. Łącznie w okresie badania zarejestrowano 28 928 kliknięć, przy czym pierwszy slajd obejmował 84% tych kliknięć. Slider składał się z 5 slajdów, czyli łatwo możemy wyliczyć, że na pozostałe slajdy (2-5) przypada średnio tylko 4% kliknięć. W tym przypadku bezsensowne wydaje się poświęcenie tak dużej ilości strony głównej na slider. Wykres pokazujący ilość kliknięć.
- Źle zoptymalizowane spowalniają stronę, co jest tragiczne dla SEO i frustrujące dla użytkownika.
- Źle zaprojektowane oferują użytkownikowi zbyt wiele opcji, przez co trudniej jest mu podjąć decyzję. (Przykładowo kiedy slider bombarduje użytkownika ilością treści, dwoma CTA, trzema formami nawigacji, a do tego wszystko się rusza)
- Źle zaprojektowany i wdrożony slider zmniejsza dostępność np. dla osób z problemami motorycznymi, które mają problem z kliknięciem w automatycznie przeskakujące slajdy
- Zależnie od przypadku mogą zmniejszyć sprzedaż. Blair Keen, kierownik ds. Optymalizacji w Adobe powołał się na test przeprowadzony w 2013 roku dla klienta usług finansowych. Zamiast zastąpić slider statycznym obrazem, Blair postanowił całkowicie usunąć slider i przenieść przez to całą zawartość pod nim wyżej. Przetestował to i w porównaniu z wersją z suwakiem sprzedaż wzrosła o 23%. Ilustracja przestawiająca ten punkt.
- Zmuszają użytkownika, który szuka danej oferty, produktu na Twojej stronie, do scrollowania .
- Zazwyczaj użytkownik nie ma wystarczająco dużo czasu, by przeczytać treść znajdującą się na slajdzie zanim ta zniknie
- Automatyczne slidery ignorują potrzebę poczucia kontroli i samodzielności użytkownika.
Przykłady gdzie slider został dobrze zaprojektowany i wdrożony:
Squarespace
Niech mi ktoś powie, że slidery są nieatrakcyjne, rozpraszające, powolne i trudne w użyciu.
W przypadku Squarespace slider jest pięknie zaprojektowany, posiada przemyślaną treść i estetyczną grafikę, opiewa w łagodne animacje, a kiedy poruszysz myszką w kierunku lewej bądź prawej krawędzi ekranu slider’u kursor zamienia się w strzałkę. Warto także zwrócić uwagę na kontrastujący z pastelowym tłem czarny przycisk, który szybko przyciąga uwagę użytkownika.
Help Scout
W wielu przypadkach do wyświetlania opinii użytkowników używany jest slider, tak też robi Help Scout, który w klarowny sposób wyświetla opinie połączoną z video. Dodatkowo cały slider wyróżnia się dzięki dużej ilości światła wokoło niego, a także podbiciu cieniem.
Microsoft
https://www.microsoft.com/pl-pl/
Microsoft używa slider’u do promocji jednego ze swoich najnowszych produktów Surface Go. Dostępnych mamy wiele metod nawigacji po slajdach -strzałki nawigacyjne po obu stronach obrazka, paginacja na dole (od razu wiadomo, że mamy tylko dwa slajdy), a także przycisk pauzy. Warto też zauważyć, że na wersji mobilnej strzałki nawigacyjne widoczne są od razu na slajderze -z racji braku możliwości “najechania myszką” na urządzeniach mobilnych.
Lonely Planet
Liczy się pierwsze wrażenie a ten slider niesamowicie wykorzystuje bogate archiwum zdjeć z podróży Lonely Planet, wywierając silne wrażenie na potencjalnym podróżniku.
Lonely Planet przedstawia piękne zdjęcia w formie pełnoekranowej, z czytelną nawigacją u dołu ekranu (4 nagłówki, numerowane). Każde zdjęcie ma opis, który wprowadza w kontekst.
Ten slider to nie tylko seria kilku pięknych zdjęć, to piękne zdjęcia które są zgodne z wartościami którymi kieruje się Lonely Planet -pięknymi miejscami podróży.
Google Home
https://store.google.com/gb/product/google_home
Google sprytnie wykorzystuje slider na swojej stronie prezentującej swój inteligentny głośnik, który spełnia aż 3 różne funkcje.
Jeden ze slider’ów prezentuje w jaki sposób można wykorzystać Google Home, wyraźnemu hasłu i krótkiemu opisowi towarzyszą zmieniające się zdjecia z przykładowymi pytaniami i zadaniami. Pomaga to użytkownikowi w łatwy sposób wyobrazić sobie jak rzeczywiście może wykorzystać produkt.
Drugi slider jest bardzo minimalistyczny, tak jak Google Home. Użytkownik przełączając między kolorowymi nawigacyjnymi kropkami może zobaczyć produkt w różnych wersjach kolorystycznych, towarzyszy temu jedynie prosty nagłowek i CTA.
Trzeci slider to suwak z produktami którymi także możemy się zainteresować.
Jest dużo opinii oraz danych zarówno za, jak i przeciw. Najlepszym rozwiązaniem wydaje się zaufać designerowi, a także wykonać testy A/B. Każda strona jest inna, przewodzi jej inny cel. Może wyjdzie na to, że w Twoim przypadku użycie slideru zwiększy konwersję.
Żeby przekonać się samemu możesz wykorzystać narzędzia takie jak Google Analytics i HotJar żeby zmierzyć ilość wejść i kliknięć na dany slajd. Możesz też zlecić to nam, przeanalizujemy dla Ciebie slider na Twojej stronie, poszukamy wszelkich nieprawidłowości i błędów, a następnie przygotujemy raport w którym powiemy Ci co zmienić.
Kilka przykładów z badania mapą cieplną:
Ze względu na silny przekaz obrazem, gdzie widnieją opakowania produktów możemy zaobserwować intensywne klikanie w strzałki do przełączania między slajdami.
Podobną sytuację zauważamy w przypadkach gdzie nacisk kładziemy na przekaz wizualny. Użytkownicy chętnie odkrywają kolejne zdjęcia modelki w oferowanej przez sklep koszulce (grafika po lewej stronie), a także prezentacje upominków, które możemy zamówić (grafika po prawej stronie).
W przypadku realizacji dla Błaszczyk Nieruchomości, okazało się, że użytkownicy w ogóle nie korzystają ze slideru, dużo chętniej wykorzystują wyszukiwarkę, klikają w pozycje z menu i CTA .
Jeśli zdecydujesz się na slider, pamiętaj o kluczowych zasadach:
- Najważniejszy slajd umieszczaj zawsze jako pierwszy – większość ludzi może nigdy nie zobaczyć drugiego.
- Pamiętaj, by każdy ze slajdów wyświetlał się na tyle długo, aby nawet osoby czytające wolniej miały czas na jego zrozumienie.
- Spraw, by nawigacja była łatwa i klarowna – widoczne przyciski poprzedni/następny, łatwe do kliknięcia/tapnięcia na smartfonie, wyraźna paginacja.
- Wdrożenie możliwości swipe’owania slajdów dla użytkowników mobilnych. (możliwość przełączania się między slajdami przez smyranie palcem po ekranie)
- Optymalizuj czas potrzebny na załadowanie slideru: zmniejszenie wagi zdjęć, ograniczenie ilości slajdów, doładowywanie slajdów w tle.
- Korzystaj z łagodnych animowanych przejść między slajdami.
- Spróbuj użyć miniaturek następnych slajdów jako nawigacji
- Jeśli slider zawiera CTA, powinno być ono tylko jedno, maksymalnie dwa, a do tego bardzo widoczne/kontrastujące na każdym ze slajdów.
- Dobrym pomysłem jest implementacja przycisku “pauza/start/stop”, a także funkcjonalności, która zatrzymuje przesuwanie się slajdów w momencie, gdy kursor użytkownika znajduje się nad treścią czy też CTA.
- Na sliderze używaj tekstów krótkich i klarownych.
- Pamiętajmy, że około 52% ruchu w dzisiejszym internecie, to ruch z urządzeń mobilnych, więc slider powinien być responsywny.
Slider na stronie WWW
Podobne artykuły
Nie chcesz niczego przegapić?