A weboldal-példák hazudnak neked: Terepkalauz ügynökségeknek

Összefoglaló

A weboldal-példák készterméknek tűnnek, de valójában válaszok egy kérdésre, amit még nem tettél fel. A legtöbb csapat összegyűjti a példákat, megmutatja az ügyfeleknek, majd megpróbálja lemásolni a kinézetet. Ez a folyamat azért bukik meg, mert a felszínt másolja, nem a szerkezetet. Ez a cikk hat mítoszt cáfol meg a weboldal-példákkal kapcsolatban: a szellemes címsort, a mindent elmagyarázó hősképet, az extra CTA-t, az iparági szabálykönyvet, a „kész, ha jól néz ki" átadást és a sablonmásolási ösztönt. Minden egyes javítás ad egy ismételhető kritikát, amit minden következő ügyfélnél alkalmazhatsz. Használd egyszer a sorozatot, és nem arra fogod késztetni az oldalakat, hogy úgy nézzenek ki, mint a példák, hanem arra, hogy azt csinálják, amit a példák.

Az ügyfeled új weboldala pontosan úgy néz ki, mint a kedvenc példa, mégis halottnak érződik? Nem vagy egyedül. Az oldal ugyanazt a felépítést, ugyanazokat a színeket, ugyanazt a vastag betűtípust használja. És még mindig nem konvertál. Íme, miért: a weboldal-példák válaszok, nem sablonok. Azért készültek, hogy egy konkrét problémát oldjanak meg egy konkrét közönségnek. Ha lemásolod a felszínüket, a logikájukból semmit sem örökölsz. Ez az útmutató megöli a weboldal-példákkal kapcsolatos hat mítoszt, hogy bármelyik példát ismételhető kritikává alakíthasd, amely a következő ügyfélnél működik. Használd minden buildnél, nem csak a szórakoztatóaknál.

Mítosz: Csak úgy nézzen ki, mint a példa

Kezd az elvégzendő feladattal. Mielőtt megnyitnál egyetlen példát is, írd le, hogy azt az egyetlen műveletet, amit ennek az oldalnak lehetővé kell tennie. Nem műveleteket. Egyet. SaaS-oldalnál: indítson ingyenes próbaverziót. Ügynökségi oldalnál: foglaljon le egy hívást. Portfóliónál: küldjön érdeklődést. Most mehetsz példákat nézegetni. Az egyetlen, amit érdemes megtartani, az olyan oldal, amely a legkisebb súrlódással tereli az idegent afelé a döntés felé.

Valóság: az oldal egy gépezet, egyetlen kimenettel. Itt rontják el a legtöbb munkát. A csapatok a vizuális rétegből indulnak ki. Tetszik nekik egy hős, tetszik egy szín, tetszik egy betűpárosítás. Így ezeket az elemeket építik újra egy olyan oldalon, amelynek teljesen más a feladata. Az eredmény úgy néz ki, mint a példa, és semmiben sem úgy viselkedik. A példa azért konvertált, mert a szerkezete egyezett a feladatával. A tiéd jelmezt visel.

A megoldás egy egy mondatos teszt. Minden összegyűjtött példánál írd le: Ez az oldal meggyőz egy [látogatótípus]-t arról, hogy [egy műveletet] hajtson végre. Ha nem tudod befejezni ezt a mondatot, a példa csak dekoráció. Gyűjtögess dekorációt, ha a hangulattábládon segít, de ne tedd stratégiaként az ügyfél elé.

Így néz ki ez a gyakorlatban a különböző ügyfeleknél. Van egy ügyfeled, aki szoftvert ad el, és van egy, aki coachingot. Két különböző iparág, ugyanaz a kérdés. Egy látogató érkezik. Mi az az egy művelet, ami előremozdítja a kapcsolatot? A szoftveres ügyfél esetén: indítson próbaverziót. A coach esetén: foglaljon időpontot. Írd le ezeket, és tartsd az asztalodon. Minden design-döntés, minden szövegválasztás, az oldal minden szekciója vagy támogatja ezt a műveletet, vagy kikerül. Ez az ismételhető rész. Nem az ízléstől függ. Attól a döntéstől függ, amit még azelőtt hoztál meg, hogy bármilyen eszközt megnyitottál volna.

