1 Benutzerhilfen für Web-Anwendungen Gertrud Grünwied M.Sc. (evidoc) tekom Regionalgruppe Bodensee Tettnang, 28.09.2006

1

Benutzerhilfen für Web-Anwendungen

Gertrud Grünwied M.Sc. (evidoc)

tekom Regionalgruppe Bodensee Tettnang, 28.09.2006

2

Überblick

Einführung Web-Anwendungen Vielfalt Aufrufmöglichkeiten der externen Hilfe Überblick Hilfeformate

Web-basierte Online-Hilfe (extern) Merkmale WebHelp DHTML-Effekte Generieren: Beispiel RoboHelp

Integrierte Benutzerhilfe Usability-Studie Informations- und Darstellungsarten Feldhilfe: Blickverlaufsvideo

Erstellungsprozess und Abstimmung

EinführungExtern IntegriertProzessevidoc

3

Einsatzbereiche für Web-basierte HilfeEinführungExtern IntegriertProzessevidoc

Web-Anwendungen E-Commerce Software, Electronic Banking CMS, HelpDesk, CRM Office-Anwendungen

Plattformübergreifende Anwendungen für Windows, Macintosh, Unix, Linux z. B. ERP-Software, Branchensoftware Entwicklungsumgebungen: Java (Sun), .NET (Microsoft)

Standalone Hilfe im Internet/Intranet/Extranet Trainings-Leitfaden, Technischer Support Manual Entwicklungsdokumentation Style Guides, Redaktionsleitfäden

4

Aufruf externe Browser-basierte Online-HilfeEinführungExtern IntegriertProzessevidoc

Dialoghilfe

Web-Anwendung

Browser-basierteHilfesystem

5

Zugriffsarten auf externe Online-HilfeEinführungExtern IntegriertProzessevidoc

Zugriffsarten

kontextsensitivkontextunabhängig

DialoghilfeHilfesystem

Anwendung

• F1• Menü „Hilfe/Hilfethemen“• Link „Hilfe“ in Hauptnavigation• (…)

• Ums+F1 oder F1• Link „Hilfe“ je Dialog/Reiter• (…)

6

Vor- und Nachteile EinführungExtern IntegriertProzessevidoc

Vorteile Standalone alle Hilfethemen TOC, Index, Suche, Favoriten, Browse-Sequenzen Querverweise auf verwandte Themen bekanntes Erscheinungsbild zahlreiche Gestaltungsmöglichkeiten (Grafik, DHTML etc.) Druckmöglichkeit

Nachteile kontextunabhängiger Aufruf kein Kontextbezug zur aktuellen Aufgabe Informations-Overflow bei Aufruf der Hilfe

Vorteil kontextsensitive Dialoghilfe Kontextbezug zum aktuellen Dialog Verzweigen in vollständige Hilfe möglich

7

HilfeformateEinführungExtern IntegriertProzessevidoc

Oracle Help

for the Web

Microsoft

1990 91 92 93 94 95 96 97 98 99 2000 01 02 03 04 05 06 [Jahr]

eHelp/Macromedia *)

Oracle

Sun

Vista Help

JavaHelp 1.1.3

Oracle Help

for Java

HTML HelpWinHelp 3 WinHelp 4

RTF-basiert

HTML-basiert

Browser-basiert

Server-basiert

FlashHelp

WebHelp

WebHelp Pro

*) Weitere Hersteller von Browser-basierten Hilfeformaten siehe nächste Folie.

.NET Help

8

Browser-basiertes HilfeformatEinführungExtern IntegriertProzessevidoc

Browser-basierte HilfeAutorensystem

Flare X

RoboHelp verschiedene Formate

HyperText Studio X

AuthorIT X

Help & Manual X

Fast-Help X

Doc-o-Matic X

West Wind HTML Help Builder X

E.S.T. Help Author Pro X

Doc-To-Help X

OfficeHelp X

XDK verschiedene Formate

WordToWeb X

Help Producer X

ReWorx verschiedene Formate

WebWorks ePublisher verschiedene Formate

Mif2Go X

(…)

Quelle: technische kommunikation, Heft 5/06, Seite 34, Achtelig, M.

