Toote turuletoomise veebileht peaks täitma kuus ülesannet just selles järjekorras: peatama külastaja avavideoga, laskma tal toodet uurida, võimaluse korral 3D-s, tõendama toote olemasolu, vastama tehnilistele küsimustele, esitama pakkumise ja koguma nende kontakte, kes pole veel ostuks valmis. Enne turuletoomist töötab see ootenimekirjaga eelteavituslehena. Turuletoomise päeval peab leht ka järsu külastajate kasvu korral kiiresti laadima, iga klikki jälgima ja põhifunktsioonid säilitama, kui mõni võimalus ei tööta.
Toote turuletoomise maandumislehe kuus osa
| # | Jaotis | Ülesanne | Levinud viga |
|---|---|---|---|
| 1 | Avavideo | Tekitada 5 sekundiga tunne, et toote saabumine on sündmus | 40 MB video, mis takistab lehe kasutamist |
| 2 | Toode 3D-s | Lasta uurida kuju, viimistlust ja suurust | Pöörlev mudel, milles pole midagi avastada |
| 3 | Tõendid | Näidata, et toode on olemas ja töötab | Üldsõnalised arvustused enne, kui keegi on toodet kasutanud |
| 4 | Tehnilised andmed | Vastata küsimustele „Aga kas see ka...?” | Mõõtmed ja hind on peidetud PDF-i |
| 5 | Pakkumine | Hind, versioonid, väljasaatmise kuupäev ja nupp | Hind ilmub alles pärast viie ekraanitäie kerimist |
| 6 | Ootenimekiri / teavitus | Koguda nende kontakte, kes pole veel ostuks valmis | Kaheksa väljaga vorm |
1. Avavideo
Avavaate video on treiler, mitte täispikk reklaam: korduv video või 6-15-sekundiline versioon näitab toodet ja võtab selle positsioneeringu kokku ühe lausega. Veebis peaks video käivituma automaatselt, ilma helita ja otse lehe sees. Apple'i WebKit lubab vaigistatud videol koos atribuudiga playsinline iOS-is otse lehel automaatselt käivituda. Ilma nende atribuutideta näitab iPhone esitusnuppu.
Täispika video ülesehitust etappide kaupa käsitleme toote turuletoomise videote näidetes.
2. Toode 3D-s
Siin pakub turuletoomise leht rohkem kui sotsiaalmeediapostitus. Lase külastajal toodet pöörata, viimistlust vahetada või kerides osadeks jaotuvat toodet uurida. Kerimisega juhitav animatsioon sobib siia hästi, kui iga samm midagi uut selgitab. Kavandamist näitame kerimislugudega veebilehtede näidetes. Manustamisvõimalustest alates model-viewerist kuni erilahenduseni Three.js-iga loe artiklist kuidas lisada veebilehele interaktiivne 3D-mudel.
3. Tõendid
Enne turuletoomist pole veel arvustusi. Kasuta tõendeid, mida saad ise esitada: päris kaadreid toote kasutamisest, materjalide päritolu, ajakirjanduse või edasimüüjate tsitaate, meeskonda ja garantiitingimusi. Ära kunagi mõtle arvustusi välja.
4. Tehnilised andmed
Mõõtmed, kaal, materjalid, ühilduvus ja pakendi sisu. Esita need HTML-tekstina, mitte canvas-elemendi või pildi sees, et info oleks otsitav ja ekraanilugejaga loetav.
5. Pakkumine
Hind, versioonid, väljasaatmise kuupäev, tagastustingimused ja üks peamine nupp. Mobiilis korda nuppu paigale kinnitatud ribal. Ettetellimuse puhul ütle, millal toode välja saadetakse ja millal kaardilt raha võetakse.
6. Ootenimekiri või „Teavita mind”
Ainult e-posti aadress, üks väli. Ütle, mida liituja saab: varajase ligipääsu, toote versiooni või turuletoomise kuupäeva. Kinnita aadress kohe.
Eelteavituslehest turuletoomise leheks ja seejärel tooteleheks
Kasuta kogu elutsükli jooksul üht URL-i:
- Eelteavitus mõni nädal varem: korduv avavideo, üks lause ja ootenimekiri. Muud pole peaaegu vajagi.
- Mõni päev enne turuletoomist: lisa toode 3D-s, tehnilised andmed ja kuupäev.
- Turuletoomine: asenda ootenimekiri kindlal ajal ostupakkumisega. Eelista ajastatud avaldamist, et vältida lehe käsitsi muutmist keskööl.
- Pärast turuletoomist: leht jääb püsivaks tooteleheks ja säilitab kõik seni kogutud lingid.
Mida turuletoomise päevaks kontrollida
Koormus
- Staatilised või vahemällu salvestatud lehed CDN-is, et koormuse kasv langeks võrgu servas asuvatele sõlmedele, mitte sinu serverile.
- Video on pakitud ja paigutatud video-CDN-i ning avapilt ilmub kohe.
- Lehe kiiruse sihid: Google'i järgi on head tulemused LCP kuni 2,5 s, INP kuni 200 ms ja CLS kuni 0,1, mõõdetuna külastuste 75. protsentiili järgi.
- 3D pärast esimese sisu ilmumist. Utsubo WebGL-i SEO-juhend hoiatab, et Three.js-iga avavaates „on LCP-element tavaliselt canvas”, ning soovitab enne 3D-d kuvada tavalise pildi või pealkirja. Lükka 3D-koodipaketi laadimine selle hetkeni edasi.
Analüütika
- Sündmused avavideo esitamise, 3D-ga suhtlemise, tehniliste andmete avamise, ootenimekirjaga liitumise, ostukorvi lisamise ja ostu vormistamise alustamise jaoks.
- UTM-märgistuse reeglid on reklaamide ja e-kirjade eest vastutajatega enne turuletoomist kokku lepitud.
- Proovikäik testkeskkonnas päris ostude ja neile järgnevate tagasimaksetega.
Varulahendused
- Staatiline pilt, kui WebGL pole saadaval või seade on liiga nõrk.
- Arvestatud on eelistusega
prefers-reduced-motion(MDN). Üle viie sekundi automaatselt liikuva sisu jaoks on pausinupp, mida nõuab WCAG 2.2 kriteerium 2.2.2 tasemel A. - Kui JavaScript ei tööta, on iga jaotis loetav tavalise HTML-ina. Kehtib Utsubo reegel: iga sisuliselt oluline leheolek peab olema otsingurobotile loetava märgistusena olemas enne renderduse käivitumist.
- Läbi on mõeldud väljamüüdud toote vaade ja ootenimekiri on valmis uuesti kasutusele võtmiseks.
