Quickinfo vs. Hover-Karte
Ein Tooltip gibt ein kurzes Label oder einen Hinweis. Eine Hover-Card zeigt eine reichhaltigere Vorschau einer Person, eines Elements oder Links.
Verwenden Sie ein Tooltip, wenn wenige Wörter ausreichen. Verwenden Sie eine Hover-Karte, wenn eine Vorschau ersparen kann, eine andere Seite zu besuchen. Es muss auch über Tastatur und Touch funktionieren.
Sieh, was jedes Muster macht
Probieren Sie jedes Beispiel. Lesen Sie dann über den Job, für den es gemacht ist.
Quickinfo
Ein Tooltip ist ein kurzer Hinweis zu einem Bedienelement. Er öffnet sich, wenn die Maus darüber schwebt oder die Tastatur das Element fokussiert. Leute können ihn nicht wie einen Button nutzen.
role="tooltip"Wenn eine Symbolschaltfläche den Tastaturfokus erhält, erscheint „Link kopieren“. Der Fokus bleibt auf der Schaltfläche.
- Verwenden Sie es, wenn
- Verwenden Sie es, um eine kurze Steuerbeschriftung sowohl beim Mouse-Hover als auch beim Tastaturfokus zu erklären.
- Nutze es nicht, wenn
- Legen Sie niemals Aktionen, unbedingt zu lesende Anweisungen oder lange Inhalte in ein Tooltip.
- In Code verwendeter Name
role="tooltip"
Hover-Karte
Eine Hover-Karte ist eine reichhaltige Vorschau. Sie öffnet sich, wenn man über eine Referenz fährt oder sie fokussiert, ohne die Seite zu blockieren.
HoverCardFahren Sie mit dem Mauszeiger über den Namen eines Autors, um eine kurze Biografie und die Anzahl der Follower zu sehen. Das vollständige Profil bleibt geschlossen.
- Verwenden Sie es, wenn
- Verwenden Sie es für optionale Vorschau-Details, die den Menschen helfen, zu entscheiden, wohin sie als Nächstes gehen.
- Nutze es nicht, wenn
- Verstecken Sie niemals erforderliche Informationen hinter Hover, da Touch-Geräte diese möglicherweise nicht zuverlässig öffnen.
- In Code verwendeter Name
HoverCard
Schneller Vergleich
| UI-Muster | Am besten für | Nicht für | In Code verwendeter Name |
|---|---|---|---|
| QuickinfoTooltip | Verwenden Sie es, um eine kurze Steuerbeschriftung sowohl beim Mouse-Hover als auch beim Tastaturfokus zu erklären. | Legen Sie niemals Aktionen, unbedingt zu lesende Anweisungen oder lange Inhalte in ein Tooltip. | role="tooltip" |
| Hover-KarteHover Card | Verwenden Sie es für optionale Vorschau-Details, die den Menschen helfen, zu entscheiden, wohin sie als Nächstes gehen. | Verstecken Sie niemals erforderliche Informationen hinter Hover, da Touch-Geräte diese möglicherweise nicht zuverlässig öffnen. | HoverCard |
Vor dem Ausliefern
- 01
Schreibe auf, was die Person tun muss.
- 02
Testen Sie Tastatur, Fokus, Berührung, Zoom, Laden, leere und Fehlerzustände.
- 03
Sicherstellen, dass Leute dieselben Informationen ohne Hover oder Bewegung erhalten können.
- 04
Testen Sie mit echtem Inhalt auf kleinen und großen Bildschirmen.
Vergleichsanfrage zum Kopieren
Kopiere das, wenn dein Team Hilfe bei der Wahl zwischen den Mustern braucht.
Wähle das beste Muster aus Quickinfo (Tooltip), Hover-Karte (Hover Card) für unseren echten Nutzerfluss. Nutze diese Regel: Ein Tooltip gibt ein kurzes Label oder einen Hinweis. Eine Hover-Card zeigt eine reichhaltigere Vorschau einer Person, eines Elements oder Links. Schreibe die Aufgabe, die Inhaltsmenge und die Kosten eines Abbruchs auf. Prüfe Tastatur, Touch, Laden, Fehler und das Verhalten bei reduzierter Bewegung. Erkläre deine Wahl und baue dann die kleinste zugängliche Version mit dem Design-System des Projekts.