9

Browser-basierte Online-Hilfe



10


Browser-basiertes Hilfeformat - WebHelp

NavigationTopic

(Themenbereich)

Toolbar

11


Browser-basiertes Hilfeformat - FlashHelp

Horizontale Anordnung

Vertikale Anordnung

12


Merkmale

Hilfeformate HTML Help WebHelp FlashHelp

BetriebssystemUNabhängig - + +

BrowserUNabhängig - + +

Netzwerkbasierte Ablage und Verteilung - + +

Konsistente Oberfläche je Browser - - +

Individualisierbares Oberflächendesign (Skin) - + +

Integration von Multimedia + + +

Kompilierung und Kompression + - -

Kontextsensitivität + + +

Zusammenbinden mehrerer Hilfeprojekte + + -

Hilfelayout mit drei Fenstern traditionell traditionell traditionell+ vertikal

13

WebHelp generieren (1#4)EinführungExtern IntegriertProzessevidoc

14

Skins

Ohne Skin

Default Skin Custom Skin


15


16


17


18

DHTML

Mit Dynamic HTML (DHTML) können Webseiten durch externe Skriptsprachen über das DOM manipuliert werden. HTML, CSS und zumeist JavaScript bilden DHTML.

Möglichkeiten in Online-Hilfen: Expandierbare Abschnitte Skins DHTML-Effekte: Bei Benutzereingaben ändern sich die Inhalte/Darstellung, z. B. Objekte bewegen, Text hervorheben, Berechnungen Marquees (Laufschrift) Autorensystem XDK: - Registerkarten innerhalb eines Topics - sortierbare Tabellen


19

Expandierbare Abschnitte

Wann eignen sie sich? Selten benötigte Funktionen Beispiele Hintergrundinformation Parametergruppen Information für spezielle Zielgruppen

.. wann speziell nicht? Sicherheitshinweise Informationen, auf die referenziert wird


20

Integrierte Benutzerhilfe (User Assistance UA)



21

Variantenvergleich: A – keine UAEinführungExtern IntegriertProzessevidoc

22

Variantenvergleich: B – Feldhilfe im UA panel rechtsEinführungExtern IntegriertProzessevidoc

Beim Öffnen: Konzept

Klick auf Feld (Help): Feldhilfe

UA panel

23

Variantenvergleich: C – DialoghilfeEinführungExtern IntegriertProzessevidoc

Konzept

Feldhilfe

Link in externe Hilfe

24


Variantenvergleich: D – Feldhilfe in Mini-Fenster

Feldhilfe

25


Variantenvergleich: E – eingebettete Hilfe

Konzept

eingebettet

Feldhilfe

Feldhilfe

26


Informationsart: Funktional

Funktional – Was?

Feldhilfe: Feldbeschreibung Glossardefinition Eingabebeispiel Min-Max-Werte, Ausnahmen Gruppierung verwandter Felder, Zusammenhänge Verweis (Link) auf konzeptionelle und prozedurale Themen in der externen Hilfe

Geeignete Darstellungsformen Eingebetteter Text, Label, siehe Eye Tracking DHTML Popup Reservierter Bereich (UA panel)

27


Informationsart: Funktional – Beispiel

Link zu Konzept

Beispiel

Feldhilfe

28

Das Eye Tracking Prinzip

Das Auge wird mit Infrarotstrahlen beleuchtet.Die Strahlen erzeugen einen Reflex auf der Hornhaut.

Heutige Systeme zur Untersuchung von On-Screen Produkten messen Blickbewegungen berührungslos.

Eine hoch auflösende Kamera misst die Augen-bewegungen von Proban-den mittels des Reflexes.

Menschen tasten mit den Augen Bilder und Texte Punkt für Punkt ab. Diese Punkte misst Eye Tracking.


29

Eye-Tracking Messpunkte und ihre Auswertung

Der Plot zeigt alle Blickpunkte an, die auf dem Bild stattgefunden haben. Die Verweildauer wird über die Größen der Blickpunkte dargestellt. Ein Blickpfad ergibt sich aus der Abfolge von mehreren Blickpunkten.

Plot Hotspot

Ähnlich den Temperaturbildern werden Bereiche, die die Anwender besonders häufig betrachtet haben, unterschiedlich eingefärbt (von Grün über Gelb nach Rot).

Beim Betrachten von Gesichtern werden Augen, Nase und Mund

besonders häufig und lange fixiert.


30


Informationsart: Konzept

Konzept – Warum?

Konzeptinformation: Orientierung Kritische Informationen Warnungen Schlüsselkonzepte vorstellen Verweis (Link) auf Konzeptdetails in der externen Hilfe (Hintergrundinformation, Information für Fortgeschrittene)

Geeignete Darstellungsformen Eingebetteter Text, Label DHTML Popup Reservierter Bereich (UA panel)

31


Informationsart: Konzept - Beispiel

FAQ: Frage und Antwort

Basis-konzept

Detailkonzept und Arbeitsablauf pro Abschnitt

32


Informationsart: Handlung

Handlung – Wie?

Handlungsanleitungen: Häufigste Aufgaben Aktuellen Handlungsschritt hervorheben Einordnung in komplexen Handlungsablauf - hierarchisch und sequenziell - Verweis (Link) auf seltener durchgeführte Aufgaben oder komplexe Aufgaben

Geeignete Darstellungsformen Eingebetteter Text, Label DHTML Popup Reservierter Bereich (UA panel)

33


Zusammenfassung

Information an der Stelle anbieten, an der Benutzer sie benötigen.

Usability-Tests geben Aufschluss über Benutzerführung und notwendige User Assistance

Externe und integrierte Hilfe sinnvoll verbinden.

Hilfe-Links sprechend benennen „Beispiel“, „Tipps“, „FAQ“

34

Entwicklungsprozess



35

Systeme und Tools

Externe Browser-basierte Hilfe: Online-Hilfe Autorensysteme (Help Authoring Tool HAT) Mapping für kontextsensitive Aufrufe Orientierung an Webtechnologien der Anwendung

Integrierte Hilfe: in der Regel kein Autorensystem verwendbar HTML-Dateien oder XML-Dateien Texte in der Datenbank verwalten Beispiel: Feldbeschriftungen


36

Abstimmungsaufwand EinführungExtern IntegriertProzessevidoc

ExternStandalone

Aufwand

ExternDialog

LabelUA panel Popup

Usability

37

Usability-Beratung Für Software, eShops, Webseiten Blickverlauf-Studien (Eye Tracking) Expertenbewertungen Seminare und Workshops

Technische Dokumentation Bedienungs- und Betriebsanleitungen Software-Dokumentation, Tutorials Single-Source-Publishing Beratung, Seminare und Workshops

Wir stellen den Benutzer in den Mittelpunkt


38

evidoc

Werdegang Studium Technische Information Dipl.-Ing. (FH)

und Aufbaustudium Medieninformatik M.Sc. Zertifizierte Technische Redakteurin 1995 – 2005: Leiterin der Dokumentations-Abteilung bei dem Softwareunternehmen Wilken GmbH, Ulm Ab 2004: Gründerin und Inhaberin von evidoc

Veröffentlichungen Buch „Software-Dokumentation“, Kontakt & Studium,

Band 668, expert-Verlag, März 2005 WEKA Verlag: Kommentierung Software-Normen Member IEEE 1063 Software User Documentation

Lehre, Seminare Lehrbeauftragte an den Hochschulen Furtwangen

und Ulm, Berufsakademie Heidenheim Seminare zu Elektronisch Publizieren, XML und Software-Dokumentation bei vdi, vdi-Wissensforum…

Über die Inhaberin Gertrud Grünwied EinführungExtern IntegriertProzessevidoc

39

evidocInstitut für gebrauchstaugliche ProdukteFriedhofstr. 35

D - 89233 Neu-Ulm

Telefon +49 0 731 - 71 30 858

[email protected]

Kontakt

Volle Fahrt voraus mit allen Beteiligten der Produktentwicklung!


http://www.evidoc.de/

mailto:[email protected]

Documents

1 Benutzerhilfen für Web-Anwendungen Gertrud Grünwied M.Sc. (evidoc) tekom Regionalgruppe Bodensee Tettnang, 28.09.2006