Sadussa Hannu ja Kerttu kaksi lasta pudottelee leivänmuruja metsässä löytääkseen tiensä kotiin.
Nykyään et luultavasti koe kovinkaan montaa metsään eksymistä, mutta olen valmis lyömään vetoa, että olet tuntenut olosi turhauttavaksi huonosti suunnitelluilla verkkosivustoilla.
Websivujen suunnittelussa leivänmurujen navigointi on tapa näyttää käyttäjillesi heidän sijaintinsa ja se, miten he ovat päässeet paikalleen (samanlainen tapa kuin Hannelin leivänmurut). Se auttaa käyttäjiä myös löytämään ylemmän tason sivut nopeammin, jos he ovat päätyneet sivustollesi haun tai syvälinkin kautta.
- Mikä on leivänmurunavigointi?
- Breadcrumb-navigaation vinkkejä ja esimerkkejä
- Käytä breadcrumb-navigaatiota vain, jos se on järkevää sivustosi rakenteen kannalta.
- Älä tee leivänmurunavigoinnista liian suurta.
- Lisää breadcrumb-navigaatioon koko navigointipolku.
- Etene ylimmältä tasolta alimmalle.
- Pitäkää leivänmurujen otsikot yhdenmukaisina sivujen otsikoiden kanssa.
- Ole luova muotoilun suhteen.
- Pitäkää se siistinä ja selkeänä.
- Harkitse, minkälainen leivänmurun navigaatiotyyppi on järkevin sivustollesi.
- Tiedä yleisösi.
Levynmurunavigointi on tapa, jolla käyttäjät voivat havainnollistaa sijaintinsa verkkosivustolla. Se on toissijainen navigointipalkki, joka yleensä näkyy vaakasuorina tekstilinkkeinä, jotka on erotettu toisistaan ”suurempi kuin”-symbolilla (>). Breadcrumb-navigaatio parantaa aloitussivujesi löydettävyyttä ja auttaa käyttäjiä pääsemään ylemmän tason sivuille nopeammin, jos he ovat alun perin löytäneet sivustosi haun tai syvälinkin kautta.
Jakob Nielsen, Nielsen Norman Groupin toinen perustaja, on suositellut breadcrumb-navigaatiota jo vuodesta 1995 lähtien, ja hän puhuu niiden puolesta vahvasti: ”Leivänmurut vain helpottavat käyttäjien liikkumista sivustolla, olettaen, että sen sisältö ja yleinen rakenne ovat järkeviä. Se on riittävä panos jollekin, joka vie vain yhden rivin suunnittelussa.”
Jos yrityksesi verkkosivusto on monikerroksinen, voit harkita leivänmurun navigoinnin käyttöönottoa, jotta sivustollasi olisi helpompi navigoida. Kuten missä tahansa suunnitteluelementissä, myös siinä on kuitenkin oikea ja väärä tapa tehdä se. Tutustumme tässä yhdeksään vinkkiin ja esimerkkiin, joiden avulla voit varmistaa, että luot mahdollisimman tehokkaan breadcrumb-navigaation käyttäjillesi.
Breadcrumb-navigaatio on rakenteeltaan suoraviivainen, joten sitä kannattaa käyttää vain silloin, jos se on järkevää verkkosivustosi hierarkian kannalta. Jos sinulla on alemman tason sivuja, joihin pääsee eri aloitussivuilta, breadcrumb-navigaation käyttö vain hämmentää lukijoita, jotka pääsevät samoille sivuille jatkuvasti eri lähtökohdista. Lisäksi, jos sivustosi on suhteellisen yksinkertainen ja siinä on vain muutama sivu, et luultavasti tarvitse leivänmurunavigointia.
Levynmurunavigointi on toissijainen työkalu ensisijaiseen navigointipalkkiin nähden, joten sen ei pitäisi olla liian suuri tai näkyvästi sivulla. Esimerkiksi DHL:n verkkosivustolla ensisijainen navigointipalkki on suuri ja tunnistettava, ja siinä on sarakkeita, kuten ”Express” ”Parcel & eCommerce” ”Logistics” jne. Heidän breadcrumb-navigaattorinsa on sen alla oleva pienempi osio, jossa lukee ”DHL Global | > Logistics | > Freight Transportation” (DHL Global | > Logistiikka | > Rahtikuljetukset). Et halua, että käyttäjät luulevat breadcrumb-navigaatiota ensisijaiseksi navigaatiopalkiksi.
Googlasin ”Elon University Non-Degree Students” päästäkseni tälle aloitussivulle, mutta Elon on fiksu, kun se sisällyttää mukaan koko navigaatiopolun, mukaan lukien ”Home” (kotisivu) ja ”Admissions” (sisäänpääsyopinnot). Jos jätät tietyt tasot pois, sekoitat käyttäjiä, eikä leivänmurupolku tunnu yhtä hyödylliseltä. Vaikka käyttäjät eivät aloittaisikaan etusivulta, haluat antaa heille helpon tavan tutustua sivustoosi alusta alkaen.
Etene ylimmältä tasolta alimmalle.
On tärkeää, että leivänmurun navigointi lukee vasemmalta oikealle siten, että lähin linkki vasemmalla on etusivu ja lähin linkki oikealla on käyttäjän nykyinen sivu. Nielsen Norman Groupin tutkimuksessa todettiin, että käyttäjät käyttävät 80 prosenttia ajastaan sivun vasemmanpuoleisen puoliskon tarkasteluun ja 20 prosenttia oikeanpuoleisen puoliskon tarkasteluun. Lisäksi lähimpänä vasemmalla oleva linkki näkyy ketjun alkuna, joten haluat sen olevan korkeimman tason sivusi.
Pitäkää leivänmurujen otsikot yhdenmukaisina sivujen otsikoiden kanssa.
Sekaannusten välttämiseksi kannattaa pysyä johdonmukaisena sivujen ja leivänmurujen otsikoiden kanssa, etenkin jos kohdistatte tiettyjä avainsanoja otsikoissa. Haluat myös linkittää leivänmurun otsikot selkeästi sivuun. Jos breadcrumb-otsikossa ei ole linkkiä, tee siitä selkeä. Nestle merkitsee leivänmurujen otsikot tehokkaasti vastaamaan sivun otsikoita. Esimerkiksi ”Vaikutusalueet & sitoutuminen” lukee leivänmurun navigaatiossa samoin kuin sivulla.
Nestle tekee myös hyvää työtä erottaessaan linkit ja ei-linkit toisistaan eri väreillä — linkit ovat sinisiä, kun taas ei-linkit pysyvät harmaina.
Ole luova muotoilun suhteen.
Traditionaalinen leivänmurun navigaatio näyttää tältä: Etusivu > Tietoa meistä > Ura. Sinun ei kuitenkaan tarvitse noudattaa perinteistä polkua, jos sinusta tuntuu, että erilainen muotoilu voisi vetoaa enemmän yleisöösi tai näyttää paremmalta sivustollasi.
Esimerkiksi Target käyttää leivänmurunavigointia tuotesivuillaan (koska kukapa ei eksyisi virtuaaliseen kenkäosastoon?), mutta käyttää ”/”-symboleita ja yksinkertaista mustaa ja harmaata tekstiä. Tässä tapauksessa hienovarainen muotoiluvaihtelu on järkevää heidän sivustonsa estetiikan kannalta.
Pitäkää se siistinä ja selkeänä.
Leivänmuru-navigaatio on vain apuväline käyttäjälle, eikä sitä ihanteellisimmassa tapauksessa pitäisi huomata, ellei käyttäjä etsi sitä. Tästä syystä et halua sotkea breadcrumb-navigaatiota tarpeettomalla tekstillä.
Eionet esimerkiksi voisi luopua ”Olet täällä”-tekstistään. Vaikka tekstin on tarkoitus olla hyödyllinen, se sotkee sivua. Oikealla suunnittelulla leivänmurun navigaation pitäisi olla tarpeeksi erottuva ilman johdantoa.
On olemassa muutamia erilaisia leivänmurutyyppejä, joita voit käyttää — sijaintiin perustuva, attribuutteihin perustuva ja historiaan perustuva. Sijaintiin perustuvat leivänmurut näyttävät käyttäjälle, missä hän on sivuston hierarkiassa. Attribuuttipohjaiset leivänmurut näyttävät käyttäjille, mihin kategoriaan heidän sivunsa kuuluu. Historiaan perustuvat leivänmurut näyttävät käyttäjille tarkan polun, jonka he ovat kulkeneet saapuakseen nykyiselle sivulle.
Bed Bath & Beyond käyttää attribuutteihin perustuvaa leivänmurun navigointia näyttääkseen käyttäjille, mihin kategoriaan heidän tuotesivunsa kuuluu, jotta käyttäjät voivat napsauttaa takaisin ”Keittiöön” tai ”Pienkoneisiin” tutustuakseen samankaltaisiin tuotteisiin. Tällainen leivänmurun navigointi on tehokkainta Bed Bath & Beyondin asiakkaille. Kun luot leivänmurun navigointia, mieti, mikä on hyödyllisintä sivustosi kävijöille.
Tiedä yleisösi.
Leivänmurun navigoinnin parhaat käytännöt kehottavat web-suunnittelijoita sijoittamaan navigoinnin sivun yläosaan — mutta Apple, yksi kaikkien aikojen arvokkaimmista yrityksistä, uhmaa tätä logiikkaa sijoittamalla leivänmurun navigoinnin sivustonsa alaosaan. Viime kädessä on tärkeää tuntea yleisösi. Applen asiakkaat ovat tyypillisesti tekniikkaan perehtyneitä, ja he todennäköisesti löytäisivät navigoinnin, jos tarvitsisivat sitä. Ota huomioon asiakkaidesi tarpeet ja toteuta A/B-testausta, jos olet epävarma.
Loppujen lopuksi leivänmuru-navigaatio on tehokas työkalu, jolla helpotat sivustollasi navigointia, mutta haluat noudattaa suunnittelun parhaita käytäntöjä varmistaaksesi, että hyödynnät työkalun hyödyllisyyden. Jos haluat lisää UX-neuvoja, lue ”The Ultimate Guide to UX Design”.
