Od zbirke primjera do sustava: primjeri web stranica koji skaliraju

Sažetak

Čim ste odgovorni za više od jednog klijenta, način na koji koristite primjere web stranica mora se promijeniti. Mapa spremljenih snimaka zaslona funkcionira za prvi pitch, a propada do trećeg, jer stvarna vrijednost nikada nije bila slika—već obrazac koji možete prenijeti kroz industrije. Ovaj članak prolazi kroz tri faze izgradnje prakse primjera: prevođenje primjera prije nego što ih pokažete, kodificiranje u de-identificiranu biblioteku obrazaca i pretvaranje u povratnu petlju koja se poboljšava sa svakim lansiranjem. Usput, zalaže se protiv lijene verzije pravila o jednom CTA-u, koje se raspada na agencijskim stranicama koje služe više publika. Cilj je proces koji preživi fluktuaciju osoblja i zahtijeva manje od vašeg ukusa, ne više.

Negdje u vašim oznakama postoji mapa pod nazivom "inspo" i ima previše kartica. Skupljate primjere web stranica za svaki početak rada s klijentom, slažete najjače na ploču, a zatim provodite sastanak prevodeći: "Ne, ne izgled. Način na koji objašnjavaju što rade." To prevođenje je stvarna vještina, ali je zatvoreno u vašoj glavi. Onog dana kada vam agencija dodijeli drugi račun, pa treći, trik prestaje biti "znati najbolje primjere" i postaje "učiniti to ponovljivim." Ako ste gledali junior dizajnera kako proizvodi gotovo istu sekciju za dva nepovezana klijenta jer je to jedini primjer koji ste im pokazali, znate problem. Ovo je vodič za to da vaša praksa primjera odraste 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 doprinosi i što bi klijent trebao zanemariti? Rani instinkt je gomilati; najjeftinije rješenje je selekcija. Dobro odabrana početna stranica Calendlya doprinosi obrascem imenovanja ishoda u naslovu—"zakazivanje sastanaka bez razmjene e-pošte"—dok klijentu govori da zanemari smirujuću bijelu pozadinu. Linearov hero dio uči drugu lekciju: svaki element iznad pregiba ima svoj posao, pa primjer ostaje koristan čak i kada vaš klijent prodaje nešto daleko od softvera. Zapišite ta dva prijevoda prije sastanka. Ako ne možete napisati drugu rečenicu, primjer je dekoracija, 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 stavlja ishod na prvo mjesto, Notion za stranicu koja se obvezuje na jednu radnju (njegov CTA "Get Notion free"), i neku 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 da naslov uklanja trenje prije nego korisnik pročita značajku. Notionova vrijednost je 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, ne kao predlošci.

Peti klijent: kodificirajte ponavljajuće blokove

Pokrenite de-identificiranu biblioteku obrazaca nakon što isporučite nekoliko stranica. Ne još jednu mapu snimaka zaslona—dokument ponavljajućih gradivnih blokova s jasnim nazivima: "ishodni naslov," "hero s jednim zadatkom," "dokazni sendvič," "stranica povjerenja." Poanta je uhvatiti princip dok uklanjate brendiranje, tako da tim može ponovno koristiti bez reprodukcije izgleda drugog klijenta. Razlog zašto se isti SaaS primjeri stalno hvale nije vizualna raskoš, već struktura: jasna vrijednosna ponuda na vrhu, fokusirana sekcija iznad pregiba, jedna primarna radnja. Biblioteka obrazaca jednom uhvati tu strukturu i omogućuje joj da preživi sljedeći redesign. Kada dođe novi račun, pretražujete biblioteku prije nego internet. To mijenja razgovor o budžetu jer više ne kupujete inspiraciju; primjenjujete testirane odluke.

Faza	Zadržite	Odbacite
Prvi projekti	3 radna primjera + prijevodi zašto	ogromna datoteka s primjerima
Nekoliko lansiranja	de-identificirana biblioteka obrazaca	primjeri koji trebaju dugačak izgovor
Prilikom skaliranja	živa biblioteka s povratnom petljom	snimke zaslona bez verzija od prije tri godine

Prođite kroz butičnu računovodstvenu tvrtku: umjesto da dizajneru date "evo pet računovodstvenih web stranica," date mu karticu iz biblioteke "obrazac stranice povjerenja: tko smo mi, što klijent izbjegava angažirajući nas, dokaz stručnosti, jedan sljedeći korak." Dizajn i dalje treba ljudsko oko, ali odluke su već donesene. Također izbjegavate sivi layout koji svaka računovodstvena tvrtka kopira, jer vaš obrazac ne govori ništa o boji. Najbolji izvori rijetko su ista industrija; namjerno posudite primjere web stranica iz drugih industrija i koristite biblioteku obrazaca kako biste zadržali 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, gledajte sekcije očima nepoznatog kupca; tjedan dana kasnije, pitajte onoga tko se javlja na telefon koja pitanja posjetitelji i dalje postavljaju; mjesec dana kasnije, provjerite koji se CTA-ovi zapravo klikaju. Otkrit ćete da neki omiljeni obrasci nikada ne zasluže svoje mjesto—izbrišite ih. To je navika provođenja revizije poput kupca kojem nije stalo do vas, ali primijenjena na samu kolekciju: revidirate svoje primjere, ne samo klijentovu stranicu.

Uzmite klijenta iz profesionalnih usluga čija je stara stranica zakopala radnju "radite s nama" iza stranice O nama. Kartica "hero s jednim zadatkom" iz biblioteke obrazaca govori sljedećem dizajneru da stavi radnju iznad pregiba. Nakon lansiranja, primijetite da publika koja traži posao stalno odskače. To nije neuspjeh obrasca; to je dokaz da ova stranica služi dvije publike i biblioteka treba varijantu "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.

Kontrarna glava: ne shvaćajte zapovijed o jednom CTA-u doslovno

Sada otpor. Mnogi članci o SaaS primjerima reći će vam da svaka stranica treba imati jedan poziv na akciju, a Notionov jedan "Get Notion free" navodi se kao dokaz. Taj je savjet istinit za stranice proizvoda čiji je cijeli posao jedna prijava; postaje lažan čim gradite za klijenta s više publika. Tretiranje "jednog CTA-a" kao zakona proizvodi agencijske stranice gdje se stranica za regrutaciju, kontakt za medije i obrazac za konzultacije bore za jedno dugme. Obranjiva verzija pravila je "jedan primarni cilj po publici po stranici," ne "jedno dugme, ikada." Isti primjer koji cilja svaku sekciju na jednu radnju 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 osoblje; forsiranje jednog CTA-a skriva oboje. Zadržite princip, preskočite snimku zaslona.

Manje vremena za skupljanje, više za 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 i dalje radi; revidirajte ono što ste isporučili; zanemarite zapovijedi koje ne odgovaraju klijentu. Praksa primjera agencije trebala bi sazrijeti na isti način kao i njeni projekti—od ručno rađenih do ponovljivih do samopoboljšavajućih. Mapa je još uvijek tu. Samo je mnogo manja sada.