Tooltip-Design: Nützliche Mikrointeraktionen mit Lerneffekt

Am Ende sind es die Mikrointeraktionen, die den Unterschied zwischen einer guten und einer weniger guten Website machen. In Zeiten, in denen sich das grundlegende Design mehr und mehr ähnelt, findet Abgrenzung zunehmend über Details statt. Ist deine Website kompliziert zu bedienen, kann das der entscheidende Faktor dafür sein, dass dein potenzieller Kunde beim Wettbewerber kauft, der das gleiche Angebot hat wie du, es aber bequemer zugänglich macht.

Meinen ausführlichen Beitrag zu Mikrointeraktionen im Allgemeinen findest du an dieser Stelle.

Karl Klammer, einer der Urväter moderner Tooltips

Auch Tooltips gehören zur Gruppe der Mikrointeraktionen, wenn sie auch im Vergleich nur einen sehr reduzierten und abgegrenzten Anwendungsbereich haben. Die Wikipedia definiert einen „Tooltip als ein kleines Popup-Fenster in Anwendungsprogrammen oder Webseiten, das eine Beschreibung zu einem Element der grafischen Benutzungsoberfläche zeigt.”

Als erste Version der heutigen Tooltips darf wohl die 1991 von Apple entwickelte und noch heute im Einsatz befindliche „Balloon Help” gelten. Bei dieser, auch als „Mouse Over” bekannten Form der Nutzerunterstützung werden kurze Texte in Sprechblasenoptik beim Überqueren so ausgestatteter Elemente mit der Maus angezeigt. Ein weiterer geläufiger Begriff für diese Art der Informationsvermittlung lautet „Quick Info”.

Microsoft erfand Mitte der Neunziger einen nicht so populären Helfer namens Karl Klammer, der die Funktion der Tooltips für Microsofts Office-Programme übernehmen sollte. Allerdings gehörte es bei jedem mir bekannten Office-Nutzer zu einer der ersten Amtshandlungen, Karl Klammer in den Optionen abzuschalten. Lass dich von dem Kerlchen bloß nicht inspirieren.

Dabei lag der Misserfolg des Karlchen Klammer wohl gar nicht so sehr in seiner Person. Er war schlichtweg schlecht gemacht. Voll animiert kam er aus irgendeiner Ecke des Screens angeschossen und bot wortreich seine Dienste feil. Diese Art von Arbeitsverzögerung geht auf kurze Sicht jedem Nutzer auf den Geist. Zudem war Karlchen nicht so intelligent, dass er erkannte, wo der Nutzer keine Hilfe (mehr) benötigte. Er war halt der omnipräsente Kollege, den du aus der Mittagspause kennst und der dir dort jedes Mal das Ohr abkaut und sich auch durch subtile und weniger subtile Hinweise nicht beirren lässt.

Tooltips im Webdesign

Im Webdesign gab es lange keinen Anwendungsfall für derlei Mikrointeraktionen. Erst der Aufstieg der Web-Apps in den letzten zehn Jahren legte den Einsatz von Tooltips nahe.

Heutzutage besteht weitgehend Einigkeit darüber, dass Tooltips im Onboarding-Prozess neuer Nutzer oder bei der Einführung neuer Features in bekannten Seiten von großer Wichtigkeit sind, im weiteren Nutzungsverlauf indes nur noch sparsam eingesetzt werden sollten.

Wo bringen Tooltips den größten Nutzen?

Generell sind die kleinen Info-Elemente ausschließlich dazu gedacht, die UX, also die Benutzererfahrung, zu verbessern. Sie dürfen nicht zum Selbstzweck geraten oder vorsichtshalber an allen möglichen Stellen platziert werden. Bei der Konzeptionierung von Tooltips solltest du deshalb so restriktiv wie möglich vorgehen und sehr genau überlegen, ob eine bestimmte Funktionalität durch den Tooltipp-Einsatz wirklich gewinnen kann.

Vor dem Tooltip nämlich steht das Design des Elements, für das du über einen Tooltip nachdenkst. Das bedeutet, dass du, wenn du ein Element selbsterklärend gestalten kannst, das lieber auch tun solltest, anstatt es dir einfach zu machen und einen Tooltip anzubringen.

Andererseits kann es durchaus Elemente geben, die sich zwar erklären, aber dennoch einen Tooltip gebrauchen können. Wie dieses hier:

Dennoch gibt es in modernen App-Oberfläche mit ihrem geringen Bildschirmplatz stets das Erfordernis, die kürzestmögliche Beschriftung eines Features zu wählen. Das kann in manchen Fällen zu potenzieller Verwirrung beim Benutzer führen. In diesen Fällen ist es vollkommen gerechtfertigt, eine kleine Sprechblase am Element einzublenden, die über die Funktionalität aufklärt. Das gilt auch, wenn du etwa ein Interface ausschließlich aus Icons baust und dabei auf nicht ganz eindeutige Piktogramme zurückgreifen musst.

Den größten Nutzen indes bringen Tooltips in zwei durchaus gängigen Situationen. Einmal benötigen Neulinge in der Benutzung deiner Web-App sicherlich Hilfe. Durch gezielt eingesetzte Schnellinfos kannst du deren Lernkurve maßgeblich verkürzen, was die Loyalität deinem Angebot gegenüber stärken dürfte.

Zum anderen sind Tooltips da besonders hilfreich, wo du deine Web-App stark erweitert oder verändert hast. Selbst eingefleischte Nutzer können in dem Falle Hilfe gebrauchen, weil sie anderenfalls möglicherweise deine tollen neuen Features gar nicht sehen und demzufolge auch nicht nutzen. Betriebsblindheit ist ein nicht zu unterschätzendes Problem und es besteht auch auf der Benutzerseite.

Spezifische Anwendungen

In manchen Fällen willst du vielleicht einen virtuellen Walkthrough durch eine spezifische Anwendungssituation machen. Hier kommt den Tooltips eine schulende Funktion zu. In diesem Fall wirst du weit obstruktiver gestalten wollen und etwa dafür sorgen, dass der Benutzer einen Tooltip erst dann schließen kann, wenn er die darin vorgegebene Aufgabe (beipielsweise klicke XYZ an) erledigt hat.

Bei dieser Form von Tooltips empfiehlt es sich zudem, innerhalb der kleinen Infoboxen anzuzeigen, an welchem Punkt der Tour der User sich gerade befindet.

Auf der anderen Seite gibt es Situationen, bei denen On-Hover am besten funktioniert. Das ist etwa da der Fall, wo der Tooltip lediglich eine Funktion erklären soll, die durch ein Icon eigentlich schon hinreichend erklärt wird. Als Beispiel können die Formatierungswerkzeuge des TinyMCE gelten.

Auch der Marketer kann mal einen legitimen Anspruch auf die Einbindung eines Tooltips erheben. So wäre es etwa möglich, einen Sonderrabatt oder eine besondere Aktion mit Hilfe eines Tooltips zu verstärken.

Wozu du Tooltips nicht verwenden solltest

Wie bereits erwähnt, sind Tooltips weder als Selbstzweck noch zur Verhübschung eines nachlässigen Designs geeignet. Es ist falsch, vorsichtshalber überall Tooltips zu hinterlegen.

Außerdem ist es nicht empfehlenswert, Tooltips in sich wieder mit Interaktionsmöglichkeiten zu versehen, sie also zu Bedienelementen anderer Art umzufunktionieren. Bei sehr komplexen Problemstellungen kann es mal sinnvoll sein, innerhalb eines Tooltips einen Link à la „Weitere Informationen finden Sie hier” unterzubringen. Die Regel sollte das aber nicht sein. Bedarf dein Userinterface wirklich derart vieler Informationen, hast du es noch nicht hinreichend durchdacht.

Eine Ausnahme stellen die weiter oben genannten Produkt-Touren oder virtuelle Walkthroughs dar. Hier ist es sogar sinnvoll, in den jeweiligen Tooltips eine Möglichkeit vorzusehen, per Klick zum nächsten Halt der Tour zu gelangen.

Tooltips sollten stets ausschließlich zur Unterstützung hinterlegt sein. Sobald ein Tooltip zwingend erforderlich wird, weil dein Benutzer sonst nicht weiterkommt, hast du etwas falsch gemacht. Dein Interface muss auch ohne Tooltips bedienbar sein.

Zudem legst du die kleinen Helfer so aus, dass sie sich spätestens ab der zweiten Benutzung selbst überflüssig machen. Sie sollen keine dauerhaft erforderliche Hilfestellung sein.

Was ist beim Design deiner Tooltips zu beachten?

Befassen wir uns mit dem Design im engeren Sinne. Tooltips sind kein Selbstzweck, also gestalten wir sie auch nicht so. Es gibt Script-Lösungen, die es uns erlauben, sogar Medien in den Tooltip einzubinden. Das ist in 99,9 Prozent aller Fälle keine gute Idee.

Tooltips müssen minimalistisch gehalten werden. Sie sollen nicht von etwas ablenken, sondern auf etwas hinweisen. Gleichzeitig dürfen sie aber auch nicht dermaßen gut versteckt sein, dass man sie gar nicht erst finden kann. Um das zu erreichen, zeigst du Tooltips nicht nur beim Hovern oder beim Klicken an, sondern in Abhängigkeit sinnvoller Zustände deiner Web-App im Allgemeinen. Das einfachste Beispiel dafür dürfte das Betreten der Landing Page sein.

Textlich gestaltest du Tooltips so knapp und präzise wie möglich. An dieser Stelle ist auch nicht der richtige Ort für Humor. Du schreibst in maximal zwei Zeilen hin, was es zu der Funktion, für die der Tooltip gilt, zu wissen gibt. Orientiere dich ruhig am Twitter-Style. Prägnante Formulierungen können nicht schaden.

Achte darauf, dass deine Tooltips keine anderen, jedenfalls keine wichtigen Elemente auf dem Bildschirm überlagern. Am besten sind die Infoboxen so positioniert, dass sie einen ansonsten freien Bereich des Bildschirms besetzen. Wenn es hierfür erforderlich ist, sie etwas weiter weg vom zu erklärenden Element zu platzieren, mache grafisch klar, dass der Tooltip X zum Element Y gehört, etwa mit einem Pfeil oder einer kleinen Animation. Günstiger ist es, wenn diese Vorgehensweise nicht erforderlich wird.

HINT.css – Tooltipps ganz ohne JavaScript, nur mit reinem CSS3 und HTML5

Tooltipps in HTML-Seiten entstehen grundsätzlich automatisch, sofern man seinen Elementen das Title-Attribut mitgibt. Das wird nicht nur zur Generierung von Tooltipps, sondern auch als Text für Lesesysteme und zu anderen Zwecken verwendet. Die Interpretation ist vom verwendeten Browser abhängig. Wer mehr Kontrolle möchte, setzt bereits seit Jahren auf Lösungen mit JavaScript. Kashagra Gour legt nun mit Hint.css eine Alternative vor, die komplett auf CSS und HTML basiert und dabei nicht minder schick aussieht.

Hint.css – Data-Attribute, CSS3 Transitions, Pseudo-Elemente und die Content-Eigenschaft

Hint.css ermöglicht einfache Tooltipps an Elementen, an denen das einen Sinn ergibt, allen voran also Texten, Links und Bildern. Um den Tooltipp anzeigen zu können, werden die Elemente mit zwei aufeinanderfolgenden Klassen versehen. Die erste lautet stets hint, während die zweite die Position oder die Farbe des Tipps definiert. Will man Position und Farbe festsetzen, fügt man eben drei Klassen hinzu. Das sieht dann beispielsweise so aus:

    Oh man! You are gonna self-destruct in 5 sec.

Im Bild:

Hier wird mit hint zunächst festgelegt, dass Hint.css das Element betreffen soll. Die Klasse hint--top positioniert den Tooltipp oberhalb des Span und hint--error definiert das rote Erscheinungsbild. Im korrespondierenden Attribut data-hint hinterlegt man den anzuzeigenden Text.

HTML5 Data-Attribute sind eine Möglichkeit, beliebige Daten innerhalb eines validen Quellcodes unterzubringen. Unter Verwendung von Data-Attributen ausgezeichnete Daten werden dem Betrachter nicht angezeigt und wirken sich nicht auf das Layout aus. Gleichwohl sind sie in der Seite enthalten und können einfach, wie etwa hier im Falle von Hint.css, weiterverarbeitet werden.

In seiner jetzigen Form verfügt Hint.css über Definitionen für hint--top, hint--bottom, hint--left und hint--right, die der Positionierung des Tooltipps dienen. Darüberhinaus stehen Farbdefinitionen für gängige Statusmeldungen bereit, als da wären hint--error, hint--info, hint--warning und hint--success. Wer möchte, dass der Tooltipp stets sichtbar bleibt und nicht erst via Hover getriggert werden muss, der verwendet (zusätzlich) hint--always.

Da Hint.css reines CSS darstellt, kann der Funktionsumfang natürlich von entsprechend CSS-Kundigen einfach erweitert werden. Das betrifft in allererster Linie die Farb- und Schriftpräsentation. Mit etwas Fantasie lässt sich Hint.css noch deutlich weiter aufbohren, zumal es in Sass entwickelt wurde und die Sass-Quellen ebenfalls frei verfügbar sind. Das Stylesheet steht auf Github unter MIT-Lizenz zur Download bereit und kann sowohl für private, wie auch kommerzielle Projekte eingesetzt werden.

Schon der Erkenntnisgewinn, dem man sich nicht entziehen kann, wenn man sich mit dem Stylesheet beschäftigt, lohnt den Aufwand. Insofern ist Hint.css rundheraus empfehlenswert. Erwähnenswert ist eventuell noch, dass CSS Transitions auf Pseudo-Elemente nur im Firefox funktionieren, was jedoch insofern unschädlich ist, als andere Browser die Tooltipps schlicht ohne Transitions rendern, was nicht minder ansehnlich ist.

Fazit: Ein gelungener Tooltip bedarf komplexer Vorüberlegungen

Du merkst, es gibt eine ganze Menge zu bedenken, wenn es um die Konstruktion des perfekten Tooltips geht. Es ist wie überall in der Webentwicklung: Je einfacher das Ergebnis aussieht, desto komplexer war die Aufgabe.

Wenn du dich erstmal an die Erstellung von Tooltips rantasten willst, empfehle ich das jQuery-Plugin Tooltipster. Später kannst du dann mit reinem CSS und HTML arbeiten.

Quellen zum Weiterlesen:

• How Facebook, Twitter, and Linkedin Use Tooltips for Feature Discovery | Ty Magnin, Appcues
• How to Use Tooltips As Microinteractions | Marc Schenker, Webdesigner Depot
• HINT.css – Tooltipps ganz ohne JavaScript, nur mit reinem CSS3 und HTML5 | Dieter Petereit, Dr. Web
• Warum Microinteractions über den Erfolg deiner Web-App entscheiden | Dieter Petereit, Dr. Web
• Tooltips: How to Design the Small But Powerful UI Pattern | Julia Chen, Appcues