Software Engineering

Transkript

1 Software Engineering Prof. Adrian A. Müller, PMP Fachbereich Informatik und Mikrosystemtechnik Fachhochschule Kaiserslautern, Standort Zweibrücken Prof. A. Müller, FH KL Software Engineering Winter '12/'13 1

2 Inhalte Begriffe und Beispiele GUI Dialog Menü Interaktionselemente Beispiel für eine Ajax- Anwendung Darstellung Dialogstruktur Visualisierung von Klassen Relationen Beziehung Vorgehen zum GUI-Entwurf Entwurf von Benutzungsoberflächen Allgemeines Paradigmen Style Guide, Look and Feel Gestaltungsregeln Beispiele Informationsvisualisierung Prof. A. Müller, FH KL Software Engineering Winter '12/'13 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 Prof. A. Müller, FH KL Software Engineering Winter '12/'13 3

4 Dialoge: Selbstbeschreibungsfähigkeit Prof. A. Müller, FH KL Software Engineering Winter '12/'13 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 Prof. A. Müller, FH KL Software Engineering Winter '12/'13 5

6 Dialoge: Robustheit Prof. A. Müller, FH KL Software Engineering Winter '12/'13 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 DocumentInterface (MDI) Gleichzeitige Bearbeitung mehrerer Dokumente möglich, zwischen denen gewechselt werden kann Beispiel: Microsoft Word Prof. A. Müller, FH KL Software Engineering Winter '12/'13 7

8 Angemessenheit der Aufgabe Prof. A. Müller, FH KL Software Engineering Winter '12/'13 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 Prof. A. Müller, FH KL Software Engineering Winter '12/'13 9

10 Dialoge: Lernförderlichkeit Prof. A. Müller, FH KL Software Engineering Winter '12/'13 10

11 Fenster-Typen und Dialogarten Word Anwendungsfenster (Primärdialog) Unterfenster (Primärdialog, nicht modal) Dok 1 Dok 2 Unterfenster (Primärdialog, nicht modal) Mitteilungsfenster (Sekundärdialog, modal) Drucker nicht verfügbar Dialogfenster (Sekundärdialog, häufig modal) Drucken Suchen Dialogfenster (Sekundärdialog, häufig modal) Einstellung Optionen Prof. A. Müller, FH KL Software Engineering Winter '12/'13 11

12 Beispiel: SAP-GUI Prof. Dr. Thomas Allweyer -Software Engineering Prof. A. Müller, FH KL Software Engineering Winter '12/'13 12

13 Menüs (1) Menüs bestehen aus einer Menge von Auswahloptionen Menü-Typen (nach Inhalten) Aktionsmenüs Auslösen von Funktionen Eigenschaftsmenüs Einstellen von Parametern Verhalten von Menüs Anzeige des Menüs, bis Selektion erfolgt, ESC gedrückt oder außerhalb des Menüs geklickt wird Menüoptionen können dynamisch von der Anwendung geändert werden Durch Kaskadenmenüs (Verzweigung in Untermenüs) lassen sich Hierarchiestufen hinzufügen Prof. A. Müller, FH KL Software Engineering Winter '12/'13 13

14 Menüs (2) Menü-Typen (nach Darstellung) Menü-Balken mit Drop-Down-Menüs Menü-Balken enthält alle Menütitel ständig sichtbar Anwendungsfenster besitzt immer Menü-Balken Unterfenster können ebenfalls Menü-Balken besitzen, klinken sich bei Auswahl des Unterfensters dynamisch in den Menü-Balken des Anwendungsfensters ein Gleichnamige Menüeinträge können je nach aktivem Unterfenster unterschiedliche Wirkungen haben Drop-Down-Menüs erscheinen nach Selektion des Menütitels Im aktuellen Kontext nicht selektierbare Einträge sind grau dargestellt Alternative:. Pop-Up-Menüs Sind normalerweise unsichtbar Können für aktive Fenster oder Objekte über die rechte Maustaste geöffnet werden Enthalten nur für das ausgewählte Objekt selektierbare Einträge Prof. A. Müller, FH KL Software Engineering Winter '12/'13 14

15 Windows-Benutzungsoberfläche (Beispiele) Prof. A. Müller, FH KL Software Engineering Winter '12/'13 15

16 Beschleunigung der Menüauswahl Menüauswahl über Tastatur Z. B. ALT+Unterstrichener Buchstabe der Menü-Bar Tastaturkürzel (Short Cut Key) Z. B. CTRL+S für Speichern Symbolbalken Aufführung der jeweils zuletzt benutzten Objekte Aufführung der häufigsten zuletzt benutzten Objekte Auslagerung von Menüoptionen auf Arbeitsbereiche (z. B. in Dialogfenstern) Prof. A. Müller, FH KL Software Engineering Winter '12/'13 16

17 Interaktionselemente Textfeld Mehrzeiliges Textfeld Drehfeld (Spin Box) Schaltfläche Optionsfeld (Radio Button) Kontrollkästchen (Check Box) Prof. A. Müller, FH KL Software Engineering Winter '12/'13 17

18 Interaktionselemente (2) Listenfeld (List Box) Kombinationsfeld (Combo Box) Drop-Down Kombinationsfeld (Drop-Down Combo Box) Prof. A. Müller, FH KL Software Engineering Winter '12/'13 18

