Grundsätze der Dialoggestaltung Gestaltungsregeln für Menüs Software-Ergonomie zielt auf die benutzergerechte Gestaltung interaktiver Anwendungssoftware, d.h auf "usability". Inhalt Grundsätze der Dialoggestaltung Gestaltungsregeln für Menüs Gestaltungsregeln für Kommandosprachen Empfehlungen für ergonomisches WWW-Design Performanz, Lesbarkeit, Orientierung, Seitenlänge, Seitenfuß, Hyperlinks, URL’s, Konsistenz Beispiele für schlechtes Design Christoph Riewerts, © Prof. Dr. Helmut Balzert V2.0

Grundsätze der Dialoggestaltung (ISO 9241-10) 1. Aufgabenangemessenheit Das Produkt sollte die Erledigung der Arbeitsaufgaben unterstützen, ohne den Benutzer unnötig zu belasten (z. B. mit komplexen Bedienabläufen). 2. Selbstbeschreibungsfähigkeit Das Produkt sollte dem Benutzer genügend Erläuterungen geben und in ausreichendem Maße verständlich sein (Intuitive Bedienbarkeit). 3. Erwartungskonformität Das Produkt sollte durch eine einheitliche Gestaltung (Konsistenz) den Arbeitsabläufen und Gewohnheiten des Benutzers entgegenkommen und in ausreichendem Maße Feedback geben. 4. Lernförderlichkeit: Der Benutzer sollte schnell erste Ergebnisse erzielen können und sich ohne großen Aufwand einarbeiten können. 5. Steuerbarkeit Der Benutzer sollte die Art und Weise, wie er mit dem Produkt arbeitet, gut beeinflussen können. (Benutzer ist "Herr der Lage") 6. Fehlertoleranz Der Benutzer sollte trotz erkennbar fehlerhafter Eingaben das beabsichtigte Arbeitsergebnis mit minimalem Korrekturaufwand erreichen können. (Unterstützung bei Fehlerbehebung) 7. Individualisierbarkeit Das Produkt sollte vom Benutzer ohne großen Aufwand auf individuelle Bedürfnisse und Anforderungen angepaßt werden können.

Beispiele für eine benutzergerechte Dialoggestaltung (Übung: Verteilen Sie die Punkte 1. - 7.) Ungültige PLZ-Eingabe wird erkannt und der Cursor steht dort zur Korrektur. Irrelevante Informationen, die man nicht zur Erledigung seiner Arbeitsaufgabe braucht, werden vermieden. Das Programm erlaubt das Ausprobieren neuer Funktionen ohne Datenverlust. 1 6 4 Die Schriftgröße läßt sich für sehbehinderte Benutzer vergrößern. 7 Das Programm verwendet die im Bereich der Arbeitsaufgabe des Benutzers verwendeten Fachausdrücke. Das Programm erlaubt, Formulareingaben zu unterbrechen, um telefonisch weitere Daten einzuholen. Die Eingabe des Geburtsdatums wird mit dem Hinweis „..bitte in Form von TT.MM.JJ eingeben..“ abgefragt. 3 5 2

Grundsätze der Dialoggestaltung: Definitionen (bei GUI*-Dialogen) Modaler Dialog (modal dialog): Muss beendet sein, bevor eine andere Aufgabe der Anwendung durchgeführt werden kann, d.h. bevor ein anderes Fenster aktiviert werden kann Nicht-modaler Dialog (modeless dialog): Ermöglicht dem Benutzer, den aktuellen Dialog zu unterbrechen, d.h. andere Aktionen durchzuführen, während das ursprüngliche Fenster geöffnet bleibt Fenstertypen Primärfenster (dient zur direkten Aufgabenerfüllung, wird geschlossen, wenn Aufgabe erledigt ist) Anwendungsfenster Unterfenster (child window) Sekundärfenster (wenn geschlossen, wird Primärfenster wieder aktiv) Dialogfenster (dialog box) (Windows), häufig modal Mitteilungsfenster (message box) (Windows), vom Benutzer nicht aufrufbar * (GUI = grafical user interface)

