5 parasta käytäntöä vaikuttavan verkkosivustojen alatunnisteen suunnitteluun

Opi suunnittelemaan verkkosivun alatunniste. Vinkkejä siihen, mitä sinun pitäisi lisätä, mitä ei lisätä, ja esimerkkejä hyvistä verkkosivustojen alatunnisteista inspiraatiota varten.


Verkkosivun alatunnisteen parhaat käytännöt

Jos olet laiminlyönyt verkkosivustosi alatunnelman ja uskot, että se on sivustosi vähiten arvokas osa, nämä havainnot voivat muuttaa mieltäsi.

  • Kun käyttäjätestaus paransi alatunnistetta lisäämällä luettelon liiketoimintaan ja asiakkaisiin sovituista tavoitteista, niiden muuntamisesta kasvoi 50%.
  • Kun Smart Insights testasi uutta alatunnistemallia ylellisen käsilaukun verkkosivustolle, myyntikonversiot kasvoi 23,77% ja tulot kävijää kohden kasvoivat 15,99%.
  • Tarkastelemalla miljoonan tuntemattoman verkkokäyttäjän tietoja 10 verkkosivustolla, Chartbeat havaitsi, että kävijät viettivät yli puolet (66%) heidän ”sitoutuneesta ajastaan” taitoksen alapuolella. Tämä tarkoittaa sivun alaosaa, sen osan alapuolella, jonka käyttäjät näkevät heti avaamalla sivuston.
  • Verrattuna työpöytäkävijöihin matkapuhelinkäyttäjät vierittävät sivua alaspäin ja ovat todennäköisemmin vuorovaikutuksessa alatunnisteen kanssa.

Miksi verkkosivustosi alatunniste on tärkeä

Alatunnisteet eivät ole tarpeetonta rakenteellista elementtiä verkkosivustollasi, ja alatunnisteet tarjoavat jopa useita etuja kävijöillesi ja yrityksellesi.

Edut verkkosivustojen kävijöille

  • Alatunnisteet auttavat heitä löytämään tarvitsemansa tiedot: Ainakin kahdesta syystä lukijat pääsevät verkkosivusi alaosaan: He pitivät sisällöstäsi ja haluavat selata enemmän tai etsivät jotain mitä he eivät löydä otsikkovalikoistasi. Niille, jotka ovat kiinnostuneita yrityksestäsi, voit käyttää alatunnisteita ohjaamaan heitä muulle mielenkiintoiselle sisällölle sivustollasi. Voit lisätä linkkejä sivuille, joita ei ole otsikkovalikossa, kuten kumppanuus- ja tytäryhtiömahdollisuudet.
  • Se säästää heitä palaamasta otsikkoon: Jos verkkosivustosi kävijät ovat kiinnostuneita sisällöstäsi ja haluavat tietää enemmän, heidän ei tarvitse palata takaisin sivusi yläosaan. Heti sen jälkeen kun sisältösi on alatunniste, josta he voivat löytää yhteystietosi, tilata uutiskirjeesi, seurata sinua sosiaalisessa mediassa tai tutustua muihin tuotteisiisi.

Edut verkkosivustojen omistajille

  • Se vähentää poistumisprosenttia: Vedämällä kävijöitäsi muihin hyödyllisiin linkkeihin, he avaavat todennäköisemmin muita sivuja ja pysyvät sivustolla pidempään. Tämä vähentää poistumisprosenttia tai ihmisten lukumäärää, jotka tarkastelevat vain yhtä sivustosi sivua. Tämä on erityisen tärkeää vähittäiskaupan yrityksille, jotka haluavat kävijöidensä pitävän sivua ostoksilla.
  • Sen avulla voit luoda uskottavuutta: Jotkut yritykset ottavat alatunnisteeseen näyttää akkreditointinsa, asiakaslogonsa tai suositut sivustonsa, jotka esittivät heidät todistamaan pätevyytensä. Samaan aikaan tekijänoikeussymbolit ja linkit laillisiin tietoihin ja tietosuojakäytäntöihin auttavat lisäämään luottamusta tuotemerkkiisi. Kaikki nämä auttavat vaikuttamaan potentiaalisten asiakkaidesi päätökseen tehdä kysely ja lopulta ostaa.
  • Se auttaa lisäämään muuntamista:Kun ensimmäisen kerran vierailijat laskeutuvat sivullesi, he saattavat nähdä sosiaalisen median linkkejä yläkulmassa. Mutta ostajan matkan tässä vaiheessa he eivät ehkä tunne pakkoa seurata sinua verkossa. Kun sisältösi piittaa heidän uteliaisuutensa – ja ehkä he näkevät sertifikaatit ja asiakaslogot alatunnisteessa, he saattavat tuntea olevansa taipuvainen liittymään tilaajiisi. Laittamalla allekirjoitus- tai yhteyslomakkeen alatunnisteeseen, vierailijoille on helppo muuntaa tilaajia tai mahdollisesti asiakkaita.
  • Se on lisämahdollisuus liiketoiminnan edistämiselle: Alatunnisteen avulla kiinnitetään huomiota yritykseesi, mahdollisuudet ovat rajattomat. Sosiaalisen median tilien ja liittymislomakkeiden lisäksi voit sisällyttää lehdistötiedotteita, toimistopaikkoja ja uusimpia tarjouksiasi.

