7 porad projektowych, jak wybrać, zmodyfikować i poprawić obraz suwaka

Przez ostatnie 7 lat suwaki (lub karuzele, jeśli chcesz) to coś, co ma prawie każda witryna internetowa. To powszechna praktyka. Coś, do czego wszyscy jesteśmy przyzwyczajeni. To pierwsza rzecz, jaką odwiedzający zobaczy na Twojej stronie. To moment „zrób to albo zepsuj”. Obrazy suwaków muszą robić doskonałe pierwsze wrażenie, w przeciwnym razie stracisz gościa na zawsze.

Kiedy przeglądam strony internetowe, które nasi klienci stworzyli za pomocą naszych motywów WordPress, często widzę źle przygotowane obrazy sliderów. W większości przypadków zdjęcia są za duże lub za małe. Tekst na suwaku nie jest wystarczająco widoczny, a obrazy nie są zoptymalizowane, więc sama strona ładuje się bardzo wolno.

Moje serce trochę pęka, gdy widzę ogólnie dobrą stronę internetową z dobrą kopią, ale kiepskimi obrazami suwaków. Postanowiłem powstrzymać to szaleństwo dzieląc się kilkoma prostymi sztuczkami.

1. Wybierz odpowiednie zdjęcie

Przede wszystkim. Wybierz odpowiednie zdjęcie. Wybierz obraz, który jest wystarczająco opisowy i ma wystarczająco dużo wolnego miejsca. Spójrz, gdzie pojawia się tekst na suwaku i wybierz obraz, który ma jak najmniej szumu wizualnego w tym obszarze.

2. Zdjęcie w wysokiej rozdzielczości jest koniecznością

Użyj rozdzielczości zalecanej przez producenta motywu. W ciągu ostatnich 4 lat widziałem miliony stron internetowych ze zdjęciami w małej rozdzielczości rozciągniętymi na całym ekranie. Nie możesz przegapić, jeśli wybierzesz obraz o szerokości 1920 pikseli. Nic nie zniechęca odwiedzających bardziej niż pikselowe zdjęcie na suwaku. Doskonałym źródłem darmowych, wysokiej jakości zdjęć jest Unsplash. Jeśli masz budżet, polecam kupowanie zdjęć premium na Shutterstock. Inwestycja się opłaci.

3. Przyciemnij lub rozjaśnij zdjęcie

Dobrym sposobem na zwiększenie widoczności tekstu na suwaku jest przyciemnienie (lub rozjaśnienie) zdjęcia. Można to zrobić w Photoshopie lub dowolnym innym programie do edycji zdjęć. W tym samouczku użyję bezpłatnej aplikacji do projektowania o nazwie Canva. Po zarejestrowaniu się w serwisie Canva kliknij „Utwórz projekt” w lewym górnym rogu. Następnie w prawym górnym rogu kliknij „Użyj wymiarów niestandardowych” i wprowadź wymiary zalecane przez programistę motywu. Jeśli nie ma zalecanego rozwiązania, przejdź do strony demonstracyjnej motywu WordPress i sprawdź zdjęcie (lub zmień z nami dostawcę motywu WordPress).
Kliknij „Zaprojektuj!” i przejdź do „Przesłane” w lewym menu. Prześlij obraz suwaka i przeciągnij go i upuść na tablicy. W górnym menu kliknij „Filtr” i zmniejsz „Jasność” i „Kontrast” o 10-20%. Jeśli kolor tekstu na suwaku jest biały, chcesz nieco przyciemnić zdjęcie, aby poprawić kontrast. Jeśli masz czarny tekst na suwaku, chcesz zrobić coś przeciwnego.

Zrób krok dalej. Pokoloruj swoje zdjęcie w kolorach marki, przesuwając karuzelę „Odcień” (Odcień) nieco w lewo lub w prawo.

4. Półprzezroczysta kolorowa nakładka

