Software Engineering Oberflächenentwurf (update: 11.6.)

Transkript

1 Software Engineering Oberflächenentwurf (update: 11.6.) Prof. Adrian A. Müller, PMP, PSM 1, CSM Fachbereich Informatik und Mikrosystemtechnik 1

2 Inhalte Begriffe und Beispiele GUI Dialog Menü Interaktionselemente Darstellung Dialogstruktur Visualisierung von Klassen Relationen Beziehung Vorgehen zum GUI-Entwurf Entwurf von Benutzungsoberflächen Allgemeines Paradigmen Style Guide, Look and Feel Gestaltungsregeln Anhang 8 Goldene Regeln von Ben Shneiderman Entwurfsgrundsätze 2

3 Benutzungsoberfläche Benutzungsoberfläche = Graphical User Interface (GUI) Dialog-Komponente: Bedienungsabläufe E/A-Komponente: Gestaltung der Informations-Darstellung GUI-System Software-System Verwaltet GUI Wickelt Kommunikation mit Anwender ab Beispiel: Microsoft Windows Prototyp der Benutzungsoberfläche: Realisiert Fenster, Menüs und globale Dialogführung Keine Daten und keine Funktionen 3

4 Dialoge: Selbstbeschreibungsfähigkeit 4

5 Dialog (1) Dialog Interaktion zwischen einem Benutzer und einem Dialogsystem, um ein bestimmtes Ziel zu erreichen Benutzer Mensch, der mit dem Dialogsystem arbeitet Dialogarten Primärdialog Wird beendet, wenn die zu bearbeitende Aufgabe fertig gestellt ist Beispiel: Hauptfenster von Microsoft Word Sekundärdialog Dient zur Erfassung zusätzlicher Informationen Nach Beendigung des Sekundärdialogs wird der Primärdialog fort gesetzt Beispiel: Drucken aus Word - Fenster zur Erfassung von Druckparametern 5

6 Dialoge: Robustheit 6

7 Dialog (2) Dialog-Modi Modaler Dialog Muss beendet sein, bevor ein anderes Fenster aktiviert werden kann Beispiel: Druck-Dialog in Word Nicht-modaler Dialog Kann unterbrochen werden, d. h. man kann in einem anderen Fenster weiter arbeiten, während der Dialog noch offen ist Beispiel: Such-Dialog in Word Verwendung nicht-modaler Dialoge erhöht die Handlungsflexibilität des Benutzers Unterscheidung von Anwendungen nach gleichzeitig bearbeitbaren Dokumenten: Single Document Interface (SDI) Zu einem Zeitpunkt kann nur ein Dokument bearbeitet werden Beispiel: Microsoft Wordpad Multiple Document Interface (MDI) Gleichzeitige Bearbeitung mehrerer Dokumente möglich, zwischen denen gewechselt werden kann Beispiel: Microsoft Word 7

8 Angemessenheit der Aufgabe 8

9 Möglichkeiten der Dialog-Gestaltung Objektorientierte Bedienung mit direkter Manipulation Beispiel: Drag & Drop in Windows Explorer und Anwendungen Objektorientierte Bedienung mit Menüs und Fenstern Beispiel: Markieren einer Datei im Explorer oder eines Text-Ausschnitts in Word. Die Rechte Maustaste öffnet dann ein Kontextmenü mit allen für dieses Objekt möglichen Funktionen. Ebenso können über den Menu Bar-Eintrag Bearbeiten die entsprechenden Funktionen ausgewählt werden. Funktionsorientierte Bedienung mit Menüs und Fenstern Beispiel: Über Menu-Bar Datei Öffnen wird zunächst die Funktion ausgewählt, anschließend das Objekt (die zu öffnende Datei) Meist werden diese Möglichkeiten parallel angeboten 9

10 Dialoge: Lernförderlichkeit 10

11 Beispiele für Steuerelemente Je nach Datentyp und darzustellendem Inhalt, z. B.: Strings oder Zahlen: Textfeld Aufzählungstypen: Listenfeld, Drop Down-Liste, Combobox Boolean: Checkbox, Radiobutton Zugeordnete Objekte mit mehreren Attributen: Tabelle Auslösen von Aktionen Schaltfläche (Button) Und viele mehr 11

12 Interaktionselemente Quelle: Sommerville, Abb

