Hoe lang mag een tooltip zijn?
Een tooltip mag één regel zijn, hooguit twee. Meer tekst hoort niet in een ballonnetje dat vanzelf verdwijnt zodra je je muis wegbeweegt.
Reken op maximaal tien woorden.
Heb je er meer nodig, dan is een tooltip het verkeerde middel.
Waarom kort
Omdat je bezoeker niet weet hoe lang hij heeft. Zweven is een ongemakkelijke leeshouding.
Meer daarover lees je bij accessibility.
Wat je doet bij meer tekst
Een popover die na een klik opent en blijft staan. Of gewoon zichtbare tekst op je pagina.
Meer daarover lees je bij het verschil met een popover.
De breedte
Houd je ballon smal, rond de driehonderd pixels. Een brede ballon over je hele scherm leest slecht.
Meer daarover lees je bij frontend.
Mijn vuistregels
- Maximaal tien woorden.
- Ballon niet breder dan driehonderd pixels.
- Geen opsommingen of links erin.
- Bij meer tekst: een popover.
Die derde is een teken dat je het verkeerde middel gebruikt.
Wat je erin schrijft
Wat het element doet, in gewone taal. “Verwijder dit item” en niet “Actie uitvoeren op geselecteerd object”.
Meer daarover lees je bij navigatie.
Op een telefoon
Daar is minder ruimte, dus houd het nog korter. Of laat de tooltip helemaal weg.
Meer daarover lees je bij mobile first.
Wat ik in de praktijk zie misgaan
Er wordt een heel alinea in gepropt omdat er verder geen plek voor was.
Dat gebeurt bijna altijd bij formulieren: de uitleg bij een veld past niet in het ontwerp, dus gaat hij in een ballonnetje. Drie zinnen, soms met een opsomming erin, in een tekstje dat verdwijnt zodra je je muis wegbeweegt.
Op een telefoon zie je het nooit, en met een toetsenbord kom je er meestal niet bij.
Het gevolg is voorspelbaar: mensen vullen het veld verkeerd in, krijgen een foutmelding en haken af. Precies op het punt waar je ze wilde hebben.
Wat ik aanhoud is dat uitleg die je nodig hebt om iets goed in te vullen, gewoon onder het veld staat. Zichtbaar, altijd. Dat kost een paar regels ruimte en het scheelt je aantoonbaar afgebroken aanvragen.
Wat er dan nog overblijft voor zo’n ballonnetje is hooguit een verduidelijking van een woord. Tien woorden, meer niet.
Meer daarover lees je bij usability.