Leivänmurut Verkkosuunnittelun esimerkkejä ja parhaat käytännöt

Inspiraatio – Verkkosivut EsimerkkejäAndrian Valeanu – 14 kesäkuu 2013 – 6 minuuttia LUETTAA

Leivänmurut ovat verkkosivustojen muotoilun kannalta erittäin tärkeä osa. Tätä varten voit toteuttaa leivänmuruja verkkosuunnitelmissasi. Se lisää sivustosi tasoa ja siten houkuttelee katsojia sivustolle. Periaatteessa nämä ovat tekstipohjaisia linkkejä. Normaalisti leivänmurujen fontti on muutaman pykälän pienempi kuin verkkosivuston sisällön alkuperäinen tekstikoko.

Kun rakennat verkkosivustoa, mihin sinun tulisi ensisijaisesti keskittyä? Se on tietenkin sivuston käytettävyys. Olipa kyseessä sitten koulutussivusto, sähköisen kaupankäynnin sivusto tai tiedotussivusto; et voi sivuuttaa verkkosivuston käytettävyyden merkitystä.

Kävijöiden on saatava sivustolta tietoa vaivattomasti. Jos kyseessä on sähköisen kaupankäynnin sivusto, katsojilla ei saa olla vaikeuksia löytää haluamiaan tuotteita. Jos asiaankuuluvien tietojen saaminen sivustoltasi on heidän mielestään aikaa vievää, he eivät epäröi lähteä sivustolta ja siirtyä uudelleen hakusivulle löytääkseen toisen kilpailevan sivuston, joka on heille hyödyllisempi. Siksi on tärkeää tehdä sivustosta hyödyllinen ja tehokas kävijöille.

Breadcrumbs, kuten nimestä voi päätellä, jättää sivuston katsojille jäljen, jonka avulla he voivat palata määränpäähänsä yksinkertaisemmin. Nimi on peräisin sadusta ”Hannu ja Kerttu”. Leivänmurut tunnetaan tekstilinkkeinä, jotka yleensä löytyvät verkkosivuilta sivun päärungon yläosasta; sivun otsikon tai/ja mahdollisen bannerigrafiikan alapuolelta, mutta sisällön yläpuolelta. Leivänmurut suunnitellaan sivustosi sivurakenteen mukaan.

Jos sinulla on esimerkiksi verkkokauppa ja katsoja on sivulla, joka käsittelee jääkaappeja, leivänmurupolkurakenne näyttää sivulle ja takaisin etusivulle johtavat pääkategoriat niiden oikeassa esiintymisjärjestyksessä. Näin ollen katsojat löytävät leivänmurupolun esimerkiksi seuraavasti: ”Etusivu>Elektroniikkalaitteet>Kodinkoneet>Kylmälaitteet>Jääkaapit”. Tämä polku perustuu yleensä verkkosivuston taustajärjestelmän tiettyyn kansiorakenteeseen. Käyttäjä voi siirtyä mille tahansa polun sivulle klikkaamalla tekstiä. Jos esimerkiksi haluat siirtyä etusivulle, voit siirtyä sinne suoraan klikkaamalla leivänmurupolun ”home”-linkkiä.

Levynmuruja käytetään pääasiassa navigointivalikkoina. On olemassa useita tapoja, joiden avulla käyttäjä voi navigoida verkkosivuston eri sivuilla. Navigointivalikoiden on oltava käyttäjäystävällisiä ja yksinkertaisia. Siksi breadcrumb on loistava idea navigointivalikoksi.

Ei vain navigointivalikkoina, vaan myös hakukoneoptimoinnin kannalta tästä on hyötyä. Erityisesti verkkokaupassa, jossa kilpailu voi olla kovaa, korkealle sijoittuminen hakukoneissa on tärkeää. Koska leivänmurut perustuvat verkkosivuston kansiorakenteeseen, se sijoittaa avainsanat useampaan paikkaan koko verkkosivustolla. Näin ollen, jos ”villaponcho” on suosittu hakusana toimialallasi, leivänmurut luovat yhden sisäisen linkin lisää relevanttiin avainsanaan verkkosivustollasi.

Käsitellessäsi leivänmuruvalikoita sinun on kuitenkin pidettävä mielessäsi, että tämäntyyppistä navigointia tulisi pitää lisäominaisuutena, joka lisää sivuston vetovoimaa, eikä sen tulisi korvata hyödyllisiä ensisijaisia navigointivalikoita.

Kun etsit internetistä useita erityyppisiä leivänmuruvalikoita, voit löytää sijaintiin perustuvia, attribuutteihin perustuvia ja polkuun perustuvia leivänmuruvalikoita.

Komponentti on muotoiltu mustalla värillä, jotta se erottuu luontevasti vaaleasta taustasta ja nousee esiin. Kuvioitu kangas tekee hienosti yhteistyötä taiteellisen kokonaissuunnittelun kanssa. Linkit hahmottuvat nopeasti terävän ja muodollisen typografian ansiosta, ja pienet aukot kunkin kohteen välillä edistävät luettavuutta.

Order

