Brändit käyttävät älykkäitä UX-kuvioita, jotta navigointi tuntuisi vaivatta.

Johdanto

Huono navigointi tappaa enemmän verkkosivustoja kuin huono suunnittelu koskaan. Kun käyttäjät eivät osaa päättää, mihin klikata seuraavaksi, he lähtevät.

Tutkimusten mukaan 61,5 % ihmisistä hylkää sivustot, koska navigointi on heille liian sekavaa. Se on valtava luku, ja se tarkoittaa, että useimmat sivustot menettävät kävijöitä ennen kuin heillä on edes mahdollisuutta muuttaa heitä asiakkaiksi.

Brändit, jotka ovat onnistuneet tässä, eivät luota oveliin temppuihin tai epätavallisiin valikoihin. Ne käyttävät erityisiä UX-malleja, jotka poistavat kitkan jokaisesta vuorovaikutuksesta. Nämä mallit ovat tarkoituksellisia valintoja siitä, miten tiedot järjestetään ja esitetään.

Olemme tutkineet kymmeniä suorituskykyisiä sivustoja selvittääksemme, mikä todella toimii. Alla esittelemämme mallit ovat yleisiä eri toimialoilla, verkkokaupasta SaaS-alustoihin. Jokainen malli ratkaisee tietyn navigointiongelman, ja voit ottaa ne käyttöön ilman, että sinun tarvitsee uudistaa koko sivustoasi.

Katsotaanpa, mitä todelliset brändit ovat tehneet ja miten voit soveltaa niiden lähestymistapaa.

Kiinnittyvä navigointi momentumia säilyttävänä mallina

Kiinteä navigointi pitää tärkeät vaihtoehdot näkyvissä, kun käyttäjät selaavat sivustoa. Se poistaa kitkaa hetkinä, jolloin käyttäjät päättävät, mitä tehdä seuraavaksi.

Pitkillä sivuilla tämä on tärkeää. Käyttäjät muodostavat usein aikomuksensa kesken lukemisen. Pysyvä navigointi antaa heidän toimia heti ilman, että heidän täytyy keskeyttää keskittymisensä tai vierittää takaisin sivun alkuun.

Tämä malli kunnioittaa vauhtia. Käyttäjien ei tarvitse keskeyttää, suunnata uudelleen tai etsiä ohjaimia. Sivusto reagoi yhtä nopeasti kuin he ajattelevat. Ajan myötä tämä rakentaa luottamusta ja vähentää poistumisia, erityisesti sivuilla, joilla on tietoa, hinnoittelua ja konversiopolkuja.

Arvo riippuu toteutuksesta. Kiinnittyvä navigointi tulisi tuntua tukevalta, ei hallitsevalta. Huonosti toteutettuna se vie tilaa tai häiritsee sisältöä. Puhdas toteutus pitää sen hyödyllisenä ja huomaamattomana.

Kuinka toteuttaa sticky-navigaatio:

• Määritä valikon yksittäinen tarkoitus ennen sen suunnittelua. Tue yleisintä seuraavaa vaihetta.
• Rajoita linkit vain keskeisiin sivuille, kuten tuotteisiin, hintoihin, yhteystietoihin ja tilaamiseen.
• Pidä korkeus kompaktina ja yhdenmukaisena kaikilla sivuilla.
• Varmista, että valikko ja sivun sisältö erottuvat selvästi toisistaan, jotta valikko pysyy luettavana sivua vieritettäessä.
• Käytä selkeitä nimikkeitä, jotka vastaavat käyttäjän tarkoitusta, älä sisäistä terminologiaa.
• Lukitse valikon sijainti, jotta se ei heilua tai muutu kokoa vierityksen aikana.
• Testaa mobiililaitteilla peukalon ulottuvuus ja turvallinen etäisyys painikkeiden välillä.
• Harkitse vierityskäyttäytymistä huolellisesti. Jos tila on ongelma, piilota valikko vieritettäessä alaspäin ja paljasta se vieritettäessä ylöspäin.
• Tarkista suorituskyvyn vaikutus, jotta kiinnittyvä elementti ei hidasta lataamista tai vieritystä.

Custom Sock Lab on brändi, joka käyttää tätä mallia hyvin. Se valmistaa räätälöityjä sukkia yrityksille, tapahtumiin, joukkueille ja yksityisasiakkaille.