Czasami po prostu nie możesz znaleźć zdjęcia z wystarczającą ilością białego miejsca na tekst lub Twój klient chce, abyś użył przesyconego obrazu, w którym tekst nie byłby wystarczająco widoczny. W takiej sytuacji najprostszą rzeczą, jaką możesz zrobić, jest wykonanie półprzezroczystej kolorowej nakładki.

Aby to zrobić, przejdź do aplikacji Canva > Elementy > Kształty, a następnie przeciągnij i upuść pierwszy biały lub drugi ciemny prostokąt na tablicę (tam, gdzie jest napisane za darmo). Zmień rozmiar prostokąta od krawędzi do krawędzi i pokoloruj go na czarno w lewym górnym rogu. Następnie w prawym górnym rogu ustaw przezroczystość prostokąta na ~50%, w zależności od wymaganego kontrastu.

5. Dodaj wewnętrzny blask do swojego zdjęcia

Kolejną świetną sztuczką, która uatrakcyjni zdjęcie suwaka, jest dodanie czarnego półprzezroczystego wewnętrznego blasku. Ta metoda sprawi, że Twoja strona będzie wyglądać jeszcze bardziej profesjonalnie. Skupi się na środku ekranu. W aplikacji Canva ten efekt nazywa się „Winieta” i można go znaleźć w górnym menu „Filtr” > „Opcje zaawansowane”. Gdy jesteś zadowolony ze swojego zdjęcia suwaka, możesz je zapisać, klikając przycisk „Pobierz” w prawym górnym rogu.

6. Wybierz odpowiedni typ pliku

Podczas zapisywania edytowanego obrazu suwaka ważne jest (ze względu na rozmiar pliku), aby wybrać odpowiedni typ pliku. Nie martw się; zasada jest prosta. Jeśli obraz suwaka jest rzeczywistym zdjęciem, zapisz go jako .jpg. Jeśli jest to coś innego niż zdjęcie (np. wzór, ikona, doodle), zapisz je jako .png. Jest to ważne, ponieważ chcesz, aby obrazy sliderów były jak najjaśniejsze i zoptymalizowane.

7. Szybkość strony ma duże znaczenie

Zarówno dla Google, jak i dla gościa. Obrazy suwaków to największe obrazy (może nawet pliki) Twojej witryny, dlatego ważne jest, aby je zoptymalizować. Świetnym narzędziem do zmniejszania rozmiaru obrazu jest TinyPNG. Ich prosty interfejs „przeciągnij i upuść” pozwala zmniejszyć rozmiar obrazu bez utraty jakości. Zobacz najlepsze przewodniki dotyczące optymalizacji obrazu i optymalizacji szybkości strony.

Dodatkowa wskazówka: użyj zalecanego rozmiaru obrazu suwaka

Opracowując motywy WordPress, dokładamy wszelkich starań, aby wybrać odpowiedni rozmiar i proporcje zdjęcia suwaka. Samo zdjęcie musi dobrze działać na każdym rozmiarze ekranu. Widzę wiele przypadków, w których użytkownicy używają rozmiarów innych niż zalecane. Przez większość czasu zdjęcia w suwaku zajmują zbyt dużo miejsca w pionie.

Nie stanowi to problemu dla funkcjonalności samego suwaka, ale jeśli odwiedzający musi dużo przewijać, aby dostać się do treści, nie wpływa to dobrze na wrażenia użytkownika.

Jeśli nadal chcesz używać większych obrazów niż zalecane, pamiętaj przynajmniej o starej dobrej powyżej reguły składania.

Suwak to pierwsza rzecz, którą odwiedzający zobaczy na Twojej stronie. Popraw wrażenia użytkownika, wdrażając niektóre z powyższych sztuczek. Nie zajmie Ci to dużo czasu, ale poprawi szczęście Ciebie, Twojego klienta i gościa Twojego klienta.

Więc teraz, gdy masz pomysł, jak ulepszyć swoje obrazy sliderów, omówmy zalety i wady używania sliderów. Jak się okazuje, istnieje wiele badań, które mówią, że suwaki mogą zaszkodzić Twojej witrynie bardziej niż mogą jej pomóc. Nawet autorzy wtyczki Yoast SEO twierdzą, że slidery powinny być zakazane na twojej stronie, więc zdecydowanie warto omówić zalety i wady sliderów, a także kiedy są odpowiednie, a kiedy najlepiej ich unikać.