Ez a legfőbb különbség a másolás és az építés között: a másolás azt ismétli, amit látsz, az építés azt, amit a példa eldöntött. Ha előbb azonosítod a döntést, akkor ellophatod a vázukat ahelyett, hogy a bőrüket másolnád. Ha ezt teszed, ugyanaz a példa inspirálhat egy SaaS-oldalt, egy ügynökségi oldalt és egy portfóliót. Az ügyfél változik, a logika nem.

Mítosz	Valóság
A nagyszerű weboldal egyedi	A nagyszerű weboldal egyetlen egyértelmű feladatot ad a látogatónak
A hős mindent magyarázzon el	A hősnek ki kell érdemelnie, hogy továbbgörgessenek
Több CTA több konverziót jelent	Egy oldal, egy elsődleges művelet
A világos több szöveget jelent	A világos kevesebb, gondosabban megválasztott szót jelent
A példák másolandó sablonok	A példák egy döntés bizonyítékai
Ha jól néz ki, kész	Az oldal hipotézis, amíg a forgalom nem igazolja

Mítosz: Az erős márka szellemes címsort jelent

Nézd meg a Calendly kezdőlapját. Az első sora: „Időpontot egyeztetni a hosszú e-mailezés nélkül." Semmi szellemes. Nincs szójáték, nincs szóvicc. Kimondja az eredményt, és eltünteti a fájdalmat. Így kell működnie egy értékajánlatnak: nevezd meg a változást, amit az ügyfél kap, és a súrlódást, amit elveszel tőle.

Valóság: a világosság legyőzi a szellemességet. Az ügyfelek ezért harcolni fognak veled. Olyanokat akarnak, hogy „disrupt", „empower", „unleash". Ezek a szavak semmit nem jelentenek egy olyan látogatónak, aki azon dönt, hogy kattintson-e. A látogatót nem érdekli az ügyfeled küldetése. Az érdekli, hogy mi történik a kattintás után.

Vegyünk egy ügyfelet, aki pénzügyi coachingot árul. A jelenlegi hősük ezt mondja: „Segítünk az embereknek magabiztosan vagyont építeni." Ez egy kategória, nem ígéret. Írd át: „Kapj egy tiszta havi megtakarítási tervet egy 45 perces hívás alatt." Melyik változat mondja meg egy idegennek, hogy mit kap? Melyik változat teszi nyilvánvalóvá a következő lépést? Azt kell élőbe tenni.

Tehát írd meg a címsort úgy, mint egy mondatot, amit az ügyfél mondana egy kollégájának. Nem szlogent. Egy mondatot. Ha a mondat bárkit megzavarna, vágd addig, amíg nem zavarja. Aztán csináld ugyanezt az alcímmel: egy sor támogatás, nem egy bekezdés. A legvilágosabb oldalak ezt könyörtelenül teszik. Nézd meg a mintát bármelyik jól konvertáló SaaS-oldalnál: tiszta címsor, rövid alcím, egy CTA. A díjnyertes példák néha megtörik ezt a mintát. A konvertáló példák ritkán teszik.

A márka számít, de nem ott, ahol gondolnád. A márka a hangnemben, a képekben és az oldal érzetében él. A címsor nem a helye annak, hogy rejtélyes legyél. A címsor a helye annak, hogy egyértelmű legyél. Amikor az ügyfelek ellenállnak, kérd meg őket, hogy nevezzenek meg egy céget, akit csodálnak egy olyan szlogen miatt, ami első olvasásra összezavarja őket. Nem fognak találni. A zavar a cselekvés ellensége.

Mítosz: A hajtás felett mindent be kell zsúfolni a hősbe

A hajtás nem egy vonal, amit ki kell tölteni. Hanem döntési pont. A látogató ránéz az első képernyőre, és három kérdésre válaszol: Mi ez? Kinek szól? Mit kell kattintanom? Ha a hősnek ennél nehezebben kell dolgoznia, akkor már el is vesztetted azokat, akik konvertálhattak volna.

