11 tapaa Breadcrumbs Bolster UX Design
Verkkosivustoa parantaa käyttäjien kokemuksia rohkaisemalla käyttäjiä kaivaamaan sivustosi hierarkiaa syvemmälle ja kertomalla vierailijoille tarkalleen missä he ovat mille tahansa tietylle sivulle. Googlen breadcrumb-skeema on toinen arvokas syy leipäpalojen asettamiseen. Suunnittelutekijä on kuitenkin aina hankala, joten se auttaa tutkimaan esimerkkejä ja keräämään ideoita.
Nämä ovat joitain suosikkikokemustani, ja niiden pitäisi tarjota mukava lähtökohta uusille suunnitteluprojekteille.
1. Wayfair
Wayfairin verkkosivustolla on paljon oikein ja koko UX on ilmiömäinen sivu sivulle. Yksi asia, jota pidän todella on niiden leipäpuun tyyli, koska se ei ole liian suuri, mutta ei liian pieni eikä myöskään häiritsevä.
Löydät nämä murusetit tuotesivuilla ja luokan sivuilla joten he seuraavat sinua koko sivustolla. Tämän avulla voit hypätä luokkaan tai kahteen mistä tahansa yksityiskohtaisesta sivusta.
Ja breadcrumb-palkki saa oman pienen osion navigoinnin alla eri BG-väreillä. Ei häiritsevää, mutta ei vaikea löytää. Suuri muotoilu ja yksi henkilökohtaisista suosikeistani.
2. Google-tuki
Toinen ilmeinen maininta on Google, koska he ovat tunnettuja uskomaton UX-työ . Löydät leipäruusuja useimmissa Googlen tuotteissa, joissa on useita eri rivejä ja yksi parhaista on Google-tuki sivusto.
Heidän tukisivunsa tarjoavat kaiken neuvontaa skeemasta analytiikkaan ja Search Console -työkaluun. Jokaisella sivulla on leipäruusuja ja nämä murut ovat samanlaisia kuin sivun otsikko, joten ne näkyvät selvästi.
Jälleen huomaa, miten nämä linkit sekoittuvat kauniisti ilman, että hyppää sivusta. Ne tuntuvat luonnollisilta luonnollisilta, ja tämän pitäisi aina olla tavoite sirunrikkailla.
3. MSDN-dokumentit
Siellä on todellinen ainutlaatuinen breadcrumb-ominaisuus MSDN-dokumentit että pidän todella. Siinä on kaikki tyypilliset suunnittelutoiminnot kuten nuolikuvakkeet ja kategoriset linkit, mutta ketjussa oleva viimeinen linkki on mukautettu pudotusvalikosta ylimääräisillä sivuilla.
En ole koskaan nähnyt tätä aiemmin missään leiväntuotannossa, mutta se on uskomattoman arvokas käyttäjälle. Tyypillisesti se vaatii uuden navigointivalikon päästäksesi näihin linkkeihin, mutta Microsoftin sivustolla on niin monta sivua käydä läpi.
Puhumattakaan asiakirjat voivat olla melko monimutkaisia, joten se ei ole helpoin tapa luoda leipäjuustoja. Tämä tekniikka on loistava ja kannattaa käyttää, jos sivustossasi on monimutkainen hierarkia.
4. Apple
Applen verkkosivustolla olen nähnyt paljon rypytyksiä monilla sivuilla, kuten verkkokaupan sivuilla ja tuotesivuilla. Mutta yksi pienempi yksityiskohti, joka sai silmänsä on alatunnisteen alue pienellä leikkauskohdalla niiden pohjaosien yläpuolella.
Apple on valtava yritys, jolla on paljon sivuja ja resursseja. Tämä breadcrumb olisi syytä lisätä sivun yläosaan, mutta se varmasti ei satuta olemaan lähellä pohjaa.
Kehotan suunnittelijoita kokeilemaan tätä ja katsomaan, miten se toimii. Footer-leipäruoat eivät todellakaan ole normi, mutta ne auttavat visuaalisen navigoinnin avulla.
5. TechRadar
Suurin osa myyntituloksista löytyy yleensä yrityksen sivustoilta tai verkkokauppoilta. Mutta blogeilla on usein omat leivänrutiinit ja yksi hyvä esimerkki on TechRadarin artikkelisivu .
Jokainen leipäruuvi on melko pieni, jossa on linkki suoraan pääluokkaan ja kopion artikkelin otsikosta. Tämäntyyppiselle blogille on vaikea perustella leipäjuustoa, koska hierarkiaa ei ole paljon.
Mutta tämä toimii hyvin, jos sinulla ei ole muuta paikka lisätä artikkelin luokka sivulle.
6. TutsPlus
Jos haluat paljon yksityiskohtaisempia leipärakenteita, tutustu TutsPlus-blogi . Jokaisessa artikkelissa on pieni leivänruskea sivun yläosassa, mukaan lukien ensisijaiset ja toissijaiset luokat.
Pidän tästä mallista paljon, koska se sekoittuu luonnollisesti sivun otsikkoon. Joten sen sijaan, että otsikko kiristettäisiin leikepöytään ja otsikkotunnisteeseen, tämä yhdistää kaiken yhdeksi elementiksi, joten
otsikko on osa breadcrumb.
Huomaa, että tämä ei käytä oikeaa Google-mallia, joten se ei näy haunleikkauksissa. Mutta kun otetaan huomioon, että se vain vaikuttaa napsautussuhteeseen, arvostan suunnittelun ja sivun käytettävyyttä paljon enemmän kuin SEO-hyödyt (tai niiden puuttuminen).
7. Coolspotters
Perinteiset leivänrutiinit pitävät tavallisesti muutamia teksti-symboleita, kuten etusuuntainen viiva tai oikea nuolipidike (>). Nämä toimivat, koska niitä on käytetty vuosikymmeniä ja käyttäjät tuntevat heidät.
Mutta aina haluan nähdä muut leiväntuotannostekniikan trendit kuten Coolspotters . He käyttävät mukautettuja linkkejä, joissa on nuolet linkkielementteihin.
Löydät runsaasti avoimen lähdekoodin leimakuvamallit aivan kuten nämä omalle sivustollesi. Se on loistava tapa jazzata tämän hyvin perinteisen sivun elementti.
8. MarketWatch
Takaisin perusasiat on online-uutissivusto MarketWatch . Kaikki heidän sisäiset virat ominaisuus breadcrumb navs oikealla osoittava nuoli kuvakkeet melko pieni teksti.
Tässä tapauksessa mielestäni pieni teksti toimii hyvin. Ei ole kovin vaikeaa käyttää leipäjuustoja, mutta ne tuntuvat pienemmiltä ja vähemmän merkittäviltä kuin loput sivusta.
Blogit ja uutissivustot toimivat paremmin pienillä leivänrikkailla, koska todellinen painopiste on sisällön. Silti on mukavaa asentaa ne johonkin, ja tämä malli on hyvä esimerkki.
9. Amazon
Kaikki rakastavat Amazonia heidän valtavaan inventointiinsa ja ilmaiseen toimitukseensa. Mutta heillä on myös upea sivusto, joten en voi kulkea ohjattuna.
monet tuotesivuilla on joukko leipäruokia lähellä yläreunaa. Tämä on aina erittäin pitkä, koska Amazon luokat saavat syvän. Tämä on kuluttajien kannalta hyödyllistä nähdä, mitkä luokat saattavat olla selaamisen arvoisia ja arvokkaita suunnittelijoille / verkkovastaaville Amazonin massiivisen tuoterakenteen tutkimiseen.
Mutta jos vierittät alas jokaisella tuotesivulla, löydät "tuotetietoja" tai "tuotetiedot" -osiosta, jossa on parhaita myyjiä.
Tämä ominaisuus käyttää linkkipohjaisia linkkejä osoittamaan, missä tuote on myynyt parhaiten ja rohkaisee kävijöitä klikkaamaan kyseisiin liittyviin luokkiin.
Amazonin leipäjuuret ovat hienosti pitkiä, joten he kannattaa opiskella, jos sinulla on erittäin syvä hierarkia.
10. Etsy
Massiivinen online DIY / käsityöverkkokauppasivusto Etsy kehittää jatkuvasti muotoilunsa. Se perustettiin vuonna 2005 ja katselee sivustoa nyt, kun näet, että he ovat tehneet suuria muutoksia viimeisten 10 vuoden aikana.
Jos tarkistat mitään luokan sivulle vasemmassa yläkulmassa on pieniä rypytyksiä. Nämä eivät ole yhtä näkyviä kuin sivupalkin navigointi, joka todella tuntuu ensisijaiselta etsimiseltä.
Mutta mukava lisävaikutus on koko kohteen listalle luokkaan. Etsy kertoo, kuinka monta kokonaismäärää myydään jokaisessa alikanavassa, kun kaivataan syvemmälle sivustoon.
Yksi asia, josta valitsen, on tuotesivujen leipäruiskeiden puuttuminen. Tämä tuntuu todellisen valvonnan UI ja toivon, että he lisäävät tämän eteenpäin.
11. LinuxInsider
Tämä leipäruusu ei ole erityisen kaunis, mutta siinä on ominaisuus, joka tarttuu huomiomme.
Huomaat seuraavan sivun yläosassa olevan "Seuraava artikkelin" linkin LinuxInsider viesti . Tämä näkyy suoraan leipärajan vieressä, joten se tuntuu osalta navigointia.
Käyttäjät, jotka vuorovaikuttavat leipäviljojen kanssa, haluavat tyypillisesti kaivaa niitä muruoluokissa, joten tämä ylimääräinen linkki on järkevää. Jokainen, joka kiinnostaa Linux-ohjelmistoa, voi halutessaan siirtyä oikealle seuraavan luokan artikkeliin.
