Kupujący z firmy produkcyjnej trafia na Twoją stronę i widzi w hero elegancki dashboard SaaS. Potencjalny klient z fintechu wchodzi i dostaje ten sam obraz. Żaden z nich nie czuje, że strona powstała dla niego, i obaj wychodzą w ciągu kilku sekund. Problem nie polega na braku obrazów na landing page’ach. Problem polega na tym, że wszyscy widzą te same obrazy, niezależnie od tego, kim są i czego potrzebują.
Obrazy na landing page’ach wybiera się raz, zwykle robi to osoba, która projektowała stronę, a potem pokazuje się je każdemu odwiedzającemu. Na stronie B2B obsługującej kilka branż i ról kupujących oznacza to, że większość odwiedzających widzi obraz cudzego świata. Dopasowanie głównego obrazu do branży, roli lub etapu odwiedzającego to jedna z tańszych form personalizacji, bo nie wymaga nowego tekstu, ale pomaga tylko wtedy, gdy obraz mówi coś konkretnego. Ten wpis omawia, do czego służy każdy typ obrazu, kiedy wideo jest warte swojej wagi, jak mapować grafiki na segmenty oraz szczegóły dotyczące wydajności i dostępności, od których zależy, czy cokolwiek z tego zadziała.
Dlaczego ogólne zdjęcia na landing page'ach zawodzą w B2B
Obrazy to zwykle pierwsza rzecz, na którą pada wzrok odwiedzającego, więc kształtują pierwsze wrażenie, zanim zostanie przeczytany nagłówek. Ogólny obraz sam w sobie niewiele szkodzi; kosztem jest utracona szansa na pokazanie odwiedzającemu czegoś, co rozpozna.
W firmach B2B z wieloma personami kupujących jeden zestaw grafik oznacza strukturalną słabość. VP of Engineering oceniający Twoją platformę ma inne oczekiwania wizualne niż CMO robiący to samo. Pierwszy chce zobaczyć architekturę techniczną, integracje lub przepływy danych. Drugi reaguje na dashboardy, wskaźniki kampanii lub wykresy ROI. Gdy obaj widzą to samo ogólne zdjęcie biura, żaden nie dostaje sygnału trafności, który skłania do dalszego przewijania. To samo dotyczy reklamy, która ich sprowadziła; nasz przewodnik o tym, kiedy używać elastycznych reklam displayowych, opisuje, jak utrzymać spójność kreacji displayowych ze stroną.
Typowym winowajcą są zdjęcia stockowe ludzi ściskających sobie dłonie w przeszklonym biurze. Łatwo rozpoznać je jako stock, więc nic nie wnoszą, a zajmują miejsce, w którym mógłby być zrzut ekranu produktu, prawdziwy klient lub schemat przepływu pracy. Jeśli testujesz jedną rzecz w warstwie wizualnej landing page, przetestuj prawdziwe zdjęcie (Twój produkt, Twoi klienci, Twój zespół) przeciwko stockowemu.
Dopasowanie grafik do segmentów odwiedzających
Idea spersonalizowanych obrazów polega na skróceniu czasu między wejściem na stronę a myślą „to dla mnie”. W praktyce oznacza to przypisanie wariantów obrazów do segmentów, które już śledzisz. Jeśli korzystasz z identyfikacji odwiedzających, by rozpoznać branżę, wielkość lub lokalizację firmy, te same dane mogą decydować o tym, które obrazy pojawią się na stronie.
Sposoby przypisywania obrazów do segmentów:
Grafiki dopasowane do branży. Pokaż halę produkcyjną odwiedzającym z produkcji. Pokaż stanowisko tradingowe usługom finansowym. Pokaż proces szpitalny ochronie zdrowia. Sprzedawany produkt jest ten sam, ale kontekst wizualny zmienia się, by odpowiadać codzienności odwiedzającego.
Grafiki dopasowane do roli. Kupujący techniczni reagują na diagramy architektury, fragmenty kodu i schematy integracji. Kupujący biznesowi – na dashboardy, wykresy i wskaźniki wyników. Dopasowanie języka wizualnego do kompetencji kupującego pokazuje, że rozumiesz jego perspektywę.
Grafiki dopasowane do etapu. Nowym odwiedzającym przydają się ogólne ilustracje korzyści, które pokazują, czym się zajmujesz. Powracający odwiedzający, którzy już zapoznali się z treściami o produkcie, lepiej reagują na szczegółowe zrzuty ekranu, tabele porównawcze lub dowody od klientów.
Wielkość firmy. Odwiedzający z dużych firm mogą reagować na grafiki pokazujące skalę, certyfikaty bezpieczeństwa lub procesy obejmujące wiele zespołów. Mniejsze firmy utożsamiają się z grafikami pokazującymi szybkość, prostotę i szybkie efekty.
Rodzaje obrazów i kiedy każdy działa najlepiej
Różne elementy wizualne pełnią na landing page’u różne funkcje. Zrozumienie tych różnic pomaga świadomie decydować, co personalizować, a co zostawić statyczne.
Obrazy w sekcji hero budują pierwsze wrażenie i stanowią ramę dla całej propozycji wartości. Zajmują najcenniejsze miejsce na stronie. Hero pokazujące produkt w użyciu, najlepiej na danych lub w otoczeniu, które odwiedzający rozpoznaje, mówi więcej niż abstrakcyjna grafika. Na stronach spersonalizowanych hero to naturalny pierwszy element do zmiany, bo widzi go każdy, kto wejdzie na stronę.
Zrzuty ekranu produktu dają konkretny dowód tego, co sprzedajesz, ale użyte bez namysłu mogą zaśmiecić stronę. Jeden opisany zrzut ekranu, wyróżniający funkcje najistotniejsze dla przypadku użycia odwiedzającego, działa lepiej niż kilka bez opisów. Jeśli dane z segmentacji mówią, że odwiedzającemu zależy na analityce, pokaż dashboard analityczny. Jeśli na integracjach – pokaż panel integracji.
Ilustracje i grafiki na zamówienie świetnie upraszczają złożoność. Gdy trzeba wyjaśnić abstrakcyjny workflow lub wieloetapowy proces, ilustracja przekaże w kilka sekund to, co wymagałoby kilku akapitów. Szczególnie przydają się na spersonalizowanych stronach, gdzie wyjaśnienie musi się zmieniać w zależności od zaawansowania technicznego odwiedzającego. Zanotuj w briefie do treści landing page’a, jakiej grafiki potrzebuje każda sekcja, żeby design i copy były planowane razem.
Obrazy budujące społeczny dowód słuszności to logo klientów, zdjęcia zespołu i miniatury case studies. Można je personalizować, pokazując logo firm z branży lub przedziału wielkości odwiedzającego. Firma SaaS z segmentu mid-market, widząc logo innych firm SaaS z mid-marketu, czuje się pewniej niż na widok logo z listy Fortune 500, z którymi trudno jej się utożsamić. Nasze przykłady landing page B2B pokazują, od którego dowodu powinien zaczynać każdy typ strony.
Obrazy tła budują atmosferę, nie domagając się uwagi. Subtelne gradienty lub wzory geometryczne często sprawdzają się lepiej niż zdjęcia w tle, bo dodają głębi bez rozpraszania. Rzadko wymagają personalizacji, bo ich rolą jest wspieranie, a nie sygnalizowanie trafności.
Wideo na landing page’u: kiedy zasługuje na swoje miejsce
Wideo to najcięższy element wizualny, jaki możesz dodać – pod względem wagi strony i uwagi, której wymaga. Nasze zdanie: wideo na landing page’u powinno odpowiadać na jedno pytanie, na które odwiedzający nie znajdzie odpowiedzi na zrzucie ekranu, zwykle „jak to wygląda, gdy ktoś naprawdę tego używa?”. Jeśli wideo powtarza nagłówek z muzyką w tle, dobrze dobrany zrzut ekranu zrobi to samo szybciej. O wideo poza landing page’ami przeczytasz w naszym poradniku wideo marketingu B2B.
Gdzie wideo zwykle się opłaca na stronach B2B:
- Prezentacje produktu na stronach demo i rejestracji. Sześćdziesiąt do dziewięćdziesięciu sekund pokazujących główny proces pozwala odwiedzającemu zakwalifikować się, zanim umówi rozmowę. Prowadź kursor powoli, a interfejs niech będzie czytelny w rozmiarze, w jakim odtwarza się wideo.
- Historie klientów na stronach późnego etapu. Klient opisujący problem własnymi słowami to dowód, którego nie da żadne logo. Umieść go obok twierdzenia, które potwierdza, a nie w osobnej galerii wideo.
- Strony webinarów i wydarzeń. 30-sekundowy klip z prelegentem pokazuje, że sesja jest warta czasu. Po wydarzeniu zastępuje go nagranie.
A gdzie zwykle się nie sprawdza: jako automatycznie odtwarzana pętla w tle za nagłówkiem (konkuruje z tekstem i wydłuża ładowanie) oraz jako jedyny sposób na uzyskanie kluczowych informacji (wielu odwiedzających B2B przegląda strony w pracy z wyłączonym dźwiękiem).
Dodawanie wideo bez spowalniania strony
- Użyj obrazu podglądu i ładuj odtwarzacz po kliknięciu. Pełne osadzenie z YouTube lub Vimeo ładuje skrypty, zanim ktokolwiek naciśnie „odtwórz”. Dokumentacja Google Lighthouse zaleca leniwe ładowanie osadzonych elementów zewnętrznych za fasadą, czyli statycznym podglądem, który po interakcji zamienia się w prawdziwy odtwarzacz.
- Ładuj osadzone elementy poniżej pierwszego ekranu leniwie. Dodanie
loading="lazy"do elementów iframe opóźnia ładowanie odtwarzaczy poza ekranem, jak opisuje przewodnik web.dev o leniwym ładowaniu iframe’ów. - Dodawaj napisy do wszystkiego. Napisy służą osobom oglądającym bez dźwięku i są wymogiem dostępności dla nagranego wcześniej wideo z dźwiękiem.
- Utrzymuj CTA widoczne bez wideo. Formularz ani przycisk nigdy nie powinny zależeć od tego, czy ktoś obejrzy film do końca.
Mierzenie, czy wideo pomaga
Pomiar zaawansowany w GA4 rejestruje zdarzenia video_start, video_progress i video_complete dla osadzonych filmów z YouTube z włączoną obsługą JS API. Dwie liczby są ważniejsze niż wyświetlenia: współczynnik odtworzeń (odtworzenia podzielone przez liczbę odwiedzających stronę) oraz współczynnik konwersji osób, które odtworzyły film, w porównaniu z tymi, które tego nie zrobiły. Z drugim uważaj. Osoby, które klikają „odtwórz”, są już bardziej zaangażowane, więc wyższa konwersja wśród widzów nie dowodzi, że to film ją spowodował. Uczciwym testem jest test A/B strony z filmem i bez niego, oceniany po konwersjach, a nie czasie oglądania.
Wideo też dobrze się personalizuje. Odwiedzający z produkcji i z branży software'owej mogą zobaczyć tę samą prezentację nagraną na dwóch różnych zestawach danych demo, co jest tańsze, niż się wydaje, gdy scenariusz już istnieje.
Hierarchia wizualna na spersonalizowanych stronach
Obrazy kształtują sposób, w jaki odwiedzający poruszają się po stronie. Na stronach z dużą ilością tekstu ludzie zwykle skanują w poprzek u góry, a potem w dół lewej strony (wzorzec F); na stronach z mniejszą ilością treści wzrok często biegnie zygzakiem od lewego górnego do prawego górnego rogu i w dół. Rozmieszczaj obrazy z myślą o tych ścieżkach.
Umieść spersonalizowaną grafikę hero na górze „F”, tam, gdzie wzrok trafia najpierw. Grafiki uzupełniające rozmieść wzdłuż pionowej ścieżki skanowania. Jeśli w grafikach używasz wskazówek kierunkowych, np. spojrzenia osoby lub strzałki na diagramie, kieruj je w stronę wezwania do działania, a nie od niego.
Rozmiar tworzy hierarchię. Większe obrazy sygnalizują ważność. Jeśli chcesz, by odwiedzający z firmy docelowej skupił się na konkretnym rezultacie lub możliwości, niech ten obraz dominuje na stronie. Obrazy drugorzędne, takie jak logotypy klientów czy uzupełniające zrzuty ekranu, powinny pozostać mniejsze, żeby wzmacniać przekaz, a nie z nim konkurować.
Daj głównemu obrazowi przestrzeń. Jeden czytelny obraz dopasowany do segmentu, z miejscem wokół, odbiera się szybciej niż trzy ściśnięte, konkurujące o uwagę, i to jeden wariant do utrzymania zamiast trzech.
Personalizacja grafik na landing page’u krok po kroku
Wdrożenie personalizacji obrazów nie wymaga przebudowy całej strony. Oto praktyczny proces, który zaczyna się od małej skali i rośnie.
Krok 1: wybierz największe kwalifikowane segmenty. Pobierz dane z narzędzia analitycznego lub do identyfikacji odwiedzających. Które branże, wielkości firm lub role stanowią większość kwalifikowanego ruchu? Zacznij od segmentów na tyle dużych, by dało się je mierzyć, i na tyle odrębnych, by różne obrazy rzeczywiście miały sens.
Krok 2: przeprowadź audyt obecnych obrazów na landing page’ach. Wypisz każdy obraz na swoich landing page’ach o największym ruchu. Przy każdym zapytaj: czy trafia do wszystkich trzech segmentów w równym stopniu? Jeśli tak, to albo mocny uniwersalny obraz, albo ogólnik, który nie trafia do nikogo. Oznacz obrazy, w których wariant dla segmentu mógłby zwiększyć trafność.
Krok 3: przygotuj 2–3 warianty obrazu dla każdego oznaczonego miejsca. Nie potrzebujesz pełnego redesignu. W przypadku obrazów hero mogą to być trzy wersje tego samego układu z innym tłem, innymi zrzutami ekranu produktu lub innymi ilustracjami zastosowań. Zachowaj spójną kompozycję i położenie CTA, aby testować treść obrazu, a nie strukturę strony.
Krok 4: skonfiguruj reguły wyświetlania oparte na segmentach. W platformie do personalizacji przypisz każdy wariant do jego segmentu docelowego. Zdefiniuj wersję domyślną dla odwiedzających, którzy nie pasują do żadnego segmentu. Sprawdź, czy właściwe obrazy pojawiają się właściwym odwiedzającym, korzystając z podglądu z kontami testowymi z każdego segmentu.
Krok 5: mierz i iteruj. Śledź współczynnik konwersji według segmentu, a nie tylko łącznie. Grafika hero, która podnosi konwersję wśród odwiedzających z produkcji, może obniżyć wyniki wśród odwiedzających z SaaS. Prowadź testy A/B w ramach każdego segmentu, aby oddzielić wpływ zmiany grafiki od innych elementów strony. Ustal wielkość próby przed startem testu (nasz przewodnik o wielkości próby w testach A/B pokazuje, jak to zrobić), prowadź test przez co najmniej dwa pełne tygodnie i nie przerywaj go wcześniej tylko dlatego, że dashboard wygląda dobrze.
Wydajność techniczna: szybkość a jakość wizualna
Spersonalizowana sekcja hero, która ładuje się z opóźnieniem, jest gorsza niż ogólna, która ładuje się na czas. Obraz w hero często jest elementem Largest Contentful Paint, więc jego rozmiar i kolejność ładowania decydują o tym, jak szybka wydaje się strona.
Używaj nowoczesnych formatów. Według dokumentacji Google stratne obrazy WebP są o 25–34% mniejsze od porównywalnych plików JPEG, a bezstratne obrazy WebP o 26% mniejsze od PNG. AVIF często kompresuje jeszcze lepiej. Serwuj AVIF lub WebP z zapasowym JPEG za pomocą elementu <picture>.
Zamiast kopiować cudze limity rozmiaru, ustal budżet dla własnych stron: sprawdź rozmiar pliku hero i LCP w PageSpeed Insights w profilu mobilnym i traktuj każdy wariant wyraźnie cięższy od wersji domyślnej jako błąd.
Używaj obrazów responsywnych z atrybutem srcset. Wysyłanie obrazu o szerokości 2000 px na telefon marnuje transfer i opóźnia renderowanie. Pozwól przeglądarce wybrać odpowiedni rozmiar obrazu na podstawie szerokości widoku. Na stronach spersonalizowanych oznacza to, że każdy wariant obrazu potrzebuje własnego zestawu rozmiarów, ale narzędzia do budowania mogą to zautomatyzować.
Nie ładuj leniwie grafiki hero. Jest nad linią zgięcia, więc leniwe ładowanie ją opóźnia; zamiast tego oznacz ją przez fetchpriority="high" i ładuj leniwie tylko obrazy niżej na stronie. W przypadku wariantów dla segmentów najczystsza konfiguracja wybiera wariant na serwerze lub na brzegu sieci, tak by właściwy obraz był w HTML od początku. Jeśli podmiana odbywa się po stronie klienta, zarezerwuj wymiary obrazu, żeby układ nie skakał przy ładowaniu.
Dostępność wszystkich wariantów obrazów
Każdy spersonalizowany wariant obrazu potrzebuje własnego tekstu alternatywnego. Obraz w hero przedstawiający proces produkcyjny powinien mieć alt opisujący tę scenę, a nie ogólny tekst pasujący do dowolnego wariantu. Czytniki ekranu odczytują to, co jest na stronie, a tekst alternatywny powinien odpowiadać temu, co faktycznie widzą widzący odwiedzający z danego segmentu.
Dobry tekst alternatywny zwięźle opisuje zawartość obrazu w odniesieniu do otaczającego kontekstu. Nie przekraczaj 100 znaków. Obrazy dekoracyjne (tła, odstępy) powinny mieć pusty atrybut alt, aby czytniki ekranu je pomijały. Obrazy funkcjonalne, takie jak grafiki z linkiem, potrzebują tekstu alternatywnego opisującego cel linku.
Gdy obraz się nie załaduje, wyświetla się tekst alternatywny, więc pełni on funkcję zastępczą także dla widzących odwiedzających z wolnym łączem. Jeśli masz spersonalizowane warianty obrazów, to kolejny powód, by każdy wariant miał unikalny, opisowy tekst alternatywny zamiast wspólnego zastępczego.
Typowe błędy w spersonalizowanych grafikach
Zespoły, które dopiero zaczynają personalizować grafiki, często przesadzają. Podmiana każdego obrazu na stronie w zależności od segmentu tworzy ciężar utrzymania i rozmywa wpływ zmian, które naprawdę mają znaczenie. Skup personalizację na jednym lub dwóch miejscach na grafiki o największym wpływie (zwykle hero i główna sekcja social proof), a resztę zostaw spójną.
Innym częstym błędem jest używanie danych o segmentach do założeń, które wydają się natrętne. Pokazanie odwiedzającemu logo jego firmy, zanim się przedstawi, przekracza granicę. Pokazanie grafik związanych z jego branżą jest pomocne. Pokazanie jego biurowca jest niepokojące. Różnica przebiega między trafnością kontekstową a inwigilacją.
Trzecią pułapką jest testowanie zbyt wielu wariantów naraz. Cztery segmenty razy trzy sloty na obrazy, po kilka wariantów każdy, to już dziesiątki kombinacji, znacznie więcej, niż da się przetestować przy ruchu B2B. Testuj jedną zmienną naraz w każdym segmencie, czekaj na istotność statystyczną i nabierz pewności co do każdej zmiany, zanim dołożysz kolejne.
Dla zespołów realizujących szerszy plan optymalizacji landing page’y B2B personalizacja obrazów to rozsądny wczesny krok, bo wymaga mniej nowych treści niż personalizacja tekstów. Haczyk polega na tym, że wymaga prawdziwych materiałów wizualnych dla segmentów; jeśli możesz przygotować tylko inne zdjęcie stockowe dla każdej branży, poświęć ten czas na teksty.
Od czego zacząć
Weź landing page z największym ruchem i spójrz na obraz w sekcji hero, zadając jedno pytanie: czy odwiedzający z Twojego największego segmentu rozpozna na nim swoją pracę? Jeśli nie, zastąp go zrzutem ekranu produktu lub zdjęciem klienta, które rozpozna, i przetestuj względem obecnego. Dopiero gdy prawdziwy obraz wygra ze zdjęciem stockowym, warto tworzyć warianty dla segmentów. Markettailor łączy dane z identyfikacji odwiedzających z treścią na stronie, w tym z obrazami, jeśli chcesz wyświetlać te warianty bez samodzielnego budowania reguł.