Valóság: a hajtás egy szűrő. Nézd meg a jól teljesítő hősszekciókat. A Linear kezdőlapja referencia: minimális címsor, minimális alcím, egyetlen következő lépés. Nincs karusszel, nincs „Tudj meg többet", ami verseng a „Kezdjük el" gombbal. Csak egy egyértelmű út előre. A történet többi része a döntés után következik, nem előtte.

Ez az a mítosz, amely a legtöbb ügyfélbizalomba kerül, mert az üres tér befejezetlennek tűnik annak, aki fizetett a designért. Tartsd a vonalat. Egy hős, tiszta címsorral és egy CTA-val, nem befejezetlen. Ez egy szűrő. A rossz látogatónak gyors távozást mond, a jó látogatónak pedig megmutatja, hová kattintson.

Futtasd le a takarástesztet. Tegyél egy papírlapot a képernyő aljára minden olyan példánál, amit fontolgatsz. Ha a maradékból nem tudsz válaszolni a három kérdésre, dobd el a példát. Tedd ugyanezt az ügyfeled jelenlegi oldalával is. A gyakorlat két percet vesz igénybe, és ez a leggyorsabb módja annak, hogy bizonyítsd, az oldal túl sokat akar.

Hallani fogod: „ki kell használnunk a teret." Ez ügyfélszorongás, nem design-elv. A tér nem vesztegetés; a kétértelműség az. Az a látogató, akinek ki kell találnia az oldalt, már távozik is. Használd a hajtást a gyakorlati kérdések megválaszolására, aztán izzadj a kreatív részleteken lejjebb.

Itt van az ellentmondásos rész: a minimalizmus sem cél. Egy ritkás hős, amely soha nem mondja meg, mit csinál a termék, csak egy szép rejtvény. A tisztaság a cél. A minimalizmus egy taktika, ami segíti a tisztaságot, a rendetlenség pedig egy taktika, ami megöli. Ítélj minden elemet aszerint, hogy segíti-e a látogatót az egyetlen döntés meghozatalában. Ha nem, vágd ki. Ha tisztáz, tartsd meg, még akkor is, ha a design zsúfoltnak tűnik. A teszt nem az, hogy „tiszta?" Hanem az, hogy „meglátja-e az idegen az utat?"

Mítosz: A több CTA több konverziós lehetőséget jelent

Holnap csinálj egy CTA-auditot. Nyisd meg az ügyfeled kezdőlapját, és számold meg az összes gombot és linket, amelyek versengenek a fő művelettel. A legtöbb oldalon több van: „Tudj meg többet", „Szolgáltatások felfedezése", „Kapcsolat", „Blog olvasása", „Árak megtekintése". Ha minden elem figyelmet kér, egyik sem kapja meg. A látogató azzal válaszol, hogy nem csinál semmit.

Valóság: egy oldal, egy elsődleges művelet. A sikeres oldalak ellenállnak ennek. A Notion oldala például egyetlen cselekvésre ösztönzésre törekszik. Egy oldal, egy elsődleges művelet. A fegyelem választásra kényszerít: mit is akarunk valójában, hogy ez a látogató tegyen? Ha a válasz az, hogy „indítson próbaverziót", akkor az egész oldal ennek a gombnak a szolgálatában áll. Minden más vagy támogatja, vagy távozik.

Egyetlen elsődleges CTA nem azt jelenti, hogy csak egy link lehet. Másodlagos műveletek megengedettek. Legyenek csendesebbek, később elhelyezve, és soha ne álljanak az elsődleges gomb mellett a hősben. Nem megszünteted a választási lehetőségeket. Rangsorolod őket. A látogató továbbra is felfedezhet, olvashat és összehasonlíthat. De az oldalnak van egy gerince, és a gerinc egy irányba mutat.

