Vælg et tema
Vælger du ikke et tema, vælger vi et for dig. Du kan efterfølgende skifte tema i footeren.
Tooltip
Et tooltip kommer frem, når musen er over det element tooltippet henviser til, fx et ikon, og forsvinder igen, når musen fjernes.
Retningslinjer
Anvendes til
Brug tooltip til præcisering af specifikke elementer i brugergrænsefladen. Tooltips kan enten vises ved hover over deciderede hjælpeikoner eller ved andre elementer såsom ikoner, billeder, enkelte ord i tekststykker eller til tekst, som er forkortet i brugergrænsefladen. Tooltips bør altid bruges ved ikoner, som fremstår uden tekst.
Anvendes ikke til
Tooltips anvendes ikke til informationer, der er essentielle for at brugeren kan gennemføre løsningen. Hvis indholdet er vigtigt for brugerens succes, så placer indholdet på siden som brød- eller hjælpetekst i stedet for.
Vejledning
Gør indholdet i tooltips så kort og koncist som muligt, da længere tekster er sværere at skimme og blokerer andet indhold på skærmen i højere grad.
Vær konsistent i brugen af tooltips, så brugeren ikke skal gætte sig til, om der er tooltips eller ej.
Gør det let at se, hvilket element tooltippet hører til.
Brug altid tooltips til klikbare ikoner uden label.
Sørg for at tooltips er tydelige at se og læse.
Placer tooltips så de ikke skygger for det indhold på siden som de relaterer til. Placeres de forkert kan brugeren blive nødt til at lukke og åbne tooltip igen for at forstå sammenhængen.
Sættes der tooltip på et ord i en tekst, markeres ordet med en stiplet linje under. Brug det i begrænset omfang, da det let virker forstyrrende.
Tooltips skal aldrig gentage tekst, som allerede er at finde på siden.
Vær opmærksom på, at tooltips på klikbare elementer med anden funktion ved klik ikke bliver vist på mobile løsninger. Tooltips på andre elementer, fx deciderede hjælpeikoner eller markerede ord i tekststykker, vises på mobil ved klik.
Tooltips vises på hover med en ganske kort forsinkelse på 0,3 sekunder. Dette er for at sikre, at tooltippet kun vises, når brugeren bevidst er stoppet ved elementet og ikke blot tilfældigt har bevæget musen over det (Harley, 2015).
Sådan (do)
Sådan: Brug tooltips til ekstra information, som det skønnes at kun få brugere vil behøve for at udføre opgaven (Joyce, 2019).
Ikke sådan (don't)
Ikke sådan: Brug ikke tooltips som erstatning for hjælpetekster eller for at spare plads. Tooltips anvendes ikke til vigtige informationer eller hjælp, som de fleste brugere har brug for, eller som ikke er umiddelbart intuitive, fx ved særlige krav til formatering (Joyce, 2019).
Se komponenten i eksempelløsninger
Referencer
- Aurora Harley (2015): Timing Guidelines for Exposing Hidden Content
- Luke Wroblewski: Web Form Design: Filling in the Blanks (2008)
- Alita Joyce: Tooltip Guidelines (2019)
- Tilgængelige tooltips
- Tooltip guidelines
Varianter
Klikbart ikon med tooltip
Tekst med tooltip
Her er der ord med tooltip inde i en tekst