A demóálló sablonválasztás: 6 lépéses memo

Összefoglaló

A főnököd épp most választott ki egy e-kereskedelmi sablont egy demó alapján, és te tudod, hogy nem fog konvertálni. Ahelyett, hogy ízlésről vitatkoznál, lefuttathatod a jelöltet egy hat lépésből álló értékelésen, amely egy egyoldalas döntési memóval zárul. A folyamat egy írott munkaköri leírással kezdődik, majd újraépíti a demót a saját tartalmaddal, megméri a valós sebességet és mobil viselkedést, pontozza a testreszabás költségét, és közérthető táblázatban mutatja be a kompromisszumokat. Az eredmény egy olyan dokumentum, amelyet a nem technikai főnököd is jóváhagyhat anélkül, hogy értené a CSS-t. Többé nem a kinézetről vitatkozol, hanem bizonyítékokat hasonlítasz össze. Ez a cikk minden lépést konkrét mikro-példákkal és figyelmeztetésekkel mutat be, beleértve azt is, hogy az ingyenes témák ritkán ingyenesek, és hogy a demó sebessége fikció.

A főnököd az egyik lapfülön a demót nyitva tartja, a másikon a Slacket. Ez egy kezdőlap, tele van teljes szélességű hero videóval, sajtólogók sorával és egy leárazás-visszaszámláló sávval, ami sürgető érzést kelt. „Ez az” – gépeli. Te három napot töltöttél a konverzióközpontú elrendezések összehasonlításával, és éppen azt akarod mondani: „Ez a dizájn valójában árt a mobil konverziónak” – de már megtanultad, hogy az „valójában” kezdetű mondatok nem változtatnak meg senki véleményén. Ami igen, az egy olyan keretrendszer, amely megmutatja a munkádat.

Itt van a hat lépésből álló módszer, amit arra használtam, hogy a sablonválasztást ízléspróbából döntési memóvá alakítsam. Néhány órát vesz igénybe, és olyan eredményt ad, amelyet a nem technikai főnököd is jóváhagyhat anélkül, hogy úgy érezné, meghátrál.

1. Írd meg a munkaköri leírást, mielőtt bármelyik demót megnyitnád.

Az elv: nem tudod értékelni a sablont, amíg nem tudod, mire alkalmazzák. A főnököd demójának az a feladata, hogy egy híres márkára hasonlítson. A weboldaladnak az a feladata, hogy a visszatérő vásárlót a lehető leggyorsabban juttassa el az „erre szükségem van” állapotból a „megvettem” állapotba.

Tehát mielőtt megnyitnál egyetlen témát is, írj egy rövid bekezdést az áruházad alaphelyzetéről. Egy bőröndöket árusító butik esetében ez lehet: „Telefonon egy vásárló, aki tudja, mit akar, görgetés nélkül lássa a termék árát és a kosárba gombot. Az adott pillanattól a fizetésig tartó útnak kevesebb mint egy percnek kell lennie, és semmi ne ugorjon fel a termékoldal és a fizetési képernyő között.” Ez egy tesztelhető állítás. Ezután sorold fel azt a három-négy műveletet, amely a bevételed nagy részét adja – keresés-termék, termék-fizetés, és esetleg „vásárlás kollekciók szerint” a szezonális vásárlóknak.

A figyelmeztetés: ne tedd a vizuális preferenciákat a munkaköri leírásba. A színek, betűtípusok és képkivágások módosíthatók – meglepődnél, mennyit át lehet írni CSS-sel. Maradj a viselkedésnél és a korlátoknál: sebesség, mobil láthatóság, navigációs mélység és fizetési lépések. Amikor a főnököd azt mondja: „tetszik a nagy kép”, válaszolhatod: „Megtarthatjuk a nagy képet, és továbbra is megfelelünk a munkaköri leírásnak – de csak akkor, ha a kosárba gomb az első képernyőn marad.” Nem az ő ízlését utasítod el; azt teszteled, hogy megfelel-e az üzlet valós igényeinek.

2. Építsd újra a demót a saját tartalmaddal.

