Breadcrumbs Eksempler på webdesign og bedste praksis

Inspiration – Eksempler på webstederAndrian Valeanu – 14 juni 2013 – 6 minutter LÆS

Breadcrumbs er et meget vigtigt element i design af websteder. For at gøre det, kan du implementere brødkrummer i dine webdesigns. Det øger standarden af dit websted og dermed tiltrækker seerne til webstedet. Dybest set er det tekstbaserede links. Normalt er skrifttypen på brødkrummer nogle få punkter mindre end den oprindelige tekststørrelse på webstedets indhold.

Når du bygger et websted, hvad skal du så fokusere på? Selvfølgelig er det webstedets brugervenlighed. Uanset om det er et uddannelseswebsted, et e-handelswebsted eller et informationswebsted, kan du ikke ignorere betydningen af webstedets brugervenlighed.

Besøgende skal få adgang til oplysninger fra webstedet på en problemfri måde. Hvis det er et e-handelswebsted, bør seerne ikke have problemer med at finde frem til deres foretrukne produkter. Hvis de finder det tidskrævende at få relevante oplysninger fra dit websted, vil de ikke tøve med at forlade webstedet og gå til søgesiden igen for at finde frem til et andet konkurrerende websted, der er mere nyttigt for dem. Derfor er det vigtigt at gøre webstedet nyttigt og effektivt for de besøgende.

Breadcrumbs efterlader, som navnet antyder, et spor, så webstedsbesøgende kan vende tilbage til deres destination på en mere enkel måde. Navnet er hentet fra eventyret “Hans og Grete”. Breadcrumbs er kendt som de tekstlinks, der normalt findes på websteder øverst på sidens hovedtekst; under sidens overskrift og/eller eventuelle bannergrafik, men over indholdet. Breadcrumbs planlægges i overensstemmelse med sidestrukturen på dit websted.

Hvis du f.eks. har en e-handelsbutik, og en beskuer befinder sig på en side om køleskabe, vil breadcrumb trailstrukturen vise hovedkategorierne, der fører til siden og tilbage til forsiden, i henhold til den rigtige rækkefølge, hvor de vises på siden. Seerne vil derfor finde brødkrummen som “Home>Elektronikudstyr>Hjemmeledskaber>Køleskabe”. Dette spor er typisk baseret på den specifikke mappestruktur i webstedets backend-system. Brugeren kan gå til en hvilken som helst af siderne i sporet ved at klikke på teksten. Hvis man f.eks. ønsker at gå til hjemmesiden, kan man gå direkte dertil ved at klikke på linket “home” på breadcrumb-sporet.

Breadcrumbs bruges hovedsagelig som navigationsmenuer. Der er flere måder, hvorpå en bruger kan navigere mellem forskellige sider på et websted. Navigationsmenuerne skal være brugervenlige og enkle. Derfor er breadcrumb en genial idé som navigationsmenu.

Nu er dette ikke kun gavnligt som navigationsmenuer, men også for søgemaskineoptimering. Især inden for e-handel, hvor konkurrencen kan være høj, er det vigtigt at blive højt placeret i søgemaskinerne. Da brødkrummer er baseret på hjemmesidens mappestruktur, placerer det nøgleord flere steder på hele webstedet. Derfor vil Breadcrumb, hvis “uldponcho” er et populært søgeord i din branche, skabe endnu et internt link til det relevante søgeord på dit websted.

Men mens du beskæftiger dig med Breadcrumb-menuerne, skal du dog huske én ting, nemlig at denne type navigation bør betragtes som en ekstra funktion, der øger webstedets tiltrækningskraft, og bør ikke erstatte nyttige primære navigationsmenuer.

Ved søgning efter de forskellige typer breadcrumb-menuer på internettet kan du finde stedbaserede, attributbaserede og stibaserede breadcrumb-navigationsmenuer.

Komponenten er udformet i sort farve for naturligt at skille sig ud fra den lyse baggrund og komme i fokus. Det teksturerede lærred samarbejder pænt med det overordnede kunstneriske design. Links opfattes hurtigt takket være skarp og formel typografi, og små huller mellem de enkelte elementer bidrager til læsbarheden.

Order