Gestaltungsregeln für Menüs: Definitionen Drop-down-Menü Menütitel im Balken ständig sichtbar belegt ständig Platz globaler Geltungsbereich Pop-up-Menü unsichtbar, wenn nicht offen Mauszeiger bleibt im Kontext lokaler Geltungsbereich

Gestaltungsregeln für Menüs Benennung der Menüoptionen soll verständlich, klar abgrenzbar, gebräuchlich (dem Benutzer vertraut) und kurz und einheitlich sein bei kaskadierenden Menüs sind breite, flache Bäume auf drei Ebenen mit 8 bis 16 Optionen optimal drop-down-Menüs erhalten einen einheitlichen und prägnanten Titel über alle Fenster hinweg, z.B. Buchung (als Stichwort) oder Buchungsart wählen (als kurzer Satz) pop-up-Menüs werden nahe des Objekts angeordnet, dürfen es aber nicht überdecken zufällige Anordnung der Optionen sollte vermieden werden, stattdessen lieber .... alphabetisch funktional natürliche Folge

Gestaltungsregeln für Menüs Zur Beschleunigung der Menüauswahl dienen folgende Möglichkeiten: mnemonische Auswahl über Tastatur (z.B. unterstrichener Anfangsbuchstabe) Symbolbalken unterhalb des Menübalkens (kann häufig konfiguriert werden) Aufführen der zuletzt benutzten Objekte Aufführung der am häufigsten benutzen Objekte/Einstellungen als abgetrennte obere Menügruppe Auslagerung von Menüoptionen auf Druckknöpfe Aufzeichnung von Macros

Gestaltungsregeln für Kommandosprachen Da eine Menüauswahl häufig Bildschirmfläche belegt, Navigation erfordert, nur eine langsame Interaktion erlaubt, die Flexibilität einschränkt und für Expertenbenutzer wenig geeignet ist sollte eine Anwendung auch die Dialogform „Kommandosprache“ zur Verfügung stellen. Reservierungssystem A0821DCALGA0300P Availability of flight on August 21, from Washington's National Airport (DCA) to New York's La Guardia Airport (LGA) around 3:00 PM. Robotersteuerung SBA+30 Objekt {S=Schulter, E=Ellenbogen, H=Hand} Aktion {B=Beugen, R=Rotieren} Art {A=Absolut, R=Relativ} Winkel

Gestaltungsregeln für Kommandosprachen Kommandonamen sollen leicht erinnerbar, lesbar und suggestiv sein: insert, delete, merge sind suggestiv throw und light sind nicht suggestiv (Funktionsbeziehung nicht erkennbar) Kommandopaare (z.B. bei inversen Aktionen) sollen kongruent zueinander sein: rechts/links, greifen/loslassen, vorwärts/rückwärts; nichtkongruent sind drehen/links, gehen/rückwärts Abkürzungen durch Eliminieren einzelner Buchstaben: Bspl, Hpths, ...., ppt, cmp, ... Abschneiden der letzen Buchstaben: Del, Dir, .. Verwenden von Akronymen: PC, MIPS Regeln für das Abkürzen: Abschneiden (auf einheitliche Länge) besser als Eliminieren einheitliche Abkürzungsregeln verwenden, jedoch keine eigenen definieren Systemseitige Ausgaben sollten die nicht abgekürzten Namen verwenden!

Übung: Gestaltung einer Kommandosprachen Für ein Betriebssystem soll eine Kommandosprache realisiert werden, die folgende Funktionen zur Verfügung stellt: löschen (einer Datei) kopieren (einer Datei auf eine andere Datei) verschieben (einer Datei in ein anderes Verzeichnis) auflisten (aller Dateien in einem Verzeichnis) drucken (einer Datei) Angestoßen wird ein Kommando durch die Eingabe des Kommandonamens, ggf. gefolgt von einem oder zwei Dateinamen Übung: Wählen Sie für diese Kommandos nach ergonomischen Gesichtspunkten Abkürzungen aus.

