Kontextsensitive Hilfe

Bei der Erstellung einer umfangreichen Applikation stellen sich die Fragen wie die Hilfe zu pflegen und dem Benutzer anzubieten ist. Auf Grund der Möglichkeit bestehende Systeme zu nutzen und das Rad nicht neu zu erfinden, bietet es sich an einen externen Dienst für die Hilfe anzubinden. Im einfachsten Fall ist dieser externe Dienst eine simple Website mit statischen Inhalten. Weitergehende Möglichkeiten bietet die Verwaltung der Hilfetext in bestehenden CMS oder Wikis. Bleibt die Frage wie die Verknüpfung der eigenen Applikation mit der externen Datenquelle hergestellt wird.

Wenn die Applikation zu der Hilfe angeboten werden soll eine Website ist, bietet es sich an Links auf Hilfetext an geeigneter Stelle unterzubringen. Dies hat jedoch zur Folge, dass die Hilfelinks immer Platz beanspruchen und das Layout beeinflussen. Zudem muss beachtet werden, dass der Benutzer beim Aufruf der Hilfe die aktuelle Seite verlässt und damit noch nicht gespeicherte Daten verliert.

Ein eleganterer und wartungsfreundlicherer Ansatz ist es, einzelne Teile der Seite mit unsichtbaren Referenzen auf die Hilfe zu versehen. Nachdem ein Benutzer seinen Wunsch ausgedrückt hat, die Hilfe zu nutzen, können dann clientseitig Hilfetexte in Abhängigkeit des Kontexts angeboten werden.

Icons für das Aufrufen der Hilfe werden als Overlay über den Anwendungsteilen angezeigt. Die Hilfe erscheint damit direkt beim beschreibenen Anwenungsteil. In der fertigen Anwendung sieht dies dann so aus:

Ein Skript, realisiert als jQuery-Plugin, blendet Hilfe-Links (blaues Symbol) ein sobald der Benutzer die Maus über das erklärenswerte Objekt bewegt. Ein Klick auf den Hilfe-Link lädt dann den Hilfetext und präsentiert ihn dem Benutzer:

Übrigens lässt sich der Hilfetext, so gewünscht, vom Benutzer verändern. So können Benutzergruppen oder der Support einfach Hilfetexte erstellen, die auf die Bedürfnisse von Benutzergruppen zugeschnitten sind.

Das jQuery-Plugin, das geOps für die Darstellung der Hilfetext entwickelt hat, stellen wir auf GitHub zur Verfügung.  Intern verwendet das Plugin HTML5-Data-Attribute, deren Vorteile John Resig in seinem Blog grob umreißt. Das data-help-Attribut stellt die Verknüpfung eines Seitenelements zum Hilfetext her, das Plugin kümmert sich um die Darstellung – außer dem spezifizieren des Attributs und einem Aufruf des Plugins an zentraler Stelle braucht nichts an Ihrer Anwendung verändert zu werden. Die Pflege der Hilfetext kann in bekannten Systemen, beispielsweise im firmeneigenen Wiki, erfolgen.

Die Verwendung des Plugins erlaubt also bestehende Webanwendungen oder normale Websites mit einem Hilfesystem auszustatten. Aufwand für Implementation und Wartung beschränken sich hierbei auf ein Minimum.

geschrieben von Friedjoff Trautwein | 4.2.2011
Mehr zum Thema
7 min Lesezeit | Blog

Using Redis Subscriptions efficiently in Python

Inspired by the websockets broadcast feature we built a subscription multiplexer for redis subscriptions to subscribe to Redis channels and patterns once for all relevant clients.

weiterlesen
3 min Lesezeit | Blog

beyond tellerrand 2023

Am 11. September 2023 machten sich Mitglieder des Frontend-Teams von geOps auf den Weg nach Berlin, um an einer sehr interessanten und außergewöhnlichen Veranstaltung teilzunehmen: die beyond tellerrand Konferenz.

weiterlesen
3 min Lesezeit | Blog

React 18 Unterstützung für create-react-web-component

Wir wollen fünf Jahre alte Abhängigkeiten des Projekts trafimage-maps aktualisieren. Aber es scheint, dass eine Projektabhängigkeit veraltet ist. Was sollen wir tun? Das Projekt reparieren oder etwas anderes verwenden? Wir haben uns entschieden, das Projekt zu reparieren und der Gemeinschaft etwas zurückzugeben.

weiterlesen
8 min Lesezeit | Blog

Hinzufügen von Typ-Hinweisen zu vorhandenem Code in Python

Der Python-Interpreter behandelt Typen auf dynamische und flexible Weise ohne Einschränkungen bezüglich des Objekttyps, dem eine Variable zugewiesen ist. Seit Python 3.5 haben Programmierer die Möglichkeit, Typ-Annotationen in ihren Code einzufügen. Wir zeigen, wie man das macht.

weiterlesen
2 min Lesezeit | Blog

Next.js Routing mit Nginx

Automatisch eine Nginx Routing-Konfiguration für statische Next.js Projekte generieren.

weiterlesen
2 min Lesezeit | Blog

Von Backend bis Frontend: wir suchen Verstärkung

Wir bieten zwei Stellen als Fullstack- oder Backend-Entwickler:innen für unsere Offices in Freiburg und Olten. Wenn du deine Leidenschaft in einem starken Team einbringen willst, dann solltest du dich bewerben.

weiterlesen

Kontakt

geOps AG
Solothurnerstrasse 235
CH-4600 Olten

fon: +41 61 588 05 05
mail: info@geops.ch
geOps GmbH
Bismarckallee 10
D-79098 Freiburg im Breisgau

fon: +49 761 458 925 0
mail: info@geops.de
Impressum | Datenschutz | Bedingungen