Die Präsentation wird geladen. Bitte warten

Die Präsentation wird geladen. Bitte warten

DHBW Stuttgart, Informatik, SW-Engineering, Kapitel 4.3 Mar2013 Seite 1 Grundsätze der Dialoggestaltung Gestaltungsregeln für Menüs Gestaltungsregeln für.

Ähnliche Präsentationen


Präsentation zum Thema: "DHBW Stuttgart, Informatik, SW-Engineering, Kapitel 4.3 Mar2013 Seite 1 Grundsätze der Dialoggestaltung Gestaltungsregeln für Menüs Gestaltungsregeln für."—  Präsentation transkript:

1 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, URLs, 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".

2 DHBW Stuttgart, Informatik, SW-Engineering, Kapitel 4.3 Mar2013 Seite 2 Grundsätze der Dialoggestaltung (ISO ) 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.

3 DHBW Stuttgart, Informatik, SW-Engineering, Kapitel 4.3 Mar2013 Seite Beispiele für eine benutzergerechte Dialoggestaltung (Übung: Verteilen Sie die Punkte ) 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 DHBW Stuttgart, Informatik, SW-Engineering, Kapitel 4.3 Mar2013 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)

5 DHBW Stuttgart, Informatik, SW-Engineering, Kapitel 4.3 Mar2013 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

6 DHBW Stuttgart, Informatik, SW-Engineering, Kapitel 4.3 Mar2013 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

7 DHBW Stuttgart, Informatik, SW-Engineering, Kapitel 4.3 Mar2013 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

8 DHBW Stuttgart, Informatik, SW-Engineering, Kapitel 4.3 Mar2013 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. 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

9 DHBW Stuttgart, Informatik, SW-Engineering, Kapitel 4.3 Mar2013 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!

10 DHBW Stuttgart, Informatik, SW-Engineering, Kapitel 4.3 Mar2013 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.

11 DHBW Stuttgart, Informatik, SW-Engineering, Kapitel 4.3 Mar2013 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)

12 DHBW Stuttgart, Informatik, SW-Engineering, Kapitel 4.3 Mar2013 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!

13 DHBW Stuttgart, Informatik, SW-Engineering, Kapitel 4.3 Mar2013 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: Technology Portal 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 >

14 DHBW Stuttgart, Informatik, SW-Engineering, Kapitel 4.3 Mar2013 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 statt, da oft unnötig groß dargestellt wird maximal 4 Seiten (bei 800*600 Punkten Auflösung)

15 DHBW Stuttgart, Informatik, SW-Engineering, Kapitel 4.3 Mar2013 Seite 15 Empfehlungen für ergonomisches WWW-Design: Seitenfuß Datum der letzten Änderung, Autor (mit link zu seiner Homepage oder auch - 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

16 DHBW Stuttgart, Informatik, SW-Engineering, Kapitel 4.3 Mar2013 Seite 16 Empfehlungen für ergonomisches WWW-Design: Hyperlinks und URLs 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 URLs 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.

17 DHBW Stuttgart, Informatik, SW-Engineering, Kapitel 4.3 Mar2013 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

18 DHBW Stuttgart, Informatik, SW-Engineering, Kapitel 4.3 Mar2013 Seite 18 Beispiel für schlechtes Design (1 von 3) Programm lässt Benutzer Im Unklaren Benutzer muss Hilfetexte studieren

19 DHBW Stuttgart, Informatik, SW-Engineering, Kapitel 4.3 Mar2013 Seite 19 Beispiel für schlechtes Design (2 von 3) Programm fordert vom Benutzer hohe Lernbereit- schaft Bedien- Elemente sind im gemalten Bild versteckt

20 DHBW Stuttgart, Informatik, SW-Engineering, Kapitel 4.3 Mar2013 Seite 20 Beispiel für schlechtes Design (3 von 3) Programm verwirrt den Benutzer Bereits beim Einstieg öffnen sich mehrere Masken

21 DHBW Stuttgart, Informatik, SW-Engineering, Kapitel 4.3 Mar2013 Seite 21 Benutzergerechte Dialoggestaltung Anhang: Lösung der Übungen 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 3

22 DHBW Stuttgart, Informatik, SW-Engineering, Kapitel 4.3 Mar2013 Seite 22 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.


Herunterladen ppt "DHBW Stuttgart, Informatik, SW-Engineering, Kapitel 4.3 Mar2013 Seite 1 Grundsätze der Dialoggestaltung Gestaltungsregeln für Menüs Gestaltungsregeln für."

Ähnliche Präsentationen


Google-Anzeigen