• Facebook
  • Google+
  • Twitter
  • XING
14.03.2015

Pop-ups und adaptive Hilfe bekommen einen Refresh

Adaptive Hilfe-Inhalte, die in kleinen Overlay angezeigt werden, können Nutzern dabei helfen, schnell Antworten auf einfache Fragen zu finden. Da sie allerdings die Website teilweise verdecken und eventuell die Bedürfnisse der Nutzer nicht korrekt vorhersagen können, könnten die Nachteile dieser Methode ihre Vorteile überwiegen.

© mipan - Fotolia.com

 

by Katie Sherwin (deutsche Übersetzung) - 15.03.2015

 

Während ich unseren Kurs über Emerging Pattern im Webdesign (engl.) aktualisierte, bemerkte ich, dass bekannte Websites, wie Facebook und Google AdWords ähnliche Ansätze anwenden, um Hilfe-Inhalte zu präsentieren.

Der Trend besteht aus zwei Hauptkomponenten:

1. Hilfe-Inhalte werden in kleinen Overlay-Fenster präsentiert, ähnlich wie bei einem Pop-up (mit der Ausnahme, dass diese Overlays vom Nutzer initiiert werden, was sie weniger störend und nervtötend erscheinen lässt, als die vom System initiierte Pops-ups).

Hilfe-Overlay von Facebook

Facebook.com: Indem Sie über den Dropdown-Pfeil Hilfe auswählen, öffnet sich in der rechten oberen Ecke das Hilfefenster.

Hilfe-Overlay von Google AdWords

Google AdWords: Nachdem im Einstellungsmenü (links) Hilfe gewählt wurde, öffnet sich das Hilfefenster (rechts).

2. Es wird kontextbezogene, adaptive Hilfe angeboten, indem Hilfethemen basierend auf der aktuellen Situation der Nutzer vorgeschalgen werden, - typischerweise in Bezug auf ihre aktuelle Position innerhalb der Anwendung.

adaptive Hilfe bei Facebook

Facebook.com: Da die Veranstaltungsseite geöffnet ist, vermutet das adaptive Hilfe-System, dass die meisten Nutzer Fragen betreffend Veranstaltungen haben, weshalb es vier Themen präsentiert, die mit der Verwaltung von Veranstaltungen zusammenhängen.

Diese Komponenten sind nicht neu. Forscher, die im Bereich der Mensch-Computer-Interaktion tätig sind, studieren Hilfesysteme bereits seit den späten 1980er Jahren. Microsoft Office Produkte verwenden seit Jahren kleine Pop-up Fenster für ihre Hilfesysteme. Neu ist allerdings, dass einflussreiche Branchenführer des Internets derartige Systeme anwenden. Wie wir es beim Lupen-Symbol und dem Flat Design bemerkt haben, gilt: sobald bekannte Websites und Anwendung ähnliche Interaktionsmuster implementieren, werden sie von anderen Websites kopiert. Es ist nur eine Frage der Zeit, bis andere Websites auftauchen, die ihre Hilfe-Inhalte auf diese Weise präsentieren. (Natürlich sollten Designer nie ein anderes Muster kopieren, ohne zuerst zu ermitteln, ob es in ihrem eigenen Kontext funktionieren wird - oder ob es überhaupt funktioniert).

Goldene Regeln für eine gute Hilfe

Bevor wir uns die Einzelheiten dieser Ansätze ansehen, sollten wir daran denken, dass die Bereitstellung von Hilfe eine der 10 Usability-Heuristiken (engl.) ist. Hilfesysteme sollten 3 ausschlaggebende Eigenschaften aufweisen:

  1. Störungsfreie Verfügbarkeit. Hilfe sollte in jeder Anwendung und auf jeder Website zur Verfügung stehen, sollte allerdings verborgen bleiben, bis sie der Nutzer benötigt. Wenn Hilfe benötigt wird, sollte sie einfach zu finden sein.
  2. Prägnant und dennoch anschaulich, in einfacher Sprache. Hilfe-Nachrichten sollten aus so wenigen Worten wie möglich bestehen und in einer Sprache verfasst werden, die für Laien verständlich ist. (Es ist erstaunlich, wie viele nutzlose Hilfesysteme einfach die systemeigene Sprache wiederholen: "Die Auswahl des XY-Kontrollkästchens aktiviert die XY-Funktion").
  3. Unaufdringlich. Nutzer sollten ihre Aufmerksamkeit ganz einfach wieder auf die ursprüngliche Aufgabe lenken können, nachdem sie die Hilfe in Anspruch genommen haben.

