Breadcrumbs Webbdesign exempel och bästa praxis

Inspiration – Webbplatser exempelAndrian Valeanu – 14 juni 2013 – 6 minuter LÄSNING

Breadcrumbs är ett mycket viktigt inslag i webbplatsers design. För att göra det kan du implementera brödsmulor i din webbdesign. Det ökar standarden på din webbplats och lockar därmed tittarna till webbplatsen. I grund och botten är det här textbaserade länkar. Normalt är brödsmulornas typsnitt några punkter mindre än den ursprungliga textstorleken på webbplatsens innehåll.

När du bygger en webbplats, vad ska du då fokusera på? Naturligtvis är det webbplatsens användbarhet. Oavsett om det är en utbildningswebbplats, en e-handelswebbplats eller en informationswebbplats kan du inte bortse från betydelsen av webbplatsens användbarhet.

Besökarna måste få tillgång till informationen från webbplatsen på ett problemfritt sätt. Om det är en e-handelswebbplats ska tittarna inte ha några svårigheter att hitta sina önskade produkter. Om de tycker att det är tidskrävande att få relevant information från din webbplats kommer de inte att tveka att lämna webbplatsen och gå till söksidan igen för att hitta en annan konkurrerande webbplats som är mer användbar för dem. Därför är det viktigt att göra webbplatsen användbar och effektiv för besökarna.

Breadcrumbs, som namnet antyder, lämnar ett spår för webbplatsens besökare så att de kan gå tillbaka till sin destination på ett enklare sätt. Namnet är hämtat från sagan ”Hans och Greta”. Brödsmulor är kända som de textlänkar som vanligtvis finns på webbplatser överst på sidans huvuddel; under sidans rubrik eller/och eventuella bannergrafik, men ovanför innehållet. Brödsmulorna planeras i enlighet med sidstrukturen på din webbplats.

Om du till exempel har en e-handelsbutik och en besökare befinner sig på en sida om kylskåp, kommer brödsmulorna att visa huvudkategorierna som leder till sidan och tillbaka till startsidan i enlighet med den rätta ordningen för hur de visas på sidan. Därför kommer tittarna att hitta en brödsmula som ”Home>Electronics Devices>Home Appliances>Refrigerators”. Detta spår är vanligtvis baserat på den specifika mappstrukturen i webbplatsens backend-system. Användaren kan gå till någon av sidorna i spåret genom att klicka på texten. Om du till exempel vill gå till hemsidan kan du gå direkt dit genom att klicka på länken ”home” i breadcrumb trail.

Breadcrumbs används främst som navigeringsmenyer. Det finns flera sätt genom vilka en användare kan navigera mellan olika sidor på en webbplats. Navigationsmenyerna måste vara användarvänliga och enkla. Därför är breadcrumb en lysande idé som navigeringsmeny.

Inte bara som navigeringsmenyer utan även för sökmotoroptimering är detta fördelaktigt. Särskilt inom e-handel, där konkurrensen kan vara hög, är det viktigt att få en hög placering i sökmotorerna. Eftersom brödsmulor är baserade på webbplatsens mappstruktur placeras nyckelord på fler ställen på hela webbplatsen. Om ”ullponcho” är en populär sökterm i din bransch kommer Breadcrumb att skapa ytterligare en intern länk till det relevanta nyckelordet på din webbplats.

Men när du hanterar Breadcrumb-menyer är det dock en sak du måste ha i åtanke: denna typ av navigering bör betraktas som en extra funktion för att öka webbplatsens attraktionskraft och bör inte ersätta användbara primära navigeringsmenyer.

När du söker efter de olika typerna av brödsmultronmenyer på internet kan du hitta platsbaserade, attributbaserade och sökvägsbaserade brödsmultronnavigeringsmenyer.

Komponenten är utformad i svart färg för att på ett naturligt sätt sticka ut från den ljusa bakgrunden och komma i fokus. Den texturerade duken samarbetar fint med den övergripande konstnärliga designen. Länkarna uppfattas snabbt tack vare den skarpa och formella typografin och små luckor mellan varje objekt bidrar till läsbarheten.

Order

