Príklady webových stránok vám klamú: Praktická príručka pre agentúry

Zhrnutie

Príklady webových stránok vyzerajú ako hotové produkty, ale v skutočnosti sú odpoveďou na otázku, ktorú ste si ešte nepoložili. Väčšina tímov zbiera príklady, ukazuje ich klientom a potom sa snaží napodobniť vzhľad. Tento proces zlyháva, pretože kopíruje povrch namiesto štruktúry. Tento článok opravuje šesť mýtov o príkladoch webových stránok: chytrý nadpis, hrdina, ktorý vysvetľuje všetko, extra CTA, priemyselná príručka, odovzdanie „hotové, keď to vyzerá dobre“ a inštinkt kopírovania šablón. Každá oprava vám dáva opakovateľnú kritiku, ktorú môžete použiť pri ďalšom projekte každého klienta. Použite sekvenciu raz a prestanete robiť stránky, ktoré vyzerajú ako príklady, a začnete robiť stránky, ktoré robia to, čo robia príklady.

Vyzerá nová stránka vášho klienta presne ako príklad, ktorý si zamiloval, a napriek tomu pôsobí mŕtvo? Nie ste sami. Stránka má rovnaké rozloženie, rovnaké farby, rovnaké tučné písmo. A stále nekonvertuje. Tu je dôvod: príklady webových stránok sú odpovede, nie šablóny. Boli vytvorené na vyriešenie jedného konkrétneho problému pre jedno konkrétne publikum. Ak skopírujete ich povrch, nezdedíte žiadnu z ich logiky. Táto príručka ničí šesť mýtov o príkladoch webových stránok, aby ste mohli premeniť akýkoľvek príklad na opakovateľnú kritiku, ktorá funguje pri ďalšom klientovi. Použite ju pri každom projekte, nielen pri tých zábavných.

Mýtus: Stačí, aby to vyzeralo ako príklad

Začnite s prácou, ktorá sa má vykonať. Skôr než otvoríte čo i len jeden príklad, zapíšte si jednu akciu, ktorú musí táto stránka umožniť. Nie akcie. Jednu. Pre stránku SaaS: spustite skúšobnú verziu. Pre stránku agentúry: rezervujte si hovor. Pre portfólio: pošlite dopyt. Teraz otvorte príklady. Jediné, ktoré stoja za to, sú stránky, ktoré posúvajú neznámeho človeka k takémuto rozhodnutiu s čo najmenším trením.

Realita: stránka je stroj s jedným výstupom. Tu sa väčšina práce pokazí. Tímy začínajú od vizuálnej vrstvy. Páči sa im hrdina, páči sa im farba, páči sa im kombinácia písma. Takže tieto prvky prestavajú na stránke, ktorá má úplne inú prácu. Výsledok vyzerá ako príklad, ale nespráva sa vôbec ako on. Príklad konvertoval, pretože jeho štruktúra zodpovedala jeho práci. Ten váš nosí kostým.

Riešením je test na jednu vetu. Pre každý príklad, ktorý zbierate, si zapíšte: Táto stránka presvedčí [typ návštevníka] k [jednej akcii]. Ak túto vetu neviete dokončiť, príklad je dekorácia. Zbierajte dekorácie, ak vám pomáhajú s mood boardom, ale nepredkladajte ich klientovi ako stratégiu.

Takto to funguje naprieč účtami. Máte klienta, ktorý predáva softvér, a klienta, ktorý predáva koučing. Dve rôzne odvetvia, rovnaká otázka. Príde návštevník. Aká je jedna akcia, ktorá posunie vzťah vpred? Pre softvérového klienta: spustite skúšobnú verziu. Pre kouča: rezervujte si hovor. Zapíšte si ich a nechajte ich na stole. Každé dizajnérske rozhodnutie, každá voľba textu, každá sekcia na stránke buď podporuje túto akciu, alebo sa odstraňuje. Toto je opakovateľná časť. Nezávisí od vkusu. Závisí od rozhodnutia, ktoré ste urobili pred otvorením akéhokoľvek nástroja.