Esimerkki verkkosivun alatunnisteestaVoit jopa sijoittaa linkkejä muihin yrityksiisi tai sovelluksiisi, kuten Goodreads tekee.

Mitä priorisoida sivun alatunnisteessa

Ottaen huomioon edut, jotka hyvin suunniteltu alatunniste tarjoaa, haluat, että tämä arvokas tila lasketaan.

Loppujen lopuksi se, minkä priorisoit sivustosi alatunnisteen suunnittelussa, on sinulle. Mutta tässä on joitain elementtejä, jotka haluat ehkä sisällyttää.

Logosi edustaa yritystäsi, ja haluat, että lukijat pystyvät muistamaan sen ja tunnistamaan sen nimesi ja toimittamasi arvon kanssa. Logon käyttäminen alatunnisteella auttaa kävijöitä muistamaan yrityksen ja yhdistämään sen sisältöön ja palveluihin, mikä parantaa brändin tunnettuutta.

Yhteystiedot

Fyysisen osoitteen ja puhelinnumeroiden sijoittaminen sivun alaosaan todistaa, että olet laillinen yritys ja lisäät luottamusta yritykseesi. Tämän lisäksi potentiaalisten asiakkaiden on helppo ottaa sinuun yhteyttä kysyttäessä, mikä säästää heille palaa takaisin päävalikkoon tai kaivaa syvemmälle sivustoasi saadaksesi lisätietoja.

Tässä on vielä muutamia vinkkejä yhteystietojen sisällyttämiseen:

  • Fyysinen osoite – Jos haluat, että ihmiset löytävät helposti fyysisen myymälän, harkitse kartan lisäämistä. Vaihtoehtoisesti voit tehdä osoitteen napsautettavissa, jotta se avaa kartan toiselle välilehdelle.
  • Useita sivuliikkeitä – Jos sinulla on useita sijainteja, voit lisätä jokaiselle sivustolle yhteystiedot. Jos tämä ei ole mahdollista, lisää ankkuriteksti, joka avautuu sivulle, jossa on luettelo kaikista haaroista.
  • Kutsunappula – Olemalla yhden napsautuksen päässä, helpotat asiakkaiden yhteyttä sinuun.

tekijänoikeus

Tämä suojaa sisältöäsi verkkosivustojen plagioinnilta. Se lähettää vahvan signaalin siitä, että ryhdyt laillisiin toimiin, jos joku ottaa kunnian julkaisemaasi tekstiä, kuvia tai videoita. Sillä aikaa tekijänoikeusvaatimukset vaihtelevat ainakin maiden välillä, muista sisällyttää ©-symboli, julkaisuvuosi ja tekijänoikeuden omistajan nimi.

Tietosuojakäytäntö

Tämän lakisääteisen vaatimuksen noudattaminen auttaa luomaan lukijoidesi keskuudessa luottamuksen pitämällä tiedonkeruu avoimena. teidän Tietosuojakäytäntö selittää kävijöille, mitä henkilökohtaisia ​​tietoja keräät, miten niitä säilytetään ja käytetään, selkeät vaihtoehdot valintaan tai käytöstä poistamiseen ja kolmansien osapuolien palveluntarjoajille, jotka voivat myös käyttää näitä tietoja.

