Proiectarea paginii de destinație: construirea paginii de destinație supreme

O pagină de destinație eficientă este esențială pentru succesul unui produs

Marketingul este un concept străin pentru majoritatea designerilor și dezvoltatorilor. Excelem în dezvoltarea de produse și provocările tehnice, dar când vine momentul să promovăm un produs, nu suntem foarte pricepuți.

Dar marketingul este crucial pentru succesul unui produs și nu trebuie trecut cu vederea. Aceasta a fost provocarea în timp ce m-am proiectat și m-am pregătit pentru a lansa tastatura preeminentă din lume pentru dezvoltatori, Ultimate Hacking Keyboard.

Din fericire, am făcut parte dintr-o echipă care și-a dat seama de importanța unei pagini de destinație atractive, mai ales în lunile care au precedat campania noastră de crowdfunding. Împreună, ne-am propus să proiectăm o pagină de destinație care să capteze imaginația, să genereze abonați și să ne pregătim produsul pentru o lansare de succes.

Aceasta este povestea paginii de destinație supreme pentru The Ultimate Hacking Keyboard.

Sfat tehnic. Pași practici înainte.

O căutare pe Google pentru „designul paginii de destinație” duce la zeci de articole excelente, fiecare împachetat cu sfaturi importante precum:

• „Conținutul ar trebui să se încarce într-o clipă.”
• „Fotografia ar trebui să fie relevantă pentru publicul site-ului.”
• și „Includeți un formular pentru a aduna piste”.

Acestea sunt puncte utile, dar există mai mulți factori pentru succesul paginii de destinație. Acest ghid de proiectare a paginii de destinație va oferi sfaturi tehnice, dar va oferi și perspective practice care îi ajută pe designeri și dezvoltatori să aleagă serviciile terțe potrivite și să integreze tehnologii care funcționează în culise.

În cele din urmă, scopul acestui ghid este de a economisi timp și bani pentru designeri și dezvoltatori, care altfel ar putea fi irosite cu încercări și erori inutile.

Urmăriți producția și găzduirea video de vârf

Prezentarea videoclipurilor pe web este mai ușoară ca niciodată, dar relativ puține site-uri îl folosesc. Din perspectiva web, nu este o provocare tehnică, ci o investiție de resurse - timp și bani.

Trailerul video al paginii de destinație pentru Ultimate Hacking Keyboard (UHK) a suferit douăsprezece iterații, fiecare nouă versiune rafinând treptat fiecare mic detaliu. Procesul de design a fost obositor, dar plin de satisfacții, iar trailerul este bijuteria coroanei paginii noastre de destinație. Acesta diferențiază complet produsul nostru de restul pachetului.

Rețineți că crearea de conținut de înaltă calitate este costisitoare. Profesioniștii specializați pot face un produs să strălucească, dar este important să înțelegeți ce vă puteți permite; în caz contrar, produsul dvs. s-ar putea rezervor înainte de a decola vreodată de la sol.

Dacă dvs. sau un alt designer din echipa dvs. aveți abilitățile și echipamentul, puteți încerca să vă creați propriul conținut video, dar păstrați videoclipurile scurte și simple. Producțiile prea ambițioase în mâinile amatorilor rareori merg bine.

Echipa UHK a optat pentru o animație 3D dinamică pentru a demonstra funcționalitatea de bază a tastaturii pe pagina noastră de destinație. Dacă este necesară o animație 2D (pentru o aplicație sau un serviciu web) sau dacă este necesară filmarea unei camere cu acțiune în direct, procesul va prezenta diferite provocări.

Odată realizat un videoclip, acesta trebuie să fie găzduit pe un site web. Din fericire, există o mulțime de opțiuni:

YouTube este liderul incontestabil al pieței și un sinonim pentru video pe web. Este un serviciu capabil și o alegere rezonabilă, dar playerul său încorporat nu este opțiunea cea mai plăcută din punct de vedere estetic.

Vimeo are un player încorporat cu un design minimalist destul de elegant. Este cunoscut pentru că găzduiește conținut de calitate și oferă o înaltă definiție superioară.

Wistia este o altă alegere populară printre marketerii. Oferă funcții avansate, cum ar fi hărți de căldură video, care arată ce părți ale unui videoclip au fost vizionate, sărite și revizionate.

În cele din urmă, echipa UHK a decis că Vimeo ne satisface cel mai bine nevoile. Iată trailerul paginii noastre de destinație: Ultimate Hacking Keyboard

De asemenea, merită remarcat faptul că ne-am introdus în Interfața de programare a aplicațiilor (API) Vimeo pentru a ajuta videoclipul nostru să capteze mai bine atenția vizitatorilor paginii de destinație. Folosind API-ul JavaScript de la Vimeo, am făcut ca butoanele „Vreau unul” de pe site-ul nostru să bată de trei ori la rând după ce trailerul nostru se termină. Folosite corect, micile ajustări de acest fel pot crește ratele de conversie a paginii de destinație.

