Treści interaktywne
na Twoją stronę
Animowane schematy, kalkulatory, konfiguratory i interaktywne infografiki. Zamiast opisywać klientowi, jak działa Twój produkt albo usługa, pozwól mu to zobaczyć i sprawdzić samodzielnie. Niżej na tej stronie znajdziesz działający przykład, który zbudowaliśmy od zera.
Bezpłatna wycena
Odpowiadamy w ciągu 24 godzin
Na tej stronie
Czym są treści interaktywne?
To fragment strony, z którym odwiedzający coś robi, zamiast tylko go czytać. Przesuwa suwak i widzi, jak zmienia się wynik. Klika w schemat i dowiaduje się, co robi dana część. Przewija stronę, a rysunek obok animuje się razem z tekstem.
W polskiej sieci ta usługa występuje pod kilkoma nazwami: treści interaktywne, interaktywne infografiki, scrollytelling, czasem po prostu kalkulatory i konfiguratory. W materiałach anglojęzycznych to interactive content, a od strony SEO linkable asset, czyli materiał, do którego inni linkują sami z siebie. Nazwy są różne, mechanizm ten sam: zamiana biernego czytania w sprawdzanie.
Nie mylić z animacją dekoracyjną. Element, który tylko ładnie wjeżdża z boku przy przewijaniu, nie niesie żadnej informacji. Tutaj chodzi o coś przeciwnego: animacja jest nośnikiem treści i bez niej dana rzecz zostałaby niezrozumiana.
To NIE jest to samo co...
- Animacja dekoracyjna, czyli teksty wjeżdżające przy przewijaniu
- Film albo animacja wideo, bierna i identyczna dla każdego
- Gotowa wtyczka z kalkulatorem, wyglądająca jak u wszystkich
- Slider ze zdjęciami na stronie głównej
To jest to
- Odwiedzający wpisuje swoje dane i dostaje swój wynik
- Rysunek pokazuje to, czego nie widać: wnętrze, proces, przekrój
- Można coś zatrzymać, przewinąć, porównać dwa warianty obok siebie
- Materiał jest jedyny w swoim rodzaju, bo powstał pod Twój temat
Zamiast opisu: sprawdź sam
Zbudowaliśmy przewodnik po budowie silnika motocyklowego. Temat jest celowo trudny: to coś, czego nie widać i czego nie da się dobrze wytłumaczyć samym tekstem. Poniżej działa na żywo, wprost w tej stronie. Zatrzymaj animację, poprzesuwaj suwaki, poprzełączaj warianty.
Co się dzieje w środku silnika
Zaczynamy od jednego tłoka i dochodzimy do tego, dlaczego jedne motocykle mają trzy cylindry w rzędzie, a Ducati dwa ustawione pod kątem 90 stopni. Rysunki są animowane - można je zatrzymać i przewinąć ręcznie.
Jeden cylinder - cztery ruchy, które powtarzają się bez końca
Cylinder to po prostu metalowa rura zamknięta od góry. W środku porusza się w górę i w dół tłok - szczelnie dopasowany krążek. Tłok jest połączony korbowodem z wałem korbowym, który zamienia ruch góra-dół na obrót. Ten obrót idzie przez skrzynię biegów i łańcuch do tylnego koła.
Nad tłokiem, w głowicy, są dwa zawory (dolotowy i wylotowy) oraz świeca zapłonowa. Cały cykl to cztery suwy i trwa dwa pełne obroty wału, czyli 720 stopni.
Kąt wału: 0° z 720°
-
1. Ssanie 0-180°Tłok jedzie w dół i zasysa. Zawór dolotowy otwarty, do cylindra wpada powietrze z benzyną. Jak strzykawka, którą ciągniesz do siebie.
-
2. Sprężanie 180-360°Oba zawory zamknięte, tłok jedzie w górę i ściska mieszankę kilkanaście razy. Im mocniej ściśnięta, tym więcej energii da przy spalaniu.
-
3. Praca 360-540°Świeca iskrzy, mieszanka gwałtownie się spala, ciśnienie spycha tłok w dół. To jedyny suw, który daje moc, pozostałe trzy są „na kredyt”.
-
4. Wydech 540-720°Tłok wraca w górę i wypycha spaliny przez otwarty zawór wylotowy. Potem wszystko zaczyna się od nowa.
Wał korbowy - miejsce, w którym cylindry się spotykają
Wał korbowy to prosty wałek z przesuniętymi mimośrodowo czopami, takimi „kolankami”. Każdy tłok ma swój czop. Odległość czopa od osi wału to promień korby, a tłok przejeżdża dokładnie dwa razy tyle. Ta droga nazywa się skokiem.
I tu jest cała magia wielocylindrowców: czopy nie muszą być ustawione tak samo. Można je porozstawiać wokół osi wału. W rzędowej trójce są co 120°, w czwórce co 180°, w niektórych dwucylindrowcach co 270°. To ustawienie decyduje o tym, kiedy który cylinder zapala, jak silnik wibruje i jak brzmi.
Dlaczego jedne cylindry są większe, a inne mniejsze
Pojemność silnika to zwykła geometria. Objętość walca, który „zamiata” tłok, razy liczba cylindrów:
pojemność = π/4 × (średnica tłoka)² × skok × liczba cylindrów
Silnik 700 cm³ możesz zbudować jako jeden wielki cylinder albo jako trzy małe. Ta sama pojemność, zupełnie inny charakter. Pobaw się suwakami - zobaczysz, jak łatwo zamienić jedno w drugie.
Proporcja średnicy do skoku to charakter silnika. Szeroki i płytki cylinder (krótkoskokowy) kręci wysokie obroty i daje moc na górze. Wąski i głęboki (długoskokowy) daje moment obrotowy od dołu, ale szybko traci oddech.
Katalog układów - jak można poukładać te cylindry
Mając kilka cylindrów, trzeba zdecydować, gdzie je postawić względem wału. To nie jest kwestia gustu - od tego zależy szerokość silnika, środek ciężkości, chłodzenie i wibracje. Poniżej wszystkie układy, które spotkasz w motocyklach. Widok od przodu pokazuje kąt między cylindrami, widok z góry - ile ich jest.
Skąd się wzięły te 90 stopni
To pytanie o wibracje. Tłok, który rusza w górę i w dół, szarpie całym silnikiem: najpierw w jedną stronę, potem w drugą, kilkaset razy na sekundę. W jednym cylindrze nie da się tego zrównoważyć w pełni; można tylko dołożyć przeciwciężar na wale i wałek wyrównoważający, które to rozmażą.
Ale przy dwóch cylindrach ustawionych dokładnie pod kątem 90°, dzielących ten sam czop wału, dzieje się coś eleganckiego: kiedy jeden tłok jest w martwym punkcie i szarpie najmocniej, drugi jest w połowie drogi i szarpie w bok. Ich siły składają się w jeden wektor o stałej wielkości, obracający się razem z wałem. A skoro obraca się razem z wałem, wystarczy zwykły przeciwciężar po drugiej stronie, żeby go skasować. Silnik jest gładki bez żadnych dodatkowych wałków.
Bardzo wąski silnik, mieści się w klasycznej ramie. Za to nierówny i wibrujący - i o to właśnie chodzi, to jest ich znak firmowy.
Idealne wyważenie bez dodatków. Wada: silnik jest długi, przedni cylinder wypycha koło do przodu. Stąd u Ducati układ „L”, w którym przedni cylinder leży prawie poziomo.
Tłoki idą przeciwnie i kasują się nawzajem. Środek ciężkości nisko, chłodzenie powietrzem świetne, ale cylindry wystają na boki.
Rytm zapłonów - dlaczego każdy silnik brzmi inaczej
Pełny cykl to 720°. Jeśli masz trzy cylindry, możesz rozłożyć trzy zapłony równo co 240° albo nierówno. To rozłożenie w czasie słyszysz jako dźwięk i czujesz jako charakter silnika. Poniżej oś jednego pełnego cyklu, każdy znacznik to jeden wybuch.
Rzędowa trójka pod lupą
Weźmy typową współczesną rzędową trójkę o pojemności około 700 cm³: trzy cylindry obok siebie, w jednej linii poprzecznie do kierunku jazdy, czopy wału co 120°, zapłon co 240°. Około 700 cm³ podzielone na trzy, czyli jakieś 230 cm³ na cylinder, mniej więcej tyle, ile w skuterze 250.
Co to daje w praktyce: tłoki są małe i lekkie, więc silnik ochoczo kręci w górę. Ale jest ich trzy, więc zapłony następują co 240° - nie ma martwych chwil, ciąg jest równy już od niskich obrotów. Siły bezwładności tłoków wzajemnie się kasują (dlatego trójka jest z natury gładka), zostaje tylko lekkie „kołysanie” wzdłuż wału, które producenci tłumią wałkiem wyrównoważającym.
Dźwięk bierze się stąd, że trzy równe zapłony na dwa obroty dają rytm inny niż wszystko pozostałe: pełniejszy niż dwucylindrowiec, bardziej chropawy niż czwórka. Stąd ten charakterystyczny warkot Triumpha i MT-09.
Trójka jest też najtrudniejsza do zaprojektowania z tanich układów - potrzebuje wałka wyrównoważającego i precyzyjnego wału. Dlatego przez lata była domeną kilku producentów, a każda nowa konstrukcja w tej klasie jest sporym skokiem inżynieryjnym.
| Układ | 3 cylindry w rzędzie |
| Pojemność | ok. 700 cm³ |
| Na cylinder | ok. 230 cm³ |
| Czopy wału | co 120° |
| Zapłon | co 240° |
| Moc | ok. 80-100 KM |
Animacja sterowana przez użytkownika
Pracę silnika można zatrzymać i przewinąć krok po kroku. Opis obok podświetla się sam, zgodnie z tym, co dzieje się na rysunku.
Kalkulator z natychmiastowym wynikiem
Cztery suwaki, wynik przeliczany w locie plus rysunek zmieniający proporcje razem z liczbami i komentarz oceniający wynik.
Katalog wariantów
Dziewięć układów cylindrów, każdy z dwoma rysunkami generowanymi z danych, a nie wklejanymi jako obrazki.
Wykres, który sam się tłumaczy
Oś czasu zapłonów pokazuje na jednym pasku różnicę, której nie widać w tabelce ani w tekście.
Ten przykład powstał pod motoryzację, ale dokładnie w ten sam sposób pokazuje się działanie pompy ciepła, przebieg zabiegu, etapy procesu produkcyjnego, budowę okna czy sposób naliczania Twojej prowizji.
Co możemy zbudować
Osiem formatów, które sprawdzają się najczęściej. Zwykle łączy się dwa lub trzy w ramach jednej podstrony.
Kalkulator
Odwiedzający podaje metraż, przebieg, liczbę pracowników albo budżet i od razu widzi wynik: koszt, oszczędność, czas zwrotu. Najszybciej zwracający się format, bo od razu kwalifikuje zapytania.
Przykłady: kalkulator kosztu ogrzewania, wyceny montażu, zwrotu z inwestycji
Konfigurator wariantów
Klient sam składa produkt lub pakiet i widzi, jak zmienia się cena i wygląd. Zdejmuje z handlowca pracę, którą i tak by wykonał, tylko przez telefon.
Przykłady: konfigurator ogrodzenia, mebla, pakietu usług
Animowany schemat działania
Pokazuje, co dzieje się w środku urządzenia albo w trakcie procesu. Dokładnie ten format widzisz w naszym demo.
Przykłady: jak działa pompa ciepła, oczyszczalnia, przebieg zabiegu
Interaktywna infografika
Dane, które można filtrować, sortować i porównywać, zamiast statycznego obrazka z liczbami. Rysunek generuje się z danych, więc aktualizacja to podmiana liczb.
Przykłady: wyniki badań, porównanie technologii, statystyki branżowe
Scrollytelling
Historia rozwijająca się razem z przewijaniem: tekst po jednej stronie, zmieniająca się grafika po drugiej. Dobre do długich, trudnych tematów.
Przykłady: historia firmy, przebieg inwestycji, case study
Porównywarka
Dwa lub więcej rozwiązań zestawione obok siebie, z możliwością ukrycia tego, co danej osoby nie interesuje. Świetnie odpowiada na zapytania typu „X czy Y”.
Przykłady: porównanie materiałów, wariantów usługi, technologii
Test dopasowania
Kilka pytań i rekomendacja na końcu. Klient dostaje odpowiedź, Ty dostajesz komplet informacji o jego potrzebie jeszcze przed pierwszą rozmową.
Przykłady: który wariant dla Ciebie, quiz kwalifikujący
Mapa i oś czasu
Zasięg działania, lokalizacje, etapy realizacji rozłożone w czasie. Format prosty, ale zwykle wygrywa z listą punktów.
Przykłady: obszar obsługi, harmonogram wdrożenia, portfolio realizacji
Nie widzisz swojego przypadku? To normalne, bo każdy taki element powstaje pod konkretny temat. Opisz nam, co chcesz pokazać, a powiemy, czy da się to zrobić i ile to zajmie.
Po co to firmie?
Trzy powody. Pierwszy jest sprzedażowy, drugi dotyczy Google, trzeci leadów.
Tłumaczy to, czego nie da się opisać
Jeśli w rozmowie z klientem sięgasz po kartkę i rysujesz, to znaczy, że sam tekst na stronie nie wystarcza. Klient, który nie zrozumiał, nie kupi, tylko pojedzie do konkurencji, u której akurat załapał. Element interaktywny wykonuje tę rozmowę za Ciebie, całą dobę, dla każdego odwiedzającego.
Zdobywa linki bez ich kupowania
Nikt nie linkuje do kolejnej podstrony ofertowej. Do działającego narzędzia albo do materiału, którego nie ma nikt inny w branży, linkują sami: fora, blogi, portale branżowe. W SEO to się nazywa linkable asset i jest to jedna z niewielu metod budowania profilu linków, która nie polega na płaceniu za wpisy.
Przy okazji rośnie czas spędzony na stronie, bo z takim elementem ludzie eksperymentują zamiast wyjść po kilkunastu sekundach.
Przynosi lepiej przygotowane zapytania
Osoba, która przed wysłaniem formularza sama coś policzyła i sprawdziła, wie już mniej więcej, czego chce i ile to kosztuje. Rozmowa zaczyna się od konkretów, a nie od tłumaczenia podstaw. Kalkulator odsiewa też zapytania z zupełnie innego przedziału cenowego, zanim zajmą Ci czas.
Uczciwe zastrzeżenie: to nie jest magiczny przełącznik. Element interaktywny działa wtedy, gdy odpowiada na realne pytanie, które Twoi klienci naprawdę zadają. Jeśli sprzedajesz coś, co każdy rozumie od razu, lepszą inwestycją będzie zwykła, dobrze zrobiona strona i pozycjonowanie. Powiemy to wprost już na etapie wyceny.
Dla kogo to ma sens
Im trudniej wytłumaczyć, co sprzedajesz, tym więcej to daje.
Producenci i firmy techniczne
Urządzenie, instalacja, technologia. Cała wartość siedzi w środku, a na zdjęciu widać tylko obudowę.
Budownictwo i instalacje
Pompy ciepła, fotowoltaika, wentylacja, ogrodzenia. Klient chce wiedzieć, ile go to będzie kosztowało u niego, a nie "od".
Medycyna i usługi zdrowotne
Przebieg zabiegu wytłumaczony spokojnie i rzetelnie zdejmuje najwięcej obaw przed pierwszą wizytą.
Finanse i doradztwo
Symulacje, porównania wariantów, koszt w czasie. Liczby przekonują skuteczniej niż deklaracje.
E-commerce z produktem złożonym
Wszędzie tam, gdzie zwrot bierze się z tego, że klient źle dobrał wariant przy zakupie.
Każdy, kto tłumaczy to samo w kółko
Jeśli Twój handlowiec dwadzieścia razy w miesiącu rysuje to samo na kartce, to jest gotowy scenariusz.
Jak wygląda praca
Najwięcej czasu zajmuje nie kod, tylko ustalenie, co dokładnie ma zostać wyjaśnione.
Rozmowa i scenariusz
Pytamy, czego klienci nie rozumieją i o co pytają najczęściej. Z tego powstaje scenariusz: co ma się dziać na ekranie i w jakiej kolejności. Ten etap jest bezpłatny i kończy się wyceną.
Szkic i akceptacja
Pokazujemy uproszczoną wersję, zwykle jeden ekran, żebyś zobaczył kierunek, zanim powstanie całość. Zmiany na tym etapie nic nie kosztują.
Budowa
Programujemy i rysujemy właściwy element. Pracujemy na roboczym adresie, do którego masz dostęp przez cały czas, więc widzisz postęp na bieżąco.
Wdrożenie i pomiar
Wdrażamy na Twoją stronę, sprawdzamy telefon i szybkość ładowania, podpinamy pomiar. Po miesiącu widać w danych, czy ludzie faktycznie z tego korzystają.
Co dokładnie dostajesz
Element interaktywny to normalny fragment strony, a nie zewnętrzna usługa, za którą płaci się co miesiąc. Dostajesz kod, wdrożenie i prawo do korzystania z niego bez ograniczeń. Jeśli kiedyś zmienisz agencję, wszystko działa dalej.
Nasze demo to jeden plik: cała grafika jest rysowana w przeglądarce, nie ma w nim ani jednej biblioteki zewnętrznej, ani jednego zapytania na obcy serwer. To nie jest efekciarstwo, tylko warunek tego, żeby strona się nie spowolniła i żeby nic nie przestało działać, gdy komuś wygaśnie licencja na wtyczkę.
A jeśli mam stronę u kogoś innego?
To nie problem. Element dostajesz w formie, którą wkleja się w dowolną stronę: WordPressa, inny CMS albo stronę pisaną ręcznie. Możemy wdrożyć go sami albo przekazać Twojemu informatykowi z instrukcją.
Ile to kosztuje
Wycena jest zawsze indywidualna, bo każdy taki element powstaje od zera. Poniżej to, co realnie decyduje o cenie, żebyś wiedział, na co patrzymy.
Zakres
Jeden element osadzony w istniejącej podstronie to zupełnie inna praca niż osobna podstrona złożona z kilku modułów, taka jak nasze demo.
Ile trzeba policzyć
Suwak zmieniający jedną liczbę jest tani. Symulacja z wieloma zmiennymi i realnym modelem obliczeniowym wymaga dużo więcej pracy.
Skąd biorą się dane
Wartości wpisane na sztywno są najtańsze. Pobieranie danych z Twojego systemu, cennika czy magazynu to osobna integracja.
Grafika
Schematy rysujemy sami. Jeśli potrzebny jest przekrój konkretnego urządzenia albo model 3D, dochodzi praca projektowa.
Wycena jest bezpłatna i konkretna
Opisz w kilku zdaniach, co chcesz pokazać. Odpowiemy, czy w Twoim przypadku ma to sens, zaproponujemy format i podamy cenę oraz termin. Jeśli uznamy, że lepiej zainwestować w coś innego, powiemy to wprost.
Poproś o wycenęNajczęstsze pytania o treści interaktywne
Czym właściwie są treści interaktywne?
To elementy strony, z którymi odwiedzający coś robi, zamiast tylko je czytać: przesuwa suwak, klika w schemat, wpisuje swoje dane i dostaje wynik, przewija animację. W praktyce najczęściej są to kalkulatory, konfiguratory, animowane schematy procesu lub produktu, interaktywne infografiki i tak zwany scrollytelling, czyli historia rozwijająca się razem z przewijaniem strony.
Czym to się różni od filmu albo animacji wideo?
Film jest bierny i zawsze taki sam. Element interaktywny reaguje na konkretną osobę: pokazuje wynik dla jej danych, jej metrażu, jej budżetu. Dodatkowo to zwykły kod strony, więc Google go czyta, można go zaindeksować i podlinkować, a zmiana treści nie oznacza nagrywania wszystkiego od nowa.
Ile to kosztuje?
Wycena jest zawsze indywidualna, bo każdy taki element budujemy od zera pod konkretny temat. Na cenę wpływa przede wszystkim liczba ekranów i interakcji, to czy trzeba policzyć coś nietrywialnego, czy element ma się łączyć z Twoimi danymi lub systemem, oraz czy potrzebujesz jednego elementu, czy całej podstrony. Wycenę podajemy po krótkiej rozmowie, bezpłatnie i bez zobowiązań.
Ile trwa realizacja?
Prosty kalkulator albo animowany schemat to zwykle kilka dni roboczych. Rozbudowana podstrona z kilkoma modułami, jak w naszym demo, to zazwyczaj dwa do trzech tygodni, licząc od zatwierdzenia scenariusza. Najwięcej czasu zajmuje zwykle nie kod, tylko ustalenie, co dokładnie ma zostać wyjaśnione.
Czy to spowolni moją stronę?
Nie powinno. Budujemy takie elementy bez ciężkich bibliotek zewnętrznych: grafika to SVG rysowane w przeglądarce, a całość waży zwykle tyle, co jedno zdjęcie. Dla porównania, nasze demo to jeden plik i zero zewnętrznych zależności. Po wdrożeniu sprawdzamy Core Web Vitals, żeby mieć pewność, że nic się nie pogorszyło.
Czy to zadziała na mojej stronie na WordPressie?
Tak. Element dostajesz jako samodzielny fragment kodu, który wkleja się w stronę na WordPressie, w innym CMS-ie albo na stronie pisanej ręcznie. Możemy też wdrożyć go u Ciebie sami. Jeśli Twoja strona jest pod naszą opieką, wdrożenie i późniejsze poprawki idą w ramach normalnej obsługi.
Czy to pomaga w SEO?
Pomaga, choć pośrednio. Po pierwsze, taki element wydłuża czas spędzony na stronie, bo ludzie z nim eksperymentują zamiast wyjść po dziesięciu sekundach. Po drugie, jest to typowy zasób, do którego inni linkują z własnej woli, bo nikt inny go nie ma. W branży SEO nazywa się to linkable asset i jest to jeden z niewielu sposobów na zdobywanie linków bez ich kupowania.
Czy element jest dostępny na telefonie?
Tak, projektujemy je od razu pod ekran telefonu, bo stamtąd przychodzi większość ruchu. Układ przestawia się na jedną kolumnę, a elementy sterujące są na tyle duże, żeby dało się ich używać palcem. Sprawdzamy to na realnych szerokościach ekranu przed oddaniem pracy.
Czyja jest własność tego, co powstanie?
Twoja. Przekazujemy kod źródłowy elementu razem z prawem do korzystania z niego bez ograniczeń. Nie ma tu abonamentu za samo działanie i nie ma uzależnienia od naszej platformy: jeśli kiedyś zmienisz agencję, element działa dalej.
Skąd wiadomo, czy to się opłaci akurat u mnie?
Najprostszy test jest taki: czy w rozmowie sprzedażowej musisz coś klientowi tłumaczyć rysunkiem na kartce, albo czy klienci zadają w kółko to samo pytanie. Jeśli tak, to jest dokładnie ten materiał, który warto zamienić w element interaktywny. Jeśli sprzedajesz coś, co każdy rozumie od razu, lepszy efekt da zwykła, dobrze zoptymalizowana strona.
Masz coś, czego nie da się opisać słowami?
Pokaż to. Napisz, co chcesz wytłumaczyć, a my powiemy, jak to zrobić i ile to kosztuje.