Sikeres céloldal 15 tervezési példa, amelyeket látnia kell
Nem olyan könnyű létrehozni egy tetszetős céloldalt, amely szintén a kívánt módon működik.
Sokféle dologra kell figyelni, hogy remek céloldal legyen. Hogy pontosan mik is ezek, - mint annyi minden más - a céloldal céljától függ.
Vegyük példaként az űrlaphosszt: az űrlap csak egy a céloldal számtalan eleméből, amelyet módosítania kell. És ha betartja a bevált gyakorlatokat, akkor azt tapasztalja, hogy nincs „helyes” vagy „rossz” formahosszúság. A rövid és hosszú űrlapok egyaránt jól működhetnek - mindegyik attól függ, hogy inkább szeretne előállítani sok leadet (potenciálisan) kevesebb érdeklődéssel, vagy kisebb számú leadet, nagyobb érdeklődés mellett.
Mielőtt elkezdené létrehozni saját céloldalait, először meg kell találnia, hogy mi teszi a jó céloldalt - és példák segítségével képet kaphat arról, hogy ezek az egyes elemek hogyan valósulnak meg hatékonyan. A sikeres céloldal-tervek példáinak keresésekor azonban észrevettük, hogy alig akad olyan modern, lenyűgöző céloldal, amely nem csak regisztrációs űrlappal ellátott kezdőlapot kínálna. Ez volt az oka annak, hogy ezt a listát olyan céloldalakkal állítottuk össze, amelyek meggyőztek minket a tervezés szempontjából.
Előre megjegyzés: Nincs hozzáférésünk ezeken az oldalakon található statisztikákhoz. Ezért nem tudunk nyilatkozni arról, hogy végül hány látogatót, leadet és ügyfelet fognak konvertálni ezeken a céloldalakon. Ezek példák az egyes céloldal-elemek sikeres kombinációjára és integrációjára. Természetesen, ha maga szeretné kipróbálni a következő bejegyzésben bemutatott taktikák egyikét, előzetesen nem tudhatja, hogy működni fognak-e. Tehát a mottó: teszt, teszt, teszt!
Sikeres céloldalak: 16 tervezési példa, amelyet látnia kell
1) Wistia
Az első jelölt a Wistia céloldala, ahol a látogatók ingyenes számlára regisztrálhatnak. A szem azonnal a fiók létrehozásának rövid formájára esik, amely fehér mezőivel tökéletesen kiemelkedik a kék, minimálisan mintás háttérrel szemben.
Az űrlapmező hossza és a figyelemfelkeltő elhelyezés miatt a látogató azonnal tudja, miről van szó: fiók létrehozása. Ha pedig még mindig habozik, akkor ott görgethet lefelé, és elolvashatja a gyakran feltett kérdésekre adott válaszokat. Mivel ezt a két területet ellentétes színekkel tervezték, Ön, mint látogató, könnyen áttekintést tarthat, és nem tévesztheti el az űrlapot - tökéletes az átváltási arányhoz!
2) Pattanás
Nem meglepő, hogy listánk következő helye: Visszavonás! Végül is ez a vállalat lenyűgözött minket a múltban a céloldalakkal és a konverzió-orientált optimalizálással kapcsolatos szakértelmével. Ennek a céloldalnak kétségkívül sok sikeres eleme van, amelyek közül kettőt szeretnénk kiemelni: 1) A nyíl a támogató képek irányából a CTA gombra és 2) az űrlap alatti részletes, de jól csomagolt információkat.
Az 1. pont (a nyíl) azonnal tájékoztatja a látogatókat az oldal céljáról: töltsék ki az űrlapot! És az egész úgy működik, hogy nem különösebben tolakodó. A látogatók finom vezetése egy oldalon önmagában is művészet, és az Unbounce ezt tökéletesen elvégzi. A 2. pont (a részletes információk) SEO szempontból is előnyöket kínál az oldal számára, mivel a keresőmotorok több tartalommal rendelkeznek, amelyeket indexelni tudnak. Ugyanakkor azok a látogatók, akik szeretnének többet megtudni, mielőtt elérhetőségeiket elárulják, elégedettek - és ezen információk okos elhelyezése nem vonja el a figyelmet az űrlapról.
3) HATÁS márkajelzés és tervezés
Előre: Igen, az IMPACT HubSpot partner! De nem ezért vettük fel őket a listánkra. Az IMPACT céloldalait már régóta a sikeres tervezés inspirációjának tekintik. Az oldal egyszerű elrendezése, a nagy címsortól és a részletes funkcióképtől az űrlapot körülvevő keretig, a színeken és a betűtípusokon keresztül, amelyek nagyon könnyűek a szemén, itt minden sikeres.
Talán Ön is észrevette a dobozt, hogy feliratkozhasson a blogra? Alapértelmezés szerint be van jelölve! Felhívjuk figyelmét, hogy bár a céloldal űrlapján található előfizetés mező nagyszerű módja az új előfizetők vonzásának, azt javasoljuk, hogy alapértelmezés szerint ne jelölje be a négyzetet, hogy a felhasználók választhassanak, feliratkoznak-e. akar. Ellenkező esetben fennáll annak a kockázata, hogy túl sok érdektelen feliratkozót ad hozzá a kapcsolattartói adatbázisához .
4) WebDAM
A WebDAM céloldal kétségtelenül sok szép elemet tartalmaz, de (vitathatatlan) kedvencünk a forma. Zökkenőmentesen illeszkedik az oldal struktúrájába, és így természetes komponensnek tűnik, amely ennek ellenére háttérszíne miatt kiemelkedik. Ha az űrlapot olyan kép mellé helyezi, amely önmagában nem nyújt lényeges információkat, a felhasználók nem kerülnek elterelésre, és minden figyelem az űrlapra összpontosul. A beküldés gomb magenta színű (a türkizkék kiegészítő színe), kiemelkedik és arra ösztönzi a látogatókat, hogy töltsék le az ajánlatot.
Az űrlap alatt a vállalat teljesítményre vonatkozó ígéretét röviden három pontban foglaljuk össze. Ezenkívül ez a szövegblokk vizuális elválasztásként működik a fenti formától. Első osztályú munka, WebDAM!
5) Bills.com
Gyakran feltételezik, hogy a céloldalak egy webhely statikus oldalai. De ennek nem kell így lennie. Megfelelő eszközökkel a céloldalak interaktív módon is kialakíthatók és testre szabhatók.
Vessen egy pillantást például a Bills.com alábbi példájára. Először három kérdésre kell válaszolnia, hogy eljuthasson az űrlaphoz. Ez előre tisztázza, hogy szüksége van-e még tanácsra. A látogatóknak először is meg kell adniuk adósságszintjüket:
Ezt követi még két kérdés, például: B. Ezek itt ("Van fizetési késedelme?"):
És elérkezett a tényleges céloldal űrlaphoz, ahol meg kell adnia adatait:
Függetlenül attól, hogy hogyan működik az algoritmus (ha van ilyen), a megközelítés néha kissé idegessé teszi a látogatókat, hogy esetleg nem jogosultak tanácsadásra. Amikor ezután meglátja az űrlapot, megkönnyebbül, és az űrlap kitöltése nagyon egyszerű. Úgy gondoljuk, hogy az ajánlat kizárólagossága miatt (legyen az valós vagy hamis) a Bills.com meglehetősen magas konverziós rátával rendelkezik.
6) Trulia
A Trulia a Bills.com-hoz hasonló módon teszi a céloldalán. Itt egy egyszerű űrlappal indul, amely „címet” kér (amely nem hangzik annyira feltűnőnek, mint a „címe”, bár pontosan ezt értjük). Az egyszerű űrlapmező alatt egy narancssárga gomb található, amely jól kitűnik az űrlap háttérképével szemben. A CTA szövege kifejezetten azt jelzi, hogy egyedi becslés készül az Ön ingatlanára vonatkozóan.
Természetesen a cím nem elegendő egy ingatlan értékének meghatározásához. Valójában csak a helyszínt és a környéket rögzítik. Ezért a következő oldalon további kérdéseket találhat magáról az ingatlanról, például a hálószobák és a fürdőszobák számáról. Az alábbiakban a „Mondja meg, hová küldje el a jelentést” szöveget láthatja - azzal a megjegyzéssel, hogy ezen információk megadásával beleegyezik, hogy egy ingatlanügynök lépjen kapcsolatba velünk. Ez egy nagyszerű példa egy olyan vállalatra, amely hozzáadott értéket kínál látogatóinak, ugyanakkor jelzi, hogy mire számíthat.
7) Basecamp
A Basecamp kiterjedt céloldallal rendelkezik, sok információval a közvetlenül látható területen és alatt. Az információk többsége szöveges formában van, aminek az a hatása is, hogy az oldal egyetlen vizuális eleme, a forma annál inkább kiemelkedik. A regisztráció itt is ugyanolyan egyszerű, mint az e-mail cím megadásával vagy a Google-fiókkal történő bejelentkezéssel.
Azzal a címsorral, amely felsorolja az előző héten a Basecampba regisztrált vállalatok számát, és az ügyfelek ajánlásaival, a Basecamp teljes mértékben társadalmi bizonyítékokra támaszkodik a kívánt konverziók elérése érdekében. Az ügyfél-ajánlások kiemelő hatása, amely úgy tűnik, mintha itt kiemelőt használnának, további hangsúlyt fektet azokra a pontokra, amelyeket a Basecamp különlegesen hirdetni szeretne.
8) Zendesk
Szeretjük a Zendesk ingyenes próbaverziójának céloldalát, mert az egyszerű és egyszerű mind szöveges, mind dizájn szempontjából. Az egyetlen dolog, ami igazán kiemelkedik, a két CTA gomb - és a tetején lévő tojás, amely úgy mozog, mintha egy csaj kelne ki. Maga az űrlap egyszerű, és csak a szakmai e-mail címet és jelszót kéri a fiók létrehozásához. A Google Apps bejelentkezéssel történő bejelentkezés még egyszerűbb. Ennek az opciónak a megadása mindig ajánlott, mert ez még tovább lerövidíti a konverziós útvonalat, és általában alacsonyabb a gátlási küszöb azoknál a felhasználóknál, akik már rendelkeznek Google-fiókkal.
9) internetes nyereség
Mit szólnál egy kicsit hosszabb céloldalhoz a változtatáshoz? Néhány trükkel a leghosszabb céloldal is rövid benyomást kelthet. A Webprofits megmutatja, hogyan kell ezt csinálni.
Rögtön a tetején egy jól láthatóan elhelyezett űrlapmező található az e-mail címek számára, amely jól kiemelkedik a háttérben, ezért már önmagában is észrevehető. Ha azonnal el akarja hagyni adatait, csak annyit kell tennie, hogy megadja az e-mail címét, és az űrlapmező többi része varázslatosan megjelenik. Mivel a teljes űrlap nem jelenik meg azonnal, az oldal nem tűnik annyira összetettnek.
Ezen felül első pillantásra láthatja, hogy a Webprofits valójában mit csinál. Az oldal többi része részletes információkat tartalmaz arról, hogy mit kap, amikor megadja az adatait. Ezenkívül a CTA-k mindenhol olyan stratégiai pontokon helyezkednek el, amelyekkel a látogatók visszatérhetnek az oldal tetejére.
10) Bejövő érzelem
Ez a spanyol nyelvű céloldal egy HubSpot partnertől származik. A Basecamp példájához hasonlóan az űrlap feltűnő módon kerül elhelyezésre, és mindig a látható területen marad, még akkor is, ha a látogatók lefelé görgetnek. Szeretjük azokat a grafikus kezeket is, amelyek megmutatják a látogatóknak, hol adják meg adataikat, vagy hol osszák meg az oldalt másokkal.
11) H. BLOOM
Néha csak azt akarja hagyni, hogy egy céloldal egy ideig önön üljön, mert az nagyon szép. H.BLOOM nagy felbontású fényképezéssel és sok szabadsággal éppen ezt teszi - már nem akar elfordulni.
A tetszetős kialakítás mellett a webhelynek néhány remek konverziós eleme is van: egy űrlap a közvetlenül látható területen, világos és tömör magyarázat arról, hogy mi történik az űrlap kitöltése után, és egy narancssárga küldés gomb. Csak egy dolgot változtatnánk meg: a beküldés gombra tartozó szöveget úgy, hogy pontosabban kapcsolódjon az ajánlathoz.
12) Velaro Live Chat
Néha a legkisebb dolgok jelentik a legnagyobb változást. Ez a helyzet például a Velaro Live Chat céloldalával.
A jellemző képen látható kis PDF szimbólum finom jelzéssel szolgál az ajánlat formátumában. Az alcím előtti nyíl felhívja a látogató figyelmét a szövegre, amelyet el kell olvasni. Az IMPACT-hoz hasonlóan a hírlevél-előfizetéshez is automatikusan be van jelölve a négyzet, amely opt-in verzióként nagyszerű módja az új előfizetők megnyerésének. Mindezek az első pillantásra jelentéktelennek tűnő apró részletek kiváló, működő céloldal-kialakítást adnak.
13) Konverziós labor
Normál esetben nem sorolunk egy kezdőlapot egy űrlappal a nagyszerű céloldal példájára. Jó okkal kivételt teszünk ezen a weboldalon! A kezdőlap a teljes webhely, és a navigációs linkek csak az oldalon lejjebb található információkhoz vezetnek.
Csak annyit kell tennie, hogy rákattint a "Segítség a nyitóoldalakhoz" gombra, és az egész weboldal az egyik oldalra kerül, így helyet biztosít az űrlapnak. Így néz ki a kattintás előtt:
A CTA-ra kattintás után megjelenik az űrlap:
Az a tény, hogy az űrlap kitöltéséhez nem kell elhagynia az oldalt, biztosítja a zökkenőmentes felhasználói élményt. Ezenkívül az űrlapot feltűnés nélkül helyezik el.
14) Ipari erőmarketing
Ez a céloldal provokatív címsorával azonnal felkelti a látogatók érdeklődését. Mert egyértelműen azt mondja: "Ne csinálj nagyítást" (nagyjából: "Hagyd abba a nagyítást!"). Itt egy olyan gyakori problémával foglalkozunk, amely a legtöbbünknél tapasztalható, amikor okostelefonnal vagy táblagéppel böngészünk az interneten - és a kijelentést szándékosan kissé provokatív hangnemben tartják.
De nem ez az egyetlen érdekes eleme ennek a céloldalnak. Észrevette, hogy a piros szín hogyan lett stratégiailag elhelyezve? Például az űrlap felett és alatt, amely közelebb visz a konverzióhoz.
Ennek a kialakításnak döntő előnye is van: mobil eszközökön is remekül mutat. Mivel mindig szem előtt kell tartani, hogy sok látogató okostelefonjával vagy táblagépével éri el a céloldalakat. Ha a tervezés nem megfelelő, akkor gyorsan elhagyhatják az Ön webhelyét.
Az Industrial Strength Marketing emberei elég nagyra tették a betűtípust és az űrlapmezőt, hogy a látogatóknak ne kelljen nagyítaniuk a következők megtekintéséhez: B. olvassa el a szöveget, vagy lépjen kapcsolatba a tartalommal. (Olvassa el ezt a blogbejegyzést, hogy megtudja, mi a weboldaltervezés a jó felhasználói élmény érdekében.)
15) Shopify
A bejegyzés sok más példájához hasonlóan a Shopify is az egyszerűség kedvéért ment végig a tesztoldal céloldalán. A felhasználóorientált címsor például csak néhány szóból áll, az alcím ("Világszerte több mint 325 000 vállalkozás bízik benne, például:" Világszerte több mint 325 000 vállalat bízik bennünk ") társadalmi bizonyítékot játszik, és a képek arra utalnak, hogy a felhasználók a terméket használják minden eszközön használható. A kezdéshez csak meg kell adnia e-mail címét. Így juthat el gyorsan a valódi ponthoz: Termékek online értékesítése - a Shopify eszközével.
A torta díszítése? A céloldal minden eszközre optimalizált, mind a tervezés, mind a funkcionalitás szempontjából. Az érzékeny tervezés a titok!
Van inspiráló példája a nagyszerű nyitóoldalakra is? Kérjük, írjon nekünk egy megjegyzést a kedvenceivel!