Creați o experiență captivantă cu conținut 3D

Uneori este important să oferi vizitatorilor paginii de destinație o experiență captivantă. Ne-am dorit ca vizitatorii noștri să poată explora Ultimate Hacking Keyboard în 3D, așa că a trebuit să investigăm serviciile bazate pe WebGL create special pentru acest scop.

Sketchfab este cel mai popular serviciu bazat pe WebGL. Este ușor de stăpânit, oferă o gamă largă de setări vizuale și poate fi încorporat într-o gamă largă de servicii de găzduire populare.

P3d.in este un serviciu WebGL simplu, axat pe ușurința în utilizare, dar are suport limitat pentru anumite texturi de înaltă rezoluție.

După o analiză atentă, am ales Sketchfab. Așa arată tastatura Ultimate Hacking în 3D.

Vizualizați probleme și soluții cu animații 2D

Unul dintre avantajele majore ale tastaturii Ultimate Hacking este că reduce dramatic mișcarea mâinii. Echipa a vrut să vizualizeze acest lucru pe pagina noastră de destinație afișând o animație a UHK care lucrează unul lângă altul cu o tastatură obișnuită. Implementarea acestui lucru nu a fost atât de simplă pe cât pare.

Utilizarea unui videoclip încorporat s-a simțit exagerat și ar necesita, de asemenea, munca suplimentară de randare. GIF-urile animate nu erau o opțiune din cauza dimensiunii uriașe a fișierului și a paletei limitate de culori. În cele din urmă, am ales să lucrăm cu animații SVG inline, deoarece acestea au permis graficii noastre de mână să se miște independent de alte elemente grafice de pe pagină.

Crearea animației paginii noastre de destinație în acest fel a luat mai mult timp decât ne așteptam. A trebuit să navigăm pe probleme între browsere, erori ale bibliotecii JavaScript și alte provocări tehnice neprevăzute doar pentru a face o animație simplă. Cu toate acestea, rezultatul final arată destul de frumos și s-a dovedit a merita munca suplimentară.

Un cuvânt către înțelepți – să nu subestimați niciodată numărul de lucruri care pot merge prost!

Măsurați Analytics în timp real

Google Analytics este grozav. Este utilizat pe scară largă și ușor de lucrat. Cu toate acestea, există candidați mai buni pentru operațiuni în timp real.

Chartbeat face o treabă grozavă de a trimite notificări atunci când un site web depășește anumite praguri, în special numărul de utilizatori simultani pe un site. De exemplu, site-ul UHK este ocazional legat de forumuri online, generând creșteri bruște de trafic. Datorită Chartbeat, știm imediat și ne putem alătura conversației în curs devreme.

Mixpanel îi ajută pe administratorii web să analizeze evenimente precum vizitele pe site, deschiderea unui dialog de abonare și confirmarea unui abonament. De asemenea, poate construi canale din aceste evenimente și poate vizualiza ratele de conversie, făcând astfel numerele acționabile.

Clicky oferă o caracteristică extraordinară de hartă termică care dezvăluie unde vizitatorii fac clic pe un site. Pe baza rezultatelor, se pot aduce îmbunătățiri aspectului sau conținutului unui site pentru a obține rezultate mai bune.

HotJar le permite proprietarilor de site-uri web să înregistreze interacțiunile vizitatorilor lor salvând fiecare acțiune a mouse-ului și a tastaturii și transformându-le în videoclipuri.

Fiecare dintre aceste servicii are propriile caracteristici și beneficii unice, dar toate oferă feedback valoros, în momentul de față, despre activitatea vizitatorilor unui site web. Rămâne la latitudinea întreprinderilor individuale să determine ce tip de informații este cel mai valoros în scopuri de marketing.

Înregistrați erorile și preveniți durerile de cap inutile

Site-urile web devin din ce în ce mai dependente de JavaScript, atât de mult încât funcțiile esențiale ale site-ului depind adesea de acesta. De exemplu, dialogul de abonare de pe pagina de destinație Ultimate Hacking Keyboard este declanșat de codul JavaScript.

Când am implementat funcția de abonament, am testat-o ​​pe browsere majore și am simțit încredere că am făcut tot ce ne trebuia. Mai târziu, însă, am primit un e-mail de la un vizitator care se plângea că funcția de abonare la pagina de destinație nu funcționează.

După cum sa dovedit, vizitatorul în cauză folosea Adblock Plus în modul său cel mai strict, care a blocat scriptul de analiză Clicky. Spre deosebire de alte servicii de analiză, codul de încorporare al Clicky nu a fost rezistent în acest sens, așa că la înregistrarea acțiunii de abonare și la referirea obiectului Clicky, codul a generat o eroare.