Wady korzystania z suwaków w Twojej witrynie

Najpierw przyjrzyjmy się najważniejszym wadom suwaków.

Bardzo niewiele wtyczek sliderów jest naprawdę responsywnych na urządzenia mobilne

Czy kiedykolwiek natknąłeś się na stronę, która używa suwaka i próbowałeś ją wyświetlić na telefonie? Chociaż prawdą jest, że telefony stają się coraz większe, prostym faktem jest to, że większość suwaków zmienia rozmiar, aby dostosować się do mniejszego rozmiaru ekranu.

Powoduje to, że zarówno obrazy, jak i tekst są zbyt małe, aby można je było odczytać i wyświetlić na mniejszych ekranach. W końcu Twój piękny suwak najprawdopodobniej zostanie zignorowany na telefonach, więc zastanów się dwa razy nad zawartością, którą dodajesz do pokazu slajdów.

Jeśli masz szczęście używać responsywnej wtyczki do suwaków, takiej jak Soliloquy, przygotuj się na poświęcenie trochę czasu na dostosowywanie suwaków, aby wyglądały dobrze na wszystkich urządzeniach. W tym czasie przetestuj suwak i zobacz, jak wygląda na różnych rozmiarach ekranu i urządzeniach.

Większość odwiedzających nie pozostanie poza pierwszymi dwoma slajdami

Jeśli weźmiesz pod uwagę, że nasza koncentracja uwagi staje się coraz krótsza, można bezpiecznie założyć, że większość odwiedzających nie pozostanie poza pierwszymi slajdami.

Gdy odwiedzający trafiają do Twojej witryny, chcą od razu wiedzieć, co robisz i jak możesz im pomóc. Jeśli twoje slajdy nie odpowiedzą na te pytania, prawdopodobnie pójdą dalej.

Elementy sterujące suwakiem można łatwo przeoczyć

Kontrolki suwaka to zwykle dyskretne ikony zaprojektowane i stylizowane tak, aby nie odwracały uwagi od rzeczywistej zawartości slajdu. W związku z tym te strzałki używane do poruszania się po suwaku można łatwo przeoczyć.

Ten problem jest jeszcze bardziej widoczny na mniejszych ekranach, co oznacza, że ​​użytkownicy mobilni będą mieli trudności z poruszaniem się tam iz powrotem między slajdami lub klikaniem przycisku, który przeniesie ich do innej części witryny.

Suwaki mogą spowolnić działanie Twojej witryny

Jeśli nie jesteś ostrożny w optymalizacji obrazów pod kątem suwaków i ogólnie w Internecie, suwaki mogą spowolnić działanie Twojej witryny. Co więcej, suwaki często używają zasobożernych plików JavaScript.

Każdy z tych plików JavaScript to kolejne żądanie, które przeglądarka musi skierować do serwera hostingowego, na którym znajduje się Twoja witryna. Podczas gdy przeglądarka wysyła te żądania, odwiedzający czekają na załadowanie witryny, ponieważ przeglądarka nie może kontynuować, dopóki nie zostaną załadowane niezbędne pliki JavaScript (a także pliki stylów suwaków i witryny).

W rezultacie odwiedzający mogą być sfrustrowani i przejść do innej witryny, która ładuje się znacznie szybciej i zapewnia im to samo rozwiązanie, po które przyszli do Twojej witryny.

Warto również wspomnieć, że ze względu na wpływ na czas ładowania strony, suwaki mogą negatywnie wpłynąć na SEO.

Ludzkie oko reaguje na ruch

Na koniec pamiętaj, że nasze oczy w naturalny sposób przyciągają ruch. Jeśli używasz suwaków w swojej witrynie, mogą one rozpraszać użytkowników i powodować, że przestaną zwracać uwagę na resztę treści w witrynie.