13 Benutzungsoberflächen im Web-Browser Möglichkeiten variieren je nach eingesetzter Technologie, z. B. Thin Clients: Reines HTML, ggf. JavaScript Nutzung von Frames, ggf. mehrere Browser-Fenster Nutzung von Plug-Ins Starke Einschränkungen z. B. hinsichtlich direkter Manipulation, Pull-Down-Menüs, nichtmodaler Dialoge etc. Zu berücksichtigen sind außerdem Unterschiede in den Browser-Versionen, verschiedene Sicherheitseinstellungen u. ä. Fat Client / Rich Client: Anwendungslogik des GUI auf dem Client ausgeführt (z. B. mit Hilfe von Java oder ActiveX) Hier besteht die Möglichkeit, mit Hilfe entsprechender Klassenbibliotheken eine Fensteroberfläche ähnlich Windows etc. zu realisieren Probleme: Ladezeiten, Sicherheitsaspekte AJAX: Asynchronous JavaScript and XML Mischform kein komplettes Laden von Anwendungen, kein Plug-In erforderlich, keine synchrone Kommunikation mit dem Server Für "Web 2.0"-Anwendungen eingesetzt Generell existieren für Web-Oberflächen sehr große Freiheitsgrade Dies macht es andererseits sehr schwierig, wirklich benutzerfreundliche Oberflächen zu entwickeln 13

14 Vorgehen zum GUI-Entwurf 1. Skizzieren der benötigten Fenster und ihrer gegenseitigen Interaktion (Bsp. oben links: scribbles mit Dialogstruktur) 2. Festlegen, aus welchen Bestandteilen ein Fenster besteht (s. mockup r.) Aufbau des Anwendungsfensters Aufbau der Unterfenster Aufbau der Dialogfenster Aufbau der Mitteilungsfenster 3. Festlegen, auf welche Benutzerereignisse wie reagiert werden soll Zustandsdiagramm mit den in jedem Fenster möglichen Benutzeraktionen als Ereignissen 4. Umsetzung des Dialogkonzepts in einen Entwurf in der benutzten Sprache 5. Programmierung der Dialogschnittstelle 14

15 Beispiel einer Dialogstruktur OK Abbrechen Löschen Liste Artikel Entfernen Übernehmen Liste Neu Ändern Artikel Neu OK Abbrechen Neu Lieferant (aus Artikel) Auswählen Auswählen Abbrechen Liste Auswahl Lieferant Neu Neu Lieferant (aus Auswahl) OK Abbrechen Liste 15

16 Was muss in der Oberfläche möglich sein? Man muss alle benötigten Funktionalitäten und alle Inhalte erreichen können Es müssen alle Use Cases durchführbar sein Dabei müssen die benötigten Objekte mit den zu pflegenden Attributen und Beziehungen angelegt und bearbeitet werden können 16

17 Mögliche Navigationsstruktur bei system-basierten Entwurf Oberste Ebene Thematische Oberbegriffe zur Gliederung der Funktionen Z. B. können alle Funktionen zur Bearbeitung von Kunden zusammengefasst werden Zweite Ebene Aufrufbare Funktionen Diese können Use Cases entsprechen Es ist auch möglich Use Cases aufzuteilen oder zusammenzufassen, wenn dies für die Bearbeitung sinnvoll ist Dritte Ebene Einzel-Dialoge für die gewählte Funktion 17

18 Menü-basierte Navigation im Hauptfenster (Fallbeispiel Geräteverwaltung) Alternative wäre z. B. ein Navigationsbaum auf einer Website. Angezeigte Einträge können entsprechend den Benutzerrechten angezeigt oder verborgen werden. Oder: Verschiedene Oberflächen für verschiedene Rollen. 18

19 Neues Objekt anlegen Nicht jedes Attribut ist vom Benutzer einzugeben, z. B. automatische Personalnummernvergabe (Textfeld ist read-only) Für jedes zu vom Benutzer zu pflegende Attribut ein geeignetes Steuerelement Außerdem kann es Attribute geben, die für den Benutzer unwichtig sind und gar nicht angezeigt werden. 19

20 Objekt suchen In welchen Attributen soll gesucht werden? Exakte Übereinstimmung erforderlich? Kann man auch Teile eines Worts eingeben? Kontextmenü Welche Attribute der Suchergebnisse werden angezeigt? Filter-und Sortiermöglichkeiten? Zum Dialog Mitarbeiter bearbeiten Wie werden große Treffermengen dargestellt? 20

21 Objekt bearbeiten Ähnlich dem Anlegen eines Objekts. Unter Umständen dürfen gewisse Attribute nicht mehr geändert werden und sollten daher read-only sein. 21

22 Anderes Objekt zuordnen bei Multiplizität mit Obergrenze 1 Auswahl des zugeordneten Verlags Es muss auch die Möglichkeit geben, kein Verlag auszuwählen, da die Untergrenze der Multiplizität 0 ist. Im vorliegenden Fall wird nur der Name angezeigt, u. U. kann es erforderlich sein, mehr Informationen anzeigen. Drop Down-Feld bei kleineren Mengen von Verlagen geeignet. Bei einer größeren Zahl von Verlagen: Eigener Auswahldialog. Zum Anlegen eines neuen Verlags, der anschließend hier ausgewählt ist. 22