To je základný rozdiel medzi kopírovaním a budovaním: kopírovanie opakuje to, čo vidíte, budovanie opakuje to, čo sa príklad rozhodol. Keď najprv identifikujete rozhodnutie, môžete ukradnúť ich kostru namiesto ich kože. Ak to urobíte, rovnaký príklad môže informovať stránku SaaS, stránku agentúry a portfólio. Klient sa mení. Logika nie.

Mýtus	Realita
Skvelá webová stránka vyzerá výrazne	Skvelá webová stránka dá neznámemu človeku jednu jasnú úlohu
Hrdina by mal vysvetliť všetko	Hrdina by si mal zaslúžiť scroll
Viac CTA znamená viac konverzií	Jedna stránka, jedna primárna akcia
Jasné znamená viac textu	Jasné znamená menej, lepšie zvolených slov
Príklady sú šablóny na kopírovanie	Príklady sú dôkazom rozhodnutia
Keď to vyzerá dobre, je to hotové	Stránka je hypotéza, kým to návštevnosť nedokáže

Mýtus: Silná značka znamená chytrý nadpis

Pozrite sa na domovskú stránku Calendly. Jeho prvý riadok je „Plánujte stretnutia bez e-mailov tam a späť.“ Nič chytré. Žiadna slovná hračka. Vyjadruje výsledok a odstraňuje bolesť. Takto by mala fungovať hodnotová ponuka: pomenujte zmenu, ktorú zákazník získa, a trenie, ktoré odstránite.

Realita: jasnosť poráža chytrosť. Klienti s tým budú bojovať. Chcú „narušiť“, „posilniť“, „uvoľniť“. Tieto slová neznamenajú nič pre návštevníka, ktorý sa rozhoduje, či kliknúť. Návštevníka nezaujíma poslanie vášho klienta. Zaujíma ho, čo sa stane po kliknutí.

Vezmite si klienta, ktorý predáva finančné koučovanie. Ich súčasný hrdina hovorí: „Pomáhame ľuďom budovať bohatstvo s dôverou.“ To je kategória, nie sľub. Prepíšte to: „Získajte jasný mesačný plán sporenia v jednom 45-minútovom hovore.“ Ktorá verzia hovorí neznámemu človeku, čo dostane? Ktorá verzia robí ďalší krok zrejmým? Tá sa má vydať.

Takže napíšte nadpis ako vetu, ktorú by zákazník povedal kolegovi. Nie slogan. Vetu. Ak by veta mohla niekoho zmiasť, upravte ju, kým by nemohla. Potom urobte to isté s podnadpisom: jeden riadok podpory, nie odsek. Najjasnejšie stránky to robia neúnavne. Pozrite sa na vzor naprieč akoukoľvek sadou vysoko konverzných SaaS stránok: čistý nadpis, stručný podnadpis, jedna výzva na akciu. Príklady, ktoré získavajú ocenenia, tento vzor niekedy porušujú. Príklady, ktoré konvertujú, ho málokedy porušujú.

Značka naozaj záleží, ale nie tam, kde si myslíte. Značka žije v hlase, obrazoch a pocite zo stránky. Nadpis nie je miesto na záhadnosť. Nadpis je miesto na jednoduchosť. Keď klienti tlačia, požiadajte ich, aby vymenovali jednu spoločnosť, ktorú obdivujú za slogan, ktorý ich pri prvom prečítaní zmätie. Žiadnu nenájdu. Zmätok je nepriateľom akcie.

Mýtus: Nad záhybom znamená napchať všetko do hrdinu

Záhyb nie je čiara, ktorú treba vyplniť. Je to rozhodovací bod. Návštevník sa pozrie na prvú obrazovku a odpovie na tri otázky: Čo to je? Pre koho to je? Čo mám kliknúť? Ak musí hrdina pracovať ťažšie ako to, už ste stratili tých, ktorí mohli konvertovať.