Mens alle elementer i UI er markeret af subtile gradienter, holder brødkrummerne sig derimod til mere rene flade udadvendte og monokrome baggrunde. Ikke desto mindre passer det ganske godt sammen med de andre og supplerer æstetikken takket være lignende farvelægning. Hjem-knappen tilføjer en klassisk appel. Lyse toner bruges til at afgrænse titler mere effektivt.

Breadcrumbs af Rob Dozier magnetiserer med et ekstremt elegant, rent og friskt udseende. Selv om navigationen er lavet i et lyst farveskema, fanger den stadig øjet. Den subtile skygge giver de pilformede bokse ekstra visuel vægt og hjælper dem derved til at skille sig ud fra den støjende baggrund. For tydeligt at angive den aktuelle position præsenteres det sidste element som en simpel indskrift.

Breadcrumbs/Error af Jason Mayo er en strømlinet navigationslinje uden huller eller imponerende funktioner. Den falder harmonisk ind i kompositionen og bliver en væsentlig detalje i brugergrænsefladen. En prægede effekt redder dog dagen. Den forsyner hver blok og titel med et klarere og skarpere udseende. Violet, der er en del af den primære farvepalet, anvendes til at fremhæve selve siden.

Design Fundamentals

Allison House dropper alle de klassiske pilformede detaljer og går blot efter mere simplistiske og elegante funktioner. Således ser komponenten naturlig og intuitiv ud og har en stærk pædagogisk stil, som er nødvendig for projektet. Hver blok indeholder en titel, der understøttes af et tilhørende ikon.

Som i det foregående eksempel arrangerer Michal Vasko alle links i en række og opgiver de grafiske detaljer til fordel for typografi. Elementerne er adskilt af små minimalistiske pile, der på grund af den blå farve diskret viser retningen. Men da elementet er integreret problemfrit i designet, og den grå farve ikke står i skarp kontrast til baggrunden, kan det let forsvinde ud af syne.

JomSocial Template

JomSocial Template er en helt anden sag. Brødkrumme-navigationen har en stor visuel vægt på grund af sin relativt store størrelse og lyse farve. Den rammer øjet uden at overvælde brugerne. Mohd Izuddin Helmi manipulerer med karakteristisk skrifttype, indre skygge, solid home-knap og nogle blide gradienter for at opnå et imponerende resultat.

Dette er et ret grundlæggende eksempel, men det har alligevel ret til at eksistere. Det er den enkleste måde at vise brugerne deres bevægelser på tværs af projektet på. Selv om det ikke har noget smukt udseende og har brug for en smule oprydning, opfylder det alligevel sin rolle ganske godt. Den indeholder alle de almindelige funktioner: titler, pile til retning og endda fremhævende farve og giver dermed de besøgende en brugbar navigationsassistent.

Image Gallery Management

Brødkrumme-navigationen udstråler slankhed og klarhed. Den har et rent og detaljeret udseende, der er opnået gennem et snedigt arbejde med typografi, whitespace og baggrund. Det sidste punkt har kraftigere bogstavformer i modsætning til andre for at lede opmærksomheden hen til den relevante side. Selvom navigationen bevarer et simplistisk udtryk, har den alligevel charme og passer som fod i hose her.

Gamerscouch.com redesign

Aaron Moody har med årvågenhed skabt frontenden af hjemmesiden, hvor brødkrummerne tager sin retmæssige plads og har et pænt, sofistikeret og trendy udseende. Navigationen supplerer det overordnede design og fanger stemningen i projektet. Mørk farve med et stænk af varm orange nuance skitserer komponenten og fremkalder positive følelser.

Konklusion

Som et valgfrit navigationshjælpemiddel, der ikke kun understøtter hovedmenuen, men også afslører hierarkiet og viser vejen til det aktuelle afsnit, er brødkrummer et effektivt instrument til at forbedre brugeroplevelsen.

Men desværre bliver det desværre ret ofte overset i forhold til design, selvom det bør behandles som ethvert almindeligt element i UI. De nævnte eksempler ovenfor stimulerer brugerne til at skabe smukke og intuitive breadcrumbs, der både vil opfylde sin mission og ikke vil være et ‘sort får’ i designet.