Tutustu yrityksesi sijaintien tietosuojakäytäntöihin, kuten yleiseen tietosuojaasetukseen (GDPR), jos sinulla on asiakkaita Euroopan unionissa. Jos yrityksesi käyttää ulkopuolisia palveluntarjoajia, kuten maksujen käsittelyyn, tarkista myös heidän vaatimuksensa.

Esimerkki WebMD-verkkosivuston alatunnisteestaEsimerkiksi WebMD: n sivun alatunniste sijoittaa tietosuojakäytännöt sarakkeeseen muiden tärkeiden ohjeiden kanssa. He myös näyttävät a LUOTTA sinetti, varmistaa, että käyttäjät suhtautuvat yksityisyyden suojaan vakavasti.

Käyttöehdot

Tarjoaa linkin käyttöehdot sivu (jota kutsutaan myös ”käyttöehdoiksi” tai “palvelusehdoiksi”) ei ole lakisääteinen vaatimus. Se tarjoaa kuitenkin verkkosivustojen omistajille suojan vastuulta ja määrittelemällä käyttäjien vastuut suojaa heidän sivustoaan tekijänoikeusrikkomuksilta ja muilta laittomilta toimilta, kuten roskapostilta.

Toimintakehotus (CTA)

CTA: n asettaminen sivusi alatunnisteeseen muuttaa vierailijat tilaajiksi tai seuraajiksi, mikä auttaa lisäämään tuloksia tai siirtämään asiakkaasi syvemmälle ostajan matkalle. Sisältävät CTA-sopimukset, erityisesti sosiaalisen median linkit, auttavat myös maalaamaan yrityksesi vakiintuneena yrityksenä ja antavat vierailijoille mahdollisuuden seurata sinua heille sopivimman alustan avulla.

Voit sisällyttää useita CTA-sopimuksia, kuten:

  • Liittyminen uutiskirjeesi
  • Seurataan sinua sosiaalisessa mediassa
  • Yhteyslomakkeen täyttäminen
  • Demon pyytäminen
  • Ilmoittautuminen ilmaiseksi kokeiluversiona

Yritystiedot

Kun olet vaikuttanut lukijoihin sisällölläsi ja he ovat päässeet sivusi alaosaan, he todennäköisesti haluavat tietää enemmän yrityksestäsi.

Käytä alatunnistetta korostamaan yritystietojasi, joita et ehkä pysty sisällyttämään otsikkoon, kuten linkkejä seuraaville sivuille:

  • Meistä
  • blogi
  • Ura tai työpaikat
  • Affiliate- tai kumppanuusmahdollisuudet
  • Luettelo tuotteista tai palveluista
  • lehdistötiedotteet
  • Arvostelut
  • valkoiset paperit
  • Tapahtumat

Asiakaspalvelu

Osa asiakaskeskeisten sivujen alatunnisteiden suunnittelua on varmistaa, että linkit sivuille, joita lukijat voivat tarvita – joko potentiaalisena asiakkaana tai nykyisenä asiakkaana – on helppo löytää. Nämä tukilinkit voivat sisältää:

  • auta
  • FAQ
  • Tietokeskus
  • Oppaat

Verkkokauppasivustot voivat sisältää jopa seuraavat ankkuritekstit:

  • Toimitus- ja toimitustiedot
  • Palautus- ja vaihtokäytäntö
  • Maksutavat hyväksytään
  • Erikoistarjouksia

Verkkosivun alatunniste esimerkki asiakastuen tarjoamisestaSen sijaan, että sanotaan vain “Tuki”, Kirjavaraston alatunnisteessa on “Miten voimme auttaa?” -sarakkeessa, ja sen alapuolella ovat ankkuritekstit “Missä minun tavarani ovat?” ja ”minne toimitat?” Tyyli on epävirallinen, keskusteleva ja auttaa välittämään vilpittömän avun avun.

Sivun alatunnisteen neljä älä-arvoista

1. Sama otsikko- ja alatunnistevalikko

Toisinaan verkkokävijät kääntyvät alatunnisteeseen, kun he eivät löydä otsikon valikossa joitain yksityiskohtia. Täsmälleen samojen linkkien käyttäminen otsikossa ja alatunnisteessa ei anna lisäarvoa kävijöillesi tai yrityksellesi.