Men medan alla objekt i användargränssnittet präglas av subtila gradienter, håller sig brödsmulorna tvärtom till en renare platt utåtriktad och monokrom bakgrund. Ändå passar den ganska bra ihop med de andra och kompletterar estetiken tack vare liknande färgsättning. Hemknappen lägger till ett klassiskt tilltal. Ljusa toner används för att avgränsa titlar mer effektivt.

Breadcrumbs by Rob Dozier magnetiserar med ett extremt elegant, rent och fräscht utseende. Även om navigeringen är gjord i ett ljust färgschema fångar den ändå ögat. Den subtila skuggan ger pilformade rutor extra visuell tyngd och hjälper dem därmed att sticka ut från den bullriga bakgrunden. För att tydligt ange den aktuella positionen presenteras det sista objektet som en enkel inskription.

Breadcrumbs/Error av Jason Mayo är en strömlinjeformad navigeringsbar utan luckor eller imponerande funktioner. Den smälter harmoniskt in i kompositionen och blir en viktig detalj i användargränssnittet. En präglad effekt räddar dock dagen. Den förser varje block och titel med ett tydligare och skarpare utseende. Violett som är en del av den primära färgpaletten appliceras för att lyfta fram själva sidan.

Design Fundamentals

Allison House dumpar alla de klassiska pilformade detaljerna och satsar bara på mer förenklade och eleganta funktioner. Komponenten ser alltså naturlig och intuitiv ut och har en stark pedagogisk stil som krävs för projektet. Varje block innehåller en titel som förstärks av en tillhörande ikon.

Som i det föregående exemplet arrangerar Michal Vasko alla länkar i en rad och överger grafiska detaljer till förmån för typografi. Artiklarna separeras av små minimalistiska pilar som tack vare den blå färgen diskret visar riktningen. Men eftersom elementet är sömlöst integrerat i designen och den grå färgen inte står i stark kontrast till bakgrunden kan det lätt förloras ur sikte.

JomSocial Template

JomSocial Template är en helt annan sak. Brödsmulnavigeringen har en stor visuell tyngd på grund av sin relativt stora storlek och ljusa färgsättning. Den slår i ögat utan att överväldiga användarna. Mohd Izuddin Helmi manipulerar med distinkt typsnitt, inre skugga, solid hemknapp och några mjuka gradienter för att uppnå ett imponerande resultat.

Detta är ett ganska grundläggande exempel, men det har ändå rätt att existera. Det är det enklaste sättet att visa användarna deras rörelser i projektet. Även om det inte har något vackert utseende och behöver lite uppfräschning, fyller det ändå sin funktion ganska bra. Den innehåller alla vanliga funktioner: titlar, pilar för riktning och till och med färgmarkering, vilket ger besökarna en fungerande navigeringshjälp.

Image Gallery Management

Brödsmulnavigeringen är snygg och tydlig. Den har ett rent och detaljerat utseende som erhålls genom ett hantverksmässigt arbete med typografi, vitrymder och bakgrund. Den sista punkten har djärvare bokstavsformer i kontrast till andra för att rikta uppmärksamheten mot den relevanta sidan. Även om navigeringen behåller en förenklad känsla har den ändå charm och passar som handen i handsken här.

Gamerscouch.com redesign

Aaron Moody har vaksamt skapat webbplatsens framsida där brödsmulorna tar sin rättmätiga plats och har ett snyggt, sofistikerat och trendigt utseende. Navigationen kompletterar den övergripande designen och fångar stämningen i projektet. Mörk färgsättning med ett stänk av varm orange nyans beskriver komponenten och framkallar positiva känslor.

Slutsats

Som ett valfritt navigeringshjälpmedel som inte bara stödjer huvudmenyn utan också avslöjar hierarkin och visar vägen till det aktuella avsnittet är brödsmulor ett kraftfullt instrument för att förbättra användarupplevelsen.

Hur som helst, tyvärr, förblir den ganska ofta förbisedd när det gäller design, även om den bör behandlas som vilket vanligt element som helst av UI. De listade exemplen ovan stimulerar användarna till att skapa vackra och intuitiva brödsmulor som kommer att uppfylla sitt uppdrag samt inte kommer att vara ett ”svart får” i designen.