In diesem Artikel sehen wir uns die Vor- und Nachteile kleiner Overlay-Fenster und kontextbasierter Hilfe an und geben einige Empfehlungen ab, ob und wie diese implementiert werden sollten.

Kleine Overlay Hilfe-Fenster

Kleine Overlay Hilfe-Fenster sind nützlich, wenn mehr Informationen angezeigt werden müssen, als in ein Tooltip (Quickinfo-Fenster) passen. Auf der anderen Seite aber nicht so viel Text benötigt wird, dass es sich lohnt, die Aufmerksamkeit des Nutzers auf eine komplette Hilfeseite zu lenken.

Weniger nervtötend als ein Pop-up

Die Hilfe-Overlays, die hier vorgestellt werden, sind keine modalen Pop-up Fenster. Sie öffnen sich im Browserfenster und ermöglichen den Nutzern, weiterhin mit dem Hauptfenster zu interagieren, obwohl das Hilfe-Fenster geöffnet ist. Der Hauptunterschied zwischen diesen Overlays und einem traditionellen Pop-up ist, dass diese vom Nutzer initiiert werden. Da der Nutzer nach Hilfe sucht, ruft das Erscheinen des Fensters nicht dieselbe Überraschung und Verärgerung hervor, welche die unaufgeforderten Pop-up Fenster zur Folge haben.

Die Nutzer bleiben am selben Ort

Ein Vorteil der Präsentation von Hilfeinformationen auf der Seite des Hauptinhalts ist, dass Nutzer ihre aktuelle Position nicht verlassen müssen, um sich Hilfethemen durchzulesen. Das entspricht der oben stehenden Regel #3, da es minimale Wechsel zwischen Inhalten vorhersieht und es den Leuten einfach macht, ihre Arbeit am Ausgangspunkt fortzusetzen (ein Vergleich aus dem echten Leben: es ist einfacher, wenn jemand aus der Technikabteilung zu Ihrem Schreibtisch kommt, um ein Problem zu lösen, als wenn sie Ihr Büro verlassen und in die IT-Abteilung gehen müssen, um Hilfe zu holen.)

Anleitungen werden nebeneinander präsentiert

Bei Schritt-für-Schritt Anleitungen oder Leitfäden, die mit bestimmten Teilen der Nutzeroberfläche in Verbindung stehen, ist es für Nutzer viel einfacher, ihren Blick zuerst auf ein Hilfe-Fenster und danach sofort auf den Hauptbereich zu richten, als zwischen Seiten hin und her zu springen. Hilfe-Informationen, die auf separaten Seiten präsentiert werden, belasten das Kurzzeitgedächtnis der Nutzer, da sich diese an die gelesenen Informationen erinnern müssen, um dieses Wissen dann anzuwenden, sobald sie zu ihrem Arbeitsbereich zurückgekehrt sind.

Wichtige Bereiche des Bildschirms werden blockiert

Im Vergleich zum Öffnen einer neuen Seite oder eines Pop-up Fensters, das bis zu ¾ des Bildschirms blockiert, bleibt durch diese kleinen Einblendungen ein Grossteil des Bildschirms sichtbar. Abhängig von der Nutzeroberfläche könnten einige Elemente, auf die Nutzer zugreifen müssen, aber dennoch hinter dem Fenster versteckt sein.

Bildschirmelemente werden vom Overlay verdeckt