Realita: záhyb je filter. Pozrite sa na hrdinské sekcie, ktoré fungujú. Domovská stránka Linear je referenciou: minimálny nadpis, minimálny podnadpis, jeden ďalší krok. Žiadny karusel. Žiadne „Zistite viac“, ktoré by konkurovalo „Začať“. Len jedna zrejmá cesta vpred. Zvyšok príbehu prichádza po rozhodnutí, nie pred ním.

Toto je mýtus, ktorý stojí najviac dôvery klientov, pretože prázdny priestor pôsobí nedokončene na niekoho, kto zaplatil za dizajn. Držte líniu. Hrdina s jasným nadpisom a jedným CTA nie je nedokončený. Je to filter. Hovorí nesprávnemu návštevníkovi, aby rýchlo odišiel, a správnemu návštevníkovi, kam kliknúť.

Vykonajte test krytu. Položte kus papiera na spodnú časť obrazovky na každý príklad, ktorý zvažujete. Ak neviete odpovedať na tri otázky z toho, čo zostane, príklad odmietnite. Urobte to isté so súčasnou stránkou vášho klienta. Toto cvičenie trvá dve minúty a je to najrýchlejší spôsob, ako dokázať, že sa stránka snaží robiť príliš veľa.

Budete počuť „potrebujeme využiť priestor.“ To je úzkosť klienta, nie dizajnérsky princíp. Priestor nie je premrhaný; premrhaná je nejednoznačnosť. Návštevník, ktorý musí prísť na to, o čom stránka je, je návštevník, ktorý už odchádza. Použite záhyb na zodpovedanie praktických otázok a potom sa potte kreatívne detaily nižšie.

Tu je kontrariánska časť: minimalizmus tiež nie je cieľom. Prázdny hrdina, ktorý nikdy nepovie, čo produkt robí, je len pekná hádanka. Cieľom je jasnosť. Minimalizmus je taktika, ktorá pomáha jasnosti, a neporiadok je taktika, ktorá ju zabíja. Posudzujte každý prvok podľa toho, či pomáha návštevníkovi urobiť jedno rozhodnutie. Ak nie, vystrihnite ho. Ak objasňuje, ponechajte ho, aj keď dizajn pôsobí rušne. Test nie je „je to čisté?“ Je to „vidí neznámy človek cestu?“

Mýtus: Viac CTA znamená viac šancí na konverziu

Urobte zajtra audit CTA. Otvorte domovskú stránku klienta a spočítajte každé tlačidlo a odkaz, ktoré konkurujú hlavnej akcii. Väčšina stránok ich má niekoľko: „Zistite viac“, „Preskúmať služby“, „Kontaktujte nás“, „Prečítať blog“, „Zobraziť ceny“. Keď každý prvok žiada o pozornosť, žiadny ju nedostane. Návštevník reaguje tak, že neurobí nič.

Realita: jedna stránka, jedna primárna akcia. Úspešné stránky tomuto odolávajú. Stránka Notion sa napríklad zameriava na jednu výzvu na akciu. Jedna stránka, jedna primárna akcia. Táto disciplína núti k voľbe: čo vlastne chceme, aby tento návštevník urobil? Ak je odpoveď „spustiť skúšobnú verziu“, potom je celá stránka v službách tohto tlačidla. Všetko ostatné ho buď podporuje, alebo odchádza.

Jedno primárne CTA neznamená iba jeden odkaz. Vedľajšie akcie sú povolené. Mali by byť tichšie, umiestnené neskôr a nikdy by nemali byť vedľa primárneho tlačidla v hrdinovi. Neodstraňujete voľby. Zoraďujete ich. Návštevník môže stále skúmať, čítať a porovnávať. Ale stránka má chrbticu a chrbtica ukazuje jedným smerom.

