Rozhodnutí o šabloně, které odolá demu: memo v 6 krocích

Shrnutí

Váš šéf si právě z dema vybral e-commerce šablonu a vy víte, že nebude konvertovat. Místo hádky o vkusu můžete kandidáta prohnat šestikrokovým hodnocením, které končí jednostránkovým rozhodovacím memem. Proces začíná písemným popisem práce, poté znovu postaví demo s vaším vlastním obsahem, změří skutečnou rychlost a mobilní chování, ohodnotí náklady na přizpůsobení a rozloží kompromisy do tabulky v prostém jazyce. Výsledkem je dokument, který váš netechnický šéf může podepsat, aniž by rozuměl CSS. Přestanete se hádat o vzhled a začnete porovnávat důkazy. Tento článek vás provede každým krokem s konkrétními mikropříklady a varováními, včetně toho, proč bezplatná témata málokdy jsou zadarmo a proč je rychlost dema fikce.

Váš šéf má demo otevřené v jedné záložce a Slack ve druhé. Je to domovská stránka s hero videem přes celou šířku, marquee s logy médií a lištou odpočítávání do výprodeje, která působí naléhavě. „Tohle je ono," napíše. Strávili jste tři dny porovnáváním layoutů zaměřených na konverze a chystáte se říct: „Tento design ve skutečnosti škodí mobilním konverzím," ale naučili jste se, že věty začínající na „ve skutečnosti" nemění názory. Názory mění rámec, který ukazuje vaši práci.

Toto je šestikroková metoda, kterou jsem použil k přeměně rozhodování o šabloně z testu vkusu na rozhodovací memo. Zabere to pár hodin a vytvoří to artefakt, který netechnický šéf může podepsat, aniž by měl pocit, že se vzdává.

1. Napište popis práce, než otevřete jakékoli demo.

Princip: nemůžete hodnotit šablonu, dokud nevíte, k čemu má být najata. Demo vašeho šéfa má práci: vypadat jako slavná značka. Váš web má práci: dostat vracejícího se zákazníka od „potřebuji to" k „koupil jsem to" co nejrychleji.

Než tedy otevřete jediné téma, napište krátký odstavec o hlavním scénáři vašeho obchodu. Pro butik prodávající kožené zboží by to mohlo být: „Na telefonu by zákazník, který ví, co chce, měl vidět cenu produktu a tlačítko přidat do košíku bez scrollování. Cesta od tohoto okamžiku k pokladně by měla trvat méně než minutu a mezi stránkou produktu a platební obrazovkou by se nemělo nic objevit." To je testovatelné tvrzení. Pak si vypište tři nebo čtyři akce, které generují většinu vašich příjmů – od vyhledávání k produktu, od produktu k pokladně a možná „nakupovat podle kolekce" pro sezónní zákazníky.

Výhrada: do popisu práce nepatří vizuální preference. Barvy, fonty a ořezy obrázků jsou změnitelné – byli byste překvapeni, kolik toho CSS dokáže přepsat. Držte se chování a omezení: rychlost, viditelnost na mobilu, hloubka navigace a kroky k pokladně. Když váš šéf řekne „líbí se mi ten velký obrázek," můžete odpovědět: „Velký obrázek si můžeme nechat a přitom splnit popis práce – ale pouze pokud tlačítko přidat do košíku zůstane na první obrazovce." Neodmítáte jeho vkus; testujete ho proti skutečným potřebám obchodu.

2. Přestavte demo s vlastním obsahem.

Dodavatelská dema jsou připravena s profesionální produktovou fotografií, nadpisy přesně na šířku a texty napsanými autorem šablony. Vaše produkty mají jiné poměry stran, názvy produktů jsou věty a vaše stránka „o nás" má tři odstavce o udržitelnosti. Demo to všechno může skrýt.

Vezměte tedy šablonu do stagingového prostředí a vyměňte obsah za svůj skutečný – ne vzorek, ale skutečný produkt, s jeho skutečným názvem a odstavcem skutečného popisu. Pak otestujte tři okamžiky, na kterých záleží: stránku produktu na šířku 375 pixelů, výsledky vyhledávání s dlouhým názvem kategorie a pokladnu s vaší skutečnou platební bránou. Například obchod prodávající ručně vyráběné keramické hrnky zjistí, že produktové obrázky v demu jsou focené na bílém pozadí, ale jejich fotky mají rušné pozadí z dílny – tmavá překryvná vrstva šablony způsobí, že hrnek zmizí. To je druh věci, kterou odhalíte jen s vlastním obsahem.

To je jádro auditu demo šablony – je to kontrola marketingu, ne šablony. Pokud se nadpis zalomí na tři řádky a posune tlačítko „Přidat do košíku" dolů, je to varovný signál, bez ohledu na to, jak dobře demo vypadalo.

3. Změřte, co demo neukazuje.

Demo běží na optimalizovaném serveru vývojáře šablony. Váš web bude běžet na vašem hostingu, s vašimi pluginy, skripty pro analýzu a aplikací pro opuštěné košíky. Proto je rychlost načítání dema v podstatě fikce.

