Explainer: Brødkrummes Betydning i Webdesign

Hvad kan UX design lære af Eventyret om Hans og Grethe?

Som bekendt blev Hans og Grethe sendt ud i skoven af deres forældre. For at finde hjem lavede Hans et spor af brødkrummer, imens de gik, for at kunne finde hjem igen. Det er det samme du skal bruge en brødkrumme til på din hjemmeside eller app. Brødkrummer fungere som et spor, som dine besøgende kan navigere efter, når de vil tilbage på din hjemmeside.

 

En brødkrumme er et sekundært navigationssystem, som viser dine besøgende, hvor på dit websted eller webapp de er. Det er vigtigt, at brødkrummen ikke erstatter den primære menu i toppen af siden. Brødkrummen skal ses som et supplement, der beskriver hvor i strukturen dine besøgende befinder sig. Brødkrummen skal også være en hjælp til dine besøgende, hvor de kan navigere tilbage til et højere (forrige) niveau i menustrukturen.

Hvornår skal du bruge en brødkrumme?

Her behøver du ikke en brødkrumme:

  • På hjemmesider med meget få sider, er der ikke behov for dette niveau af navigation, da dine besøgende nemt kan navigerer rundt uden hjælp fra en brødkrumme.
  • På enkeltsidet hjemmesider, hvor hele hjemmesiden er en side, ja så giver det sig selv, at her behøver du ikke en brødkrumme.

Nemt – så slap du nemt – denne gang 😉

 

Her er det godt at have en brødkrumme:

  • På hjemmesider og web apps, med flere niveauer af sider.
  • Hjemmesider med mange kategorier som webshops.
  • Hjemmesider og web apps hvor du deler indhold i nyhedsbreve eller på sociale medier.

Her hjælper brødkrummen dine besøgende, med at navigere i dit indhold. Hvis de for eksempel kommer fra dine SoMe kanaler, lander dine besøgende ofte på en side langt nede i din menu struktur. Herfra kan det være svært for de besøgende, at finde ud af hvor de er. Her er brødkrummen et uundværligt redskab til hurtigt at skabe sige et overblik over, hvor i strukturen de befinder sig og det er nemt for dem at navigere “tilbage/op” i din hjemmeside struktur.

Eksempel på menustruktur, der har behov for en brødkrumme
Eksempel på menustruktur fra Politico.com

Brødkrumme bedste praksis

Brødkrumme består af fire dele.

  1. Nuværende element/side – Siden hvor dine besøgende står på eller er landet på.
  2. Adskiller. En delestreg / pil eller anden der adskiller elementerne.
  3. Siden / siderne før den nuværende side.
  4. Forsiden.

Nuværende side – Her skal ikke være link på titlen. På de forrige sider skal der være link på.

Adskiller – Du må gerne bruge en separator der viser en fremadrettet bevægelse, der er med til at understrege hierarkiet af siderne.

Hvis brødkrummen bliver for lang til at være på en side, er det godt at forkorte den. Her er det vigtigt, at du altid bliver ved med at vise Hjem (første element) og den side der er lige før den nuværende side. Hvis side titlen på den nuværende side bliver for lang, kan du forkorte den bagfra med for eksempel tre punktummer.

Mobiltelefon

Brødkrumme og mobiltelefon kan være en udfordring, da der ikke er meget plads på en telefon. Det stiller størrer krav til brødkrummen.

Nogle gang kan det løses ved kun at vise det forrige niveau i brødkrummen, som her på HR-Industries hjemmeside.

Vil du vide mere?

Vil du vide mere om brødkrumme i webdesign er du meget velkommen til at kontakt mig på telefon 24 86 40 74 eller mail soren@bjornaa.dk.

Er du stødt på andre ord og begreber inden for UX- og digital design du gerne vil have forklaret, så skriv endelig til mig.

Læs mere:

Eksempel på Neumorphism knap.

Neumorphism: Balancen mellem Æstetik og Tilgængelighed

Neumorphism, eller “ny-skeuomorphism”, er de seneste år blevet mere udbredt inden for UI-design. Den har sine rødder i den klassiske skeuomorfisme, som forsøgte at efterligne fysiske objekter i digitale grænseflader, går Neumorphism et skridt videre. Det anvender subtile skygge- og lyseffekter for at skabe en blød, næsten taktil brugeroplevelse, der

Få den nyeste viden om digital design i din indbakke!

Tilmeld dig mit nyhedsbrev. Nyhedsbrevet vil indeholde viden om digital design og UX- og UI-Design, samt nyheder.


    Få den nyeste viden om digital design i din indbakke!

    Tilmeld dig mit nyhedsbrev. Nyhedsbrevet vil indeholde viden om digital design og UX- og UI-Design, samt nyheder.