Sen sticky-navigointi pysyy näkyvissä jokaisella sivulla, jopa kun vierität sivun alaosaan. Käyttäjät, jotka selaavat tyylejä, materiaaleja tai tilaustietoja, voivat vaihtaa polkua välittömästi. Valikko pysyy yksinkertaisena ja yhdenmukaisena, mikä auttaa kävijöitä siirtymään vaihtoehdoista toiseen menettämättä keskittymistä tai edistymistä.

Lähde: customsocklab.com

Hierarkkiset valikkomallit, jotka vastaavat käyttäjien mentaalisia malleja

Hierarkkiset valikot toimivat, kun ne heijastavat sitä, miten käyttäjät jo järjestävät tietoa mielessään.

Ihmiset eivät selaa sivustoja sattumanvaraisesti. He saapuvat sivustolle karkealla käsityksellä siitä, mitä haluavat, ja odottavat kategorioiden rajaavan valintoja loogisessa järjestyksessä. Selkeä segmentointi auttaa heitä etenemään ilman, että heidän tarvitsee miettiä jokaista klikkausta.

Tämä malli vähentää kitkaa vastaamalla hiljaisiin kysymyksiin varhaisessa vaiheessa. Käyttäjät näkevät, missä he ovat, mitä kunkin kategorian alla on ja kuinka syvälle he voivat mennä. Tämä selkeys lyhentää päätöksenteko-aikaa ja alentaa poistumisprosentteja, erityisesti sivustoilla, joilla on laajat valikoimat tai tekniset tuotteet. Se myös lisää luottamusta. Kun kategoriat tuntuvat tutuilta, käyttäjät luottavat siihen, että he löytävät tarvitsemansa.

Toteutus on tässä tärkeää. Huono hierarkia luo sekavuutta tai pakottaa käyttäjät oppimaan rakenteen uudelleen. Vahva hierarkia on selvä jo ensi silmäyksellä.

Hierarkkisten valikoiden toteuttaminen:

• Ryhmitä kohteet käyttäjän tarkoituksen perusteella, älä sisäisen tuotelogiikan perusteella.
• Rajoita ylätason kategoriat hallittavaan määrään.
• Käytä selkeitä, kuvaavia nimikkeitä, jotka vastaavat hakukieltä.
• Näytä alaluokat viiveettä hiiren osoittamalla tai napauttamalla.
• Pidä luokkien syvyys mahdollisimman matalana.
• Pidä rakenne yhdenmukaisena valikoissa ja sivupalkissa.
• Järjestä kohteet merkityksen mukaan, älä aakkosjärjestyksessä.
• Lisää visuaalista välilyöntiä erottamaan ryhmät selkeästi toisistaan.
• Tue suodatusta kategorioiden sisällä nopeamman rajaamisen mahdollistamiseksi.

Golf Cart Tire Supply soveltaa tätä lähestymistapaa kurinalaisesti. He toimittavat golfkärryjen renkaita, pyöriä ja niihin liittyviä tarvikkeita huoltoa ja päivityksiä varten.

Sen päävalikossa näkyvät tuoteryhmät, jotka avautuvat hiiren osoittimen ollessa niiden päällä, paljastaen joko tuotteet tai selkeät alaluokat heti. Käyttäjien ei tarvitse klikata sokeasti. Kotisivulla vasemmalla oleva sivupalkki vahvistaa samaa rakennetta. Se jakaa tuotteet yksityiskohtien, kuten koon ja tyypin, mukaan, auttaen kävijöitä kaventamaan valintojaan nopeasti.

Molemmat navigointijärjestelmät noudattavat samaa logiikkaa, mikä tekee selailusta ennustettavaa ja tehokasta.

Lähde: golfcarttiresupply.com

Ominaisuuksiin perustuva valikkosuunnittelu, joka heijastaa ostajien tapaa suodattaa tuotteita

Ominaisuuslähtöiset valikot järjestävät navigoinnin ostajien eniten kiinnostavien yksityiskohtien ympärille. Sen sijaan, että valikot esittäisivät vain laajoja luokkia, ne tuovat esiin ominaisuudet, kuten tyypin, värin, materiaalin tai käyttötarkoituksen jo varhaisessa vaiheessa.

Tämä sovittaa navigoinnin ihmisten todelliseen ostokäyttäytymiseen, etenkin kun valikoimat vaikuttavat ensi silmäyksellä suurilta tai samankaltaisilta.