Nevezd meg azt az egy gombot, amely a legfontosabb minden ügyfél számára. Tedd a hősbe. Ismételd meg a bizonyítási szakasz után. Aztán állj félre. Ha az ügyfél egy második, versengő gombot kér a hősbe, kérdezd meg, melyikre fogadnál. Amelyiket választja, az az elsődleges. A másik figyelemelterelés.

Építsd fel a hierarchiát egyetlen sorban: elsődleges gomb (egy), másodlagos link (csendes), harmadlagos linkek (menü). Írd bele az ajánlatodba, hogy az ügyfél tudja a tervet, mielőtt meglátná a design-t. Amikor az ügyfél később egy második elsődleges gombot követel, hivatkozz vissza a sorra. Megállapodtatok egyben.

Ez ismételhető beszélgetés. Minden ügyféllel lefolytatod, mert minden ügyfél több opciót fog kérni. A válaszod, minden alkalommal: egy oldal, egy feladat, egy elsődleges művelet. Ez nem kreatív vélemény. Ez a minta, amely a legjobb példákon végigfut.

Mítosz: Az ügyfeled iparágának saját szabályai vannak

A hiba az, hogy a „SaaS"-t és az „ügynökséget" külön fajokként kezeled. A feladat ugyanaz. Egy idegent eljuttatni egy döntéshez. Ami változik, az a bizonyíték, amit arra használsz, hogy a döntés biztonságosnak érződjön.

Valóság: ugyanaz a feladat, más bizonyíték. Egy SaaS-oldal demóval, próbaverzióval vagy a termékről készült képernyőképpel bizonyítja, hogy a termék működik. Egy ügynökségi oldal esettanulmányokkal és eredményekkel bizonyítja, hogy a csapat működik. Egy portfólió a válogatás előtti/utáni tisztasággal és magának az ügyfélnek a szavaival bizonyítja, hogy a munka megéri a felkérést. Ugyanaz a váz, más bizonyíték.

Tehát mielőtt elvetnél egy példát azért, mert egy másik iparágból származik, nézz túl a felszínen. Kérdezd meg, milyen döntést mozgat, és milyen bizonyítékkal vezet. Egy fogorvos foglalási oldala és egy SaaS-termék foglalási oldala osztozhat ugyanazon a felépítésen: tiszta címsor, egy CTA, bizonyíték, ami csökkenti a kattintás kockázatát. A fogorvos azt mondja: „Nincs biztosítási macera." A SaaS-termék azt mondja: „Nem kell bankkártya." Más szókincs, ugyanaz a feladat.

Ezért működik az, ha más iparágakból kölcsönzünk weboldalpéldákat. A kölcsönzött példa megdönti az ügyfeled azon feltételezéseit, amelyeket a saját iparágukról gondolnak. Ezenkívül beépített okot ad egy döntés igazolására. Amikor az ügyfél azt mondja: „a versenytársaink mind ezt csinálják", rámutathatsz egy iparágon kívüli oldalra, amely ugyanezt a feladatot jobb szerkezettel látja el.

Kérdezz a döntés súlyáról. Egy látogató, aki projektmenedzsment eszközt választ, kisebb tétű döntést hoz, mint az, aki egy hat számjegyű megbízást ítél oda. A szerkezet változatlan: egy feladat, egy CTA, réteges bizonyíték. A rétegek változnak. Az ügynökségi oldalnak mélyebb esettanulmányokra, megnevezett szerepekre és erősebb képre van szüksége a munkakapcsolatról. A SaaS-oldalnak demóra, próbaverzióra és sebességbizonyítékra.

A figyelmeztetés: ne használj külső példát arra, hogy kikerüld a valódi iparági korlátokat. Egy ügyvédi iroda nem konvertálhat úgy, mint egy társkereső alkalmazás, nem azért, mert a szerkezet különbözik, hanem mert a bizalmi követelmények és a döntés súlya különbözik. Továbbra is egy műveletre hajtasz. Csak több bizonyítékra és kevesebb vicceskedésre van szükséged. Az iparág korlátként számít, nem szabályrendszerként. Kezdd a feladattal, aztán igazítsd a bizonyítékot.

Mítosz: Ha jól néz ki, kész

