Od zbirke primjera do sustava: primjeri web stranica koji skaliraju

Sažetak

U trenutku kada ste odgovorni za više od jednog klijenta, način na koji koristite primjere web stranica mora se promijeniti. Mapa sa spremljenim snimkama zaslona funkcionira za prvu prezentaciju, a već do treće ne uspijeva, jer prava vrijednost nikada nije bila slika – već obrazac koji možete prenijeti kroz industrije. Ovaj članak prolazi kroz tri faze izgradnje prakse s primjerima: prevođenje primjera prije nego što ih pokažete, kodificiranje u de-identificiranu biblioteku obrazaca i pretvaranje u povratnu petlju koja se poboljšava svakim pokretanjem. Usput se zalaže protiv lijene verzije pravila o jednom CTA-u, koje se raspada na stranicama agencija koje služe višestrukoj publici. Cilj je proces koji preživljava fluktuaciju zaposlenika i zahtijeva manje od vašeg ukusa, ne više.

Negdje u vašim bookmarkovima postoji mapa koja se zove "inspo" i ima previše kartica. Skupljate primjere web stranica za svaki kickoff s klijentom, slažete najjače na ploču i zatim provodite sastanak prevođeći: "Ne, ne izgled. Način na koji objašnjavaju što rade." To prevođenje je stvarna vještina, ali je zaglavila u vašoj glavi. Onog dana kada vam agencija dodijeli drugog klijenta, pa trećeg, trik prestaje biti "znati najbolje primjere" i postaje "učiniti ovo ponovljivim." Ako ste gledali mlađeg dizajnera kako proizvodi gotovo istu sekciju za dva nepovezana klijenta jer im je to bio jedini primjer koji ste pokazali, znate o čemu je riječ. Ovo je vodič za odrastanje vaše prakse s primjerima zajedno s vašom agencijom – od prve pobjede do skaliranja – bez pretvaranja u religiju.

Prvi klijent: prevedite prije nego što predstavite

Odaberite tri primjera po klijentu i prije nego što ih pokažete, napišite po jednu rečenicu za svaki: koji obrazac ovaj primjer donosi i što klijent treba zanemariti? Instinkt u ranoj fazi je gomilati; najjeftinije rješenje je selekcija. Dobro odabrana Calendly naslovna stranica donosi obrazac imenovanja ishoda u naslovu – "zakazujte sastanke bez razmjenjivanja e-poruka" – dok klijentu govori da zanemari umirujuću bijelu pozadinu. Linearova hero sekcija uči drugu lekciju: svaki element iznad pregiba ima svoju ulogu, pa primjer ostaje koristan čak i kada vaš klijent prodaje nešto skroz drugačije od softvera. Zapišite ta dva prijevoda prije sastanka. Ako ne možete napisati drugu rečenicu, primjer je dekoracija, a ne dokaz. Ovo je potez ukradi njihov kostur, ali postaje timska vještina tek kada je zapisan.

Recimo da je brief regionalna logistička tvrtka čiji su kupci voditelji skladišta. Vaš prvi instinkt je povući tri stranice iz logističke industrije; umjesto toga, uzmite Calendly za naslov koji prvo donosi ishod, Notion za stranicu s jednom jasnom akcijom (njegov CTA "Get Notion free"), i jednu ružnu, ali informativnu stranicu za praćenje iz bilo koje industrije. Na sastanku recite: "Calendly nije logistička tvrtka. Dio koji posuđujemo je to da naslov uklanja trenje prije nego što korisnik pročita značajku. Notionova je vrijednost suzdržanost: jedna jasna radnja." Gledat ćete kako klijent prestaje tražiti parallax efekte i počinje raspravljati o naslovu. To je cijela poanta – primjeri su funkcionirali kao alati za razmišljanje, a ne kao predlošci.

Peti klijent: kodificirajte ponavljajuće blokove

Pokrenite de-identificiranu biblioteku obrazaca nakon što ste objavili nekoliko stranica. Ne još jednu mapu snimaka – već dokument ponavljajućih građevnih blokova s nazivima na jednostavnom jeziku: "naslov s ishodom", "hero s jednom ulogom", "dokazni sendvič", "stranica povjerenja". Poanta je uhvatiti princip dok se uklanja branding, kako bi tim mogao ponovno koristiti bez repliciranja izgleda drugog klijenta. Razlog zašto se isti SaaS primjeri stalno hvale nije vizualni sjaj, već struktura: jasna vrijednosna ponuda na vrhu, fokusiran dio iznad pregiba, jedna primarna akcija. Biblioteka obrazaca jednom zabilježi tu strukturu i omogućuje joj da preživi sljedeći redizajn. Kada dođe novi račun, tražite po biblioteci prije nego po internetu. To mijenja razgovor o proračunu, jer više ne kupujete inspiraciju; primjenjujete testirane odluke.

