Úspešné vstupné stránky 15 príkladov návrhu, ktoré musíte vidieť
Nie je také ľahké vytvoriť príťažlivú vstupnú stránku, ktorá tiež funguje tak, ako chcete.
Existuje veľa rôznych vecí, na ktoré si musíte dávať pozor, aby ste mali skvelú vstupnú stránku. Čo presne to je, závisí - rovnako ako oveľa viac - cieľ vašej vstupnej stránky.
Vezmite si dĺžku formulára ako príklad: formulár je iba jedným z nespočetného množstva prvkov na vstupnej stránke, ktoré musíte vyladiť. A ak budete postupovať podľa osvedčených postupov, zistíte, že neexistuje žiadna „správna“ alebo „nesprávna“ dĺžka formy. Krátke aj dlhé formy môžu fungovať rovnako dobre - každá závisí od toho, či by ste radšej chceli generovať veľa potenciálnych zákazníkov s (potenciálne) menším záujmom alebo s menším počtom potenciálnych zákazníkov s väčším záujmom.
Predtým, ako začnete s vytváraním vlastných vstupných stránok, mali by ste najskôr zistiť, čo robí dobrú vstupnú stránku, a pomocou príkladov získate predstavu o tom, ako sú tieto jednotlivé prvky efektívne implementované. Pri hľadaní príkladov úspešných návrhov vstupných stránok sme si však všimli, že takmer neexistujú žiadne moderné a pôsobivé vstupné stránky, ktoré by ponúkali viac než iba domovskú stránku s registračným formulárom. To bol dôvod, aby sme zostavili tento zoznam cieľových stránok, ktoré nás presvedčili z hľadiska dizajnu.
Poznámka vopred: Nemáme prístup k štatistikám na týchto stránkach. Preto nemôžeme robiť žiadne vyhlásenia o tom, koľko návštevníkov, potenciálnych zákazníkov a zákazníkov bude na týchto vstupných stránkach nakoniec prevedených. Toto sú príklady úspešnej kombinácie a integrácie jednotlivých prvkov vstupnej stránky. Samozrejme, ak si chcete vyskúšať niektorú z taktík uvedených v nasledujúcom príspevku sami, nemôžete vopred vedieť, či budú fungovať. Motto teda znie: test, test, test!
Úspešné vstupné stránky: 16 príkladov návrhu, ktoré musíte vidieť
1) Wistia
Prvým kandidátom je vstupná stránka Wistie, kde sa môžu návštevníci zaregistrovať na bezplatný účet. Oko okamžite padne na krátky formulár na vytvorenie účtu, ktorý sa svojimi bielymi poľami dokonale vyníma na modrom, minimálne vzorovanom pozadí.
Vďaka dĺžke poľa formulára v kombinácii s pútavým umiestnením návštevník okamžite vie, o čo ide: vytvorenie účtu. A ak stále váhate, môžete sa posúvať nadol a prečítať si tam odpovede na často kladené otázky. Pretože sú tieto dve oblasti navrhnuté v opačných farbách, môžete ako návštevník ľahko udržiavať prehľad a nestratiť prehľad z formy - ideálne pre konverzný pomer!
2) Odvolať
Nie je prekvapením, že ďalšie miesto v našom zozname je: Odraziť! Napokon na nás táto spoločnosť v minulosti zapôsobila svojimi odbornými znalosťami v oblasti cieľových stránok a optimalizácie zameranej na konverzie. Táto vstupná stránka má nepochybne veľa úspešných prvkov, z ktorých dva by sme chceli zdôrazniť: 1) Šípka smerujúca zo smeru podporných obrázkov k tlačidlu CTA a 2) podrobné - ale dobre zabalené - informácie pod formulárom.
Bod 1 (šípka) okamžite informuje návštevníkov o cieli stránky: mali by vyplniť formulár! A celé to funguje bez toho, aby to bolo nejako zvlášť rušivé. Subtílne sprevádzanie návštevníkov stránkou je umenie samo o sebe a Unbounce to robí perfektne. Bod 2 (podrobné informácie) ponúka tejto stránke výhody aj z pohľadu SEO, pretože vyhľadávače majú viac obsahu, ktorý môžu indexovať. Zároveň sú spokojní návštevníci, ktorí by sa chceli dozvedieť viac pred zverejnením svojich kontaktných údajov - a dômyselné umiestnenie týchto informácií neodvádza pozornosť od formulára.
3) Značky a dizajn IMPACT
Vopred: Áno, IMPACT je partnerom HubSpot! Ale to nie je dôvod, prečo sme ich zaradili na náš zoznam. Vstupné stránky IMPACTu sa už dlho považujú za zdroj inšpirácie pre úspešný dizajn. Jednoduché usporiadanie stránky, od veľkého nadpisu a podrobného obrázka funkcie cez rám obklopujúci formu, až po farby a písma, ktoré sú veľmi dobre viditeľné pre oči, je všetko úspešné.
Možno ste si tiež všimli políčko na prihlásenie na odber blogu? Predvolene je začiarknuté! Upozorňujeme, že hoci je pole na prihlásenie sa na odber na vstupnej stránke skvelým spôsobom, ako prilákať nových účastníkov, odporúčame vám, aby ste ho predvolene nezačiarkli, aby si používatelia mohli zvoliť, či sa majú prihlásiť na odber chcieť. V opačnom prípade riskujete, že do svojej databázy kontaktov pridáte príliš veľa nezaujatých predplatiteľov .
4) WebDAM
Vstupná stránka WebDAM má nepochybne veľa príjemných prvkov, ale našou (nespornou) obľúbenou stránkou je forma. Hladko zapadá do štruktúry stránky a vyzerá teda ako prírodný komponent, ktorý sa však svojou farbou pozadia vizuálne líši. Umiestnením formulára vedľa obrázka, ktorý sám o sebe neposkytuje základné informácie, sa používatelia nerozptyľujú a všetka pozornosť sa sústreďuje na formulár. Tlačidlo na odoslanie má purpurovú farbu (doplnkovú farbu k tyrkysovo modrej) a vyniká a vyzýva návštevníkov, aby si ponuku stiahli.
Pod formulárom je prísľub spoločnosti v krátkosti zhrnutý do troch bodov. Tento textový blok navyše slúži ako vizuálne oddelenie od formulára vyššie. Prvotriedna práca, WebDAM!
5) Bills.com
Často sa predpokladá, že cieľové stránky sú statické stránky na webových stránkach. Ale nemusí to tak byť. Pomocou správnych nástrojov možno cieľové stránky tiež navrhovať interaktívne a prispôsobiť ich.
Napríklad si pozrite nasledujúci príklad zo stránky Bills.com. Najskôr si musíte odpovedať na tri otázky, aby ste sa dostali k formuláru. To si vopred ujasníte, či vôbec potrebujete poradiť. V prvom rade musia návštevníci uviesť, aká je ich výška dlhu:
Potom nasledujú ďalšie dve otázky, napríklad: B. Tieto položky („Ste v omeškaní so svojimi platbami?“):
A dostali ste sa k formuláru skutočnej vstupnej stránky, kde budete požiadaní o zadanie podrobností:
Bez ohľadu na to, ako algoritmus funguje (ak vôbec existuje), prístup niekedy spôsobí u návštevníkov malú nervozitu, že by nemuseli mať nárok na radu. Keď potom uvidíte formulár, nastupuje reliéf a vyplnenie formulára je veľmi jednoduché. Veríme, že vďaka exkluzivite ponuky (či už skutočnej alebo falošnej) má web Bills.com pomerne vysoký konverzný pomer.
6) Trulia
Trulia to na svojej cieľovej stránke robí podobne ako Bills.com. Tam začínate jednoduchým formulárom, ktorý žiada o „adresu“ (ktorá neznie tak rušivo ako „vaša adresa“, aj keď to je presne to, čo sa myslí). Pod jednoduchým poľom formulára je oranžové tlačidlo, ktoré vyniká na pozadí obrázka. Text výzvy na akciu konkrétne naznačuje, že pre vaše zariadenie bude vykonaný individuálny odhad.
Adresa samozrejme nestačí na určenie hodnoty nehnuteľnosti. V skutočnosti sa zaznamenáva iba poloha a okolie. Z tohto dôvodu ďalšie otázky týkajúce sa samotnej nehnuteľnosti, ako je počet spální a kúpeľní, nájdete na nasledujúcej stránke. Ďalej uvidíte text „Povedzte nám, kam poslať hlásenie“ - s poznámkou, že zadaním týchto údajov vyjadrujete súhlas s kontaktovaním realitného agenta. Je to vynikajúci príklad spoločnosti, ktorá zvyšuje hodnotu pre svojich návštevníkov a zároveň naznačuje, čo môžu čakať.
7) Basecamp
Basecamp má rozsiahlu cieľovú stránku s množstvom informácií v a pod priamo viditeľnou oblasťou. Väčšina informácií je v textovej podobe, čo má tiež za následok, že o to viac vyniká jediný vizuálny prvok stránky, forma. Aj tu je proces registrácie taký ľahký, ako je to len pri zadávaní vašej e-mailovej adresy alebo prihlásení pomocou účtu Google.
S nadpisom označujúcim počet spoločností, ktoré sa zaregistrovali pre Basecamp v predchádzajúcom týždni, a s odporúčaniami zákazníkov, sa Basecamp pri dosahovaní požadovaných konverzií spolieha úplne na sociálny dôkaz. Efekt zvýraznenia v odporúčaniach zákazníkov, ktorý vyzerá, že tu bol použitý zvýrazňovač, poskytuje ďalší dôraz na body, ktoré by Basecamp chcel zvlášť inzerovať.
8) Zendesk
Páči sa nám vstupná stránka bezplatnej skúšobnej verzie aplikácie Zendesk, pretože je jednoduchá a jednoduchá z hľadiska textu aj dizajnu. Jediné, čo skutočne vynikne, sú dve tlačidlá CTA - a vajce na vrchu, ktoré sa pohybuje, akoby sa malo vyliahnuť kuriatko. Samotný formulár je jednoduchý a vyžaduje iba profesionálnu e-mailovú adresu a heslo, aby bolo možné vytvoriť účet. Prihlásenie pomocou prihlasovacích údajov služby Google Apps je ešte jednoduchšie. Poskytnutie tejto možnosti sa vždy odporúča, pretože to ešte viac skracuje konverznú cestu a vo všeobecnosti má nižší prah inhibície pre používateľov, ktorí už majú účet Google.
9) webové zisky
Čo tak pre zmenu o niečo dlhšia vstupná stránka? Pomocou niekoľkých trikov môže aj najdlhšia cieľová stránka vytvárať dojem, že je krátka. Webové organizácie nám ukazujú, ako na to.
V hornej časti je nápadne umiestnené pole formulára pre e-mailovú adresu, ktoré vyniká dobre na pozadí, a preto je už samo osebe viditeľné. Ak chcete svoje údaje ihneď zanechať, stačí zadať svoju e-mailovú adresu a zvyšok poľa formulára sa zobrazí čarovne. Pretože sa celý formulár nezobrazuje okamžite, stránka sa nezdá taká zložitá.
Okrem toho môžete na prvý pohľad vidieť, čo vlastne Webprofits robí. Zvyšok stránky poskytuje podrobné informácie o tom, čo získate, keď zadáte svoje údaje. Okrem toho sú výzvy na akciu umiestnené všade na strategických miestach, pomocou ktorých sa návštevníci môžu vrátiť do hornej časti stránky.
10) Prichádzajúce emócie
Táto vstupná stránka v španielčine je od partnera HubSpot. Podobne ako v príklade z Basecampu je formulár viditeľne umiestnený a vždy zostáva na viditeľnej ploche, aj keď návštevníci rolujú nadol. Páči sa nám tiež grafické ruky, ktoré návštevníkom ukazujú, kam majú zadať svoje údaje alebo kde majú stránku zdieľať s ostatnými.
11) H.BLOOM
Niekedy jednoducho chcete nechať vstupnú stránku chvíľu na sebe sedieť, pretože je taká pekná. H.BLOOM to robí práve vďaka fotografii s vysokým rozlíšením a veľkej slobode - už sa vám nechce odvrátiť zrak.
Okrem príťažlivého dizajnu má web aj niekoľko skvelých konverzných prvkov: formulár v priamo viditeľnej oblasti, jasné a stručné vysvetlenie toho, čo sa stane po vyplnení formulára, a oranžové tlačidlo odoslania. Zmeniť by sme mohli iba jednu vec: text na tlačidle odoslať, aby sa konkrétnejšie vzťahoval na ponuku.
12) Velaro Live Chat
Niekedy robia najmenšie veci najväčší rozdiel. To je napríklad prípad vstupnej stránky Velaro Live Chat.
Malý symbol PDF na hlavnom obrázku jemne naznačuje formát, v ktorom je ponuka poskytovaná. Šípka pred podnadpisom upozorňuje návštevníka na text, ktorý by si mal prečítať. Rovnako ako v prípade IMPACT, aj pri prihlásení na odber bulletinu je automaticky začiarknuté políčko, ktoré je ako verzia prihlásenia skvelým spôsobom, ako získať nových predplatiteľov. Všetky tieto malé detaily, ktoré sa na prvý pohľad zdajú nepodstatné, prispievajú k vynikajúcemu a funkčnému dizajnu vstupnej stránky.
13) Konverzné laboratórium
Bežne by sme neuviedli úvodnú stránku s formulárom ako príklad skvelej cieľovej stránky. Na tomto webe robíme výnimku z dobrého dôvodu! Domovská stránka je kompletná webová stránka a navigačné odkazy vás prevedú iba informáciami ďalej na stránke.
Všetko, čo musíte urobiť, je kliknúť na „Získať pomoc so vstupnými stránkami“ a celá webová stránka sa presunie na jednu stranu, čím sa vytvorí priestor pre formulár. Takto to vyzerá pred kliknutím:
Po kliknutí na CTA sa zobrazí formulár:
Skutočnosť, že na vyplnenie formulára nemusíte opustiť stránku, zaisťuje bezproblémový používateľský dojem. Formulár je navyše umiestnený veľmi nenápadne.
14) Marketing priemyselnej sily
Táto cieľová stránka svojím provokatívnym nadpisom okamžite vzbudzuje záujem návštevníkov. Pretože sa tam hovorí jasne: „Nenechajte ma zväčšovať“ (zhruba: „Zastavte zväčšovanie!“). Tu sa rieši bežný problém, ktorý má väčšina z nás pri surfovaní na webe pomocou smartfónu alebo tabletu - a vyhlásenie je vedome udržiavané v mierne provokatívnom tóne.
To však nie je jediný zaujímavý prvok tejto cieľovej stránky. Všimli ste si, ako bola strategicky umiestnená červená farba? Napríklad nad a pod formulárom, ktorý vás dovedie bližšie ku konverzii.
Tento dizajn má tiež rozhodujúcu výhodu: vyzerá skvele aj na mobilných zariadeniach. Vždy by ste však mali mať na pamäti, že veľa návštevníkov pristupuje na vaše vstupné stránky pomocou svojich smartfónov alebo tabletov. Ak dizajn nie je správny, môžu rýchlo opustiť vaše stránky.
Ľudia v spoločnosti Industrial Strength Marketing prispôsobili pole písma a formulára dostatočne veľké na to, aby sa návštevníci nemuseli približovať, aby videli napríklad: B. prečítajte si text alebo interagujte s obsahom. (Prečítajte si tento príspevok v blogu a dozviete sa, o čom je dizajn webových stránok, aby poskytovali dobrú používateľskú skúsenosť.)
15) Shopify
Rovnako ako mnoho ďalších príkladov v tomto príspevku, aj Shopify sa rozhodla pre jednoduchosť a pre svoju vstupnú stránku pre testovaciu prevádzku nemá žiadne ozdoby. Napríklad nadpis zameraný na používateľa pozostáva iba z niekoľkých slov, podnadpis („Dôveruje viac ako 325 000 spoločností na celom svete“, napríklad: „Viac ako 325 000 spoločností na celom svete nám dôveruje“) prináša do hry spoločenský dôkaz a obrázky naznačujú, že používatelia produkt používajú. možno použiť na všetkých zariadeniach. Všetko, čo musíte urobiť, je poskytnúť svoju e-mailovú adresu. Takto sa rýchlo dostanete k skutočnému bodu: Predaj produktov online - pomocou nástroja od Shopify.
Čerešnička na torte? Cieľová stránka je optimalizovaná pre každé zariadenie z hľadiska dizajnu aj funkčnosti. Tajomstvom je responzívny dizajn!
Máte aj vy inšpiratívne príklady skvelých vstupných stránok? Zanechajte nám komentár so svojimi obľúbenými!