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

https://www.squarespace.com/

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

https://www.helpscout.net/

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

https://www.lonelyplanet.com/

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:

1. Najważniejszy slajd umieszczaj zawsze jako pierwszy – większość ludzi może nigdy nie zobaczyć drugiego.
2. 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.
3. Spraw, by nawigacja była łatwa i klarowna – widoczne przyciski poprzedni/następny, łatwe do kliknięcia/tapnięcia na smartfonie, wyraźna paginacja.
4. 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)

1. Optymalizuj czas potrzebny na załadowanie slideru: zmniejszenie wagi zdjęć, ograniczenie ilości slajdów, doładowywanie slajdów w tle.
2. Korzystaj z łagodnych animowanych przejść między slajdami.
3. Spróbuj użyć miniaturek następnych slajdów jako nawigacji
4. 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.
5. 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.
6. Na sliderze używaj tekstów krótkich i klarownych.
7. 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