Za każdym razem, gdy slajd się zmienia, ryzykujesz, że odwiedzający będzie chciał kliknąć ten przycisk rezerwacji, aby skupić się na czymś innym. Może to prowadzić do utraty konwersji, co z kolei prowadzi do mniejszej sprzedaży i ogólnego mniejszego zysku.

Inną rzeczą, o której należy pamiętać, jest to, że jeśli używasz suwaka, nie używaj opcji automatycznego przesuwania, ponieważ może to szybko pogorszyć wrażenia użytkowników. Wyobraź sobie, że ktoś zaczyna czytać tekst na slajdzie, a potem obraz zmienia się, zanim skończy czytać. Może to sfrustrować użytkowników i spowodować, że opuszczą Twoją witrynę.

Zalety korzystania z suwaków w Twojej witrynie

Teraz, gdy omówiliśmy już wady korzystania z suwaków, przyjrzyjmy się, dlaczego warto rozważyć ich użycie.

Możesz zaprezentować więcej treści na mniejszej przestrzeni

Ze względu na swój charakter suwaki ułatwiają wyświetlanie większej ilości treści w części strony widocznej na ekranie lub w dowolnym innym miejscu witryny bez tworzenia długich stron. Możesz użyć dowolnej liczby slajdów, aby udostępnić wiadomość, którą chcesz za pośrednictwem slajdów, i przedstawić ją w atrakcyjny wizualnie sposób.

Dzięki temu Twoja strona główna będzie krótka i przyjemna, skupiając się na najważniejszych elementach, zamiast wykorzystywać całą tę przestrzeń do opowiedzenia wizualnej historii o pojedynczym produkcie lub usłudze.

Suwaki ułatwiają dodawanie tekstu do obrazów bez korzystania z programu Photoshop

Większość wtyczek do suwaków umożliwia przesyłanie obrazu i dodawanie do niego tekstu bez użycia Photoshopa lub innego programu do edycji obrazów. Niektóre suwaki umożliwiają nawet dodawanie przycisków i wezwań do działania lub linków do innych części witryny.

Dzięki interfejsowi administracyjnemu suwaka możesz łatwo pisać i formatować swój tekst za pomocą narzędzi podobnych do tych, które znajdują się w edytorze postów lub programie Word. Możesz nawet dostosować projekt slajdu, dodając niestandardowe kolory lub czcionki, dostosowując rodzaj i czas trwania przejścia i nie tylko.

Suwaki zmuszają użytkowników do interakcji z Twoją witryną

Choć może to zabrzmieć prymitywnie, suwaki uniemożliwiają użytkownikom interakcję z Twoją witryną. Jeśli nie chcą czekać na pojawienie się następnego slajdu, mogą po prostu klikać strzałki, aby przechodzić między wszystkimi slajdami.

Jeśli dołączyłeś linki lub przyciski, które przenoszą ich na inną stronę, mogą kliknąć przyciski i przejrzeć wszystko, co masz do zaoferowania w Twojej witrynie. Innymi słowy, slajdy zapewniają większe zaangażowanie użytkowników, więc jeśli chcesz, aby użytkownicy wchodzili w interakcję z Twoją witryną od pierwszego wejścia na nią, odpowiedzią mogą być suwaki.

Slidery to świetny sposób na udostępnianie swojej pracy

Jeśli jesteś projektantem, ilustratorem, fotografem lub artystą, suwaki to świetny sposób na zaprezentowanie swojej pracy bez zajmowania całej strony portfolio. Możesz ułożyć pokaz slajdów swoich najlepszych prac i udostępnić go jako slajd na swojej stronie głównej, a nawet na stronie portfolio.

Suwaki przydają się również, jeśli sprzedajesz produkty, ponieważ można ich użyć do zaprezentowania najpopularniejszych produktów, nowości lub określonych kategorii.

Werdykt: czy należy używać suwaków?

Pomijając wady i zalety, czas podjąć decyzję: czy powinieneś używać sliderów na swojej stronie? Odpowiedź na to pytanie można podsumować w dwóch słowach: to zależy.

