11 leiðir Breadcrumbs Bolster UX Design
Website breadcrumbs auka reynslu notenda hvetja notendur til að grafa dýpra inn í stigveldi vefsvæðisins, en einnig að segja gestum nákvæmlega hvar þeir eru á hvaða síðu sem er. Google breadcrumb áætlun er annar mikilvægur ástæða til að setja upp breadcrumbs. En hönnunarþætturinn er alltaf erfiður svo það hjálpar til við að læra dæmi og safna hugmyndum.
Þetta eru nokkrar af uppáhalds mínum uppáhalds breadcrumb stílum og þeir ættu að bjóða upp á gott upphafspunkt fyrir nýjar hönnunarverkefni.
1. Wayfair
Vefsvæði Wayfair er mikið rétt og allt UX þeirra er stórkostleg síða á síðu. Eitt sem mér líkar mjög við er breadcrumb stíl vegna þess að það er ekki of stórt, en einnig ekki of lítið og ekki áberandi heldur.
Þú munt finna þessar mola á vörusíður og flokkar síður svo þeir fylgja þér í kringum alla síðuna. Þetta leyfir þér að stökkva í flokk eða tvo af hvaða nákvæmu síðu sem er.
Og breadcrumb barinn fær eigin litla hluta undir leiðsögninni með mismunandi BG litum. Ekki áþreifanleg en ekki erfitt að finna heldur. Frábær hönnun stíl og einn af persónulegum eftirlætum mínum.
2. Google stuðningur
Annar augljós minnst er Google þar sem þau eru þekkt fyrir ótrúlegt UX verk . Þú finnur breadcrumbs á flestum vörum Google með tiered síðum og eitt af því besta er Google stuðningur staður.
Stuðningssíður þeirra bjóða upp á ráðgjöf um allt frá áætlun til greiningar og leitartólið. Hver blaðsíða er með breadcrumbs og þessir múrar hernema svipuð rými og síðan á síðunni þannig að þau eru greinilega sýnileg.
Athugaðu aftur hvernig þessi tengla blandast vel án þess að stökkva af síðunni. Þeir eru mjög náttúrulega í hönnuninni og þetta ætti alltaf að vera markmiðið með breadcrumbs þínum.
3. MSDN skjöl
Það er alvöru einstakt breadcrumb lögun í MSDN skjöl sem mér líkar mjög vel við. Það hefur alla dæmigerða hönnunaraðgerðir eins og örvartákn og flokkalínur, en endanlegur hlekkur í keðjunni hefur sérsniðna niðurstöðu með auka síðum.
Ég hef aldrei séð þetta áður á einhverjum breadcrumb hönnun en það er ótrúlega dýrmætt fyrir notandann. Venjulega myndi það þurfa aðra leiðsagnarvalmynd til að fá aðgang að þessum tenglum en með vefsvæði eins og Microsoft eru svo margar síður að fara í gegnum.
Ekki sé minnst á skjöl geta verið frekar flóknar svo það er ekki auðveldasta efni til að búa til breadcrumbs fyrir. Þessi tækni er ljómandi og vel þess virði að nota ef þú ert með flókin stigveldi á vefsvæðinu þínu.
4. Apple
Á vefsíðu Apple hefur ég séð tonn af breadcrumbs á mörgum síðum eins og netverslunarsíðunum og vörusíðum. En einn minniháttar smáatriði sem náði auga mitt er fótsporasvæði með litlu brauðkrumb ofan við botninn.
Apple er mikið fyrirtæki með fullt af síðum og auðlindum. Þessi breadcrumb væri þess virði að bæta við efst á síðunni líka en það gerist örugglega ekki til að vera nálægt botninum.
Ég hvet hönnuðir til að prófa þetta og sjá hvernig það virkar. Footer breadcrumbs eru vissulega ekki norm heldur hjálpa þeir við sjónræna flakk.
5. TechRadar
Meirihluti breadcrumbs sem ég finn eru yfirleitt á fyrirtækjasvæðum eða viðskiptabúðum. En blogg hefur oft eigin brauðkrumur og eitt gott dæmi er TechRadar greinarsíða .
Hvert brauðkrumb er nokkuð lítið með hlekk beint í höfuðflokkinn og afrit af titil greinarinnar. Fyrir þessa tegund af blogi er erfitt að réttlæta breadcrumbs því það er ekki mikið af stigveldi.
En þetta virkar vel ef þú ert ekki með annan stað til að bæta við flokk hlutans á síðunni.
6. TutsPlus
Fyrir miklu nákvæmari breadcrumb hönnun kíkja á TutsPlus blogg . Hver grein er með litla brauðkrem efst á síðunni, þar á meðal aðal- og framhaldsflokkarnir.
Mér líkar þetta þessa hönnun mikið vegna þess að það blandast náttúrulega í fyrirsögn síðunnar. Svo í stað þess að afrita fyrirsögnina í breadcrumb og á fyrirsögnarkorti sameinar þetta allt í eina þáttinn þannig að
fyrirsögn er hluti af breadcrumb.
Athugaðu þetta notar ekki rétt Google áætlun svo það birtist ekki með breadcrumbs í leit. En miðað við að skaðlega hefur áhrif á smellihlutfall, þá mæli ég með hönnunar og notkunar á síðunni miklu meira en SEO ávinning (eða skortur á því).
7. Kælipottar
Hefðbundin breadcrumbs standa venjulega með nokkrum texta táknum eins og framsenda rista eða hægri ör bracket (>). Þessir vinna vegna þess að þeir hafa verið notaðir í áratugi og notendur þekkja þá.
En mér finnst alltaf gaman að sjá aðra brauðmyrkjuhönnunarþróun eins og á Coolspotters . Þeir nota sérsniðnar breadcrumb tengla sem hafa örvar byggð inn í hlekkinn þætti.
Þú getur fundið fullt af opinn uppspretta breadcrumb stíll bara eins og þetta fyrir þína eigin síðu. Það er frábær leið til að jazz upp þessa mjög hefðbundna síðuþætti.
8. MarketWatch
Að komast aftur í grunnatriði er á netinu fréttasíðan MarketWatch . Allir þeirra innri færslur lögun breadcrumb navs með hægri örvar örvum táknum nokkuð lítill texti.
Í þessu tilfelli held ég að lítill texti virkar vel. Það er ekki einmitt erfitt að nota breadcrumbs en þeir líða minna og minna marktæk en restin af síðunni.
Blogg og fréttasíður vinna betur með minni breadcrumbs vegna þess að raunveruleg áhersla er á innihaldinu. Samt er það gaman að passa þá í einhvers staðar og þessi hönnun er frábært dæmi.
9. Amazon
Allir elska Amazon fyrir mikið lager þeirra og ókeypis sendingarkostnað. En þeir hafa líka frábæran staður og það er engin leið að ég gæti farið yfir brauðmyrkjuhönnunina.
Margir vörusíður Hafa sett af brauðkornum nálægt mjög fljúgandi leiðsögn. Þetta er alltaf mjög langur vegna þess að flokkar Amazon verða djúp. Þetta er dýrmætt fyrir neytendur að sjá hvaða flokka gætu verið þess virði að vafra og verðmæt fyrir hönnuði / vefstjóra að kynna sér mikla vöruuppbyggingu Amazon.
En ef þú flettir niður á hverja vöru síðu finnur þú upplýsingar um "vöruupplýsingar" eða "vöruupplýsingar" með bestu seljanda skráningum.
Þessi eiginleiki notar breadcrumb tengla til að sýna hvar varan hefur selt það besta og hvetur gesti til að smella í gegnum þær tengdar flokka.
Brauðbrúnir Amazon eru aðdáunarlega langar svo þau eru þess virði að læra ef þú ert með síðuna með mjög djúpt stigveldi.
10. Etsy
The gegnheill online DIY / handverk ecommerce síða Etsy er stöðugt að efla hönnun þeirra. Það var stofnað árið 2005 og horfir á síðuna núna geturðu séð að þeir hafa gert nokkrar stórar breytingar á síðustu 10 árum.
Ef þú skoðar eitthvað flokkasíðan Þú finnur lítið brauðkorn í efst til vinstri horni. Þetta eru ekki eins áberandi í samanburði við hliðarstýringuna sem raunverulega líður eins og aðal leiðin til að leita.
En góð viðbótarkraftur er heildarfjöldi hlutafélagsins í flokknum. Etsy skráir hversu mörg samtals hlutir eru til sölu í hverri subcat eins og þú grafir dýpra inn á síðuna.
Eitt sem ég mun kvarta yfir er skortur á breadcrumbs á vörusíður. Þetta virðist vera raunverulegt eftirlit við HÍ og ég vona að þeir bætist við að fara áfram.
11. LinuxInsider
Þessi brauðmottahönnun er ekki sérstaklega falleg en það hefur einkenni sem grípur athygli mína.
Þú munt taka eftir "Næsta grein" tengil nálægt efstu hverri LinuxInsider staða . Þetta birtist beint við hliðina á breadcrumb svo það er eins og hluti af leiðsögninni.
Notendur sem hafa samskipti við breadcrumbs vilja yfirleitt grafa í þessum krumpaflokkum svo þessi auka hlekkur skilji. Allir sem hafa áhuga á Linux hugbúnaði gætu viljað hoppa beint í næstu grein í þeim flokki.
