Gå til sidens indhold

Vælg et tema

Luk

Vælger du ikke et tema, vælger vi et for dig. Du kan efterfølgende skifte tema i footeren.


Komponenter

Badges

Badges er grafiske markører, som du kan bruge til at gøre opmærksom på nyt eller vigtigt indhold.

Anvendes til

Brug badges til at gøre opmærksom på ændringer, nyt eller vigtigt indhold.

Anvendes ikke til

Brug ikke badge, hvis placeringen af det får brugeren til at tro, det er en knap. Test altid for dette, når du vil anvende badges.

Brug ikke badges på sider, hvor indholdet bliver udskiftet dynamisk. Fx på nyhedssider, hvor brugeren nemt kan se, hvad der er det nyeste indhold, når det blot står øverst.

Vejledning

Brug ord og begreber, som brugeren kan genkendes fra løsningen.

Skriv ord i badges normalt - fx skrives som “Nyhed”. Det er vigtig at ord skrives på den rigtige måde, da ord med kun store bogstaver vil læst op bogstav for bogstav med en skærmlæser.

Brug ikke hover, focus eller active styling til et badge, som ikke er interaktivt (fx link).

Bland aldrig interaktive og statiske badges i samme løsning. Brugerne forventer ensartet opførsel af komponenterne inden for løsningen.

Vær varsom med at markere for meget indhold med badges – brug dem kun, hvor det virkelig er meningsfuldt.

Sådan (do)

Eksempel på, hvordan en badge kan se ud

Sådan: Brug badges som et lille indholds-element, der fremhæver vigtige ændringer eller oplysninger.

Ikke sådan (don't)

Eksempel på, hvordan en badge ikke bør se ud

Ikke sådan: Undgå, at badges ser klikbare ud (og ligner tags eller knapper), fx fordi de har en skyggeeffekt og ser ud til at være hævet fra baggrunden. Det kaldes falsk affordance eller et falsk brugssignal (Postolovski, 2014).

Referencer

Natasha Postolovski: What Is The Most Underrated Word In Web Design? (2014)

Statusbadges

Positiv status

Neutral status

Advarende status

Negativ status