Kiedy używanie suwaka jest dobrym wyborem?

Poza zaletami i wadami, wciąż istnieje kilka dobrych scenariuszy, w których użycie suwaka jest dobrym pomysłem i dobrym wyborem.

• Użyj suwaka, gdy chcesz zaprezentować swoją pracę lub galerię. Jak wspomniano wcześniej, suwaki dobrze nadają się do wyświetlania galerii zdjęć lub elementów portfolio. Jeśli Twoja witryna należy do tej kategorii, użycie suwaka to świetny sposób na zaprezentowanie swojej pracy bez przytłaczania odwiedzających.
• Użyj suwaka, aby zaprezentować produkt. Na podobnej zasadzie, jeśli wprowadzasz na rynek nowy produkt lub usługę; suwak może być świetnym sposobem na zademonstrowanie produktu w działaniu lub podkreślenie jego zalet i funkcji.
• Użyj suwaka, aby podzielić się spójną historią. Może to być historia Twojej marki i firmy lub możesz podkreślić członków zespołu i ich wiedzę fachową. Bez względu na to, jaką historię zdecydujesz się udostępnić na swoim suwaku, upewnij się, że historia ma sens, w przeciwnym razie odwiedzający będą patrzeć na kilka niepowiązanych slajdów, które nie mają sensu. Jednocześnie upewnij się, że każdy slajd buduje oczekiwanie na następny slajd i intryguje odwiedzających, aby pozostali w pobliżu aż do ostatniego.

Kiedy nie powinieneś używać suwaków?

Nie trzeba dodawać, że jeśli Twoja witryna nie należy do żadnej z powyższych kategorii lub jeśli nie używasz suwaków do dodawania do swojej witryny, powinieneś omijać suwaki. Oto kilka innych scenariuszy, w których używanie suwaków nie jest dobrym pomysłem.

• Jeśli używasz zjeżdżalni tylko dlatego, że jest modna. Tylko dlatego, że wszyscy to robią, nie oznacza to, że ty też musisz to robić. Nie tylko ryzykujesz, że nie dodasz niczego wartościowego do swojej witryny za pomocą suwaka, ale także ryzykujesz, że wtopisz się i będzie wyglądać tak samo jak konkurencja.
• Jeśli Twoja witryna jest już powolna, powstrzymaj się od używania suwaków. Jak powiedzieliśmy powyżej, suwaki mogą być dość zasobożerne, więc ostatnią rzeczą, którą musisz zrobić, to jeszcze spowolnić ładowanie witryny. Najpierw popracuj nad poprawą szybkości witryny, a następnie rozważ dodanie suwaka.
• Jeśli nie wiesz, co umieścić w suwaku, nie dodawaj go. Suwak działa najlepiej, gdy kryje się za nim historia. Bez historii masz bałagan obrazów, które nie wnoszą żadnej wartości do Twojej witryny, a nawet mogą wprowadzać w błąd odwiedzających.
• Jeśli możesz udostępnić zawartość w prostszy sposób, zrób to. Nie ma sensu nadmiernie komplikować projekt witryny lub poświęcać szybkości na rzecz najnowszych trendów projektowych. Prostsze rozwiązanie zwykle oznacza, że ​​Twoja witryna będzie łatwiejsza w aktualizacji i utrzymaniu, nie wspominając o szybszym wczytywaniu się. W związku z tym rezygnacja z suwaka na rzecz prostszego rozwiązania jest znacznie lepszym wyborem.

Wniosek

Teraz, gdy znasz już zalety i wady korzystania z suwaków, możesz podjąć świadomą decyzję, czy użycie suwaka jest dobrym wyborem dla Twojej witryny. Dzięki wskazówkom dotyczącym optymalizacji obrazów suwaków będziesz na dobrej drodze do tworzenia atrakcyjnych slajdów, które nie zaszkodzą wrażeniu użytkownika, ale pomogą uzyskać więcej konwersji.