A szállítói demók professzionális termékfotókkal, pontos szélességű címsorokkal és a témakészítő által írt szövegekkel vannak előkészítve. A te termékeidnek más a képaránya, a termékcímek mondatok, és a „Rólunk” oldalad három bekezdés a fenntarthatóságról. A demó mindezt elrejtheti.

Tehát vidd a sablont egy tesztkörnyezetbe, és cseréld le a valódi tartalmadra – ne mintaadatot, hanem egy valódi terméket, a valódi nevével és egy bekezdésnyi valódi leírással. Ezután teszteld a három fontos pillanatot: a termékoldalt 375 pixel széles képernyőn, a keresési eredményeket egy hosszú kategórianévvel, és a fizetést a valódi fizetési átjáróddal. Például egy kézzel készített kerámia bögréket árusító üzlet azt tapasztalja, hogy a demó termékképei fehér háttérrel készültek, de az ő fotóikon zsúfolt műhely háttér van – a téma sötét rétege miatt a bögre eltűnik. Ez az a fajta dolog, amit csak a saját tartalmaddal veszel észre.

Ez a sablon-demó auditálásának a lényege – ez a marketing ellenőrzése, nem a témáé. Ha a címsor három sorba törik, és lenyomja a „Kosárba” gombot, az figyelmeztető jel, bármilyen jól is nézett ki a demó.

3. Mérd meg azt, amit a demó nem mutat.

A demó a témafejlesztő optimalizált szerverén fut. A webhelyed a tárhelyeden fog futni, a bővítményeiddel, a analitikai szkriptjeiddel és az elhagyott kosár alkalmazásoddal. Ezért a demó betöltési sebessége lényegében fikció.

Állíts fel egy tesztoldalt a valódi készleteddel, és futtass két tesztet: először gyors asztali kapcsolaton, majd egy valódi telefonon 4G-n, törölt gyorsítótárral. Nézd meg, mennyi idő alatt válik használhatóvá az oldal, nem csak azt, amikor úgy tűnik, betöltődött. Sok téma azonnal megjeleníti a címsort, de két másodpercre blokkolja az elrendezést, amíg egy csúszka szkript betöltődik – ez komoly probléma telefonon. Ezen kívül menj végig a fizetésen telefonon. Néhány kifinomult téma asztali gépen jól néz ki, de a mobil fizetést öt képernyős diává változtatja, a promóciós kódot a cím előtt kéri, és a szállítási becslést a fizetési gomb után mutatja. Itt jön jól egy mobil-első ellenőrzőlista – ez arra kényszerít, hogy ellenőrizd a hüvelykujj elérését, az érintési célpontokat, és azt, hogy a „Folytatás” gomb görgetés nélkül látható-e.

Lehet, hogy kísértésbe esel, hogy megbízz a téma saját sebességjelentésében. Ne tedd. A téma demóoldalát CDN-ről szolgálják ki gyorsítótárazással, és a téma sebességjelvénye általában ideális körülmények között készült képernyőkép. A te környezeted más, és ez rendben van – a teszt a te környezetedről szól.

4. Pontozd a testreszabás költségét – és légy őszinte az „ingyenes”-ről.

Itt van az a feltételezés, amivel szembe kell szállni: az ingyenes témák olcsóbbak. Valójában ritkán ingyenesek, mert fejlesztői idővel fizetsz. Egy ingyenes témának korlátozott opciók panelje lehet, és minden márka-finomítás – a fejléc módosítása, a hero lecserélése, jelvény hozzáadása – CSS-átírást vagy gyermektémát igényel, ami óránként egy fejlesztő számlázható óráját jelenti. Egy jó opciók panellel rendelkező fizetős téma az első alkalommal visszahozza az árát, amikor elkerülsz egy egyedi kódolási kérést.