Empfehlungen für ergonomisches WWW-Design: Performanz Attribute HEIGHT und WIDTH bei allen Grafiken angeben (beschleunigt den Ladevorgang) JPGs für Photos und realistische Bilder GIFs bei abstrakten Grafiken und 16-farbige GIFs für kleine Grafiken Grafiken mehrfach verwenden, Anzahl (Protokoll-Info) verringern, Größe verringern Tabellen aufteilen Dokumentgröße gering halten, da bei einer Verlinkung auf die Texte am Ende des Dokuments lange Wartezeiten entstehen Applets möglichst vermeiden, wenn doch, dann Homepage mit und ohne Applet anbieten (Benutzer zur Auswahl)

Empfehlungen für ergonomisches WWW-Design: Lesbarkeit Hohen Helligkeitskontrast verwenden harmonierende Farben verwenden Schriftgröße nur bei Hervorhebungen/Überschriften ändern, nicht für Standardtext wenige Farben verwenden, um auch die kleinen Mobilgeräte zu berücksichtigen keine feste Bildschirmauflösung voraussetzen CSS (cascading style sheets) verwenden, jedoch für versch. Browser(-Versionen) testen Zu vermeiden ist rot auf schwarz Zu vermeiden ist hellgrün auf weiß Zu vermeiden ist gelb auf weiß Zu vermeiden ist blau auf schwarz Grüne Schrift auf Lila-Hintergrund? Nein! Farbige Schrift auf farbigem Grund? Möglichst vermeiden!

Empfehlungen für ergonomisches WWW-Design: Orientierung Jede Seite hat einen Titel, der den Inhalt umreißt, weil die Benutzer oft auf unvorhersehbare Weise auf diese Seite gelangen Der Anbieter der Seite muß erkennbar sein (im Kopf oder im Fuß), um die globale Orientierung zu behalten Stets einen verständlichen Text hinter das TITLE-Tag eintragen, da Bookmarks, History-Listen und Suchmaschinen diesen Text verwenden: <head> <title> Technology Portal </title> </head> lokale Position in der Hierarchie anzeigen (im Kopf oder im Fuß), möglichst sogar als Link, um direkt in der Hierarchie zurückspringen zu können (sog. bread crumb trail): Home > Methoden & Verfahren > Projektabwicklung > Management >

Empfehlungen für ergonomisches WWW-Design: Seitenlänge Menüs müssen immer auf einer Seite dargestellt werden können Bei langen Seiten steht im Kopf der Seite ein Überblick der angebotenen Informationen mit Sprüngen Bei vielen kurzen Dokumenten bietet es sich an, ein großes Dokument zum Ausdruck anzubieten, um den Druckaufwand zu reduzieren Interessantes gehört nach oben, sonst scrollen die Benutzer gar nicht erst Kurzer Seitenkopf, möglichst mit <H2> statt <H1>, da <H1> oft unnötig groß dargestellt wird maximal 4 Seiten (bei 800*600 Punkten Auflösung)

Empfehlungen für ergonomisches WWW-Design: Seitenfuß Datum der letzten Änderung, Autor (mit link zu seiner Homepage oder auch email-Adresse) der Seite bzw. verantwortliche Person und ein Impressum/Link aufs Impressum (Anschrift, Gesellschaftsform und Verantwortlicher) bei kommerziellen Seiten stehen grundsätzlich im Fuß: Verantwortlich: Christoph Riewerts, letzte Änderung: 29. Juni 2004 oder Impressum, last update: 3. September 2003 URL der Seite sollte zumindest auf der Druckausgabe sichtbar sein (default-Einstellung des Browsers nicht ändern), u.U. auch auf der Seite selbst