Jaa tärkeät sivut otsikon ja alatunnisteen välillä, jotta Web-vierailijat eivät hukkaan tekstiä. Käytä otsikko korkeimman arvon sivuillesi ja varaa alatunniste muihin tärkeisiin linkkeihin.

Applen verkkosivun alatunniste-esimerkkiHuomaa, kuinka Applen tarttuvassa otsikossa oli vain kuusi tuoteluokkaa. Täydennetään tätä alatunnistetta, joka sisältää pidemmän tuoteluettelon (vasemmanpuoleisin sarake) sekä luettelon palveluista.

2. Yli-optimointi

Sisällön tai alatunnisteen liiallinen optimointi ei ole tehokas tapa parantaa hakusivusi sijoitusta. Googlen sijoitusalgoritmi on kiinni tähän avainsanan täyttötekniikkaan, ja sillä voi olla vain negatiivinen vaikutus SEO-tuloksiisi. Liian optimoinnin sijasta, valitse kourallinen avainsanoja ja keskity niihin.

3. Tärkeät linkit

Alatunniste ei ole tilaa luetella kaikkia sivustosi sivuja. Vierailijat, jotka skannaavat koko sivusi ja tarkastivat alatunnisteesi, ovat todennäköisesti jo kiinnostuneita tarjouksistasi. Sen sijaan, että heittäisit ankkuritekstejä kodinkoneeseen, käännä alatunniste tehokkaaksi navigointityökaluksi. Vedä heidät tuote- tai palvelusivulle tai hyödyllisiin linkkeihin, kuten opetusohjelmiin tai yrityksesi blogiin.

4. Ylikuormitetut asettelut

Voi olla houkuttelevaa pakata niin paljon kuin pystyt sivustosi alaosaan. Mutta tungosta alatunniste saattaa sammuttaa kävijät, aiheuttaen heille poistumisen sivulta tai kiilto ankkuriteksteihisi. Valitse tärkeät sivut, järjestä nämä ja hyödynnä tyhjää tilaa luodaksesi siisti, luettavissa oleva alatunniste.

Kuinka tehdä tehokas alatunnisteen suunnittelu

On niin monia tapoja käsitellä alatunniste, joka on sekä esteettisesti miellyttävä että toimiva. Yllä olevien vinkien lisäksi tässä on viisi parasta alatunnisteen suunnittelukäytäntöä.

1. Aseta luettavuus ensin

Koska alatunnistetekstit ovat usein pieniä ja verkkokävijät yleensä nauravat niitä, tarvitset suunnittelun, joka varmistaa, että sanat ovat helposti luettavissa. Voit varmistaa, että alatunnisteesi on luettavissa:

  • Valitse yksinkertaiset kirjasintyypit, kuten sans serif.
  • Vältä käyttämästä liikaa kirjasimia tai värejä.
  • Hyödynnä valkoista tilaa ja kokeile kernää ja viivankorkeutta.

Toinen tapa lisätä alatunnisteen luettavuutta on käyttää hyvää värikontrastia. Tämän avulla vierailijat voivat lukea ankkuritekstejäsi mukavasti, silmäilemättä tai kiristämättä silmiäsi.

Vakioyhdistelmä on käyttää mustaa tekstiä valkoisella taustalla tai päinvastoin. Jos haluat poiketa tästä ja kokeilla lisää värejä, tässä on joitain vinkkejä:

  • Valitse värit, jotka täydentävät tuotemerkkiäsi ja verkkosivustosi yleistä suunnittelua.
  • Suunnittele kohderyhmäsi mielessä. Jos sivustosi palvelee iäkkäitä ihmisiä, käytä silmiä hellävaraisesti. Yhdistä tämä rajalliseen määrään tekstiä ja runsasta välilyöntiä.
  • Valitse värit, jotka välittävät tunteen tai persoonallisuuden, jonka haluat antaa sivustollesi. Valitse esimerkiksi punainen, jos haluat välittää kiireellisyyttä ja energiaa. Mene siniseksi symboloimaan luotettavuutta ja rauhallisuutta, tai vihreä edustamaan luontoa tai terveyttä.
  • Tee CTAsi pop-outksi sivulta käyttämällä eri väriä, kuten The Guardianin keltaisia ​​painikkeita sinisellä pohjalla.