Tedd élőbe az oldalt, aztán egyszerre csak egy dolgot változtass. A konverzió hipotézis, amíg egy valódi látogató be nem bizonyítja. Az első verzió egy találgatás, amely példákból származó bizonyítékokon alapul. Az egyetlen módja annak, hogy megtudd, igazad van-e, ha forgalom elé teszed, és megnézed, mi történik.

Valóság: minden oldal egy hipotézis. Ne futtass hét tesztet egyszerre. Nem fogod tudni, melyik változtatás mozdította az eredményt. Változtasd meg a címsort, mérj. Változtasd meg a CTA-t, mérj. Változtasd meg a bizonyítékok sorrendjét, mérj. Egyszerre egy változót, tesztje eredménytől függően egy-két hét, és megtanulod, mire reagál valójában az ügyfél közönsége. A csúnya oldal, amely konvertál, legyőzi a gyönyörű oldalt, amely nem. A szépség nem cél. A súrlódásmentesség az.

Ez nem kifogás arra, hogy csúnya munkát adj ki. Ez ok arra, hogy a csiszolást későbbi fázisként kezeld, nem első fázisként. Azt csiszolod, amit a bizonyíték megjutalmaz. Nem csiszolsz egy találgatást. Amikor az ügyfél „frissítést" kér, állj ellen. Kérdezd meg, mit kellene elérnie a jelenlegi oldalnak, és mit ér el valójában. Ha senki nem határozta meg a feladatot, a frissítés csak egy új festékréteg egy gerinc nélküli oldalon.

Állítsd be a mérést az indulás előtt. Határozz meg egy mérőszámot, amely sikert jelent az oldal számára. Ez lehet egy kattintás, egy hívás, egy űrlapküldés. Nem lehet „elköteleződés" vagy „oldalon töltött idő", kivéve, ha ez szó szerint az üzleti cél. Akkor van mit tesztelned. Ha alacsony a forgalom, használj inkább kvalitatív visszajelzést: öt ügyfélhívás, amelyben megkérdezed, mire kattintanának. De ne hirdess győztest bizonyíték nélkül.

Kezeld minden indulást egy audit kezdeteként. Nézd az oldalt úgy, ahogy a látogató valójában teszi: gyorsan, szkeptikusan és egy kicsit unottan. Ez egy készség, amelyet minden ügyfélnél alkalmazhatsz, és alkalmaznod is kell. A legjobb példák nem azért néznek ki jól, mert a tervezőik kreatívabbak. Azért konvertálnak, mert a csapataik egy dolgot változtatnak addig, amíg az oldal illeszkedik a feladathoz.

Ezt tedd meg

A következő ügyfélmegbeszélés példákkal fog kezdődni. Ez rendben van. Használd őket. De nyiss egy kérdéssel, ne hangulattáblával: „Mit kell tennie egy látogatónak ezen az oldalon?" Aztán vedd a kedvenc példáikat, és futtasd át a fenti teszteken. Milyen feladatot lát el mindegyik? Meg tudod válaszolni a három hőskérdést? Van egyetlen elsődleges CTA? Milyen bizonyíték csökkenti a kattintás kockázatát?

Lesz ellenállás. Az ügyfelek megvédik a szellemes címsort és a plusz gombot. Ilyenkor emlékeztesd őket arra, amit a példa valójában csinál, nem arra, hogy hogyan néz ki. Vizsgáld meg a weboldaladat úgy, mint egy közömbös vásárló, és megmutathatod nekik, milyen gyorsan nyer vagy veszít az oldal egy kattintást.

Ez a sorozat ismételhető: határozd meg a feladatot, írd meg a közérthető mondatot, építsd fel a hőst egy döntés köré, távolítsd el a versengő CTA-kat, lopj struktúrát az azonos feladatú példákból, aztán tedd élőbe és változtass egyszerre egy dolgon. Futtasd le minden ügyfélre, minden oldalon, és a példák megszűnnek stílusforrásnak lenni. Stratégiaforrássá válnak. Ez a különbség egy olyan csapat között, amely weboldalakat épít, és egy olyan csapat között, amely döntéseket épít.