Empfehlungen für ergonomisches WWW-Design: Hyperlinks und URL‘s Aus dem Link und seiner unmittelbaren Umgebung sollte eindeutig hervorgehen, welche Information das Zielobjekt enthält: Hier klicken... möglichst vermeiden Wenn der Link zu einem Dokument in einer ungewohnter Form (anderes Format, extreme Dateilänge, andere Sprache) führt, so ist das hinter dem Link in Klammern anzugeben: Verkaufskonzept (.doc, 37 Seiten) Durch entsprechende Farbgebung muß zu erkennen sein, welche Links noch nicht angewählt wurden Links in Grafiken sollten wie bei Texten (hier durch Browser realisiert) leicht zu erkennen sein in den URL‘s Abkürzungen vermeiden, die nicht allgemein bekannt sind Groß- und Kleinschrift (wegen der UNIX-basierten Web-Servern) konsistent verwenden und nicht zwischen „_“ und „-“ wechseln: Negativbeispiel: „Meine_Home-page.html“ die wenig erlaubten Sonderzeichen (~ / _ - .) sparsam verwenden Beachte: Dynamisch generierte Seiten, die z.B. mittels PHP mit einer GET-Parameterübergabe hinterm Fragezeichen erzeugt werden, werden von einigen Suchmaschinen nicht berücksichtigt; daraus folgt: andere Parameterübergabe wählen.

Empfehlungen für ergonomisches WWW-Design: Konsistenz Pro: Navigationshilfen (z.B. Homepage-button) immer an der gleichen Stelle jeder Seite Verwendung eines Logos ist gut für die Darstellung eines corporate identity Stil wahren und immer dieselbe „Farbwelt“ (Typographie und Farbwahl) verwenden (CSS=cascading-style-sheets gewährleisten ein einheitliches Erscheinungsbild) Kontra gleiches Aussehen bei unterschiedlichen Einrichtungen einer Organisation kann dazu führen, daß der Benutzer die Seiten verwechselt Wenn man Aufmerksamkeit erlangen will, so muß man mit dem Design auffallen

Beispiel für schlechtes Design (1 von 3) Programm lässt Benutzer Im Unklaren Benutzer muss Hilfetexte studieren

Beispiel für schlechtes Design (2 von 3) Programm fordert vom Benutzer hohe Lernbereit-schaft Bedien-Elemente sind im gemalten Bild versteckt

Beispiel für schlechtes Design (3 von 3) Programm verwirrt den Benutzer Bereits beim Einstieg öffnen sich mehrere Masken

Benutzergerechte Dialoggestaltung Anhang: Lösung der Übungen Seite 3 Ungültige PLZ-Eingabe wird erkannt und der Cursor steht dort zur Korrektur. Irrelevante Informationen, die man nicht zur Erledigung seiner Arbeitsaufgabe braucht, werden vermieden. Das Programm erlaubt das Ausprobieren neuer Funktionen ohne Datenverlust. 1 6 1 6 4 4 Die Schriftgröße läßt sich für sehbehinderte Benutzer vergrößern. 7 7 Das Programm verwendet die im Bereich der Arbeitsaufgabe des Benutzers verwendeten Fachausdrücke. Das Programm erlaubt, Formulareingaben zu unterbrechen, um telefonisch weitere Daten einzuholen. 5 3 Die Eingabe des Geburtsdatums wird mit dem Hinweis „..bitte in Form von TT.MM.JJ eingeben..“ abgefragt. 3 5 2 2

Benutzergerechte Dialoggestaltung Anhang: Lösung der Übungen Seite 10 Da die Bezeichnungen aller Kommandos mit unterschiedlichen Buchstaben beginnen, kann man für die Kommandosprache die Anfangsbuchstaben dieser Bezeichnungen verwenden. Es ergibt sich dann folgende Sprache: l - löschen einer Datei k - kopieren einer Datei v - verschieben einer Datei a - auflisten einer Datei d - drucken einer Datei Diese Wahl ist ergonomisch, da die Kommandosprache für den Benutzer transparent ist und die Kürzel leicht zu merken sind.