Verktygstips som förklarar utan att stå i vägen
Hur man utformar verktygstips som hjälper: kort kompletterande information, hovra och tangentbordsåtkomst, beröringsalternativ och varför viktiga instruktioner aldrig hör hemma i ett verktygstips.
Core Takeaway
Verktygstips är korta meddelanden som visas med muspekaren eller tangentbordsfokus för att ge kompletterande information, till exempel vad ett mått betyder. Håll dem korta, lägg aldrig nödvändiga instruktioner i dem, gör dem tillgängliga med tangentbordet, tillhandahåll ett tryckbaserat alternativ på pekskärmar och lägg inte in länkar eller knappar inuti.
Vilket verktygstips är
Nielsen Norman Group definierar ett verktygstips som ett kortfattat, informativt meddelande som visas när en användare interagerar med ett element, initierat av en mus- eller tangentbordshovring (håller tangentbordets fokus på ett element). Eftersom de är beroende av hovring är verktygstips normalt inte tillgängliga på pekskärmar.
Kompletterande, aldrig nödvändigt
NN/g ger ett tydligt exempel på ett misstag: en webbplats som satte lösenordskrav i ett verktygstips. Information som människor behöver för att utföra en uppgift bör finnas på skärmen. Verktygstips passar definitioner, förklaringar av varför ett fält efterfrågas och etiketter för knappar som endast innehåller ikoner.
Tillgänglighet
Gör verktygstips användbara för alla:
- Öppna på tangentbordsfokus och håll muspekaren.
- Låt folk avfärda det med Escape utan att flytta fokus.
- Håll den öppen medan pekaren flyttas till den.
- Anslut den till avtryckaren så att skärmläsare meddelar det.
- Placera inte interaktivt innehåll inuti; använd en popover istället.
Verktygstips på pekenheter
Hover existerar inte vid beröring. Använd en synlig informationsikon som öppnar en liten popover vid tryck, eller visa förklaringen inline. För komplexa företagsmått är en infoikon bredvid etiketten ett välbekant mönster på varje enhet.
Rörelse och timing
En kort fördröjning innan visning undviker att verktygstipsen flimrar när pekaren passerar över element; när en är öppen kan angränsande verktygstips visas direkt. En snabb toning eller liten skala från avtryckaren hjälper människor att se var den kom ifrån. Håll det under cirka 150 millisekunder.
Nyckel Principles att komma ihåg
- Verktygstips är korta och kompletterande
- Göm aldrig viktiga instruktioner i ett verktygstips
- Stöd tangentbordsfokus och Escape
- Använd en klickbar infoikon på pekenheter
- Inget interaktivt innehåll i verktygstips
Vanliga frågor
Källor
- Tooltip Guidelines — Nielsen Norman Group