7 parasta käytäntöä hakukentän suunnittelussa ja sijoittelussa
Hakukenttä on yksi verkkosivuston tärkeimmistä elementeistä. Riippumatta yrityksesi tyypistä, hyvin suunniteltu hakukenttä on välttämätöntä, jotta vierailijat löytävät etsimänsä helposti. Tämä ei tarkoita, että pelkkä hakuominaisuuden lisääminen riittää ajattelematta sen ulkoasua.
Sinun on otettava huomioon hakukentän toimivuus, käyttäjäystävällisyys, estetiikka ja jopa sijainti. Tämä kaikki on siksi, että voit parantaa verkkosivustosi käyttökokemusta, mikä voi jopa johtaa lisääntyneisiin konversioihin.
Mitä sinun on tehtävä hakukentän suunnittelussa? Vaikka tarkat suositukset voivat olla subjektiivisia tarpeidesi ja tavoitteidesi perusteella, on olemassa muutamia yleisiä vinkkejä, jotka voivat toimia erityyppisillä verkkosivustoilla. Joten tässä on joitain hakukentän suunnittelun ja sijoittelun parhaista käytännöistä:
1 Tee siitä näkyvä
Ensimmäinen ja tärkein sääntö hakukentän suunnittelussa on tehdä siitä helposti havaittavissa. Saatat olla liian keskittynyt suunnittelun estetiikkaan, kun luot hakukentän, joka sulautuu muuhun verkkosivustoon. Mutta on tärkeää muistaa, että lisäät hakukentän ihmisille, jotka haluavat löytää jotain verkkosivustostasi. Hakukentän hakeminen ei ole järkevää, ja sillä voi jopa olla negatiivinen vaikutus heidän kokemukseensa.
Tämä ei tarkoita, että sinun täytyy tehdä kompromisseja estetiikasta kokonaan. Keksi malli, joka näyttää hyvältä nykyisen verkkosivustosi ulkoasua vasten ja on silti riittävän näkyvä, jotta ihmiset huomaavat sen. Joten laatikon koon tulee olla suuri, mutta ei liian suuri, jotta se vie liikaa tilaa sivulla. Ja värin tulee olla kontrastinen mutta silti täydentää muita sivulla käytettyjä värejä.
Best Buy -hakukenttä on hyvä esimerkki, koska valkoinen kontrasti sivun sinistä vasten samalla kun se on linjassa muiden sivun suunnittelussa käytettyjen värien kanssa. Hakukentän koko ei ole liian suuri, mutta se on silti riittävän näkyvä, jotta ihmiset huomaavat sen heti saapuessaan sivulle.
2 Korosta Lähetä-painike
Kuten aiemmin mainittiin, hakukentän koko tarkoitus on helpottaa sivuston vierailijoiden asioita. Vältä asioiden monimutkaistamista pienillä lähetyspainikkeilla, joihin käyttäjien on keskityttävä napsauttaakseen. Lähetä-painikkeen erottuminen parantaa itse hakukentän näkyvyyttä ja helpottaa myös käyttäjien napsauttamista.
Sinä päätät, käytätkö suurennuslasikuvaketta vai kirjoitat lähetyspainikkeessa "Lähetä". Keskity kuitenkin painikkeen kokoon ja väriin, jotta käyttäjillä ei ole vaikeuksia löytää se painikkeen kirjoittamisen jälkeen. Tee heille selväksi, mitä heidän on tehtävä, kun he ovat kirjoittaneet etsimänsä.
Jotkut verkkosivustot menevät jopa niin pitkälle, että vierailijat voivat etsiä jotain vain suurennuslasikuvaketta. Tästä saattaa olla suurta hyötyä verkkosivuston estetiikassa, kuten Levi’s Straussin tapauksessa. Mutta tämä ei ole optimaalinen esimerkki hakukentän suunnittelusta.
Vaikka tämä näyttää hyvältä suunnittelun kannalta, se voi olla hankalaa vierailijoille, koska heidän on odotettava hakukentän latautumista napsauttamalla suurennuslasikuvaketta. Se voi olla turhauttavaa varsinkin, jos käytät sivustoa paikasta, jossa yhteys on hidas. Sen sijaan, että se ladataan erikseen, saattaa olla parempi laajentaa hakukenttä samaan kohtaan, johon suurennuslasi on sijoitettu.
Kun tilaa on rajoitetusti, mutta haku on tärkeä, voi olla mukavaa, että se sulautuu ylimpään navigointiin. Juuri näin shralpin teki mobiilisivustollaan.
Toisaalta Xero Shoesissa ei ole lainkaan lähetyspainiketta. Vierailijoiden on syötettävä hakusana tallennettuun hakuun ja painettava sitten Enter-näppäintä, jotta he voivat etsiä jotain sivustosta. Nyt saatat ajatella, että ei ole niin paha yksinkertaisesti painaa enter-näppäintä haun aloittamiseksi, mutta entä muut kävijät? Jotkut heistä saattavat etsiä nimenomaan lähetyspainiketta, ja heidän voi olla vaikea suorittaa hakua tämän tyyppisellä suunnittelulla.
Amazonin lähetyspainike on näkyvästi oranssi, kun taas muu hakukentän osa on valkoinen. Lähetä-painikkeen väri eroaa myös verkkosivuston otsikon tummemmasta väristä. Joten vaikka he käyttävät vain suurennuslasikuvaketta lähetyspainikkeena, se on silti näkyvästi näkyvissä toisin kuin Levin esimerkki. Varmista, että kuvake on pehmustettu, koska se lisää näkyvyyttä.
3 Sijoita se sinne, missä käyttäjät todennäköisimmin katsovat
Parhaista paikasta hakukentän sijoittamiseen verkkosivustolle käydään jatkuvasti keskustelua. Mutta jos katsot ympärillesi joitain suosituimmista verkkosivustoista, huomaat, että hakukentät sijoitetaan usein sivun yläreunaan keskelle tai oikeaan yläkulmaan. Tämä käy ilmi SLI Systemsin julkaisemasta tutkimuksesta. Analyysin mukaan 54 % jälleenmyyjistä sijoittaa hakukentän oikeaan yläkulmaan, 30 % keskelle ja vain 16 % vasemmalle.
Tämä tarkoittaa, että vierailijat saattavat odottaa löytävänsä hakukentän verkkosivustosi oikeasta yläkulmasta. Sen sijoittaminen odottamattomaan paikkaan tarkoittaa, että käyttäjien on ehkä ponnisteltava enemmän löytääkseen hakukentän. Tästä huolimatta on silti hyvä idea tutkia vierailijoiden toimintaa lämpökartan tai katseenseurantatyökalun avulla. Tämä auttaa sinua tunnistamaan, mistä he todennäköisimmin etsivät, ja auttaa sinua ymmärtämään, mihin hakukenttä kannattaa sijoittaa sivustossasi.
Riippumatta siitä, valitsetko vasemmalle, oikealle vai keskelle; Varmista, että se on sivun yläreunassa, koska siellä kävijät todennäköisemmin skannaavat ensin NN Groupin katseenseurantatutkimuksen mukaan. Kannattaisi tehdä A/B-testi eri hakukentän sijoitteluissa ja määrittää sitten mikä asema näyttää toimivan sinulle parhaiten.
Tässä on esimerkki Get Plus Followers -sivuston sivun oikealle puolelle sijoitetusta hakukentästä.
EBayn hakukentän sijoitus on sivun keskellä, missä se on näkyvästi näkyvissä ja yksi ensimmäisistä asioista, jotka vierailijat huomaavat verkkosivustolla.
4 Yhdistä automaattinen täydennys grafiikkaan
Web-sivustosi voi olla niiden 62,5 % joukossa, jotka käyttävät automaattista täydennystä hakukentässä. Kilpailuedun saamiseksi voit parantaa ominaisuutta lisäämällä tuotteen esikatselukuvat sekä automaattisen täydennyksen ehdotukset hakutoimintoon. Tämä johtuu siitä, että vain 28,2 % osallistuvista verkkosivustoista käyttää tällä hetkellä tätä ominaisuutta.
Automaattisen täydennyksen lisäämiseksi grafiikalla kannattaa ehkä katsoa LED Hutin koteloa. Lisättyään kuvien esikatselut automaattisen täydennyksen ehdotuksiinsa LED-valaistuksen toimittaja onnistui nostamaan hakutulosprosenttiaan 200 %. Tältä se näyttää, kun lisäät kuvien esikatselut hakuehdotukseen.
5 Vältä hakukentän eristämistä tai ylikuormittamista
Ensimmäisessä kohdassa mainittiin, kuinka tärkeää on tehdä hakukenttä näkyväksi. Tämä tarkoittaa, että sinun tulee välttää ympäröivien alueiden ylikuormittamista kuvakkeilla tai muilla elementeillä, jotka saattavat häiritä kävijöitä hakukentästä. Hakukenttä on asetettava tärkeysjärjestykseen ja siihen on keskityttävä. Vältä samalla liioittelua, sillä saatat päätyä eristämään hakukentän niin, että sen löytäminen on vaikeaa.
Snow and Rock -hakukenttä on hyvä esimerkki hyvin suunnitellusta hakukentästä. Kuten alla olevasta kuvasta näet, alueella, johon se on sijoitettu, ei ole liikaa elementtejä. Mutta voit silti nähdä sen sivun vasemmassa keskiosassa, eikä sitä ole sijoitettu paikkaan, josta käyttäjien on vaikea löytää. Lähetä-painike erottuu myös muista verkkosivuston väreistä, mikä tekee siitä erottuvan.
6 Valitse laajeneva hakukenttä
Kun etsit tapoja säästää tilaa ja samalla tehdä hakukentän käyttäjille näkyvästi, voit valita kasvavan hakukentän. Tämä on ihanteellinen valinta verkkosivustoille, joissa haku ei ehkä ole liian tärkeää, mutta haluat silti antaa käyttäjille mahdollisuuden etsiä jotain. Sen sijaan, että lisäisit vain suurennuslasikuvakkeen, lisäät sen viereen pienen hakukentän, joka toimii visuaalisena vihjeenä sivuston vierailijoille. Kun käyttäjä napsauttaa kenttää, ruutu laajenee ja antaa käyttäjille mahdollisuuden kirjoittaa tarvitsemansa termin.
Tässä on hyvä esimerkki Net-a-Porterilta. Jos katsot verkkosivuston oikeaa yläkulmaa, näet, että hakukenttä on näkyvissä, mutta ei liian suuri. Siellä on suurennuslasikuvake, jonka avulla käyttäjät voivat tunnistaa, että kyseessä on hakuvaihtoehto.
Mutta kun napsautat kenttää, hakukenttä laajenee, jotta voit kirjoittaa haluamasi hakutermin. Tämä estetiikan ja käytettävyyden yhdistelmä on erinomainen verkkosivustolle, jonka etusivulle on sisällytettävä runsaasti elementtejä, koska se auttaa säästämään tilaa tinkimättä hakukentän näkyvyydestä.
7 Harkitse avattavan valikon lisäämistä
Hakukenttä on olemassa ihmisille, joilla on jo jonkinlainen käsitys siitä, mitä he etsivät. Mutta entä ne, jotka eivät ole liian varmoja, mitä he etsivät. Sinulla voi olla automaattinen täydennysehdotusominaisuus, mutta avattavan toiminnon lisääminen hakukentän viereen voi olla hyvä idea joillekin verkkosivustoille. Se antaa käyttäjille suunnan tunteen ja antaa heille vihjeitä siitä, mitä etsiä.
Tämä taktiikka osoittautui menestykseksi brasilialaiselle kiinteistöyhtiölle Casa Mineiralle. Verkkosivustolla tehdyssä tapaustutkimuksessa tavallisen hakukentän korvaaminen avattavilla valikoilla auttoi luomaan lisää viittauksia. Itse asiassa vaihtelu johti 57,25 % enemmän liidejä kuin aiemmin.
Syy siihen, miksi tämä muunnelma menestyi niin hyvin, johtuu siitä, että vierailijoille annettiin selkeä toimintapolku ja he löysivät nopeasti etsimänsä. Edellisessä suunnittelussa kävijöiden oli oltava varmoja siitä, mitä he tarkalleen etsivät. Joten ohjatakseen vierailijoita paremmin, he päättivät kattaa laajan valikoiman paikkoja ja majoitustyyppejä.
Mutta on tärkeää muistaa, että tämä vaihtoehto ei ehkä ole paras kaikentyyppisille verkkosivustoille. Esimerkiksi verkkokauppa ei ehkä pysty tekemään hausta toimivampaa vierailijoille tällä tekniikalla. Mutta kiinteistöyhtiöille ja palveluihin liittyville yrityksille avattava hakutoiminto saattaa olla täydellinen ratkaisu.
Bottom Line
Saat nyt paremman käsityksen hakukentän suunnittelusta ja sijoittelusta esimerkkien ja vinkkien avulla. Joten mitä olet oppinut tästä? Olet ehkä huomannut, että hakukentän näkyvyyteen ja näkyvyyteen kohdistuu painoarvoa. Tämä tarkoittaa, että värikontrasti, estetiikka ja hakukentän koko ovat tärkeitä näkökohtia.
Sinun tulisi keskittyä toiminnallisuuden ja estetiikan yhdistämiseen, mikä ei välttämättä ole helppoa toteuttaa. Paras neuvo, jonka voit saada, on suorittaa A/B-testejä erilaisissa malleissa ja asennoissa, kuten edellisissä kohdissa mainittiin. Onko sinulla kysyttävää hakukentän suunnittelusta? Voit vapaasti jättää kommentin alle.