Tämä strategia lyhentää päätöksentekoprosessia. Ostajat tietävät usein tärkeimmät rajoitukset jo ennen selailua. He saattavat kiinnittää enemmän huomiota sopivuuteen, kohderyhmään tai ulkonäköön kuin tuotemerkkeihin tai mallistoihin. Attribuuttipohjainen navigointi antaa heidän soveltaa näitä rajoituksia etukäteen. Tämä lyhentää selailuaikaa ja vähentää turhautumista. Se auttaa myös käyttäjiä tuntemaan hallitsevansa tilannetta, mikä lisää luottamusta valinnan aikana.

Menestyäkseen tämä lähestymistapa vaatii keskittymistä ja maltillisuutta. Liian monet ominaisuudet ovat ylikuormittavia, kun taas huono merkitseminen aiheuttaa sekaannusta. Tavoitteena on selkeys, ei kattavuus.

Kuinka toteuttaa attribuuttipohjainen navigointi:

• Tunnista ominaisuudet, joihin käyttäjät luottavat eniten tuotteita vertailtaessa.
• Vahvista nämä ominaisuudet hakutiedoilla ja tukikysymyksillä.
• Rajoita näkyvät ominaisuudet tärkeimpiin päätöksentekijöihin.
• Käytä yhdenmukaisia nimikkeitä valikoissa, suodattimissa ja tuotesivuilla.
• Järjestä ominaisuudet tärkeysjärjestykseen, ei sisäisen prioriteetin mukaan.
• Anna käyttäjien yhdistellä ominaisuuksia ilman, että tulokset nollataan.
• Pidä valinnat näkyvissä, jotta käyttäjät ymmärtävät aktiiviset suodattimet.
• Varmista, että suorituskyky pysyy nopeana suodattimien päivittyessä.
• Käytä samaa attribuuttien logiikkaa sekä tietokoneiden että mobiililaitteiden asetteluissa.

Mannequin Mall, joka myy mannekiineja vähittäiskaupalle ja muotialalle, rakentaa koko navigointinsa tuotteiden attribuuttien ympärille.

Se järjestää tuotteet mallinuketyypin, sukupuolen, ikäryhmän ja värin mukaan. Tämä vastaa tapaa, jolla ostajat rajaavat vaihtoehtoja, kun he työskentelevät esittelyvaatimusten tai brändistandardien parissa. Vierailijat voivat suodattaa nopeasti ilman, että heidän tarvitsee arvata luokkapolkuja.

Rakenne tukee nopeaa vertailua ja auttaa käyttäjiä löytämään relevantit tuotteet vähemmillä vaiheilla.

Lähde: mannequinmall.com

Alatunnisteen navigointi toissijaisena hakumallina

Alareunan navigointi tukee käyttäjiä, jotka saavuttavat sivun alaosan ilman, että he ovat tehneet mitään. Siinä vaiheessa he ovat edelleen kiinnostuneita, mutta eivät ole varmoja, minne mennä seuraavaksi. Hyvin jäsennelty alareuna antaa heille suunnan ilman, että heidän tarvitsee vierittää sivua takaisin yläreunaan. Se toimii hiljaisena turvaverkkona jatkuvaa tutkimista varten.

Tämä malli auttaa, koska vieritys merkitsee usein arviointia. Käyttäjät lukevat, vertailevat ja pysähtyvät sivun loppupuolella. Kun alatunniste tarjoaa selkeät seuraavat vaiheet, se pitää vauhtia yllä. Se tuo esiin myös sisältöä, joka ei kuulu ensisijaiseen navigointiin, kuten oppaat, vertailut tai luottamukseen keskittyvät sivut. Tämä parantaa löydettävyyttä ilman, että päävalikko täyttyy turhilla tiedoilla.

Toteutus riippuu selkeyden ja rakenteen laadusta. Alatunnisteen tulisi tuntua järjestetyltä ja tarkoituksenmukaiselta. Ylikuormitetut alatunnisteet hidastavat päätöksentekoa ja jäävät huomiotta.

Kuinka suunnitella tehokas alatunnisteen navigointi:

• Ryhmitä linkit tarkoituksen mukaan, kuten tutkimus, vertailu, tuki ja yritystiedot.
• Käytä lyhyitä, kuvaavia nimikkeitä, jotka selittävät arvon yhdellä silmäyksellä.
• Aseta hyödylliset sivut etusijalle oikeudellisten tai vähemmän kiinnostavien linkkien edelle.
• Pidä sarakkeiden asettelu yhdenmukaisena kaikilla sivuilla.
• Lisää visuaalista välilyöntiä ryhmien väliin, jotta sivut ovat helpommin luettavissa.
• Vältä koko päävalikon kopioimista ilman tarkennuksia.
• Lisää mahdollisuuksien mukaan sivun sisältöön liittyviä kontekstuaalisia linkkejä.
• Varmista, että linkit ovat luettavissa myös pienemmillä näytöillä.
• Tarkista alatunnisteen analytiikka selvittääksesi, mitkä linkit herättävät kiinnostusta.