Facebook.com: Anleitungen im Hilfe-Fenster führen Nutzer zu einem Element in der oberen rechten Ecke des Bildschirms, das von der Einblendung verdeckt wird. Nutzer müssen das Fenster schliessen, um den darunter liegenden Button zu finden und - falls sie weitere Hilfe benötigen - die Hilfe erneut öffnen und von vorne beginnen.

  • Empfehlung: Geben Sie Nutzern mehr Kontrolle über die im Fenster angezeigten Dingen, indem sie das Fenster minimieren, schliessen oder bewegen können. Diese Funktion ist besonders für Anwendungen und Dashboards wichtig, welche mit grösserer Wahrscheinlichkeit über Tools verfügen, die auf dem ganzen Bildschirm verteilt sind.

verschiebbares Fenster von Google Play

Google Play: Nutzer können das eingeblendete Fenster nach Belieben verschieben und dadurch versteckte Bereiche der Nutzeroberfläche erreichen.

Fenster minimieren bei TurboTax
Fenster minimieren bei TurboTax

TurboTax: Das eingeblendete Fenster verfügt über eine eindeutige Möglichkeit, um das Fenster zu minimieren (oben), wodurch Nutzer einen grösseren Bereich des Bildschirms sehen (unten). Das Maximieren des Fensters zeigt die Hilfe wieder im vorhergehenden Zustand an.

Oberflächliche Erklärungen