Mikäli kaikki käyttöliittymän kohteet on merkitty hienovaraisilla gradienteilla, leivänmurut päinvastoin pysyttelevät puhtaammassa litteässä ulospäin suuntautuvassa tasossa ja yksivärisessä taustassa. Siitä huolimatta se sopii melko hyvin yhteen muiden kanssa ja täydentää estetiikkaa samanlaisen värityksen ansiosta. Koti-painike lisää klassista vetovoimaa. Kirkkaita sävyjä käytetään otsikoiden rajaamiseen tehokkaammin.

Breadcrumbs by Rob Dozier magnetisoi erittäin tyylikkäällä, puhtaalla ja raikkaalla ulkoasulla. Vaikka navigaatio on tehty vaalealla värimaailmalla, se kiinnittää silti huomion. Hienovarainen varjo antaa nuolen muotoisille laatikoille ylimääräistä visuaalista painoarvoa auttaen siten niitä erottumaan kohinaisesta taustasta. Nykyisen sijainnin osoittamiseksi selvästi viimeinen kohde esitetään yksinkertaisena kirjoituksena.

Breadcrumbs/Error by Jason Mayo on virtaviivainen navigointipalkki, jossa ei ole aukkoja tai vaikuttavia ominaisuuksia. Se sulautuu harmonisesti sommitteluun, ja siitä tulee käyttöliittymän olennainen yksityiskohta. Kohokuvioitu efekti kuitenkin pelastaa tilanteen. Se antaa jokaiselle lohkolle ja otsikolle selkeämmän ja terävämmän ulkonäön. Ensisijaiseen väripalettiin kuuluvaa violettia käytetään korostamaan varsinaista sivua.

Suunnittelun perusteet

Allison House hylkää kaikki klassiset nuolenmuotoiset yksityiskohdat ja panostaa vain yksinkertaisempiin ja tyylikkäämpiin ominaisuuksiin. Näin komponentti näyttää luonnolliselta ja intuitiiviselta, ja siinä on vahva opettavainen tyyli, jota projektissa tarvitaan. Jokaisessa lohkossa on otsikko, jota pönkittää mukana oleva kuvake.

Kuten edellisessä esimerkissä, Michal Vasko järjestää kaikki linkit riviin hylkäämällä graafiset yksityiskohdat typografian hyväksi. Kohteet on erotettu toisistaan pienillä minimalistisilla nuolilla, jotka sinisen värinsä ansiosta näyttävät huomaamattomasti suunnan. Koska elementti on kuitenkin integroitu saumattomasti muotoiluun eikä harmaa väri erotu jyrkästi taustasta, se voi helposti kadota näkyvistä.

JomSocial Template

JomSocial Template on kuitenkin aivan eri asia. Leivänmurut-navigaatiolla on suuri visuaalinen painoarvo suhteellisen suuren kokonsa ja kirkkaan värityksensä vuoksi. Se iskee silmään hukuttamatta käyttäjiä. Mohd Izuddin Helmi manipuloi erottuvalla kirjasintyypillä, sisäisellä varjolla, kiinteällä kotipainikkeella ja muutamalla lempeällä gradientilla saavuttaakseen vaikuttavan lopputuloksen.

Tämä on melko yksinkertainen esimerkki, mutta sillä on silti olemassaolon oikeus. Se on yksinkertaisin tapa näyttää käyttäjille heidän liikkeensä projektissa. Vaikka se on vailla kaunista ulkoasua ja kaipaa hieman ehostusta, se palvelee kuitenkin tehtäväänsä varsin hyvin. Se sisältää kaikki yleiset ominaisuudet: otsikot, nuolet suuntaa varten ja jopa korostusvärin tarjoten näin kävijöille käyttökelpoisen navigointiavustimen.

Kuvagallerian hallinta

Leivänmurut-navigaatio huokuu tyylikkyyttä ja selkeyttä. Sillä on puhdas ja yksityiskohtainen ulkoasu, joka on saatu ovelasta työstä typografian, valkoisen tilan ja taustan kanssa. Viimeisessä kohdassa on muista poiketen rohkeammat kirjainmuodot, jotta huomio ohjautuu kyseiselle sivulle. Vaikka navigointi säilyttää yksinkertaisen tunnelman, siinä on kuitenkin charmia ja se sopii tänne kuin nenä päähän.

Gamerscouch.com redesign

Aaron Moody on luonut tarmokkaasti verkkosivuston etusivun, jossa leivänmurut ottavat oikean paikkansa ja ovat siistin, hienostuneen ja trendikkään näköisiä. Navigointi täydentää kokonaissuunnittelua ja vangitsee projektin tunnelman. Tumma väritys, jossa on ripaus lämmintä oranssia sävyä, hahmottaa komponenttia ja herättää positiivisia tunteita.

Johtopäätös

Vapaaehtoisena navigoinnin apuvälineenä, joka ei ainoastaan tue päävalikkoa, vaan myös paljastaa hierarkian ja näyttää polun nykyiseen osioon, leivänmurut ovat tehokas väline käyttäjäkokemuksen parantamiseen.

Huolimatta siitä, että se kuitenkin valitettavasti jää melko usein huomiotta muotoilun kannalta, vaikka sitä pitäisi kohdella kuten mitä tahansa käyttöliittymän yleistä elementtiä. Yllä luetellut esimerkit kannustavat käyttäjiä luomaan kauniita ja intuitiivisia leivänmuruja, jotka täyttävät tehtävänsä eivätkä ole ”musta lammas” suunnittelussa.