Medical Alert Buyer’s Guide käyttää alatunnisteen navigointia käytännöllisenä varajärjestelmänä. Sivusto keskittyy ikääntyneiden ja hoitajien lääketieteellisten hälytysjärjestelmien arviointiin ja vertailuun.

Kun käyttäjät selaavat pitkiä arvosteluja tai vertailusisältöä, alatunniste tarjoaa selkeän pääsyn tukisivuihin, kuten ostajan oppaisiin, usein kysyttyihin kysymyksiin ja yhteystietoihin.

Tämä rakenne auttaa kävijöitä jatkamaan tutkimustaan sujuvasti. Alatunniste ei ole ylikuormitettu. Se tarjoaa yksinkertaisesti loogisia seuraavia vaiheita, kun käyttäjät saavuttavat sivun lopun ja tarvitsevat ohjeita.

Lähde: medicalalertbuyersguide.org

Kontekstuaalinen navigointi, joka mukautuu käyttäjän matkaan

Kontekstuaalinen navigointi muuttuu sen mukaan, missä käyttäjät ovat ja mitä he yrittävät tehdä. Sen sijaan, että yksi valikko pakotettaisiin palvelemaan jokaista skenaariota, käyttöliittymä mukautuu, kun käyttäjän tarkoitus selkeytyy. Tämä pitää navigoinnin relevanttina ja estää käyttäjiä selaamasta vaihtoehtoja, jotka eivät enää ole sovellettavissa.

Käyttäjien tarpeet muuttuvat, kun he liikkuvat sivustolla. Ensimmäisillä vierailuilla keskitytään suuntautumiseen ja luottamukseen. Syvemmillä vierailuilla keskitytään oppimiseen, vertailuun tai tehtävien suorittamiseen. Kontekstuaalinen navigointi tukee näitä muutoksia esittämällä linkkejä, jotka vastaavat nykyistä vaihetta. Tämä vähentää häiriötekijöitä ja auttaa käyttäjiä etenemään vähemmällä vaivalla.

Hyöty riippuu johdonmukaisuudesta. Äkilliset muutokset hämmentävät käyttäjiä, jos logiikka ei ole selkeä. Onnistunut kontekstuaalinen navigointi tuntuu luonnolliselta, koska se perustuu rakenteeseen, jonka käyttäjät jo ymmärtävät.

Kuinka toteuttaa kontekstuaalinen navigointi:

• Määritä käyttäjien polut ennen navigointitilojen suunnittelua.
• Pidä yleinen navigointi vakaana ylätason liikkeissä.
• Ota kontekstuaaliset valikot käyttöön vasta, kun käyttäjän tarkoitus tarkentuu.
• Käytä ulkoasun muutoksia, jotka viestivät uudesta sisältötilasta.
• Rajoita kontekstuaaliset linkit nykyiseen osioon liittyviin toimintoihin.
• Käytä yhdenmukaisia nimikkeitä globaaleissa ja paikallisissa valikoissa.
• Varmista, että käyttäjät voivat palata helposti ylemmän tason sivuille.
• Testaa siirtymät, jotta navigointi tuntuu ennustettavalta.
• Vältä globaalien linkkien toistamista kontekstivalikoissa.

Erinomainen esimerkki tästä strategiasta on Webflow, visuaalinen kehitysalusta, jonka avulla suunnittelijat voivat rakentaa ammattimaisia verkkosivustoja ilman koodin kirjoittamista.

Kotisivulla valikko sisältää odotetut SaaS-osiot, kuten Alusta, Ratkaisut, Resurssit ja Hinnat. Kun käyttäjät siirtyvät Resurssit-osioon, navigointi siirtyy oppimiseen räätälöityyn sivupalkkiin. Linkit keskittyvät kursseihin, sanastoihin, sertifiointeihin ja koulutussisältöön.

Tämä muutos tukee tutkimukseen perustuvaa ajattelutapaa poistamatta pääsyä pääsivuston rakenteeseen. Navigointi mukautuu ilman, että se aiheuttaa hämmennystä, mikä pitää tutkimisen kohdennettuna ja tehokkaana.

Lähde: webflow.com

Lähde: webflow.com