Die Grössenbeschränkung eines kleinen, eingeblendeten Fensters könnte eine effektive Möglichkeit sein, um sicherzustellen, dass Hilfe-Informationen prägnant und treffend präsentiert werden (was die oben stehende Regel #2 befolgt). Für einfache Fragen und Antworten, wie das Auffinden einer Telefonnummer, genügt ein kleines Fenster. Für komplexere Fragen benötigen Nutzer allerdings mehr Kontext und Details, als eine knappe Zusammenfassung bieten kann. Fortgeschrittene Nutzer bevorzugen oft ganzseitige Hilfedatenbanken, in denen eine Funktion zur Gänze erklärt werden kann.

  • Empfehlung: Beziehen Sie einen Link mit ein, um mehr Informationen auf einer Hilfeseite zu erreichen.

Link zu Hilfezentrum vom Google AdWords

Google AdWords: Einen Link anzubieten, über den der Artikel (und vermutlich weitere Details und weiterführende Themen) angezeigt werden kann, ist eine effektive Methode, um Nutzer zu unterstützen, die mehr Kontext und detaillierte Informationen benötigen.

Adaptive Hilfe

Adaptive oder kontextbasierte Hilfesysteme bieten Nutzern Vorschläge, die auf ihren aktuellen Handlungen oder ihrer Position in der Anwendung basieren. Sie werden auch intelligente Hilfesysteme genannt und liefern kontextabhängige Informationen. Das einfachste Beispiel für die kontextuelle Hilfe ist der Tooltip (auch Quickinfo genannt).

intelligentes Hilfesystem Clippy

Die animierte Büroklammer Clippy von Microsoft ist eines der bekanntesten intelligenten Hilfesysteme. Wenn das System beobachtete, dass ein Nutzer "Lieber Jakob" eingab, erschien Clippy in der Ecke und bot Hilfe beim Verfassen und Formatieren eines Briefs an. (Bildquelle: Wikipedia.org).

Die Fragen von Nutzern vorherzusagen kann das Finden von Antworten beschleunigen

Clippy von Microsoft war nicht sehr beliebt, da die Büroklammer ohne direkte Aufforderung des Nutzers erschien. Wie Pop-up Fenster, überraschte und störte die Animation diejenigen Nutzer, die keine Hilfe in Anspruch nehmen wollten (was gegen Regel #1 im oberen Bereich dieses Artikels verstösst). Die Absichten waren aber gut: sagen Sie die Bedürfnisse der Nutzer voraus und bieten Sie einen Shortcut zu weiterführenden Informationen an. Tooltips eignen sich gut dafür, da sie ein bestimmtes Element der Nutzeroberfläche erklären, während der Nutzer den Mauszeiger darauf hält, darauf klickt oder das Element antippt.

Hilfesysteme, wie jene von Google AdWords und Facebook, liefern Links zu tieferliegenden Hilfe-Inhalten, die mit der aktuellen Situation des Nutzers in Verbindung stehen. Diese Links können - sofern sie die Bedürfnisse des Nutzers korrekt vorhersagen - den Weg zur gewünschten Information verkürzen und funktionieren auf ähnliche Weise wie Mega-Menüs in der Navigation.

kontextsensitive Hilfe von Google AdWords

Google AdWords: Wenn unter Kampagnen der Karteireiter Anzeigengruppen ausgewählt wird, schlägt das adaptive Menü beliebte Themen vor, die mit Kampagnen und Ad Groups in Verbindung stehen.

Systeme können nicht alles vorhersagen und Nutzer wissen das

Falls das System Themen vorschlägt, an denen Nutzer nicht interessiert sind, werden diese schnell lernen, die Vorschläge nicht zu beachten. (Das zweite Problem von Clippy war, dass es die Probleme der Nutzer schlecht vorhersagen konnte). Doch sogar Systeme, deren Vorhersagen extrem korrekt sind, sehen sich mit Problemen konfrontiert. Sie müssen vor allem dagegen ankämpfen, was Menschen von anderen Hilfesystemen, die sie in der Vergangenheit verwendet hatten, gelernt haben - das System weiss also nicht, was Menschen wollen. Aus diesem Grund lesen sich viele Nutzer die vorgeschlagenen Themen erst gar nicht durch - sie nehmen an, dass die Vorschläge ihre Frage nicht beantworten werden.

  • Empfehlung: Verwenden Sie intelligente Hilfesysteme nur dann, wenn diese die Ziele der Nutzer mit hoher Präzision vorhersagen können. (Designer, die diesen Trend kopieren möchten, sollten bedenken, dass die Unternehmen, die diese Systeme verwenden, normalerweise über wesentlich höhere Budgets für Entwicklung und Wartung verfügen, als die meisten anderen Unternehmen).
  • Empfehlung: Die vorgeschlagenen Hilfethemen sollten schnell überflogen werden können und mit Keywords versehen werden. Nutzer geben vorgeschlagenen Themen eher eine Chance, wenn sie leicht zu überfliegen sind.

Beispiele Auflistung häufiger Fragen

TurboTax.com (links) präsentiert die häufigsten Fragen in ganzen Sätzen und Auszüge der Antworten, wodurch es länger dauert, diese Liste zu überfliegen, als die kurze Themenliste auf Facebook.com (rechts).

  • Empfehlung: Das Suchfeld sollte auch im Hilfefenster zu sehen sein, damit Nutzer eine alternative Möglichkeit haben, um nach den gewünschten Inhalten zu suchen. Bieten Sie ausserdem einen Link zum kompletten Hilfezentrum an, da fortgeschrittene Nutzer eventuell die Vorschläge überspringen und lieber selbst nach Antworten suchen möchten.

Schlussfolgerung

Die Implementierung der zwei Hilfe-Trends, die in diesem Artikel beschrieben werden, sollte nicht in Angriff genommen werden, ohne sich Gedanken über Zeit und Budget zu machen. Falls eine Nutzeroberfläche mehr Hilfetexte benötigt, als in Tooltips oder Inline-Text passen, denken Sie über kleine Hilfe-Overlays nach, die eine komplette Hilfedatenbank ergänzen. Auf diese Art erhalten Nutzer Antworten auf einfache, häufig gestellte Fragen, ohne vom Thema abzukommen und auf eine separate Hilfeseite weitergeleitet zu werden. In den meisten Unternehmen übersteigen die Kosten der Entwicklung eines intelligenten, adaptiven Systems allerdings dessen Vorteile für den Nutzer bei weitem. Meistens kann das Budget besser in Usability-Tests oder in die Verbesserung der Nutzeroberfläche selbst investiert werden.

 

© Deutsche Version. Institut für Software-Ergonomie und Usability AG. Alle Rechte vorbehalten.

Kommentare auf diesen Beitrag

    Keine Kommentare

Kommentar hinzufügen

Die mit * gekenzeichneten Felder sind zwingend auszufüllen