Nastavte stagingový web se skutečným inventářem a spusťte dva testy: první na rychlém desktopovém připojení, druhý na skutečném telefonu přes 4G s vymazanou mezipamětí. Sledujte čas, než je stránka použitelná, nejen kdy se zdá, že se načte. Mnoho šablon zobrazí nadpis okamžitě, ale pak na dvě sekundy zablokuje layout, dokud se načte skript slideru – to je na telefonech skutečný problém. Projděte si také pokladnu na telefonu. Některá vyleštěná témata vypadají na desktopu dobře, ale mobilní pokladnu promění v pětisnímkovou prezentaci, kdy se ptají na promo kód před adresou a ukazují odhad dopravy po tlačítku platby. Tady přichází vhod kontrolní seznam pro mobile-first – nutí vás ověřit dosah palce, velikost dotykových prvků a to, zda je tlačítko „Pokračovat" nad záhybem.

Možná vás láká věřit rychlostnímu reportu šablony. Nedělejte to. Stránka dema šablony je doručována z CDN s cachingem a rychlostní odznak šablony je obvykle screenshot pořízený v ideálních podmínkách. Vaše prostředí je jiné, a to je v pořádku – test se týká vašeho prostředí.

4. Ohodnoťte náklady na přizpůsobení – a buďte upřímní ohledně „zdarma."

Tady je předpoklad, proti kterému se musíte ohradit: bezplatná témata jsou levnější. Málokdy jsou zadarmo, protože platíte časem vývojáře. Bezplatné téma může mít omezený panel možností a každá úprava značky – úprava záhlaví, výměna hero prvku, přidání odznaku – vyžaduje CSS override nebo dětské téma, což znamená za každou takovou úpravu hodinu fakturovatelného času vývojáře. Placené téma s dobrým panelem možností se zaplatí při první příležitosti, kdy se vyhnete požadavku na vlastní kód.

Platí to ale i naopak: placené téma s předinstalovaným page builderem může být pomalejší a náročnější na údržbu než štíhlé bezplatné téma. Skutečným nákladem není licenční cena; je to rozdíl mezi „co dělá demo" a „co potřebuje vaše značka." Spočítejte změny, které byste skutečně provedli: logo, rozložení záhlaví, typografie, mřížka produktů, zápatí a důvěryhodné odznaky. Pokud panel možností pokryje pět z osmi, jste napřed. Pokud pokryje jen dva, kupujete projekt, ne téma. To je součást skrytých nákladů na výběr špatné šablony – cenovka je jen začátek.

5. Rozložte kompromisy tak, aby je váš šéf viděl.

Tabulka má cenu sta výměn názorů, protože posouvá konverzaci od „líbí se mi tohle" k „tady je to, co tato volba stojí." Vytiskněte si ji (nebo vložte do Slacku), až budete porovnávat dva finalisty:

Co demo ukazuje	Co musíte ověřit
Hero video se přehrává okamžitě	Přehrává se automaticky na mobilních datech, nebo se změní na zamrzlý obrázek s tlačítkem přehrávání, na které nikdo neklikne?
Produktové obrázky vypadají prémiově	Vešly se vaše produktové obrázky do ořezu, aniž by produkt vypadl ze záběru?
Navigace je plynulá	Na skutečném telefonu je menu dosažitelné jedním palcem, nebo vyžaduje protažení oběma rukama?
Stránka se načítá rychle	Spusťte test rychlosti na svém hostingu, ne na hostingu dodavatele.
Pokladna je krásná	Dokončete skutečnou testovací objednávku. Zaznamenejte počet klepnutí a množství scrollování.

Váš šéf uvidí, že některá dema konvertují pocity, ne prodeje. Tabulka tyto pocity promění v zaškrtávací políčka.

6. Napište jednostránkové rozhodovací memo, které ukončí debatu.

Poslední krok promění audit v rozhodnutí. Držte se jedné stránky a prostého jazyka. Začněte doporučením, pak uveďte tři důkazy: mobilní test, test rychlosti a odhad nákladů na přizpůsobení. Poté uveďte kompromis, který přijímáte – například „ztratíme animovanou ikonu košíku, ale získáme kratší pokladnu na telefonech." Skončete dalšími kroky: co po spuštění vyladíte a jak to budete měřit.

Memo je prodejní dokument – prodáváte svému šéfovi rozhodnutí, které dokáže obhájit před svým vlastním manažerem. Rámcujte každý bod v obchodních pojmech. Místo „tlačítko přidat do košíku je pod záhybem na iPhone SE" napište „na nejčastějším rozměru telefonu by zákazníci museli scrollovat, aby produkt přidali, což zvyšuje pravděpodobnost, že odejdou." Místo „šablona používá hodně JavaScriptu" napište „stránka se na 4G načítá déle a pomalé stránky jsou spojovány s nižší konverzí." Nevynechávejte sekci „další kroky"; ujišťuje vašeho šéfa, že nepodepisujete něco trvalého – začínáte proces, který zahrnuje ladění po spuštění.

Pokud se chcete hlouběji podívat na sladění sady funkcí šablony s konverzními cíli, tento průvodce výběrem šablony, která konvertuje pokrývá rozbor funkce po funkci.

Důležitý je rámec, ne verdikt.

Demo se vždy objeví – nový trend, efektnější animace, web bratrance vašeho šéfa. Místo hádky pokaždé prožeňte kandidáta stejnými šesti kroky. Demo může vyhrát okamžik, ale memo vyhraje schůzku. A příště, až budete potřebovat rozhodnutí, budete mít proces, kterému nezáleží na tom, jak dobře příběh zní.