Verkkosivun alatunniste esimerkki värillä

2. Pysy uskollisena tuotemerkillesi

Verkkosivustosi on tärkeä osa tuotemerkkiäsi. Tämä pätee erityisesti verkkokaupan yrityksiin, joiden pääasialliset kosketuspisteet asiakkaiden kanssa ovat verkossa.

Vahva, johdonmukainen brändäys auttaa web-kävijöitä muistamaan sinut ja liittämään yrityksen nimen logoon, palveluihin tai tuotteisiin, arvoihin ja tiettyyn tunteeseen tai kokemukseen.

Alatunnisteen suunnittelu, joka on tuotemerkkisi mukainen, on monella tapaa. Tässä on muutamia ideoita:

  • Kuten edellä mainittiin, valitse värejä, jotka edustavat arvojasi tai sävyjä, joita olet käyttänyt logossa tai markkinointimateriaaleissa.
  • Sisällytä logosi, maskotti tai muut merkit, jotka symboloivat tuotemerkkiäsi.
  • Hyväksy samanlaiset muotoiluelementit, mukaan lukien typografia ja asettelut, joita olet käyttänyt muissa mainosmateriaaleissa.

Esimerkki verkkosivun alatunnisteesta, jossa otsikko ja alatunnus käytetään samaa väriäHuomaa, kuinka Smashing Magazine käyttää samaa tekstiä ja taustaväriä otsikostaan ​​ja alatunnisteeseen. Kuvat auttavat yllättämään leikkisän tunnelman sivuston ylävalikosta alaosaan.

3. Optimoi matkapuhelimen käyttäjille

Koska mobiilikäyttäjät vierittävät todennäköisemmin sivusi alaosaan kuin työpöydän kävijät, optimoi sivustosi eri laitteita etenkin mobiililaitteissa on pakollinen. Tämä strategia menee reagoivien suunnitelmien ulkopuolelle. Jotta mobiililaitteiden käyttäjien olisi helpompaa tavoittaa sinut tai skannata sivustoasi:

  • Säädä alatunnisteen tekstin kokoa, jotta kävijät voivat helposti napauttaa vaihtoehtoja lähentämättä.
  • Sisällytä napsautettava soittopainike, jotta kävijät voivat helposti tavoittaa sinut.
  • Jos haluat rohkaista käyttäjiä poistumaan fyysisen toimistosi tai näyttelyhuoneesi vierestä, linkitä osoitteesi karttaan.
  • Jos sinulla on sovelluksia, anna linkit niihin.

4. Pidä se yksinkertaisena

Alatunnisteen suunnittelun yksinkertaisuus viittaa sekä sen tyyliin että sisältöön. Pidä alatunniste puhtaana, pidä kiinni muutamasta väristä ja typografiasta ja vältä yksityiskohtaista taustaa. Pitäkää ankkuritekstejä sisällön suhteen lyhyinä ja rajoittakaa näytöllä näkyviä kohteita. Lukijoiden hukuttaminen koristeellisilla asetteluilla tai liikaa tekstiä voi vain vetää heidän huomionsa pois CTA: ista ja muista arvokkaista linkkeistä.

5. Järjestäytyminen

Hyvin järjestetty alatunniste parantaa sivuston luettavuutta, antaa lukijoille mahdollisuuden saada lintuperspektiivi sivustosta ja yrityksestä ja antaa kävijöille helposti löytää tarvitsemansa tiedot.

Jos haluat lisätä useita ankkuritekstejä, mutta olet huolissasi siitä, että alatunniste saattaa näyttää sotkelmalliselta, käytä seuraavia tekniikoita:

  • Järjestä liittyvät valikot sarakkeiksi ja anna sarakkeen otsikko.
  • Kokeile kirjasinkokoja, rivin korkeutta tai tekstivärejä sisältöhierarkian näyttämiseksi. Käytä esimerkiksi hiukan suurempaa kirjasinta sarakeotsikoihin ja jätä enemmän tilaa otsikon ja ankkuritekstin väliin sen alle.
  • Käytä erilaisia ​​taustavärejä erottaaksesi yksi alatunnisteen osasta loput.

