Knapper og links

Få et overblik over den bedste måde at lave knapper og links på, som følger vores design.

Placering af links i artiklen

Placér altid linket efter et tekstafsnit i stedet for som en del af teksten.

Grunden til dette er ganske simpelt, at det er nemmere for læseren at få øje på linket, hvis det er trukket ud af teksten. Derudover sikrer vi også, at brugeren læser afsnittet færdigt, før han eller hun trykker på linket.

Se eksemplet her, hvor linket er en del af teksten:

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Læs mere om fødevarer her eget risus varius blandit sit amet non magna.

Op imod dette eksempel, hvor linket er trukket ud af teksten, og markeret med en knap:

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.

Læs mere om fødevarer her

Linket står for sig selv og er nemmere for brugeren at få øje på.

Hvilken knap skal jeg vælge?

Designet giver mulighed for at vælge mellem tre forskellige knapper:

Knap med farvet baggrund   Knap med omrids    Link med pil

 

På Fødevarestyrelsens hjemmeside bruger vi oftest Link med pil

Brugen af knapperne afhænger primært af:

  • Vigtigheden af linket
  • Linkets længde
  • Mængden af links

Vigtigheden af linket

En knap kaldes også en "Call-to-action". Det vil sige, at den er handlingsanvisende. Vi vil gerne lede brugeren hen mod knappen, derfor er den designet på en måde, som påkalder sig mere opmærksomhed end et traditionelt link.

Hvis en bruger ser en "skov" af links, som alle ligner knapper, kan det virke overvældende og svært for brugeren at tage stilling til, hvilket link de skal vælge.

Brug derfor knapper (med baggrundsfarve eller omrids) sparsomt, hvis du har en side med mange links. Hvis brugeren bliver præsenteret for syv forskellige knapper, alle med farvet baggrund og på den samme side, vil det være svært at tage en beslutning.

Derfor anbefaler vi, at du laver links ud fra disse principper:

  • Hvis der er mange relaterede links, anbefaler vi at lave en linkliste (læs mere om dette nederst i dette afsnit).
  • Hvis der er et par enkelte links, som er vigtige, brug da knapper (også kaldet "call-to-actions"). 
  • Hvis du sidestiller to eller flere knapper, brug da knapper med det samme udtryk (knap med farvet baggrund eller omrids), medmindre du ønsker at fremhæve én knap over de andre.

Linkets længde

Hvis du oplever at skulle lave et langt link, anbefaler vi at bruge et link med pil. Grunden til dette er, at knapper med meget tekst kan risikere at bryde i flere linjer, hvilket især sker på mindre tekstbokse samt i mobil.

Se to eksempler sidestillet her, hvor linket med pil er at foretrække, da der er tale om et langt link på en lille plads:

Vehicula Elit Venenatis

Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas faucibus mollis interdum.

Læs mere om emnet i vores årsrapport fra 2017 (PDF, åbner i nyt vindue)

Vehicula Elit Venenatis

Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas faucibus mollis interdum.

Læs mere om emnet i vores årsrapport fra 2017 (PDF, åbner i nyt vindue)

Mængden af links

Hvis du har en lang liste af links, kan det virke overvældende for læseren at liste dem op i knapform som vist her:

Årsrapport 2017 (PDF)

Årsrapport 2018 (PDF)

Årsrapport 2019 (PDF)

Årsrapport 2020 (PDF)

Årsrapport 2021 (PDF)

Årsrapport 2022 (PDF)

Brug i stedet links med pil eventuelt bokset ind i et linklistemodul som vist her:

Flere links i en navigation

Det kan ske, at du har brug for at oprette en simpel undernavigation på en side. Vælg her et linklistemodul med "Vis som horisontal liste"-indstillingen (den finder du i indstillinger til linklistemodulet). Brug enten knapper med omrids eller farvet baggrund i dette modul som vist her:

Det er ikke vigtigt, hvilken slags knap du vælger, men det er vigtigt, at du er konsekvent i valget af knapper, så der ikke er enkelte knapper, der skiller sig ud og kalder på mere opmærksomhed end andre (medmindre det er intentionen).

Åbne link i ny fane

Hvis du linker til en fil som f.eks. en PDF eller et eksternt link til en anden hjemmeside end fvst.dk, skal linket åbne i en ny fane. Eksempler kunne her være:

Læs vores seneste rapport om emnet (pdf)

Læs mere om fugleinfluenza i hættemåger hos Statens Serum Institut

Du skal hakke af i feltet 'Åbn i ny fane' og selv skrive i linkets "title"-felt, at linket åbner i en ny fane:

I multibokse: giv dit overskriftslink en titel

Hvis du laver en boks, hvor overskriften er et internt link, skal du udfylde titelfeltet med en beskrivende titel. Titlen kan evt. være ens med linkteksten, som i eksemplet nedenfor: