Eine für Smartphones optmierte Version wird in Kürze verfügbar sein
5.0.UI Patterns    5.5.Hilfe und Tooltips

5.5.Hilfe und Tooltips

Für komplexere Eingabefelder bieten sich verschiedene Varianten von Tooltips an, die kurze inhaltliche Hilfestellung leisten oder Beispiele für das erwartete Eingabeformat anbieten.

Browser-Tooltips
Die einfachste und unkomplizierteste Variante zur Erstellung eines Tooltips ist die Verwendung des "title"-Attributs für z.B. das input-Tag bzw. Eingabefelder insgesamt. Es ist dabei generell ein empfehlenswertes Vorgehen, alle Eingabeelemente mit diesem Attribut zu versehen, da dieses z.B. auch von Screenreadern ausgelesen werden kann. Sofern keine zusätzlichen Informationen angeboten werden müssen oder sollen, würde in der Regel der Tooltip dann lediglich das Label nochmals wiederholen.


Tooltip-Widgets
Verschiedene JS-Frameworks bieten Tooltips auch als eigene Widgets an. Der Vorteil ist, dass sich diese Tooltips gestalten und in ihrem Verhalten besser steuern lassen. In der Regel bleibt ein solcher Tooltip solange sichtbar, solange ein Eingabefeld den Fokus hat.


Popover
Im Gegensatz zum Tooltip, der durch Mouseover angezeigt wird, wird ein "Popover" durch Klick auf ein Element sichtbar. Ein solches Popover bietet Platz für mehr Informationen als ein Tooltip.


Kontext-Hilfe
Falls ein Formular durchweg längere Beschreibungstexte benötigt, sollte geprüft werden, ob nicht innerhalb des Seitenlayouts ein bestimmter Bereich für kontextabhängige Hilfeinformationen fest platziert sein sollte. In einem solchen reservierten Bereich lassen sich dann auch etwas längere Erklärungstexte wesentlich besser darstellen.

 

Some Image
Abbildung

Darstellung eines Tooltip-Widgets

 

    Some Image
    Abbildung

    Darstellung einer kontextuellen Hilfe bei langen Erklärungs-Texten

      Usability-Hinweis

      • Tooltips, Popover und Kontext-Hilfe leisten einen essenziellen Beitrag zur Lernförderlichkeit und Selbsterklärungsfähigkeit einer Applikation und sollten deshalb auf jeden Fall eingesetzt werden.
      • Die durch Tooltips angebotene Beschreibung sollte für den Anwender einen Mehrwert bieten, die bloße Beschreibung eines Icons reicht nicht aus (Negativbeispiel Lotus Notes: Icon "Händedrucksymbol" wird beschrieben mit "Händedrucksymbol" - besser wäre z.B. "Diese Einladung wurde angenommen.")
      • Erklärungstexte im Tooltip sollten kurz gehalten werden (nicht mehr als ein, maximal zwei kurze Sätze).
      • Längere Texte sollten über ein Popover oder ggf. sogar über die Kontext-Hilfe angeboten werden.