De az ellenkezője is igaz: egy fizetős téma, amelybe oldalkészítőt csomagolnak, lassabb és nehezebben karbantartható lehet, mint egy karcsú ingyenes téma. A valódi költség nem a licenc ára; hanem a különbség „amit a demó csinál” és „amire a márkádnak szüksége van” között. Számold össze azokat a változtatásokat, amelyeket valóban elvégeznél: logó, fejléc elrendezés, tipográfia, termékrács, lábléc és bizalmi jelvények. Ha a téma opcióinak panelje nyolcból ötöt lefed, akkor előrébb vagy. Ha csak kettőt fed le, akkor projektet veszel, nem témát. Ez része a rossz sablon kiválasztásának rejtett költségeinek – az árcédula csak a kezdet.

5. Mutasd meg a kompromisszumokat ott, ahol a főnököd is látja.

Egy táblázat többet ér száz oda-vissza üzenetnél, mert a beszélgetést arról, hogy „ez tetszik” arra tereli, hogy „ez a választás ennyibe kerül”. Nyomtasd ki (vagy illeszd be Slackbe), amikor két döntőst hasonlítasz össze:

Amit a demó mutat	Amit ellenőrizned kell
A hero videó azonnal lejátszódik	Automatikusan lejátszódik mobil adatforgalommal, vagy befagyott képpé válik egy lejátszás gombbal, amire senki sem kattint?
A termékképek prémiumnak tűnnek	A te termékképeid beleférnek a vágásba anélkül, hogy a termék kikerülne a képkockából?
A navigáció gördülékeny	Egy valódi telefonon a menü egy hüvelykujjal elérhető, vagy kétkezes nyújtózkodást igényel?
Az oldal gyorsan betöltődik	Futtass sebességtesztet a tárhelyeden, ne a szállítóén.
A fizetés gyönyörű	Hajts végre egy valódi tesztrendelést. Jegyezd meg, hány érintés és mennyi görgetés szükséges.

A főnököd látni fogja, hogy egyes demók érzelmeket konvertálnak, nem eladásokat. A táblázat ezeket az érzéseket jelölőnégyzetekké alakítja.

6. Írj egy egyoldalas döntési memót, amely lezárja a vitát.

Az utolsó lépés az auditot döntéssé alakítja. Maradj egy oldalnál, közérthető nyelvezettel. Kezdd az ajánlással, majd mutasd be a három bizonyítékot: a mobiltesztet, a sebességtesztet és a testreszabási becslést. Ezután mondd ki, milyen kompromisszumot vállalsz – például „elveszítjük az animált kosárikont, de rövidebb fizetési folyamatot nyerünk telefonon.” Végül jöjjön a következő lépések: mit hangolsz az indulás után, és hogyan méred.

A memo egy értékesítési dokumentum – eladod a főnöködnek a döntést, amelyet ő is meg tud védeni a saját vezetője előtt. Fogalmazz meg minden pontot üzleti nyelven. Ahelyett, hogy „a kosárba gomb az iPhone SE-n a látható területen kívül van”, írd azt: „a leggyakoribb telefonméretnél a vásárlóknak görgetniük kellene a termék hozzáadásához, ami növeli annak esélyét, hogy távoznak.” Ahelyett, hogy „a téma sok JavaScriptet használ”, írd azt: „az oldal betöltése tovább tart 4G-n, és a lassú oldalak alacsonyabb konverzióval járnak.” Ne hagyd ki a „következő lépések” szakaszt; ez megnyugtatja a főnöködet, hogy nem egy végleges dolgot írsz alá – hanem egy folyamatot indítasz, amely magában foglalja az indulás utáni finomhangolást.

Ha mélyebben szeretnéd megvizsgálni, hogyan illeszkedik egy sablon funkciókészlete a konverziós célokhoz, ez a útmutató a konvertáló sablon kiválasztásához részletesen bemutatja a funkciók szerinti bontást.

A keretrendszer a lényeg, nem az ítélet.

Egy demó mindig érkezik – egy új trend, egy feltűnőbb animáció, a főnök másodunokatestvérének oldala. Ahelyett, hogy minden alkalommal vitatkoznál, futtasd át a jelöltet ugyanazon a hat lépésen. A demó talán megnyeri a pillanatot, de a memo megnyeri a megbeszélést. És legközelebb, amikor döntésre van szükséged, lesz egy folyamatod, amelyet nem érdekel, milyen jól hangzik a történet.