Faza	Zadržati	Odbaciti
Prvi projekti	3 radna primjera + prijevodi zašto	ogromna datoteka s primjerima
Nekoliko lansiranja	de-identificirana biblioteka obrazaca	primjeri koji trebaju dugačko opravdanje
U fazi skaliranja	živa biblioteka s povratnom petljom	neverzionirane snimke od prije tri godine

Prođite kroz boutique računovodstvenu tvrtku: umjesto da dizajneru date "evo pet računovodstvenih web stranica", date mu karticu iz biblioteke "obrazac stranice povjerenja: tko smo, čega se klijent oslobađa angažiranjem nas, dokaz iskusnosti, jedan sljedeći korak." Dizajn i dalje treba ljudsko oko, ali odluke su već donesene. Također izbjegavate sivi raspored koji svaka računovodstvena tvrtka kopira, jer vaš obrazac ne spominje boju. Najbolji izvori rijetko su iz iste industrije; namjerno posudite primjere web stranica iz drugih industrija i koristite biblioteku obrazaca da zadržite ono što se prenosi.

Dvadeseti klijent: dajte biblioteci povratnu petlju

Provedite kratku reviziju nakon svakog lansiranja i unesite nalaze natrag u biblioteku. Većina timova stane na "tko god je slobodan ažurira prošlogodišnji predložak dok se netko ne požali." Potez za skaliranje je tretirati svaku živu stranicu kao test vaših obrazaca. Revizija ne zahtijeva otmjene alate: na dan lansiranja, pogledajte sekcije očima nepoznatog kupca; tjedan dana kasnije, pitajte one koji se javljaju na telefon koja pitanja posjetitelji još uvijek postavljaju; mjesec dana kasnije, provjerite koji se CTA-ovi zapravo klikaju. Otkrit ćete da neki voljeni obrasci nikad ne zarade svoje mjesto – izbrišite ih. Ovo je navika provođenja revizije poput kupca kojem nije stalo do vas, ali primijenjena na samu zbirku: revidirate svoje primjere, ne samo klijentovu stranicu.

Uzmite klijenta iz profesionalnih usluga čija je stara stranica zakopala akciju "radite s nama" iza stranice O nama. Kartica "hero s jednom ulogom" iz biblioteke obrazaca govori sljedećem dizajneru da stavi akciju iznad pregiba. Nakon lansiranja, primijetite da publika koja se prijavljuje za posao stalno napušta stranicu. To nije neuspjeh obrasca; to je dokaz da ova stranica služi dvije publike i biblioteka treba varijantu za "više publika". Dodajte bilješku, označite staru karticu "za stranice s jednom publikom" i sljedeći sličan klijent neće ponoviti pogrešku.

Kontroverzno poglavlje: ne shvaćajte zapovijed o jednom CTA-u doslovno

Sada slijedi osporavanje. Mnogi prikazi SaaS primjera reći će vam da svaka stranica treba imati jedan poziv na akciju, a Notionov jedinstveni "Get Notion free" se uzima kao dokaz. Ta je tvrdnja istinita za stranice proizvoda čiji je posao jedna prijava; postaje lažna čim gradite za klijenta s višestrukom publikom. Tretiranje "jednog CTA-a" kao zakona proizvodi stranice agencija gdje se stranica za zapošljavanje, kontakt za medije i obrazac za konzultacije natječu za jedan gumb. Obranljiva verzija pravila je "jedan primarni cilj po publici po stranici", a ne "jedan gumb, uvijek". Isti primjer koji svaku sekciju usmjerava prema jednoj akciji može se čitati kao stranica koja od posjetitelja traži točno jednu stvar – to je princip vrijedan krađe. Sveučilište ili konzultantska tvrtka treba primarnu akciju za potencijalne klijente i drugu za nastavno osoblje; forsiranje jednog CTA-a skriva obje. Zadržite princip, preskočite snimku.

Trošite manje vremena na skupljanje, više na odlučivanje

Ništa od ovoga ne zahtijeva veću datoteku s primjerima. Zahtijeva brisanje većine onoga što ste spremili i zapisivanje zašto su preživjeli važni. Faze su jednostavne: prevedite prije nego što predstavite; kodificirajte ono što nastavlja funkcionirati; revidirajte ono što ste objavili; zanemarite zapovijedi koje ne odgovaraju klijentu. Praksa s primjerima u agenciji treba sazrijeti na isti način kao i njezini projekti – od ručno izrađenih do ponovljivih do samopoboljšavajućih. Mapa je još uvijek tu. Samo je sada puno manja.