dhbw stuttgart, informatik, sw-engineering, kapitel 4.3 mar2013 seite 1 grundsätze der...

DHBW Stuttgart, Informatik, SW-Engineering, Kapitel 4.3 Mar2013

Seite 1

• 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

Inhalt

Christoph Riewerts, © Prof. Dr. Helmut Balzert V2.0

Software-Ergonomie zielt auf die benutzergerechte Gestaltung interaktiver Anwendungssoftware, d.h auf "usability".


Seite 2

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ähigkeitDas Produkt sollte dem Benutzer genügend Erläuterungen geben und in ausreichendem Maße verständlich sein (Intuitive Bedienbarkeit).

3. ErwartungskonformitätDas 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. SteuerbarkeitDer Benutzer sollte die Art und Weise, wie er mit dem Produkt arbeitet, gut beeinflussen können. (Benutzer ist "Herr der Lage")

6. FehlertoleranzDer Benutzer sollte trotz erkennbar fehlerhafter Eingaben das beabsichtigte Arbeitsergebnis mit minimalem Korrekturaufwand erreichen können. (Unterstützung bei Fehlerbehebung)

7. IndividualisierbarkeitDas Produkt sollte vom Benutzer ohne großen Aufwand auf individuelle Bedürfnisse und Anforderungen angepaßt werden können.


Seite 3

5

1

2

6

7

3

Beispiele für eine benutzergerechte Dialoggestaltung(Übung: Verteilen Sie die Punkte 1. - 7.)

Irrelevante Informationen, die man nicht zur Erledigung seiner Arbeitsaufgabe braucht, werden vermieden.

Die Eingabe des Geburtsdatums wird mit dem Hinweis „..bitte in Form von TT.MM.JJ eingeben..“ abgefragt.

Das Programm verwendet die im Bereich der Arbeitsaufgabe des Benutzers verwendeten Fachausdrücke.

Das Programm erlaubt, Formulareingaben zu unterbrechen, um telefonisch weitere Daten einzuholen.

Ungültige PLZ-Eingabe wird erkannt und der Cursor steht dort zur Korrektur.

Die Schriftgröße läßt sich für sehbehinderte Benutzer vergrößern.

4

Das Programm erlaubt das Ausprobieren neuer Funktionen ohne Datenverlust.


Seite 4

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)


Seite 5

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


Seite 6

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


Seite 7

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


Seite 8

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.

ReservierungssystemA0821DCALGA0300PAvailability of flight on August 21, from Washington's National Airport (DCA) to New York's La Guardia Airport (LGA) around 3:00 PM.

RobotersteuerungSBA+30Objekt {S=Schulter, E=Ellenbogen, H=Hand} Aktion {B=Beugen, R=Rotieren} Art {A=Absolut, R=Relativ} Winkel


Seite 9

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!


Seite 10

Ü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.


Seite 11

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)


Seite 12

• 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

Empfehlungen für ergonomisches WWW-Design:Lesbarkeit

Zu vermeiden ist rot auf schwarz

Zu vermeiden ist blau auf schwarz

Zu vermeiden ist gelb auf weißZu vermeiden ist hellgrün auf weiß

Farbige Schrift auf farbigem Grund? Möglichst vermeiden!

Grüne Schrift auf Lila-Hintergrund? Nein!


Seite 13

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 >


Seite 14

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)


Seite 15

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


Seite 16

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.


Seite 17

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


Seite 18

Beispiel für schlechtes Design (1 von 3)

Programm

lässt

Benutzer

Im

Unklaren

Benutzer muss Hilfetexte studieren


Seite 19


Programm

fordert vom

Benutzer

hohe

Lernbereit-schaft

Bedien-Elemente sind im gemalten Bild versteckt


Seite 20


Programm

verwirrt den

Benutzer

Bereits beim Einstieg öffnen sich mehrere Masken


Seite 21

Benutzergerechte DialoggestaltungAnhang: Lösung der Übungen

5

1

2

6

7

3

Irrelevante Informationen, die man nicht zur Erledigung seiner Arbeitsaufgabe braucht, werden vermieden.

Die Eingabe des Geburtsdatums wird mit dem Hinweis „..bitte in Form von TT.MM.JJ eingeben..“ abgefragt.

Das Programm verwendet die im Bereich der Arbeitsaufgabe des Benutzers verwendeten Fachausdrücke.

Das Programm erlaubt, Formulareingaben zu unterbrechen, um telefonisch weitere Daten einzuholen.

Ungültige PLZ-Eingabe wird erkannt und der Cursor steht dort zur Korrektur.

Die Schriftgröße läßt sich für sehbehinderte Benutzer vergrößern.

4

Das Programm erlaubt das Ausprobieren neuer Funktionen ohne Datenverlust.

4

3

1

7

6

2

5

Seite 3


Seite 22

Benutzergerechte DialoggestaltungAnhang: 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 Dateik - kopieren einer Dateiv - verschieben einer Dateia - auflisten einer Dateid - drucken einer Datei

Diese Wahl ist ergonomisch, da die Kommandosprache für den Benutzer transparent ist und die Kürzel leicht zu merken sind.

dhbw stuttgart, informatik, sw-engineering, kapitel 4.3 mar2013 seite 1 grundsätze der...

Documents