Pomenujte jedno tlačidlo, ktoré je pre každého klienta najdôležitejšie. Umiestnite ho do hrdinu. Zopakujte ho po sekcii dôkazov. Potom ustúpte z cesty. Ak klient požiada o druhé konkurenčné tlačidlo v hrdinovi, opýtajte sa ho, na ktoré z nich by si vsadil. To, ktoré si vyberie, je primárne. To druhé je rozptýlenie.

Postavte hierarchiu v jednej línii: primárne tlačidlo (jedno), sekundárny odkaz (tichý), terciárne odkazy (menu). Napíšte to do svojho návrhu, aby klient poznal plán skôr, než uvidí dizajn. Keď neskôr klient požaduje druhé primárne tlačidlo, odkážte sa na túto líniu. Dohodli ste sa na jednom.

Toto je opakovateľná konverzácia. Budete ju mať s každým klientom, pretože každý klient bude chcieť viac možností. Vaša odpoveď, vždy: jedna stránka, jedna práca, jedna primárna akcia. Nie je to kreatívny názor. Je to vzor, ktorý prechádza najlepšími príkladmi.

Mýtus: Odvetvie vášho klienta potrebuje vlastné pravidlá

Chybou je zaobchádzať so „SaaS“ a „agentúrou“ ako s rôznymi druhmi. Práca je rovnaká. Presuňte neznámeho človeka k jednému rozhodnutiu. Mení sa dôkaz, ktorý používate na to, aby toto rozhodnutie vyzeralo bezpečne.

Realita: rovnaká práca, rôzne dôkazy. Stránka SaaS dokazuje, že produkt funguje, pomocou ukážky, skúšobnej verzie alebo snímky obrazovky samotného produktu. Stránka agentúry dokazuje, že tím funguje, pomocou prípadových štúdií a výsledkov. Portfólio dokazuje, že práca stojí za to, s jasnosťou pred/po a vlastnými slovami klienta. Rovnaká kostra, rôzne dôkazy.

Takže predtým, než zavrhnete príklad preto, že je z iného odvetvia, pozrite sa za povrch. Opýtajte sa, k akému rozhodnutiu vedie a s akým dôkazom prichádza. Rezervačná stránka pre zubára a rezervačná stránka pre produkt SaaS môžu mať rovnakú anatómiu: jasný nadpis, jedno CTA, dôkaz, ktorý znižuje riziko kliknutia. Zubár hovorí „Žiadne poistné starosti.“ Produkt SaaS hovorí „Bez platobnej karty.“ Rôzna slovná zásoba, rovnaká práca.

To je dôvod, prečo požičiavanie príkladov webových stránok z iných odvetví funguje. Požičaný príklad narúša predpoklady vášho klienta o tom, ako by malo vyzerať ich vlastné odvetvie. Tiež vám dáva vstavaný dôvod na ospravedlnenie rozhodnutia. Keď klient povie „naši konkurenti to všetci robia“, môžete ukázať na stránku mimo odvetvia, ktorá robí rovnakú prácu s lepšou štruktúrou.

Opýtajte sa na váhu rozhodnutia. Návštevník, ktorý si vyberá nástroj na riadenie projektov, robí rozhodnutie s nižšími stávkami ako ten, kto udeľuje šesťciferný honorár. Štruktúra zostáva: jedna práca, jedno CTA, vrstvené dôkazy. Vrstvy sa menia. Stránka agentúry potrebuje hlbšie prípadové štúdie, menované roly a silnejší pocit pracovného vzťahu. Stránka SaaS potrebuje ukážku, skúšobnú verziu a dôkaz rýchlosti.

Výhrada: nepoužívajte vonkajší príklad na vyhnutie sa skutočným obmedzeniam odvetvia. Právnická firma nemôže konvertovať ako zoznamovacia aplikácia, nie preto, že sa štruktúra líši, ale preto, že sa líšia požiadavky na dôveru a váha rozhodnutia. Stále riadite jednu akciu. Potrebujete len viac dôkazov a menej smiechu. Odvetvie záleží ako obmedzenie, nie ako súbor pravidiel. Začnite prácou, potom prispôsobte dôkazy.

