O czym jest ten film
- Autor przejrzał ponad 10 000 stron budowanych z pomocą AI i wyłuskał pięć powtarzających się wzorców, które odróżniają witryny przynoszące realne wyniki — takie, za które firmy płacą około 1000 dolarów.
- Wzorzec „test lustra”: pierwszy ekran musi odpowiedzieć na trzy pytania — dla kogo ta strona jest, co z niej dostanę i co mam zrobić dalej.
- Wzorzec „zasada zakreślacza”: jeden kolor akcentowy zarezerwowany wyłącznie dla przycisku działania oraz paleta w proporcjach 60-30-10.
- Wzorzec „tło — środek — pierwszy plan”: trzy warstwy głębi zamiast płaskich pudełek przyklejonych do ekranu.
- Wzorzec „animacja z zadaniem”: każdy ruch na stronie ma wykonywać jedną konkretną funkcję, a użytkownik musi dostać możliwość jego wyłączenia.
- Wzorzec „darmowa próbka”: kalkulator, quiz albo proste narzędzie, które pozwala odwiedzającemu posmakować efektu, zanim trafi na formularz kontaktowy.
- Przykłady z liczbami: Truckers Report (+79,3% konwersji), City Click (+90% wejść na cennik), Campaign Monitor (+31,4% rejestracji), kalkulator kliniki Doc Braces (ok. 45% konwersji).
- Kluczowy wniosek praktyczny: AI pisze ogólnikowe teksty i traktuje kolor dekoracyjnie — warto samodzielnie przygotować treść pierwszego ekranu i paletę barw, zanim poprosi się model o projekt.
- W tle badania: Nielsen Norman Group o ruchomych elementach odciągających uwagę, eksperyment Uniwersytetu Purdue z parallaksą oraz efekt IKEA opisany przez badaczy z Harvardu i Duke.
- Autopromocja: darmowy pakiet wytycznych projektowych Scrollcraft do Claude oraz film o budowie kompletnej strony w kilka minut.
10 najważniejszych takeaways — z kontekstem zastosowania
1.Pierwszy ekran ma działać jak lustro
Na czym polega: Odwiedzający musi w kilka sekund zobaczyć na pierwszym ekranie własny problem i własny świat — wtedy ma poczucie, że trafił we właściwe miejsce. W przykładzie Truckers Report przebudowa strony wokół realnych potrzeb kierowców podniosła konwersję o 79,3% wobec wersji wyjściowej.
Jak stosować: Otwórz swoją stronę i sprawdź, czy nagłówek mówi wprost, do kogo się zwraca i jaką daje korzyść. Zamień hasła reklamowe na konkret: „Stwórz stronę dla swojej firmy” zamiast „Firmy rosną szybciej w internecie”. Zamiast zdjęcia z banku fotografii wstaw obraz, w którym odbiorca rozpozna siebie.
Na co uważać: AI ma silną skłonność do tekstów bezpiecznych i uniwersalnych, które nie dotyczą nikogo konkretnie — ani ładny layout, ani animacje tego nie naprawią.
2.Rozstrzygnij treść, zanim AI zacznie projektować
Na czym polega: Jakość wyniku zależy bardziej od briefu niż od modelu. Autor radzi samodzielnie odpowiedzieć na trzy pytania (dla kogo? co dostanę? co dalej?) i wkleić te odpowiedzi do Claude’a, dopiero potem prosząc o wygląd strony.
Jak stosować: Przygotuj krótki dokument z trzema odpowiedziami plus przykład złego i dobrego sformułowania, np. „planowanie wspomagane przez AI” (funkcja) kontra „zapełnij kalendarz, nie odpisując na wiadomości” (rezultat).
Na co uważać: Opisywanie funkcji zamiast efektów to najczęstszy błąd tekstów generowanych maszynowo — klient kupuje wynik, nie technologię.
3.Mów językiem, którego używa klient w wyszukiwarce
Na czym polega: Campaign Monitor zwiększył liczbę rejestracji o 31,4%, dopasowując jedno słowo w nagłówku („zaprojektuj” / „stwórz” / „zbuduj”) do fraz wpisywanych w Google.
Jak stosować: Sprawdź, jakimi słowami potencjalni klienci opisują twoją usługę — w podpowiedziach wyszukiwarki, w zapytaniach e-mailowych, w rozmowach — i użyj tego słowa w nagłówku głównym.
Na co uważać: Chodzi o jedno naturalne słowo wplecione w treść, a nie o upychanie fraz jak w pozycjonowaniu z dekady temu.
4.Jeden kolor, jeden cel
Na czym polega: Zasada zakreślacza: jeśli zakreślisz w notatkach wszystko, nie zakreśliłeś niczego. Kolor akcentowy ma trafiać wyłącznie na element, na który ludzie mają kliknąć — przycisk, link rezerwacji — i nigdzie indziej.
Jak stosować: Przejrzyj stronę i wylicz wszystkie miejsca, w których pojawia się kolor akcentowy. Usuń go z nagłówków, ikon, obramowań i tła; zostaw tylko przy przycisku głównym.
Na co uważać: Domyślnie AI rozrzuca kolor akcentowy po całym layoucie — wtedy przycisk ginie w tłumie, mimo że formalnie „wygląda ładnie”.
5.Paleta 60-30-10: trzy kolory wystarczą
Na czym polega: Reguła zapożyczona od projektantów wnętrz: 60% powierzchni w kolorze głównym (tło), 30% w drugim (tekst, menu, karty, bloki sekcji) i 10% w akcencie (przyciski, linki).
Jak stosować: Dobierz trzy kolory, np. w generatorze Coolors, wklej kody do Claude’a i każ mu ściśle trzymać się tych proporcji. Autor testował to na własnej stronie — powrót do przewagi czerni i bieli z odrobiną akcentu sprawił, że witryna wyglądała drożej i czytelniej.
Na co uważać: Zbyt bogata paleta natychmiast obniża odbiór jakościowy serwisu; warto też sprawdzić kontrast tekstu na tle, bo AI często dobiera zbyt słabe zestawienia.
6.Trzy warstwy głębi zamiast płaskich pudełek
Na czym polega: Strony generowane przez AI często wyglądają tanio nawet przy dobrych tekstach i kolorach, bo wszystko leży na tym samym poziomie — a oko nie wie, co oglądać najpierw. Rozwiązaniem są trzy plany, jak w teatrze: tło (zdjęcie, miękki kształt, plama koloru), środek (treść, nagłówki, karty) i pierwszy plan (przycisk działania).
Jak stosować: Krok pierwszy — wstaw w tło coś prawdziwego: zdjęcie swojej pracy lub produktu. Krok drugi — pozwól jednemu elementowi wystawać do kolejnej sekcji, na przykład karcie rezerwacji z terminami. Krok trzeci — dodaj delikatny cień tylko głównemu przyciskowi, żeby wyraźnie siedział przed resztą.
Na co uważać: Cień i „unoszenie” rezerwuj dla jednej rzeczy. Podświetlanie wszystkich kart równocześnie znów robi z nich stos pudełek.
7.Każda animacja ma jedno zadanie — albo znika
Na czym polega: Animacje przewijania najszybciej nadają stronie charakter klasy, ale równie szybko zdradzają, że zrobiła ją maszyna. Zasada autora: ruch musi pokazywać produkt, prowadzić wzrok do następnego kroku albo pokazywać właśnie dokonaną czynność. Wzorcem jest strona AirPods Pro — poruszają się tylko słuchawki i nic nie konkuruje z nimi o uwagę.
Jak stosować: Na każdy ekran wybierz jedną rzecz, która może się ruszać (produkt, efekt, zestawienie przed i po), a resztę zamroź. Przejrzyj sekcje i skasuj wszystko, co nie pełni żadnej funkcji.
Na co uważać: Klienci płacą za więcej zapytań i rezerwacji, nie za pokaz filmowy. Badania (Nielsen Norman Group, eksperyment z parallaksą na Purdue) pokazują, że ruchome elementy odciągają uwagę od celu, nie zwiększając użyteczności ani atrakcyjności witryny.
8.Słowa muszą być czytelne natychmiast
Na czym polega: Nagłówek, treść i przycisk mają być do przeczytania w chwili, gdy pojawią się na ekranie. Żadnych napisów wlatujących, wirujących czy rozjaśniających się na pierwszym ekranie.
Jak stosować: Efektowne wejścia tekstu przenieś niżej — poza pierwszy widok. Górę strony potraktuj jak miniaturę filmu: ma przekazać wszystko w ułamku sekundy, bo od tego zależy, czy ktoś w ogóle zostanie.
Na co uważać: To pułapka dla twórców, którym efektowne demo po prostu sprawia frajdę — autor sam przyznaje, że wyciął obracający się pierścień 3D ze swojej strony, bo „było go za dużo”.
9.Daj użytkownikowi wyłącznik animacji
Na czym polega: Część osób od intensywnego ruchu na ekranie odczuwa zawroty głowy, a nawet mdłości; według cytowanego badania około jedna trzecia dorosłych po czterdziestce ma objawy zaburzeń równowagi w uchu wewnętrznym. Dlatego systemy oferują opcję ograniczenia animacji, a strona powinna ją respektować.
Jak stosować: Poleć Claude’owi, aby wykrywał systemowe ustawienie ograniczenia ruchu i wyłączał animacje dla osób, które je mają. Można dodatkowo wstawić na stronę przełącznik w stylu trybu jasny/ciemny: animacje wł./wył.
Na co uważać: Pomijanie tego ustawienia to nie tylko kwestia komfortu — to realny problem dostępności, który może kosztować firmie klientów.
10.Darmowa próbka sprzedaje lepiej niż formularz
Na czym polega: Zamiast tłumaczyć wszystko i kończyć formularzem kontaktowym, daj odwiedzającemu przedsmak rezultatu. Klinika ortodontyczna Doc Braces wstawiła kalkulator kosztów aparatu — i według Outgrow konwertował on na poziomie około 45%. Działa tu efekt IKEA: bardziej cenimy to, w co sami się włożyliśmy.
Jak stosować: Wypisz pytania, które każdy klient zadaje przed zakupem (cena? która opcja dla mnie? ile to będzie warte?), a potem każ Claude’owi zbudować narzędzie, które na nie odpowiada — quiz doboru usługi, estymator ceny albo miniaplikację w stylu przewalutowania w Wise czy wirtualnego malowania ścian u Sherwina-Williamsa.
Na co uważać: Próbka działa tylko wtedy, gdy użytkownik dojdzie do końca. Quiz albo kalkulator musi być na tyle krótki i prosty, by nikt nie porzucał go w połowie — inaczej cała mechanika efektu IKEA się nie uruchamia.
Redakcyjne tłumaczenie
Wstęp: 10 000 stron i pięć wzorców
Przejrzałem ponad 10 000 stron tworzonych z pomocą sztucznej inteligencji, żeby odpowiedzieć na jedno pytanie: co tak naprawdę odróżnia dobrą witrynę od reszty. Projektowanie stron to mój pierwszy sprawdzian dla każdego nowego modelu AI — od razu widać, na co go stać. Nagrałem mnóstwo filmów o stronach i pomogłem tysiącom osób nauczyć się budować je z użyciem AI. I wszędzie powtarzają się te same wzorce — pięć z nich. Każda strona, która przynosi realny efekt, a więc taką, którą firma jest gotowa kupić za tysiąc dolarów, spełnia wszystkie pięć. Dziś przeprowadzę cię przez nie po kolei: co to za wzorce, dlaczego działają i jak je zastosować u siebie.
Wzorzec 1: Test lustra — najpierw słowa, nie wygląd
Pierwszy wzorzec nazwałem testem lustra i — co zaskakujące — nie ma on nic wspólnego z wyglądem strony. Chodzi o słowa, czyli o treść, którą widzi odwiedzający.
Najlepiej pokaże to przykład Truckers Report, portalu z ofertami pracy dla kierowców ciężarówek. Kierowca wypełnia tam jedno CV i potem wybiera spośród propozycji przesyłanych przez firmy transportowe. Strona konwertowała już na poziomie 12,1%, co jest całkiem niezłym wynikiem, ale twórcy chcieli więcej. Zatrudnili więc agencję CXL. (Informacja dodatkowa: CXL to znana agencja specjalizująca się w optymalizacji konwersji i badaniach użytkowników.) I zanim ktokolwiek tknął jakikolwiek element graficzny, agencja poszła do źródła: przepytała kierowców i przeanalizowała dane.
Okazały się trzy rzeczy. Po pierwsze, około połowa ruchu pochodziła z telefonów — kierowcy przeglądają stronę w trasie. Po drugie, nagłówek nie zawierał żadnej korzyści: nigdzie nie było napisane, co kierowca z tej strony реально zyska. Po trzecie, główna fotografia to klasyka z banku zdjęć — uścisk dłoni, w którym żaden kierowca ciężarówki nie potrafiłby się rozpoznać. Agencja przebudowała stronę od nowa wokół kierowcy i jego rzeczywistości. Po serii testów nowa wersja konwertowała o 79,3% lepiej niż poprzednia.
Dlaczego to ważne dla pracy z AI? Bo model ma silną skłonność do pisania tekstów bardzo ogólnikowych. Nawet jeśli twoja strona wygląda świetnie, nie pozyska tylu klientów, ilu mogłaby.
Sam test lustra jest prosty: gdy właściwy człowiek trafia na pierwszy ekran, powinien mieć wrażenie, że patrzy w lustro. Ma zobaczyć swój problem, swój świat i dostać wyraźny sygnał, że jest we właściwym miejscu. To ten sam pomysł, który ciągle powtarzam jako „trzy P” — problem, persona, obietnica — tylko przeniesiony na pierwszą rzecz, jaką ktoś widzi na twojej stronie. To działa dokładnie jak miniatura filmu na YouTube: opakowanie, które decyduje, czy ktoś kliknie. Ze stroną jest identycznie.
Żeby zdać ten test, pierwszy ekran musi odpowiedzieć na trzy pytania.
Pytanie pierwsze: dla kogo to jest? City Click zmieniło nagłówek strony głównej z „Firmy rosną szybciej w internecie” na „Stwórz stronę internetową dla swojej firmy”. Po tej jednej zmianie liczba przejść do cennika wzrosła o 90%. Z kolei Campaign Monitor dopasował jedno słowo w nagłówku do słowa, które ludzie faktycznie wpisują w Google — „zaprojektuj”, „stwórz” albo „zbuduj”. Ta pojedyncza korekta przyniosła 31,4% więcej rejestracji.
Pytanie drugie: co z tego będę mieć? Koniecznie mów o rezultacie, a nie o funkcji. Zamiast „planowanie terminów wspomagane przez AI” napisz na przykład: „zapełnij kalendarz, nie odpisując na wiadomości”.
Pytanie trzecie: co mam zrobić dalej? Na ekranie zawsze ma być jeden przycisk z jednym działaniem — klasyczne wezwanie do działania, na przykład „umów bezpłatną rozmowę”.
I ostatnia rada warsztatowa: odpowiedz na te trzy pytania samodzielnie, zanim w ogóle poprosisz o projekt. Dopiero potem wklej odpowiedzi do Claude’a. Wtedy dostaniesz znacznie lepszy tekst, bo właściwy odbiorca poczuje, że strona powstała właśnie dla niego.
Wzorzec 2: Zasada zakreślacza — kolor ma coś znaczyć
Drugi wzorzec dotyczy kolorów. AI traktuje kolor jak ozdobnik: domyślnie wybierze coś, co wygląda ładnie, ale za mało kontrastuje z resztą — i w efekcie nic na stronie naprawdę się nie wyróżnia.
Zasada jest taka: wybierz jeden kolor wyraźnie odcinający się od całości i używaj go wyłącznie na tym, na co ludzie mają kliknąć — na przycisku albo linku rezerwacji. Pomyśl o zakreślaczu, którym uczyłeś się do egzaminu. Jeśli zakreślisz jedną linijkę, znajdziesz ją w dwie sekundy, gdy wrócisz do notatek. Jeśli zakreślisz każdą — nie zakreśliłeś niczego. A większość stron generowanych przez AI wygląda dokładnie tak, jakby zakreślał je ktoś bez opamiętania: kolor akcentowy siedzi w nagłówkach, ikonach, obramowaniach, tle i oczywiście w przycisku. Przycisk przestaje cokolwiek znaczyć.
Sam wpadłem w tę pułapkę przy nowej stronie AI Automation Society. Pierwsza wersja miała nasz niebieski dosłownie wszędzie — i wyglądała tanio. Wróciłem więc do wrażenia zbudowanego głównie na czerni i bieli, a niebieski zostawiłem drobnym detalom, na których naprawdę nam zależało. Efekt? Witryna nabrała klasy i czytelności.
Jeśli nie jesteś zawodowym grafikiem, możesz pożyczyć regułę od projektantów wnętrz: zasadę 60-30-10. Potrzebujesz tylko trzech kolorów. W salonie wygląda to tak: kolorem głównym jest jasna szarość, drugim granat, a akcentem spalona pomarańcz. Sześćdziesiąt procent pomieszczenia dostaje kolor główny — ściany i duży dywan. Trzydzieści procent drugi — sofa i zasłony. Dziesięć procent akcent — kilka poduszek i wazon.
Na stronie proporcje przenoszą się jeden do jednego. Sześćdziesiąt procent to tło. Trzydziesiąt to struktura: tekst, menu, karty, bloki sekcji. Dziesięć procent to akcent, który trafia wyłącznie na przyciski i linki, ewentualnie na jeden konkretny wyraz. Powiedz Claude’owi, żeby używał tylko tych trzech kolorów. A jeśli chcesz wybrać je sam, sięgnij po gotową paletę z serwisu takiego jak Coolors (Informacja dodatkowa: Coolors to darmowy i bardzo popularny internetowy generator palet kolorystycznych.), wklej kody barw do Claude’a i każ mu trzymać się proporcji 60-30-10.
Wzorzec 3: Tło, środek, pierwszy plan — głębia zamiast płaskich pudełek
Trzeci wzorzec tłumaczy, dlaczego wiele stron z AI wciąż wygląda tanio, choć słowa i kolory są już dopracowane. Na takich witrynach wszystko leży na jednym poziomie: każde pudełko, zdjęcie i przycisk jest jakby przyklejone płasko do ekranu, więc oczy nie potrafią zdecydować, co oglądać najpierw.
Najprościej wytłumaczy to porównanie do teatru. Siedzisz na spektaklu. Z tyłu wisi malowana dekoracja, która buduje klimat. W środku stoi mebel — stół albo kanapa. A z przępu grają aktorzy. I zawsze wiesz, na kogo patrzeć, bo są najbliżej ciebie. Dobra strona działa dokładnie tak samo. Tło to fotografia, miękki kształt, odrobina głębi i nakładania się warstw — może po prostu plama koloru budująca nastrój. Środek to właściwa treść: nagłówek, tekst, karty. A pierwszy plan to jedna rzecz, którą odwiedzający ma zrobić — najpewniej przycisk, wezwanie do działania.
Widać to na stronie głównej AI Automation Society, chyba moim ulubionym serwisie, jaki kiedykolwiek zbudowałem z Claude Code. Góry w tle, oś czasu i laptop na osobnych warstwach, tekst znów na własnej — to właśnie daje wrażenie klasy. Przy okazji: w pewnym momencie linia drzew z przodu zaczęła zasłaniać warstwę z laptopem, więc wycięliśmy w koronach drzew klin, żeby przycisk zawsze pozostawał na wprost oczu odwiedzającego.
A tak budujesz te trzy warstwy u siebie. Krok pierwszy: wstaw w tło coś prawdziwego. Zamień goły biały prostokąt na zdjęcie twojej pracy, twojego produktu, a przynajmniej na miękki kształt. Krok drugi: pozwól jednemu elementowi wystawać poza granicę — karta albo obraz, który w połowie wchodzi do kolejnej sekcji, ratuje stronę przed wyglądem stosu pudełek. Krok trzeci: unieś tylko to, co się liczy. Główny przycisk lub główną kartę wyposaż w delikatny cień, żeby wyraźnie siedziały przed resztą i strona faktycznie miała głębię.
Wróćmy do przykładu z rezerwacją wizyt — powiedzmy, że strona jest dla fryzjerki. W tle zdjęcie fotela i jej pracy. W środku nagłówek „Zapełnij kalendarz, nie odpisując na wiadomości”, lekko nachodzący na fotografię, oraz karta rezerwacji z najbliższymi wolnymi terminami, wystająca w kolejną sekcję. A z przodu jeden pomarańczowy przycisk „Zarezerwuj termin” z miękkim cieniem, na wierzchu całości. I podobnie jak zasłony w tamtym salonie — pomarańcz pojawia się wyłącznie na przycisku.
Wtrącenie: darmowy skill projektowy Scrollcraft
Krótka przerwa, bo mam coś dla was zupełnie za darmo: skill projektowy do stron, z którego korzystam przy każdej budowie — łącznie ze stroną AI Automation Society, którą, nie ukrywam, uwielbiam. Nazywa się Scrollcraft i rozumie rzeczy takie jak animacje sterowane przewijaniem czy warstwowanie, ale ma w sobie też typografię, odstępy, głębię, po prostu — gust. To po prostu bardzo dobry zestaw wytycznych projektowych, dostępny bezpłatnie. Link znajdziecie w opisie filmu. Wracamy do tematu.
Wzorzec 4: Animacja z jednym zadaniem
Wzorzec czwarty dotyczy animacji przewijania. To najszybszy sposób, żeby strona sprawiała wrażenie drogiej — i równie szybki, żeby wyglądała na wygenerowaną przez maszynę.
Moja zasada: każda animacja musi sobie na to miejsce zasłużyć, wykonując jedno konkretne zadanie — pokazać produkt, poprowadzić wzrok do następnego kroku albo pokazać coś, co właśnie się wydarzyło. Jeśli nie robi żadnej z tych rzeczy, albo próbuje robić pięć naraz, nie powinno jej być w ogóle.
Problem, który widuję ciągle: większość ludzi chce, żeby ich strona była jak film. Rzeczy wlatują, wirują, rozjaśniają się w każdej sekcji. Na demo wygląda to świetnie, ale firmy, które płacą za stronę, nie chcą filmu. Chcą klientów. Przyznam szczerze — sam się na to łapałem, bo po prostu frajda jest ogromna. Przy odświeżaniu nateherk.com miałem obracający się trójwymiarowy pierścień przy sekcji z wyróżnieniami. Wyglądał efektownie, ale było go za dużo. Skasowałem go.
Nielsen Norman Group, jedna z największych firm badających użyteczność, zwraca uwagę, że ruchome elementy przyciągają uwagę — co w praktyce zwykle oznacza: odciągają ludzi od tego, po co na stronę przyszli. Badacze z Uniwersytetu Purdue przetestowali z kolei tę samą witrynę w dwóch wersjach: z parallaksą (tło przewija się wolniej niż elementy przed nim) i bez niej. Wersję z parallaksą oceniano jako ciekawszą, ale nie była ani łatwiejsza w obsłudze, ani ładniejsza w oczach badanych. Sam ruch nie jest więc zły — po prostu sam z siebie nic nie wnosi dla twoich klientów.
A tak wygląda ruch, który faktycznie pracuje: strona AirPods Pro od Apple. Przewijaj w dół, a zobaczysz, że poruszają się słuchawki — i w zasadzie tyle. Nic innego nie walczy o twoją uwagę. Animacja pokazuje produkt z różnych stron, co jest najbliższe tego, żeby wziąć go do ręki.
Przy animacjach trzymaj się trzech reguł. Pierwsza: na ekranie porusza się jedna rzecz. Wybierz ten jedyny element, który ma prawo się ruszać — produkt, efekt, zestawienie przed i po — a resztę zamroź. Druga: nigdy nie każ czekać na słowa. Nagłówek, tekst i przycisk muszą być czytelne w tej samej chwili, w której pojawiają się na ekranie. Nie wypuszczaj ich w przelocie w trójwymiarowym świecie ani nie rozjaśniaj klatka po klatce na pierwszym ekranie — dalej na stronie możesz to robić, na samej górze nie. Pierwsza animowana klatka jest bowiem jak przesadnie „AI-owa” miniatura filmu, w którą nikt nie kliknie. Trzecia: daj wyłącznik. Niektórym osobom ruch na ekranie po prostu robi się słabo — od zawrotów głowy po mdłości. W jednym z dużych amerykańskich badań zdrowotnych około jedna trzecia dorosłych po czterdziestce miała objawy zaburzenia równowagi w uchu wewnętrznym. Właśnie dlatego telefony i komputery mają ustawienie ograniczania animacji. Powiedz Claude’owi, żeby je respektował i wyłączał animacje każdemu, kto ma tę opcję włączoną. Możesz pójść o krok dalej i wstawić mały przełącznik na samą stronę — w stylu trybu jasnego i ciemnego: animacje wł./wył.
Jeśli zastosujesz te trzy reguły, twoja witryna będzie wyglądać znacznie drożej, a przy tym nie będzie wchodzić w drogę i nie będzie zabierać uwagi temu, co naprawdę ważne.
Wzorzec 5: Darmowa próbka
Piąty wzorzec to darmowa próbka — czyli danie odwiedzającemu przedsmak rezultatu, zanim o cokolwiek go poprosisz.
Większość stron z AI działa tak: wszystko tłumaczy, a na końcu wystawia formularz kontaktowy. To nie jest złe — ale da się znacznie lepiej. Spójrzcie, co zrobił kanadyjski ortodonta pod marką Doc Braces. Każdy pacjent przed umówieniem wizyty pyta o jedno: ile będą kosztować aparaty. Więc na stronie stanął prosty kalkulator — podajesz swoje dane i widzisz orientacyjny koszt. Według Outgrow, firmy stojącej za tym narzędziem, kalkulator konwertował na poziomie około 45%.
Dlaczego to działa? Przez coś, co nazywa się efektem IKEA. (Informacja dodatkowa: nazwa pochodzi z obserwacji, że samodzielnie skręcany mebel wydaje się nam cenniejszy — bo włożyliśmy w niego własną pracę.) Badacze z Harvardu i Duke odkryli, że ludzie wyżej cenią rzeczy, które pomogli stworzyć. Przeniesione na strony: gdy odwiedzający wpisuje do kalkulatora własne dane i odpowiedzi, wynik zaczyna być bardziej jego — bardziej jak decyzja, którą sam podejmuje — a więc jest dla niego więcej wart.
Jest jeden warunek: to działa tylko wtedy, gdy człowiek dochodzi do końca. Jeśli wstawiasz kalkulator albo quiz, zadbaj, żeby był na tyle prosty i krótki, by doprowadzić użytkownika do mety. To trochę jak przymierzanie ubrań w sklepie — tak, musisz znać swój rozmiar, ale badacze zauważyli też, że już sam dotyk produktu sprawia, że czujemy go jako swój. I znowu: zaczynamy go wyżej cenić.
Oto trzy darmowe próbki, które możesz dodać do swojej strony. Pierwsza: quiz — wracając do fryzjerki, na jej stronie mógłby działać krótki quiz, który pomoże odwiedzającym wybrać właściwą dla nich usługę. Druga: prosty estymator ceny, jak kalkulator kosztów aparatów. Trzecia: użyteczne narzędzie. Wise ma na stronie przewalutowanie walut. Zillow pozwala wpisać adres i zobaczyć szacunkową wartość domu. Sherwin-Williams pozwala wgrać zdjęcie pokoju i zobaczyć kolory farb na własnych ścianach. Amazon robi coś podobnego przy zakupie mebli i innych rzeczy do wnętrza.
A jak zbudować taki mały dodatek do własnej strony? Zacznij od pytań, które każdy klient zadaje przed zakupem. Wybierz narzędzie, które na nie odpowiada. I po prostu każ Claude’owi je napisać i wstawić na stronę.
Na koniec: AI robi robotę, ty sprawdzasz wynik
Jeśli zastosujesz te pięć wzorców, twoje strony staną się czymś, za co firmy realnie zapłacą. Nadal możesz zlecać AI większość pracy — musisz tylko wiedzieć, jak jej wynik sprawdzić. A jeśli chcesz zobaczyć, jak ja używam AI do budowy stron, na których opiera się mój biznes, zajrzyj do filmu, w którym pokazuję krok po kroku, jak stawiam kompletną witrynę w kilka minut.
Dziękuję, że dotrwaliście do końca — do zobaczenia w następnym materiale.