Ennakoivat hakumallit, jotka ohjaavat käyttäjiä kirjoittaessaan

Ennakoiva haku auttaa käyttäjiä saavuttamaan tuloksia nopeammin vastaamalla reaaliajassa. Kun käyttäjät kirjoittavat, käyttöliittymä ennakoi heidän aikomuksensa ja tarjoaa ehdotuksia ennen kuin he ovat saaneet kyselynsä valmiiksi. Tämä toimii hyvin sivustoilla, joilla on laajat valikoimat ja joiden selaaminen yksinään vie liian kauan.

Tämä malli vähentää vaivaa kriittisellä hetkellä. Käyttäjät tietävät usein osan siitä, mitä haluavat, mutta eivät tarkkaa sanamuotoa. Ennakoiva haku täyttää tämän aukon ehdottamalla välittömästi relevantteja termejä, luokkia ja tuotteita. Se alentaa virheiden määrää, lyhentää polkua tuloksiin ja pitää käyttäjät kiinnostuneina sen sijaan, että pakottaisi heidät kokeilemaan ja erehtymään. Se tukee myös löytämistä tuomalla esiin vaihtoehtoja, joita käyttäjät eivät ehkä ole harkinneet.

Vahva toteutus perustuu relevanssiin ja maltillisuuteen. Liian monet ehdotukset aiheuttavat sekaannusta. Huono sijoitus heikentää luottamusta. Kokemuksen tulisi olla nopea, kohdennettu ja hyödyllinen.

Ennakoivan haun toteuttaminen:

• Sijoita haku sinne, missä käyttäjät sitä odottavat, ja tee sen aktivointi helpoksi.
• Laajenna hakukenttää korostaaksesi sen merkitystä ja tarkoitusta.
• Näytä ehdotuksia ensimmäisten merkkien jälkeen.
• Järjestä ehdotukset suosio- ja relevanssijärjestykseen.
• Sisällytä useita tulostyyppejä, kuten tuotteet, kategoriat ja sisältö.
• Korosta vastaavat termit selvästi tuloksissa.
• Pidä tulokset selvästi luettavina välilyönneillä ja visuaalisella hierarkialla.
• Rajoita näkyvien tulosten määrää ylikuormituksen välttämiseksi.
• Varmista, että suorituskyky pysyy välittömänä kaikilla laitteilla.

Petco, joka myy lemmikkieläinten ruokaa, herkkuja, tarvikkeita ja lisävarusteita, soveltaa ennustavaa hakua laajamittaisesti. Sen päävalikossa on näkyvä hakupalkki, joka laajenee heti, kun käyttäjä napsauttaa sitä.

Kun käyttäjät kirjoittavat, käyttöliittymä ennustaa hakukyselyjä ja näyttää niihin liittyviä hakutermejä, tuotemerkkejä ja luokkia. Se näyttää myös tuotetuloksia ja aiheeseen liittyviä artikkeleita samassa laajennetussa ikkunassa. Käyttäjät voivat siirtyä ideasta toimintaan poistumatta hakutilasta.

Tämä asetus tukee sekä nopeita ostoksia että laajempaa tutkimusta ja pitää samalla kokemuksen kohdennettuna ja reagoivana.

Lähde: petco.com

Lopulliset ajatukset

Älykäs navigointi poistaa vaivannäköä ilman, että se kiinnittää huomiota itseensä. Tässä esitellyt mallit toimivat, koska ne kunnioittavat tapaa, jolla ihmiset selaavat, päättävät ja liikkuvat sisällön läpi.

Pysyvät valikot tukevat vauhtia. Selkeät hierarkiat vastaavat odotuksia. Attribuuttipohjaiset polut heijastavat todellista ostokäyttäytymistä. Kontekstuaalinen navigointi mukautuu tarkoituksen tarkentuessa. Ennakoiva haku lyhentää etäisyyttä tarpeen ja tuloksen välillä.

Nämä lähestymistavat onnistuvat, kun niitä noudatetaan kurinalaisesti. Jokainen malli palvelee tiettyä tarkoitusta ja näkyy vain silloin, kun se tuo lisäarvoa.

Seuraavaksi tarkista, miten käyttäjät liikkuvat sivustollasi. Tunnista, missä he epäröivät, palaavat takaisin tai poistuvat. Sovella sitten mallia, joka sopii kyseiseen hetkeen käyttäjän matkan varrella. Pienet navigointiparannukset tuottavat usein suuria voittoja sitoutumisessa ja konversiossa.