Esimerkki verkkosivun alatunnisteesta käyttämällä eri värillisiä osioitaAgingCare käyttää kolme taustaväriä jakaa alatunniste osiin. Heidän CTA, joka on esitetty sinisellä taustalla, erottuu alatunnistevalikoista (vaaleanharmaalla taustalla) ja alareunassa olevista tekijänoikeuksista, käyttöehdoista ja yksityisyyden suojaa koskevista tiedoista (tummanharmaa tausta)..

Kaiken kaikkiaan: Alatunnisteen suunnittelun inspiraatioita

Yksi tapa luoda ideoita sivustollesi on selata muita sivuja. Huomaa, kuinka muut suunnittelijat sisällyttävät yllä olevat käsitteet toimittamaan hyvin muotoillut alatunnisteet. Tässä on neljä mallia, jotka inspiroivat sinua.

Sininen polttari

Tämän design-studion alatunniste animoidulla taustallaan ja juoksevalla sinisellä stag-logollaan osoittaa yrityksen luovuuden. Valikoimaton tausta huvittaa, ja sinisen logon kontrastikuva pysyy muistissa. Tämä siisti alatunniste korostaa CTA: ta, ts. Yrityksen yhteysnumeroa ja sähköpostiosoitetta, jotka molemmat ovat napsautettavissa.

Esimerkki verkkosivun alatunnisteesta

The New York Times

New York Timesin alatunniste on yksinkertainen, puhdas muotoilu, joka käyttää runsaasti valkoista tilaa ja mustan tekstin vakiokontrasti vaaleaa taustaa vasten. Sarakkeisiin järjestetyt ankkuritekstit ohjaavat vierailijoita muille mielenkiintoisille sivuille ja artikkeleille, kannustaen heitä tutkimaan ja pysymään sivustolla. Suunnittelussa hyödynnetään typografista hierarkiaa kiinnittääksesi enemmän huomiota vasemmalla olevalle yrityksen nimelle ja oikealle liittymisvaihtoehdoille.

Esimerkki verkkosivun alatunnisteesta

Sephora

Kauneusbrändin alatunniste omaksuu klassisen ilmeen valkoisella tekstillä mustalla taustalla. Ohut viiva jakaa alatunnisteen kahteen osaan: sarakkeessa olevat ankkuritekstit yläreunassa ja CTA, sosiaalisen median kuvakkeet, tekijänoikeudet ja yksityisyyden suojapolitiikka alaosassa. Brändillä on myös pudotusvalikko, jonka avulla kävijät voivat valita alueensa tai kielensä, ja tarjoaa englanninkielisen ja ranskalais-kanadalaisen version.

Ankkuritekstit on ryhmitelty siististi neljään sarakkeeseen. Käyttämällä riittävästi tilaa, Sephoran alatunniste pystyy sisällyttämään paljon tietoa näyttämättä sotkuiselta.

Samaan aikaan yrityksen mobiiliversiossa on sarakeotsikot, kirjautumisvaihtoehto ja sosiaalisen median kuvakkeet. Oikealla alatunnisteen yläpuolella on linkit App Storeen ja Google Playen, joissa matkapuhelimen käyttäjät voivat ladata Sephora-sovelluksen.

Esimerkki verkkosivun alatunnisteesta

StackSocial

StackSocial tarjoaa uusille asiakkaille kannustimen liittyä uutiskirjeensä. Lisäksi se käyttää CTA: ta sinisellä painikkeella, jotta se voi pysyä yhdenmukaisena tuotemerkkinsä kanssa. Sininen CTA hyppää myös sivulta tumman taustan ja vaalean tekstin keskellä. Better Business Bureau (BBB) ​​-logo oikeassa alakulmassa auttaa luomaan luottamusta tuotemerkkiin.

Esimerkki verkkosivun alatunnisteesta

Viimeiset sanat

Alatunnisteen suunnittelussa on niin monia tapoja, jotka voivat lisätä tulostasi ja tehdä sivustostasi helppokäyttöisen ja helpon navigoinnin. Jatka kokeilemista ja soveltamista yllä olevia vinkkejä, kunnes keksit jalkojen suunnittelun, joka vastaa yrityksesi tavoitteita ja kohdeasiakkaidesi tarpeita.

Onko sinulla vinkkejä, temppuja tai vaikuttavia alatunnistemalleja jaettavaksi? Jätä ajatuksesi alle.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me