23 Andere Objekte zuordnen bei Multiplizität mit Obergrenze * Tabelle mit den Attributen des Autors, die hier nützlich sind Zum Dialog Autoren auswählen (weiter hinten) Speichern geht nur, wenn mindestens ein Autor eingetragen ist (wegen Untergrenze 1 bei Multiplizität) Zu Dialog Autor anlegen Entfernt selektierten Eintrag. Es muss mindestens ein Eintrag bestehen bleiben, da die Unter-grenze der Multiplizität 1 ist. 24

24 Navigierbarkeit auf der Oberfläche Soll man beim Buch den Verlag anzeigen und zuordnen können oder beim Verlag die Bücher? Oder beides? Oder auf der einen Seite zuordnen und auf der anderen Seite nur ansehen? Hängt davon ab, welche Möglichkeiten fachlich und vom Arbeitsablauf her sinnvoll sind. 25

25 Zugeordnete Objekte auswählen Auswahl aus Liste für kleinere Mengen an Autoren sinnvoll, bei großen Mengen: Suchfunktion. Gewünschte Autoren selektieren Die selektierten Autoren werden in die Tabelle in Buch anlegen übernommen. Zurück zu Buch anlegen 27

26 Hierarchie - Explorer Alternative Darstellung der Hierarchie Kategorie-Gerätetyp-Gerät als Tree-View Ggf. Unterscheidung durch Icons Dialoge zum Anlegen und Bearbeiten über Kontextmenü erreichbar Zuordnungen per Drag & Drop Vgl. Methode navigieregeraetehierarchie() in Klasse Geraeteverwaltung. 28

27 Anhang 29

28 Dialoge bei Vererbung Dialoge für konkrete Klassen: 30

29 Dialoge bei Vererbung Variante Untergliederung des Dialogs entsprechen den verschiedenen Aspekten, die von den beteiligten Klassen repräsentiert werden. 31

30 Dialoge bei Vererbung Zweite Variante Untergliederung mit Hilfe von Registern (Tabs) 32

31 Noch einmal betrachtet: Fallbeispiel Geräteverwaltung 33

32 Fallbeispiel Geräteverwaltung Kategorie anlegen Wieso nicht Auswahl vorhandener Objekte bzw. Entfernen aus der Liste? Die Multiplizität 1 erfordert, dass jeder Gerätetyp genau einer Kategorie zugeordnet ist. Daher gibt es überhaupt keine Gerätetypen ohne Kategorie, die man hier zuordnen könnte. Ebenso kann man einen Gerätetypen nicht einfach von einer Kategorie lösen. Man könnte höchstens noch eine Abfrage einbauen, ob man bei dem Gerätetyp die alte Kategorie zur neuen ändern will, bzw. ein Auswahlmenü für die neue Kategorie. Einfacher: Man erledigt dies beim Gerätetypen. 34

33 Gerätetyp anlegen Hier wird nun die Kategorie ausgewählt. Wegen der Multiplizität 1 gibt es keinen Eintrag Keine Kategorie, d. h. es muss immer eine Kategorie ausgewählt sein. 35

34 Gerät anlegen Neue Räume und neue Geräte werden gemäß Use Case-Diagramm nicht im Zusammenhang mit Geräten angelegt, daher keine entsprechenden Schaltflächen. Dynamische Anpassung: Wenn Gerät ist ausleihbar gewählt ist, wird der Abschnitt Feste Gerätezuordnung inaktiv oder komplett ausgeblendet. 36

35 Gerätetyp reservieren Automatisch vergeben Steht fest: der eingeloggte User. 37

36 Aufgabe Erstellen Sie einen Dialog zum Anlegen eines Auftrags (inkl. Zuordnung von Produkten) 38

37 Entwurf von Benutzungsoberflächen Style Guide, Look and Feel Überblick Paradigmen der Mensch-Maschine Kommunikation Beispiele GUI Design Pattern Moderne GUI Konzepte Gestaltungsregeln 8 Goldene Regeln von Ben Shneiderman Entwurfsgrundsätze (Sommerville) 39

38 40

39 Anhang: 8 Goldene Regeln von Ben Shneiderman Konsistenz Berücksichtige unterschiedliche Erfahrungen Rückmeldungen auf Aktionen des Benutzers Abgeschlossene Operationen Fehler verhindern Einfache Rücksetzmöglichkeiten Benutzerbestimmte Eingaben Geringe Belastung des Kurzzeitgedächtnisses Vgl. Sommerville, Abbildung 16.1: Grundsätze für den Entwurf von Bedienoberflächen Designing the User Interface,

40 Anhang: Wichtige Aussagen Entwurfsgrundsätze bei der Formulierung von Meldungen Quelle: Sommerville, Abbildung 16.10: 42