ENA Entwicklung nutzerorientierter Anwendungen 3V + 1P SWS 5 CP Belegnummer:30.7304 [PVL/Praktikum: 30.7305] Sommersemester 2015
Entwicklung nutzerorientierter Anwendungen Gestaltung von grafisch-interaktiven Systemen hier: Smartphone mit Android Bedürfnisse, Fähigkeiten und Erwartungen der (spezifischen) Nutzergruppen stehen im Mittelpunkt Nutzergruppe(n) identifizieren Bedürfnisse befriedigen Fähigkeiten unterstützen Erwartungen erfüllen Interdisziplinäres Gebiet auch Psychologie, auch Design, auch Softwareentwicklung,... Usability steht in den verschiedenen Phasen im Vordergrund Anforderungen erfassen und analysieren Prototypen entwerfen, umsetzen, testen und reflektieren Ergebnisse evaluieren Entwicklung nutzerorientierter Anwendungen, Seite 4
Überblick Java und Android for Run-aways Human Computer Interaction Usability Intuitive Bedienbarkeit, Erlernbarkeit, Konsistenz,... Gestaltung Farbe, Schrift, Anordnung, Layout, Entwurf: benutzerzentrierte Analyse, Design, Rapid Prototyping Konstruktionunter Android mit IDE: Views (Controls, Componenten), Container, Layouts, Eventhandling, Ressourcenkonzept Programmiermuster Model-View-Control, Observer, Adapter, Singleton Beispiele in der Vorlesung Entwicklung nutzerorientierter Anwendungen, Seite 5
Inhalte SW-Technik: Rollen erfassen, Nutzungsfall identifizieren, Szenario und Screen-Diagramm erstellen Trennung Datenverarbeitung Oberfläche, Dokument Ansicht MVC als Architektur- und Designpattern Screen-Design und Ergonomie Gruppierung, Formen, Farben, statisches/dynamisches Layout Java/Android Crash-Kurs für Kenner von C++ Implementierungstechniken Baukasten: Views, Attribute, Ereignisse Screens (Activities) mit Layouts und Views Ereignisbehandlung auch zusätzliche Klassen (z.b. Collection, Persistenz: Dateihandling, ) Gute Beispiele, schlechte Beispiele Entwicklung nutzerorientierter Anwendungen, Seite 6
Lernziele der Veranstaltung Grafisch-interaktive Benutzungsoberflächen (GO) Benutzerorientierung verinnerlichen (Benutzergruppen/Rollen identifizieren, Usability-Überlegungen einsetzen,...) intuitiv und ergonomisch gestalten visuell ansprechend entwerfen GO-Entscheidungen - Verwendung bestimmter Componenten - begründen können objektorientiert konstruieren gute GOs spiegeln sich im Entwurfs- und Realisierungsaufwand wider methodisch Vorgehen lernen Konzept der Ereignisorientierung verstehen Bausteine grafischer Oberflächen kennen und anwenden lernen... und das alles in Android (und Java) Entwicklung nutzerorientierter Anwendungen, Seite 7
Prüfung/Klausur mit Papier und Kugelschreiber Raum und Zeit siehe OBS (achten Sie auf Anmelde- und Abmeldefristen) regelmäßige Teilnahme am Praktikum es sind 5 Terminewird kontrolliert und ist Voraussetzung für ein erfolgreiches Testat; Beginn am 16. bzw. 23. April alte Klausur und Übungs-/Vorbereitungstermin Tipp: Aktive Mitarbeit macht einen guten Teil der Prüfungsvorbereitung aus! Entwicklung nutzerorientierter Anwendungen, Seite 8
Literatur zu Java http://www.javabuch.de Guido Krüger, Addison-Wesley, ISBN 3-8273-1949-8 http://openbook.galileocomputing.de/javainsel8/index.htm http://www.dpunkt.de/java/index.html http://www.java2s.com/tutorial/java/catalogjava.htm und http://java.sun.com/docs/books/tutorial/index.html Oracle (Sun): Java Documentation + Suchapplet http://www.oracle.com/technetwork/java/index.html#docs Entwicklung nutzerorientierter Anwendungen, Seite 9
Literatur und Tutorials zu Android Arno Becker, Marcus Pant: Android Grundlagen und Programmierung; dpunkt Verlag; ISBn-978-3-89864-574-4 Mike Bach: Mobile Anwendungen mit Android Entwicklung und praktischer Einsatz; Addison-Wesley; ISBN-978-3-8273-3047-5 http://developer.android.com/guide/index.html http://developer.android.com/design/index.html http://developer.android.com/develop/index.html und viele weitere Online-Tutorials Entwicklung nutzerorientierter Anwendungen, Seite 10
Weiterführende Literatur Bernhard Preim: Entwicklung interaktiver Systeme Ivo Wessel: GUI-Design Alan Cooper: About Face - The Essentials of User Interface Design Patrick J. Lynch, Sarah Horton : Web Style Guide (webstyleguide.com) Sun: Java Look and Feel Design Guidelines Online http://java.sun.com/products/jlf/dg/index.htm Sun: Sonstiges rund um Java http://java.sun.com/docs/ Helmut Balzert: Lehrbuch Grundlagen der Informatik Entwicklung nutzerorientierter Anwendungen, Seite 11
Praktikum Semesterprojekt: Entwurf, prototypische Realisierungund Verfeinerung eines Systems optimierende Iterationen sind wichtig! Problembewusstsein entsteht im Laufe des Semesters Implementierung mit Android Studio Get the Android Studio: http://developer.android.com/sdk/index.html Entwicklung nutzerorientierter Anwendungen, Seite 12
Usability, Benutzeranforderungen, Rapid Prototyping ENTWURFSPHASE Entwicklung nutzerorientierter Anwendungen, Seite 13
Gelegenheit, über Usability nachzudenken Ständiger Technologiewandel verlangt permanente Auseinandersetzung mit Organisationsabläufen und den Systemen Anstehende System-oder Versionswechsel sind zusätzlich günstige Zeitpunkte, dabei müssen gerade die unterschiedlichen Nutzer überzeugt und mitgenommen werden Bereitschaft, sich mit Arbeitsabläufen und der Einbindung von IT -Prozessen auseinander zusetzen mit dem Ziel Produktivität/Wirtschaftlichkeit zu steigern Ressourcen zu schon und Kosten (Durchlaufzeit) zu reduzieren Qualität und Kundenzufriedenheit zu verbessern Mobile Geräte bieten die Möglichkeit, Fragen neu zu beantworten oder Abläufe neu zu realisieren Neben den Aspekten Preis, Lizenzen, Standards, branchentypischen Lösungen, verkauften Systemen, Schnittstellen und Integration spielt die Nutzerzufriedenheit eine wichtige Rolle Entwicklung nutzerorientierter Anwendungen, Seite 14
Bedeutung der Entwurfsphase Beim Entwurf und der Realisierung muss in der Praxis insbesondere darauf geachtet werden, dass man den Entwickleraufwand kalkulieren kann und dann auch einhält, das Projekt also in-time und in-budget bleibt und den Support nicht überstrapaziert die User Requirements erfüllt werden. Das muss auch etwas mit Qualität zu tun haben! Fehler in der Analyse und Konzeption haben dabei dramatische Auswirkungen auf die o.g. genannten Punkte! Ein erstes, wichtiges Ziel muss also sein, die Anforderungen der Benutzer richtig und vollständig zu erfassen Entwicklung nutzerorientierter Anwendungen, Seite 15
Phänomene nicht nur im Zusammenhang mit grafischen Benutzungsoberflächen (1/2) Kognitive Dissonanz entsteht, wenn man zwischen verschiedenen Alternativen wählen muss und die Vor-und Nachteile dieser Systeme abwägt. Hat man eine Entscheidung getroffen, ist man bemüht, sich zu versichern, dass man die richtige Wahl getroffen hat und nimmt Argumente besonders wahr, die die Entscheidung unterstützen und verharmlost/ignoriert Gegenargumente. Beispiel: Festhalten an möglicherweise kryptisch und schwer zu benutzenden oder teueren Systeme Anordnung der Tasten auf der qwertz-tastatur [Alternative siehe z.b. http://en.wikipedia.org/wiki/dvorak_simplified_keyboard ]... Entwicklung nutzerorientierter Anwendungen, Seite 16
Phänomene nicht nur im Zusammenhang mit grafischen Benutzungsoberflächen (2/2) Magisches Denken bezieht sich darauf, dass sich Benutzer eine Vorstellung (mentales Modell) von dem System/Geräte machen, mit dem sie arbeiten. Diese hängt von der Erfahrung und Vorbildung ab. Die Modelle sind so konstruiert, dass sie Analogieschlüsse zulassen: wenn das Mail-Tool geöffnet ist, stürzt die Textverarbeitung bei der Rechtschreibprüfung ab Benutzer sind sehr bemüht an diesen Modellen festzuhalten; auch dann wenn gedankliche Verrenkungen nötig werden: wenn das Mail-Tool offen ist und mehr als zehn neue Mails eingetroffen sind, dann stürzt die Textverarbeitung ab Entwicklung nutzerorientierter Anwendungen, Seite 17
Entwickler und Anwender (1/4) spielen einen neuen Dialog durch: Entwickler: So, jetzt hast Du einen Teil der Aufgabe bereits ausgeführt. Willst Du nun noch etwas verändern? Anwender: Ja, ich möchte eine Komponente löschen. Was muss ich tun? E: Deute auf das Menu mit dem Namen CD. A: CD? E: CD bedeutet Component Delete. A: OK, ich habe verstanden Oh, was passiert jetzt? Entwicklung nutzerorientierter Anwendungen, Seite 18
Entwickler und Anwender (2/4) E: Du bist jetzt im Analyse-Modus. Du musst aus Versehen AM ausgewählt haben. A: Ach so, ich dachte, ich hätte CD ausgewählt. Wie verlasse ich den Analyse-Modus? E: Kein Problem. Gib einfach control Q ein. A: [tippt C O N T R O L ] E: Nein! Drücke die Strg -Taste und die Q -Taste. A: Wie dumm von mir. Ich versuch s noch einmal. Es passiert gar nichts. Was habe ich falsch gemacht? Entwicklung nutzerorientierter Anwendungen, Seite 19
Entwickler und Anwender (3/4) E: Du hast nichts falsch gemacht. Die Komponente ist gelöscht aber noch nicht vom Bildschirm entfernt. Gib noch control-j ein. A: Ich habe verstanden. Wenn ich die nächste Komponente lösche, gebe ich wieder control-q ein. Hoppla, warum ist der Bildschirm jetzt weiß? E: Du hast nur Q eingegeben. Q bedeutet Quit und beendet das Programm. Jetzt musst Du leider alles noch einmal eingeben! A: Wenn das so ist, machen wir nächste Woche weiter. Entwicklung nutzerorientierter Anwendungen, Seite 20
Entwickler und Anwender (4/4) Folgende Fehler wurden gemacht: Kommandos (CD, AM) sind nicht intuitiv erzeugt unnötige Belastung für den Anwender Auf welches Objekt wird das Kommando angewendet? Keine Statusinformation zu Zustandsänderungen Kryptische Kommandos (control-j, control-q) sind ungeeignet für unerfahrene, gelegentliche Benutzer Kein Feedback bei Delete erzeugt Frustration und Ablehnung bei dem Anwender ergibt Negativausstrahlung auf das Gesamtsystem Entwicklung nutzerorientierter Anwendungen, Seite 21
Usability-Kriterien Usability-Kriterien sind: Effizienz (Efficiency) Wenig Interaktion (Benutzer entlasten) Fokussteuerung an Hauptabläufen orientiert (Benutzer führen) Effektivität (Effectiveness) Können alle Aufgaben vollständig gelöst werden? Erlernbarkeit (Learnability) Kann das UI aus der Benutzererfahrung heraus bedient werden? Erinnerbarkeit (Memorability) Kann man das UI nach einer gewissen Zeit noch sicher bedienen? Zufriedenheit/Wohlbefinden/Spaß (Satisfaction; Emotional Usability) Gestaltung, Feedback, Klarheit Fehlersituation durch Bedienung (Error) Entwicklung nutzerorientierter Anwendungen, Seite 22
Analyse-Design-Realisierung-Test-Evaluation Analyse Benutzorientiertes RequirementsEngineering: Usability-Engineering Heuristic ohne Benutzer testen Observation Benutzer beim bedienen beobachten Thinking-Aloud Beim Bedienen laut denken Questionnaire - Fragebogen Interview Befragung u.u. Erarbeitung von Anwendungswissen u.u. Erarbeitung von zusätzlichem technischem Wissen Diesen Prozess wollen wir im Praktikum zumindest einmal durchlaufen Entwicklung nutzerorientierter Anwendungen, Seite 23
Analyse-Design-Realisierung-Test-Evaluation Design Legen Sie Designziele fest Welche Benutzergruppen adressieren Sie? Entlasten Sie den Benutzer! Welche Vorteile, welchen Nutzwert liefert ihre App Beschreiben Sie Anwendungsszenariien und Use Cases Skizzieren Sie das Layout (es sollte dynamisch sein) Überlegen und begründen Sie Gestaltungsentscheidungen Entwicklung nutzerorientierter Anwendungen, Seite 24
Analyse-Design-Realisierung-Test-Evaluation Realisierung Überlegen Sie, wie Sie Funktionalität und Dialog(Controls) koppeln: Model-View-Control Entwickeln Sie die Funktionalität getrennt von der GUI! Denken Sie auch an die Navigation im Systeme, die Arbeitsabläufe und den generellen Workflow Rapid Prototyping: iterativ, unter Einbeziehung der Nutzer Machbarkeit demonstrieren Entwicklung nutzerorientierter Anwendungen, Seite 25
Analyse-Design-Realisierung-Test-Evaluation Test Wer von Ihnen würde ein nicht getestetes Programm benutzen? Überlegen Sie von Beginn an Testfälle Wie lange dauert es, um eine bestimmte Aufgabe zu lösen? Wie viele Klicks/Interaktionen werden benötigt, um die Aufgabe zu lösen? Wie schnell erlernbar ist das GUI? Wie viele Fehler werden gemacht? Wie sicher ist die GUI? Testen Sie die Gebrauchstauglichkeit (Usability) Entwicklung nutzerorientierter Anwendungen, Seite 26
Analyse-Design-Realisierung-Test-Evaluation Evaluation der Umsetzung Welche Ziele werden erreicht? Wie gut werden die Ziele erreicht? Evaluationsmethoden: Experteninspektionen, kognitiver Walkthrough, Usability-Tests, Fragebogenverfahren Klassifikation von Evaluationsmethoden: analytisch vs. empirische bzw. deskriptiv vs. präskriptive Evaluationsmethoden Formen der Evaluation: summative und formative Evaluation Vereinbarung von Evaluationskriterien Entwicklung nutzerorientierter Anwendungen, Seite 27
Usability-Aspekte Struktur (Layout, Design) planen und festlegen Dazu gehört auch Elemente präzise zu identifizieren Elemente sinnvoll zu benennen ( Sprache der Nutzer sprechen ) Skizzen (und Entwürfe) zu erstellen und schrittweise (zunächst abstrakt dann konkret) zu verfeinern Die Anforderungen orientieren sich an den Aufgaben Welche Aufgaben möchte der Benutzer lösen? Aufgaben und Bedürfnissen der unterschiedlichen Benutzergruppen sind unterschiedlich Welche unterschiedlichen Benutzergruppen gibt es? Entwicklung nutzerorientierter Anwendungen, Seite 28
Ziele (1/2) Einheitliches Look-and-Feel (Konsistenz) Innerhalb einer Applikation und applikationsübergreifend Benutzerführung gemäß Regeln Motto: Fehlervermeidung statt Fehlerbehebung Trennung von Anwendung und graphischer Benutzungsoberfläche einfache Anpassung von Text und Schrift; relative Positionierung ist zusätzlich sehr hilfreich: Methode Componente C1 links von C2; C3 oberhalb von C4 Dialog(schritt)e bilden Zustände ab Screens werden in separaten Ressource-Dateien (in XML) beschrieben Entwicklung nutzerorientierter Anwendungen, Seite 29
Ziele (2/2) Aufgabenangemessene Präsentation und Interaktion Direkte Manipulation Benutzerunterstützung beim Gestalten und Steuern, Erstellen und Modifizieren, Inspizieren (surfen) und Prüfen, Navigation(sunterstützung) in komplexen Situationen Beherrschung der Komplexität und Menge durch Informationsaufbereitung: selbsterklärend, kontextbezogene Hilfe Realitätsnähe Abstraktion Auch auf mobilen Endgeräten und unter deren speziellen Einsatzbedingungen (unterwegs, draußen, bei widrigen Lichtverhältnissen, ) Joy of Use: begeistern, stimulieren, motivieren, überzeugen, fesseln,... (Tipp: Schauen Sie unter youtube piano stairs http://www.youtube.com/watch?v=2lxh2n0apyw) Entwicklung nutzerorientierter Anwendungen, Seite 30
Emotional Usability: Joy of Use Merkmale die Software unterstützt den Benutzer unauffällig bzw. weckt dessen Interesse, indem es interessante Funktionen als zu lösende Aufgaben präsentiert und Neugier weckt sowie Anreiz zum eigenständigen Lernen gibt die Aufgabenstellung wird in eine Geschichte integriert -die Bearbeitung einer Teilaufgabe ist ein Schritt in einer größeren Aufgabenstellung - die Glaubwürdigkeit in der Arbeitswelt wird durch Konsistenz und Aufmerksamkeit für Details gesichert ( Erwartungskonformität) Quelle: Marc Hassenzahl: Attraktive Software Was Gestalter von Computerspielen lernen können; In: J Machate&M.Burmester: User Interface Tuning; Benutzerschnittstellen menschlich gestalten; Software & Support Verlag 2003 Entwicklung nutzerorientierter Anwendungen, Seite 31
1. Vollständiges Beispiel: BMI APP Entwicklung nutzerorientierter Anwendungen, Seite 32
Aufgabenstellung: BMI-App Der BMI bezieht die Körpermasseauf das Quadrat der Körpergröße. Der BMI ist lediglich ein grober Richtwert, da er weder Statur und Geschlecht noch die individuelle Zusammensetzung der Körpermasseaus Fett-und Muskelgewebe eines Menschen berücksichtigt. Der Body Mass Index (BMI) bewertet einfach das Körpergewicht. Die (vereinfachte) Formel zu Berechnung des BMI lautet BMI = Masse in kg / (Größe in Meter) 2 Dabei bedeutet ein BMI zwischen 18,50 und 24,99 Idealgewicht; Werte unter 18,50 bedeuten Untergewicht und ein Wert von 25,00 oder mehr weist auf Übergewicht hin. Ein BMI Rechner soll als App realisiert werden. Entwicklung nutzerorientierter Anwendungen, Seite 33
Vorbereitung der BMI-App Funktional ist (zunächst) die Formel umsetzen (minimaler Aufwand) Zur Erfassung von Größe und Gewicht und zur Darstellung des BMI wird ein User Interface benötigt zumindest die Eingaben sollten auf Plausibilität überprüft werden! Eine Strukturierung des Ablaufs/Workflows in mehrere Screens/Schritte ist hier offensichtlich nicht erforderlich (weitere) Systemressourcen werden nicht benötigt Entwicklung nutzerorientierter Anwendungen, Seite 34
Entwicklungsschritte Erster Entwurf Konkretisierung Umsetzung und Tests - grob und abstrakt - - mit Controls/Views - - funktional und bzgl. Usability (i.d.r. erfolgen Verbesserungen) Entwicklung nutzerorientierter Anwendungen, Seite 35
Umsetzung der BMI-App benötigt werden eine Layoutbeschreibung (Ressource), eine Activity unter Android, die die Anwendungslogik umsetzt und ein Manifest, in welchem Berechtigungen, Icons und weitere Spezifika weitere Activities und Services benannt werden Entwicklung nutzerorientierter Anwendungen, Seite 36
src/com.example.bmiapp/mainactivity.java public class MainActivity extends Activity { @Override protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); Layoutressource setcontentview(r.layout.activity_main); Button button; button = (Button) findviewbyid(r.id.bmi); button.setonclicklistener(new OnClickListener() { public void onclick(view view) { float masse; float groesse; Verbindung zum Button Eventhandling EditText etgroesse = (EditText) findviewbyid(r.id.groesse); EditText etmasse = (EditText) findviewbyid(r.id.masse); Entwicklung nutzerorientierter Anwendungen, Seite 37
src/com.example.bmiapp/mainactivity.java } } }); @Override Editable e = etmasse.gettext(); masse = Float.valueOf(e.toString()); e = etgroesse.gettext(); groesse = Float.valueOf(e.toString()); float bmi = masse / (groesse * groesse); EditText result = (EditText) findviewbyid(r.id.result); result.settext(string.valueof(bmi)); public boolean oncreateoptionsmenu(menu menu) { } } getmenuinflater().inflate(r.menu.activity_main, menu); return true; macht gglfs. die Menu- Einträge verfügbar Entwicklung nutzerorientierter Anwendungen, Seite 38
Entwicklung nutzerorientierter Anwendungen, Seite 39
res/layout/activity_main.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".mainactivity" > <TextView android:id="@+id/textview3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignright="@+id/edittext1" android:layout_centervertical="true" android:text="groesse" Wesentliche Merkmale derviews und das Layout der Activity wird hier festgelegt Hinweis, dass der Benutzer die Größe eingeben soll android:textappearance="?android:attr/textappearancemedium" /> Entwicklung nutzerorientierter Anwendungen, Seite 40
res/layout/activity_main.xml <EditText android:id="@+id/groesse" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignparentleft="true" android:layout_below="@+id/textview3" android:ems="10" /> <TextView android:id="@+id/textview1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignparentleft="true" android:layout_alignparenttop="true" android:layout_marginleft="26dp" android:layout_margintop="50dp" android:text="masse" Eingabefeld für die Größe Hinweis, dass der Benutzer die Masse eingeben soll android:textappearance="?android:attr/textappearancemedium" /> Entwicklung nutzerorientierter Anwendungen, Seite 41
res/layout/activity_main.xml <EditText android:id="@+id/masse" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignparentleft="true" android:layout_below="@+id/textview1" android:layout_margintop="33dp" android:ems="10" /> <EditText android:id="@+id/result" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignparentbottom="true" android:layout_alignparentleft="true" android:layout_marginbottom="58dp" android:ems="10" /> Eingabefeld für die Masse Ergebnisfeld Entwicklung nutzerorientierter Anwendungen, Seite 42
res/layout/activity_main.xml <Button android:id="@+id/bmi" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignparentleft="true" android:layout_below="@+id/groesse" android:text="bmi" /> Anklicken des Buttons soll bewirken, dassdie Formel ausgeführt wird </RelativeLayout> Entwicklung nutzerorientierter Anwendungen, Seite 43
Entwicklung nutzerorientierter Anwendungen, Seite 44
bin/res/androidmanifest.xml <?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.example.bmiapp" android:versioncode="1" android:versionname="1.0" > <uses-sdk android:minsdkversion = "14" android:targetsdkversion = "17" /> Entwicklung nutzerorientierter Anwendungen, Seite 45
bin/res/androidmanifest.xml <application android:allowbackup="true" android:icon="@drawable/ic_launcher" android:label="@string/app_name" android:theme="@style/apptheme" > <activity android:name=".mainactivity" android:label="@string/app_name" > <intent-filter> Mitdieser Activity wirddie App gestartet <action android:name="android.intent.action.main" /> <category android:name="android.intent.category.launcher" /> </intent-filter> </activity> </application> </manifest> Angabe weiterer Activities und der Berechtigungen Entwicklung nutzerorientierter Anwendungen, Seite 46
Bewertung der BMIApp App ist erster rudimentärer Ansatz App kann nicht mit fehlerhaften Eingaben umgehen! (kritisch!) Aufbereitung und -auch grafische -Interpretation des Ergebnisses wäre wünschenswert (so nicht sehr benutzerfreundlich) Aufzeigen von Trends (gegenüber der letzten Berechnung) wär wertvoll Entwicklung nutzerorientierter Anwendungen, Seite 47
Dialogstruktur, Navigationsübersicht, Diagramme DIALOG(SCHRITT)E Entwicklung nutzerorientierter Anwendungen, Seite 48
Mensch-Maschine-Schnittstelle - Graphische Benutzungsoberfläche Präsentation, Visualisierung kreativ, intuitiv Interaktion monoton, schnell Beobachten, Bedienen
Kommunikation und Mobiliät Kommunikation (der Austausch mit anderen) Mobilität (unterwegs und Information über die Umgebung) geschützt, vertraut, sicher, komfortabel Entwicklung nutzerorientierter Anwendungen, Seite 50
Ein kleines Beispiel Überlegen Sie, wie ein Anwender den Dialog mit einem Geldautomaten wahrnimmt und auch beschreibt Zugangsberechtigung kontrollieren (EC-Karte und Ihre 4stellige Geheimnummer) Betrag angeben Betrag ausgeben Automat wieder in den Ausgangszustand versetzen Entwicklung nutzerorientierter Anwendungen, Seite 51
siehe auch SWT-Skript Notation des Sequenzdiagramms Objekt Methodenausführung Lebenslinie Meth.aufrufen Bedingung Ablauf objektorientiert beschrieben Objekt erzeugen Objekt zerstören eigene Methode aufrufen Entwicklung nutzerorientierter Anwendungen, Seite 52
Sequenzdiagramm "Geld holen" E! " $% +,,! '! E ' E '!! &!'! $!!./ 0% &' ()* +,-!' 111 Entwicklung nutzerorientierter Anwendungen, Seite 53
Sequenzdiagramm "Geld abheben" Geld holen Ich: CBenutzer EC-Karte einlesen Use Case wählen PIN-Nummer einlesen Betrag einlesen EC-Karte ausgeben EC-Karte entnehmen VolksbankAutomat1: CGeldautomat Geld ausgeben in diese Richtung kann man das innere Verhalten weiter modellieren Screens= Zustände Ruhestellung Hauptmenü PIN-Dialog... Geld entnehmen Entwicklung nutzerorientierter Anwendungen, Seite 54
Geldautomat als "Assistent (üblich) "Assistenten" serialisieren die Abfrage mehrerer Eingabewerte vom Benutzer Vereinfachung: Benutzer muss zu einem Zeitpunkt nur über eine Frage nachdenken sinnvoll für selten benutzte Anwendungsfälle oder für unerfahrene Benutzer langsam und schwerfällig für Profis zum Vergleich der bekannte Geldautomat nicht als Assistent: Entwicklung nutzerorientierter Anwendungen, Seite 55
Szenario "Kontostand abfragen" Benutzer führt EC-Karte ein wählt "Kontostand abfragen" gibt PIN-Nummer ein nimmt EC-Karte Automat bietet Hauptmenü an erfragt PIN-Nummer gibt EC-Karte heraus zeigt Kontostand an geht in Ruhestellung Entwicklung nutzerorientierter Anwendungen, Seite 56
Szenario "Geld holen" Sicht des Kunden Benutzer Automat führt EC-Karte ein wählt "Auszahlung" gibt PIN-Nummer ein gibt Betrag ein nimmt EC-Karte nimmt Geld Sicht der Bank bietet Hauptmenü an erfragt PIN-Nummer erfragt Betrag gibt EC-Karte heraus gibt Geld heraus geht in Ruhestellung Entwicklung nutzerorientierter Anwendungen, Seite 57
Geldautomat: Use Case Diagramm Use Cases entsprechen oft der obersten Menüebene Geldautomat Kontostand abfragen Geldvorrat prüfen Geld Geld holen nachfüllen Kunde Schecks bestellen eingezogene Scheckkarten entnehmen Mitarbeiter eine Benutzergruppe sieht oft nicht die Funktionen der anderen Entwicklung nutzerorientierter Anwendungen, Seite 58
Sequenzdiagramme -Notation stellen Objekte und deren Interaktion dar Interaktion: eine Methode ruft eine andere Methode auf Zeitachse von oben nach unten Lebensdauer des Objekts durch "Lebenslinie" dargestellt vgl. Flussdiagramm / Programmablaufplan ältere Diagrammtypen, die nicht objektorientiert sind Entwicklung nutzerorientierter Anwendungen, Seite 59
Sequenzdiagramme -Bewertung Diagramme für GUI-Entwurf in UML nur beschränkt geeignet: UML konzentriert sich auf die Architektur von SW-Systemen vernachlässigt den visuellen Aspekt ein GUI wird zwar mit Klassen realisiert, anhand eines Klassen-oder Kollaborationsdiagramms kann man sich aber kein Bild von Aussehen und Benutzung machen! Vorschlag: Screen-Diagramme im Grunde abgewandelte Zustandsdiagramme Entwicklung nutzerorientierter Anwendungen, Seite 60
abstrakt und konkret Beispiel: Lehrangebote ansehen abstrakte Elementliste (Stichwortliste, Halbsätze) Sortierung wählen: Semester, Dozent, Import/Export konkretes Layout (konkrete Anordnung, Festlegung auf Componenten) Fachbereich wählen Vorschau Drucken Ausgabe in Datei Schließen Entwicklung nutzerorientierter Anwendungen, Seite 61
Verbindung zum Sequenzdiagramm LvPlanungView: CLvPlanungAusgDlg LvPlanungModel: CLvPlanungAusg OnSortClick OnFbChange SetSort(Sort) SetFb(Fb) OnDiskClick OnPrintClick Output(P) OnPreviewClick OnExitClick Entwicklung nutzerorientierter Anwendungen, Seite 62
Komplexität beherrschen Diagramme beanspruchen viel Platz Problem beim Zeichnen Problem beim Verstehen gilt für alle, nicht nur für Zustandsdiagramme sinnvolle Zerlegung in Teildiagramme ist wichtig insbesondere auch hierarchische Gliederung Abstraktion nicht einfach orientiert an der Papiergröße zerschneiden aussagekräftige Bezeichnung für jedes Teildiagramm analog zu sinnvollen Klassen- und Funktionsnamen Entwicklung nutzerorientierter Anwendungen, Seite 63
siehe auch OOAD-Skript! Zustandsdiagramme: Idee und Notation ein Objekt kann im Lauf der Zeit verschiedene Zustände annehmen Haben einen Anfang und ein Ende Zustandswechsel werden durch Ereignisse ausgelöst unterschiedliche Folgezustände sind möglich abhängig von Bedingungen (Verzweigungen im Diagramm) Aktionen können ausgeführt werden beim Übergang in den Folgezustand (notiert mit Ereignis/Aktion) während des Verweilens in einem Zustand (notiert mit do/...) Objekt wird erzeugt durchläuft mehrere Zustände und wird vernichtet Zustand do/aktion Ereignis[Bedingung]/Aktion Entwicklung nutzerorientierter Anwendungen, Seite 64
Beispiele: Tür und Lampe Tür Lampe offen aus Schließen( rumms ) Öffnen Einschalten Ausschalten Übergangsaktion geschlossen an do/leuchten Zustandsaktion Entwicklung nutzerorientierter Anwendungen, Seite 65
Implementierung Zustand: Kombination von Attributwerten des Objekts Ereignis: empfangene Nachricht / Handler-Aufruf Bedingung: wird im Handler ausgewertet Zustandsübergang: Funktionskörper eines Handlers Übergangsaktion: Methodenaufruf für anderes Objekt Zustandsaktion: Methodenaufruf (in separatem Thread) speziell bei GUIs: Screens / Dialoge sind Zustände des Objekts "Bedienoberfläche" Hauptfenster hat Zeiger auf untergeordnete Fenster als Attribute objektorientiert + ereignisorientiert Entwicklung nutzerorientierter Anwendungen, Seite 66
Diagramme für wen? Diagramme aus der Softwaretechnik sind nichtgeeignet, um mit Auftraggebern zu kommunizieren selbst konkrete Screen-Diagramme nicht! allenfalls, wenn die Auftraggeber selbst Informatiker sind zur Kommunikation mit Auftraggebern und Benutzern braucht man Prototypen visuell und funktional konkret, nicht erklärungsbedürftig Diagramme helfen dem Entwickler beim Entwurf, dem Wartungsprogrammierer zum Verständnis Entwicklung nutzerorientierter Anwendungen, Seite 67
Manifest und Prinzipien der agilen Softwareentwicklung (kurzer Exkurs)... Durch die[se] Arbeit haben wir Folgendes schätzen gelernt: Individuen und Interaktionen mehr als Prozesse und Tools Funktionierende Software mehr als umfassende Dokumentation Zusammenarbeit mit Kunden mehr als Vertragsverhandlungen Reaktion auf Änderungen mehr als einen Plan zu befolgen... We follow these principles: Our highest priority is to satisfy the customer through early and continuous delivery of valuable software. Welcome changing requirements, even late in development. Agile processes harness change for the customer's competitive advantage. Deliver working software frequently, from a couple of weeks to a couple of months, with a preference to the shorter timescale. Business people and developers must work together daily throughout the project. http://www.agilemanifesto.org/ und http://www.agilemanifesto.org/principles.html Entwicklung nutzerorientierter Anwendungen, Seite 68
Einschub: Modelle eines Systems Modelle sind vereinfachte Darstellungen einer Wirklichkeit siehe Atommodelle in der Chemie kein Modell entspricht der Realität" a) mentales Modell hoffentlich identisch Sicht des Benutzers; an der Anwendung orientiert b) augenscheinliches Modell wie sich das System nach außen darstellt c) Implementierungsmodell Sicht des Entwicklers; technologisch orientiert Entwicklung nutzerorientierter Anwendungen, Seite 69