19 Interaktionselemente (3) Listenelement, Tabelle (List View Control) Schieberegler (Slider) Register (Tab Control) Strukturansicht, Baum (Tree View Control) Prof. A. Müller, FH KL Software Engineering Winter '12/'13 19

20 Interaktionselemente (4) Quelle: Sommerville, Abb Prof. A. Müller, FH KL Software Engineering Winter '12/'13 20

21 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 Prof. A. Müller, FH KL Software Engineering Winter '12/'13 21

22 Beispiel für eine Ajax-Anwendung zwoogle.de Umsetzung (1): sample code autosuggest Mehr dazu: Modul Architektur Prof. A. Müller, FH KL Software Engineering Winter '12/'13 22

23 Darstellung von Klassen Erfassungsfenster (Detailansicht) Ein Fenster mit allen Attributen des Objekts Listenansicht Übersichtliche Darstellung aller Objekte der Klasse mit ausgewählten Attributen Prof. A. Müller, FH KL Software Engineering Winter '12/'13 23

24 Darstellungen von 1-Assoziationen Prof. A. Müller, FH KL Software Engineering Winter '12/'13 24

25 Darstellung von n-assoziationen Artikel Neu: Lieferant Nummer Firma Bezeichnung Ansprechpartner Preis OK Abbrechen Liste Lieferant Firma Ansprechpartner Auswahl Lieferant Firma Ansprechpartner Auswählen Neu Entfernen Auswählen Abbrechen Neu OK Übernehmen Abbrechen Liste... Prof. A. Müller, FH KL Software Engineering Winter '12/'13 25

26 Dialogstruktur (Dialoge von Folie Darstellung von n- Assoziationen, in Zusammenhang mit Listenfenster von Darstellung von Klassen ) Prof. A. Müller, FH KL Software Engineering Winter '12/'13 26

27 Darstellung von mehrfachen Assoziationen Prof. A. Müller, FH KL Software Engineering Winter '12/'13 27

28 Darstellung in die andere Assoziationsrichtung Prof. A. Müller, FH KL Software Engineering Winter '12/'13 28

29 Darstellung von Vererbungen Prof. A. Müller, FH KL Software Engineering Winter '12/'13 29

30 Alternative Darstellung mit Hilfe von Registern Prof. A. Müller, FH KL Software Engineering Winter '12/'13 30

31 Darstellung von Vererbungen Handelt es sich bei der Oberklasse um eine konkrete Klasse, so gibt es auch ein Erfassungsfenster nur mit den Attributen der Oberklasse Mehrstufige Vererbung: Für jede Stufe der Vererbung kommt ein Kasten oder ein Register mit den zusätzlichen Attributen hinzu Prof. A. Müller, FH KL Software Engineering Winter '12/'13 31

32 Darstellung von reflexiven Assoziationen (1) Prof. A. Müller, FH KL Software Engineering Winter '12/'13 32

33 Darstellung von reflexiven Assoziationen (2) Prof. A. Müller, FH KL Software Engineering Winter '12/'13 33

34 Prof. A. Müller, FH KL Software Engineering Winter '12/'13 34

35 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 Prof. A. Müller, FH KL Software Engineering Winter '12/'13 35

36 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) Anhang: Informationsvisualisierung Prof. A. Müller, FH KL Software Engineering Winter '12/'13 36

37 Überblick Paradigmen Quelle: Sommerville, Abbildung 16.2: Prof. A. Müller, FH KL Software Engineering Winter '12/'13 37

38 Prof. A. Müller, FH KL Software Engineering Winter '12/'13 38

39 Design Pattern: Continous Filter Prof. A. Müller, FH KL Software Engineering Winter '12/'13 39

40 KWIC (Keyword in Context) Michael Chen Marti Hearst Jason Hong James Lin, 1999 frühes Konzept, wurde später von Web- Suchmaschinen übernommen Prof. A. Müller, FH KL Software Engineering Winter '12/'13 40

41 Design Pattern: Overview / Detail Bsp.: Cha-Cha (Chen & Hearst 98) Shows table-of-contents -like view, like Superbook Takes advantage of humancreated structure within hyperlinks to create the TOC Prof. A. Müller, FH KL Software Engineering Winter '12/'13 41

42 MeshBrowse (Korn & Shneiderman95) Prof. A. Müller, FH KL Software Engineering Winter '12/'13 42

43 Cat-a-Cone Hearst, Karadi, 1997 Prof. A. Müller, FH KL Software Engineering Winter '12/'13 43

44 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, 1997 Prof. A. Müller, FH KL Software Engineering Winter '12/'13 44

45 Wichtige Aussagen Entwurfsgrundsätze bei der Formulierung von Meldungen Quelle: Sommerville, Abbildung 16.10: Prof. A. Müller, FH KL Software Engineering Winter '12/'13 45

46 Anhang: Informationsvisualisierung Beispiele Prof. A. Müller, FH KL Software Engineering Winter '12/'13 46

47 Prof. A. Müller, FH KL Software Engineering Winter '12/'13 47

48 Quelle: Die Zeit, 5/2010 Prof. A. Müller, FH KL Software Engineering Winter '12/'13 48