După acest incident, ne-am gândit cu atenție cum să evităm situații similare pe viitor. Echipa i s-a gândit că ar trebui să folosim handlerul global de evenimente window.onerror pentru a detecta și înregistra astfel de erori. Apoi am căutat servicii de logare adecvate și am ajuns să alegem Errorception.

Recepția erorilor este uimitoare, deoarece face o singură treabă și o face extrem de bine - găsirea erorilor JavaScript. Interfața sa de utilizator este minimalistă și funcțională, suportul este excelent și permite administratorului site-ului să vadă erori individuale și să investigheze urmele stivei. Cel mai bun dintre toate, oferă un adevărat profit pentru banii tăi.

De la integrarea Errorception, am rezolvat aproximativ o duzină de erori, dintre care unele erau puțin probabile și neașteptate. De exemplu, am primit odată o eroare legată de localStorage și am descoperit că atunci când Safari este în modul de navigare privată, localStorage.setItem() are ca rezultat o eroare.

Este imposibil să ținem cont de fiecare caz de eroare excepțional, așa că înregistrarea în jurnal este o modalitate excelentă de a surprinde defectele înainte ca acestea să devină dureri de cap majore.

Proiectați un proces de construcție care necesită întreținere redusă

Inițial, pagina de index UHK a început ca o singură pagină HTML găzduită în WordPress și conținea tot codul CSS, HTML și JavaScript. La început, aceasta a fost o soluție fezabilă, dar pe măsură ce pagina creștea, a devenit o sarcină de întreținere și era nevoie de o abordare mai modulară.

Soluția noastră? În primul rând, împărțim codul CSS, HTML și JavaScript într-un număr de fișiere separate. Apoi, am convertit fișierele CSS în fișiere Less pentru a face întreținerea și mai ușoară. În cele din urmă, am conceput un proces de construire pentru a asambla toate fișierele noastre mici.

Optimizați întotdeauna pentru performanță

Echipa UHK știe din experiență că performanța site-ului este crucială, cum ar fi momentul în care pagina noastră de destinație a fost Slashdot și am primit 260 de vizitatori simultan. Din fericire, VPS-ul nostru Linode de 20 USD pe lună a funcționat ca un campion, dar acest lucru a necesitat mai mult decât noroc orb, așa că iată câteva sfaturi pentru creșterea performanței:

• Încărcarea leneșă a imaginilor este prietenul tău, mai ales dacă pagina ta, ca a noastră, conține multe imagini. Folosim pluginul WordPress Unveil Lazy Load.

• Puteți încărca leneș și activele. Dacă o secțiune a unei pagini depinde de un script suplimentar, este posibil să o încărcați leneș când intră în fereastra de vizualizare. Verificați vizibilitatea ferestrei de vizualizare cu pluginul jQuery inview și încărcați scriptul cu jQuery.getScript() sau orice alt încărcător de script.

Landing Page Design este o disciplină vitală de design

Am atins destul de multe probleme legate de designul paginii de destinație în această postare, așa că haideți să rezumam cele mai importante puncte:

• Treceți dincolo de conținutul bazat pe text și includeți conținut media îmbogățit, cum ar fi videoclipuri, modele 3D și animații 2D. Acest tip de conținut face o pagină de destinație mai captivantă și încurajează vizitatorii să partajeze altora.
• Utilizați analize în timp real, astfel încât să puteți reacționa rapid la vârfurile bruște de trafic și să vă alăturați conversației în curs.
• Înregistrați întotdeauna erorile. Există o mulțime de lucruri care pot (și vor) merge prost, așa că este important să urmăriți.
• Optimizați performanța, astfel încât site-ul dvs. să țină pasul chiar și la cele mai mari încărcări de trafic.

Ca în cazul oricărei discipline de design, designul paginii de destinație necesită un angajament continuu de a învăța despre noi instrumente, tehnici și procese. Tehnologia și gusturile evoluează în mod inevitabil – vârful de azi este relicva de mâine.

Din fericire, designul paginii de destinație care comunică clar și captivează publicul nu depinde în totalitate de tehnologie. Designerii experimentați știu cum să încorporeze cele mai noi instrumente, dar procesul lor de proiectare este condus în primul rând de adresarea întrebărilor potrivite și de navigarea cu pricepere a problemelor care amenință să deraieze un proiect.

În cele din urmă, o pagină de destinație atractivă trebuie să fie o parte esențială a planului de marketing al oricărui brand sau produs nou. În lumea noastră bazată pe web, o pagină de destinație bine concepută are capacitatea de a crea un număr de urmăritori, de a genera noutăți și de a crește vânzările – toate acestea sunt vitale pentru prosperitatea continuă a unei companii în curs de dezvoltare.