Mýtus: Keď to vyzerá dobre, je to hotové

Vydajte stránku a potom meňte jednu vec naraz. Konverzia je hypotéza, kým ju skutočný návštevník nedokáže. Prvá verzia je odhad založený na dôkazoch z príkladov. Jediný spôsob, ako zistiť, či je odhad správny, je dať ho pred návštevnosť a sledovať, čo sa stane.

Realita: každá stránka je hypotéza. Nespúšťajte sedem testov naraz. Nebudete vedieť, ktorá zmena posunula výsledok. Zmeňte nadpis, merajte. Zmeňte CTA, merajte. Zmeňte poradie dôkazov, merajte. Vždy len jednu premennú, týždeň alebo dva na test v závislosti od návštevnosti, a dozviete sa, na čo publikum vášho klienta skutočne reaguje. Škaredá stránka, ktorá konvertuje, poráža krásnu stránku, ktorá nekonvertuje. Krása nie je cieľ. Bez trenia je.

To nie je výhovorka na vydanie škaredej práce. Je to dôvod, prečo zaobchádzať s vyleštením ako s neskoršou fázou, nie ako s prvou fázou. Leštíte to, čo dôkazy odmeňujú. Neleštíte odhad. Keď klient požiada o „refresh“, zatlačte. Opýtajte sa, čo má súčasná stránka dokázať a čo skutočne dokazuje. Ak nikto nedefinoval prácu, refresh je len nový náter na stránke bez chrbtice.

Nastavte meranie pred spustením. Definujte jednu metriku, ktorá sa počíta ako úspech stránky. Môže to byť kliknutie, hovor, odoslanie formulára. Nemôže to byť „angažovanosť“ alebo „čas na stránke“, pokiaľ to nie je doslova obchodný cieľ. Potom máte s čím porovnávať. Ak je návštevnosť nízka, použite namiesto toho kvalitatívnu spätnú väzbu: päť hovorov so zákazníkmi s otázkou, na čo by klikli. Ale nevyhlasujte víťaza bez dôkazov.

Zaobchádzajte s každým spustením ako so začiatkom auditu. Pozrite sa na stránku tak, ako sa na ňu skutočne pozerá návštevník: rýchlo, skepticky a trochu znudene. To je zručnosť, ktorú môžete uplatniť na každý účet, a mali by ste. Najlepšie príklady nevyzerajú dobre preto, že ich dizajnéri sú kreatívnejší. Konvertujú, pretože ich tímy stále menia jednu vec, kým stránka nezodpovedá práci.

Do toho

Vaše ďalšie stretnutie s klientom sa začne príkladmi. To je v poriadku. Použite ich. Ale začnite otázkou, nie mood boardom: „Čo by mal návštevník na tejto stránke urobiť?“ Potom vezmite príklady, ktoré milujú, a prejdite ich cez vyššie uvedené testy. Akú prácu každý z nich robí? Viete odpovedať na tri hrdinské otázky? Existuje jedno primárne CTA? Aký dôkaz znižuje riziko kliknutia?

Dostanete odpor. Klienti budú brániť chytrý nadpis a extra tlačidlo. Vtedy im pripomeniete, čo príklad skutočne robí, nie ako vyzerá. Môžete auditovať svoju webovú stránku ako zákazník, ktorému na tom nezáleží a ukázať im, ako rýchlo stránka vyhrá alebo stratí kliknutie.

Táto sekvencia je opakovateľná: definujte prácu, napíšte obyčajnú vetu, postavte hrdinu okolo jedného rozhodnutia, odstráňte konkurenčné CTA, ukradnite štruktúru z príkladov s rovnakou prácou, potom vydajte a meňte jednu vec naraz. Robte to pre každého klienta, na každej stránke, a príklady prestanú byť zdrojom štýlu. Stanú sa zdrojom stratégie. To je rozdiel medzi tímom, ktorý vytvára webové stránky, a tímom, ktorý vytvára rozhodnutia.