Entwicklung von Benutzerschnittstellen Florian Fuchs, fuchs@in.tum.de vorangegangene Vorträge haben sich mit psychologischen Gesichtspunkten der Human-Computer-Interaction oder Mensch-Maschine-Kommunikation beschäftigt Gestaltung von Benutzerschnittstellen und Entwicklung ganzer Softwaresysteme wird nun aus der Sicht der Softwareentwicklung betrachtet.

Entwicklung von Benutzerschnittstellen, Florian Fuchs Übersicht 1. Einführung 2. Gestaltung der Benutzerschnittstelle 3. Softwareentwicklung und HCI-Design 4. Zusammenfassung 21.11.2000 Entwicklung von Benutzerschnittstellen, Florian Fuchs

Entwicklung von Benutzerschnittstellen, Florian Fuchs 1. Einführung Gestaltung der Benutzerschnittstelle aus Sicht der Softwareentwicklung zeitaufwändig programmieraufwändig anspruchsvoll: neben Implementierung der eigentlichen Funktion Gestaltung von... ... Kommunikation und Interaktion ... Grafik und Text ... Information und Aufgaben arbeitsintensiv und schwierig - - BSP Online-Telefonbuch: Suchalgorithmus macht nur kleinen Teil aus verschiedene Fähigkeiten, lange Zeit nicht zu Aufgabebereich des Entwicklers gezählt verschiedene Gestaltungsentscheidungen, unter Einbeziehung der Benutzer, Konsequenzen auf Benutzer und Aufgaben in der Regeln und bekannt Hauptthema: Realisierung dieser Punkte in Software und vor allem welche Vorgehensweisen und Werkzeuge dabei helfen können 21.11.2000 Entwicklung von Benutzerschnittstellen, Florian Fuchs

2. Aspekte der Gestaltung der Benutzerschnittstelle Praktische Erfahrungen Theoretische Herangehensweise 1. Funktionaler Aspekt 2. Ästhetischer Aspekt 3. Struktureller Aspekt Peter Johnson vergleicht mit Handwerk Erfahrung und Übung Vermittlung und Weitergabe über Beispiele, weniger über Bücher oder theoretische Voträge. In den letzten Jahren auch theoretische Herangehensweisen an Gesichtspunkte 21.11.2000 Entwicklung von Benutzerschnittstellen, Florian Fuchs

2.1 Gestaltung - Funktionaler Aspekt Ist Benutzerschnittstelle zur Aufgabenbewältigung geeignet? Wozu soll sie dienen? Wozu soll sie nicht dienen? Wie kann Erweiterbarkeit für neue Aufgaben gewährleistet werden? Benutzbarkeit für gedachte Aufgaben nicht selbstverständlich, weil impliziert, wozu nicht dienen soll Entwickler tendieren dazu, universelle UI entwerfen zu wollen (Stolz) aber: führt zu UI, das nur von wenigen für nicht besonders viel benutzt werden kann natürlich: Problem der Nutzungsvorhersagbarkeit, keine Anwendung ausschließen + Wechselwirkung, Erweiterung Ziel: Kompromiss zwischen klare, einfache Bearbeitung beabsichtigter Aufgaben, Offenheit für darüberhinausgehende und neue Aufgaben. nur über genaue Kenntnis der Aufgaben -> Aufgabenanalyse Lösung: Anpassbarkeit  Aufgabenanalyse 21.11.2000 Entwicklung von Benutzerschnittstellen, Florian Fuchs

2.1 Gestaltung - Funktionaler Aspekt Beispiel: Anpassbarkeit von Benutzerschnittstellen Beispiel für Anpassbarkeit, um einen Kompromiss zu bieten 21.11.2000 Entwicklung von Benutzerschnittstellen, Florian Fuchs

2.2 Gestaltung - Ästhetischer Aspekt Hat Benutzerschnittstelle ansprechendes und aussagekräftiges Äußeres? Am Bildschirm: Grafik und Text Layout Eingabegeräte: Form, Farbe, ... Anordnung Gestaltung der sichtbare Elemente der Benutzerschnittstelle gerne beschäftigen, Hilfe bei Aufgabenbewältigung (selbsterklärend, informativ) Zwei Bereiche: Bildschirm: BSP grafische und textuelle Gestaltung von Informationen für den Benutzer, Schriftarten, Farben, Icons und ihre Beschriftungen Eingabegeräte: BSP Form von Knöpfen, Anordnung (Laptop-Tastatur, Palm-tops) Deshalb häufig Einbeziehung von Industrie- und Grafikdesignern, vielleicht in Zukunft auch Filmproduzenten Am besten Beispiel... 21.11.2000 Entwicklung von Benutzerschnittstellen, Florian Fuchs

2.2 Gestaltung - Ästhetischer Aspekt Beispiel: Dialog zur Anpassung des Desktops unübersichtlich (chunks) unstrukturiert keine grafische Illustration keine Berücksichtigung der Bearbeitungsreihenfolge 21.11.2000 Entwicklung von Benutzerschnittstellen, Florian Fuchs

2.3 Gestaltung - Struktureller Aspekt Ist Benutzerschnittstelle stabil und effizient programmierbar sowie problemlos aktualisierbar und erweiterbar? einfache Erzeugung stabile und effiziente Ausführung Wiederverwendbarkeit von Komponenten Erschaffung neuer Komponenten auf Basis vorhandener strukturierter Aufbau des Quellcodes für Benutzeroberfläche, OOP: Klassenhierarchie mit Vererbung und Eigenschaften -> Primitve Objekte, die zu komplizierteren kombiniert werden können BSP Swing (Java) , MFC (Windows)  Objekt-orientierte Programmiersprachen 21.11.2000 Entwicklung von Benutzerschnittstellen, Florian Fuchs

2.3 Gestaltung - Struktureller Aspekt Beispiel: Windows-Benutzeroberfläche Primitive Objekte Buttons, Checkbuttons und Radiobuttons Texteingabe und -auswahl -> Kombination 21.11.2000 Entwicklung von Benutzerschnittstellen, Florian Fuchs

3. Softwareentwicklung und HCI-Design Definition: Softwareentwicklung (1) Die Aufstellung und Benutzung von vernünftigen Ingenieurprinzipien, um wirtschaftliche Software zu erhalten, die zuverlässig ist und auf real existierenden Maschinen effizient läuft. (Friedrich L. Bauer, 1969) Realisierung der Benutzeroberfläche in Software -> Beschäftigung mit Softwareentwicklung aber auch Systementwicklung Untersuchung, Verhältnis zu besonderen Erfordernissen der UI-Entwicklung als Teil des insgesamt zu gestaltenden Systems ist Definition aus historischen Gründen Bauer, "software engineering" miterfunden auf NATO Software Engineering Conference 1968/69 in Garmisch Begründer der Informatik-Fakultät in München Schriftführer Manfred Paul Wenig Betonung auf Interaktion BSP Algol 21.11.2000 Entwicklung von Benutzerschnittstellen, Florian Fuchs

3.1 Softwareentwicklung und HCI-Design Definition: Softwareentwicklung (2) Die Entwicklung und Nutzung von Prinzipien, Methoden und Werkzeugen zur wirtschaftlichen und optimalen Gestaltung und Entwicklung von Softwaresystemen, die ästhetisch ansprechend, effizient, zuverlässig und geeignet sind für die Zwecke, für die sie gestaltet wurden. (Peter Johnson, 1992) Betonung der Bedürfnisse der HCI zentrale Begriffe als Fundament, Aufgabe der Entwicklers 21.11.2000 Entwicklung von Benutzerschnittstellen, Florian Fuchs

Entwicklung von Benutzerschnittstellen, Florian Fuchs 3.1.1 Prinzipien Prinzipien für verschiedene Bereiche der Softwareentwicklung Benutzbarkeit (usability) Gestaltung (design) Konstruktion (construction) Formulierung von Kriterien zur Beurteilung eines Designs BSP - Fitt'sches Law - Standards, Richtlinien, Regeln - Aufbau 21.11.2000 Entwicklung von Benutzerschnittstellen, Florian Fuchs

Entwicklung von Benutzerschnittstellen, Florian Fuchs 3.1.2 Methoden Methoden liefern die Vorgehensweise bei Softwareentwicklung Projektplanung Kosten-, Zeit-, Aufwandsabschätzung Anforderungs-, Aufgabenanalyse Gestaltung der Datenstrukturen, Programmarchitektur Entwicklung, Test, Bewertung, Wartung ... Vorgehensweisen, werden im Folgenden präsentiert 21.11.2000 Entwicklung von Benutzerschnittstellen, Florian Fuchs

Entwicklung von Benutzerschnittstellen, Florian Fuchs 3.1.3 Werkzeuge (Tools) Werkzeuge unterstützen die Softwarentwicklung unterstützende Programme für die einzelnen Methoden Programmiersprachen, Compiler Programmbibliotheken, Toolkits Editoren Browser ... häufig automatisch 21.11.2000 Entwicklung von Benutzerschnittstellen, Florian Fuchs

Entwicklung von Benutzerschnittstellen, Florian Fuchs 3.2 Softwareentwicklung Klassifizierung (Howden, 1982) Typ I: mittelgroßes Projekt, 16 MJ Entwicklungszeit z.B. Diagramme, Quellcode-Manager, Testpläne Typ IV: Großprojekt, 385 MJ Entwicklungszeit automatische Unterstützung in allen Bereichen z.B. Maschinenlesbare Spezifikation, Archivierungstools, Testprogramme Aber: HCI-Design wird nur teilweise unterstützt Vorstellung von Softwareentwicklung in der Praxis Typ I: Programm zur Datenverarbeitung BSP Spezifikaton in Prosa, informelle Spezifikation des funktionalen Designs, text manager, Quellcodemanager, Dateienvergleicher Typ IV: Echtzeit Verteidigungssystem BSP maschinenlesbare Spezifikation, automatische Archivierung von Design Spezifikationen, automatische Quellcode Formatierung, Testdatengenerator Unterstützung für HCI-Design minimal BSP Benutzer- oder Aufgabenanforderungen, Dialogdesign, Präsentationsdesign, UI-Programmierung und Test Berücksichtigung von Chunks, dynamische Oberflächen (Lohnsteuerkarte) 21.11.2000 Entwicklung von Benutzerschnittstellen, Florian Fuchs

Entwicklung von Benutzerschnittstellen, Florian Fuchs 3.3 Formale Methoden Vorteil: Klare, präzise Beschreibung der Anforderungen und/oder des Entwurfs Problem: Anwendbarkeit auf HCI Was soll spezifiziert werden? Wie soll es spezifiziert werden? Benutzung von formalen Sprachen sowohl bei Softwareentwicklung als auch HCI-Desgin wichtiges Thema es gibt Ansätze, Problematik aufgezeigt werden, die darin liegt. 21.11.2000 Entwicklung von Benutzerschnittstellen, Florian Fuchs

Entwicklung von Benutzerschnittstellen, Florian Fuchs 3.3 Formale Methoden Beispiel: Zustandsübergangsdiagramm für Passwortkontrolle Fehler Fehler 1. Versuch 2. Versuch 3. Versuch Aufbau des Benutzerdialogs Interaktion bedeutet Zustandsänderung OK OK OK Fehler Erfolg Abbruch 21.11.2000 Entwicklung von Benutzerschnittstellen, Florian Fuchs

3.4 Modelle für den Softwareentwicklungsprozess 1. Klassisches Lebenszyklus- oder Wasserfall-Modell (lifecycle or waterfall model) 2. Prototypenmodell (prototyping) 3. Lösungsansätze der vierten Generation (4th-generation approaches) 4. Modell von Pressman (Kombination von 1. - 3.) übliche Vorgehensweise bei Entwicklung eines Softwaresystems 21.11.2000 Entwicklung von Benutzerschnittstellen, Florian Fuchs

3.4.1 Klassisches Lebenszyklus- oder Wasserfall-Modell Erfordert systematische, sequentielle Herangehensweise 1. Systementwicklung (system engineering) 2. Analyse (analysis) 3. Gestaltung (design) 4. Programmierung (coding) 5. Tests (testing) 6. Wartung (maintenance) Diagramm: Zeit, Abstraktionsgrad top-down, Phasenmodell, aufeinander aufbauend Systementwicklung BSP Analysen der Aufgaben, Benutzer, Hardware, Software, alles auf allgemeiner Ebene Aufstellung der Benutzeranforderungen, Systemanforderungen, Zuweisung an Software ZIEL Rahmen für das System abstecken ERGEBNIS Allgemeines Anforderungsdokument Analysis BSP Aufgaben, Benutzer, Bereich, Software ZIEL Verständnis des Informationsaustauschs, benötigten Funktionalität des Systems, der Leistungsmerkmale und der Schnittstellenmerkmale + Kritierien für die Bewertung ERGEBNIS Spezifisches Anforderungsdokument Design BSP Datenstrukturen, Softwarearchitektur, prozeduraler Einzelheiten, Benutzerinterface ZIEL Übersetzung der Anforderungen in ein Softwaremodell OUTPUT Softwaregestaltungsdokument Coding BSP Übersetzung der Gestaltungsspezifikation in ausführbaren Code ZIEL Produktion einer ausführbaren Version und Endversion Test der Implementierung bezüglich der vorher erstellten Anforderungsdokumente BSP logisches Testen, Testen der Funktionalität, der Benutzbarkeit, der Effizienz der Gestaltung und Umsetzung ZIEL Bewertung der Qualität der Gestaltung und Programmierung OUTPUT Bericht über Qualität und Empfehlungen für Nachbesserungen Wartung BSP Fehlerbeseitigung in Gestaltung und Programmierung, Aktualisierung der Gestaltung wegen Änderungen der Anforderungen/der Einsatzumgebung ZIEL Gewährleistung der Anpassung an künftige Änderungen OUTPUT Überarbeitete Anforderungen, Gestaltung, Software 21.11.2000 Entwicklung von Benutzerschnittstellen, Florian Fuchs

3.4.1 Klassisches Lebenszyklus- oder Wasserfall-Modell Nachteile Projekte in der Realität nicht sequentiell Schwierigkeit, alle Anforderungen am Anfang festzulegen Fehler können zu spät entdeckt werden (Programmierung und Tests erst am Ende) Vorteile umfassender Vorgehensplan grundlegende Schritte weite Verbreitung besser als unsystematische Herangehensweise Nachteile - andere -Reihenfolge, Iteration - Unklarheiten auf Seiten der Benutzer oder Entwickler über Ziel des Projekts, vor allem beim UI-Design - Fehler bleiben unentdeckt, werden erst nach Aufwand der Programmierung offenbar. Vorteile - beinhaltet viele Aspekte - treten bei vielen Softwareentwicklungsmethoden auf - vor allem bei großen Projekten - ermöglicht Management der Softwareproduktion 21.11.2000 Entwicklung von Benutzerschnittstellen, Florian Fuchs

Entwicklung von Benutzerschnittstellen, Florian Fuchs 3.4.2 Prototypenmodell Bei allgemeinen oder ungenauen Anforderungen 1. Anforderungskatalog (requirements gathering) 2. Erster Entwurf (quick design) 3. Prototypentwicklung (build prototyp) 4. Bewertung (evaluation) 5. Wiederholung (iteration) 6. Fertigstellung (engineering) BSP unbekannte Effizienz eines Algorithmus/Anpassungsfähigkeit eines OS/Form des UI iterative Vorgehensweise, erzeugt untersuchbares Modell des Designs Anforderungskatalog: Definition der Grundziele, Sammlung der bekannten Anforderungen, Kennzeichnung weiterer Festlegungsnotwenigkeiten Erster Entwurf: Konzentration auf Gestaltung der Benutzerschnittstelle, besonders der sichtbaren Teile Prototypentwicklung: - ausführbar: Simulation von Teilen oder dem ganzen Design, kann nicht zur Endversion erweitert werden / Erstversion kann erweitert werden - nicht ausführbar: Papier basiert oder Computer basiert BSP Schnittstellengestaltung: Skizzen der Schnittstelle, Storyboard als Folge von Skizzen Bewertung: die Entwickler, Kunden und Benutzer einschließt Verbesserung der Anforderungen und schließen der Lücken Wiederholung: Verbesserung, Veränderung, Neuentwicklung des Prototyps bis Bewertung keine neuen mehr Anforderungen ergibt Fertigstellung: aus Prototyp heraus oder komplett neu. Wieder Bewertungen 21.11.2000 Entwicklung von Benutzerschnittstellen, Florian Fuchs

Entwicklung von Benutzerschnittstellen, Florian Fuchs 3.4.2 Prototypenmodell Nachteile Gefahr, dass Prototyp zur Endversion wird verbleibende quick and dirty - Lösungen prinzipiell trial and error - Vorgehensweise Vorteile Ansicht und Bewertung des HCI vor Fertigstellung nachträgliche Erweiterung der Anforderungen Bewertung während der Entwicklung Nachteile - Kunde könnte nicht einsehen, dass lauffähiger Prototyp weggeschmissen wird - keine Lust zu verbessern oder einfach vergessen - Vorteile: mehr Möglichkeiten 21.11.2000 Entwicklung von Benutzerschnittstellen, Florian Fuchs

3.4.3 Lösungsansätze der vierten Generation Spezifizierung auf hoher Abstraktionsebene, daraus automatische Quellcode-Erzeugung durch Tools 1. Anforderungskatalog (requirements gathering) 2. Gestaltungsstrategie (design strategy) 3. Implementierung (implementation) 4. Produktphase (product phase) BSP nichtprozedurale Sprachen für Datenbankabfragen,Quellcodegeneratoren, Grafikprogramme und -sammlungen Tools in der Regel nur für Entwicklung hochspezifischer Anwendungen geeignet, häufig keine Integration der Tools untereinander Anforderungskatalog: Anforderungssammlung von Kunde und Benutzer wie bei Prototyp, idealerweise spezifiziert in Form eines Spezifizierungstools Gestaltungsstrategie: Entwicklung eines Plans zum Einsatz der verschiedenen 4th-generation-tools Implementierung: Beschreibung des Designs in der Sprache der 4th-generation-tools durch Entwickler, Übersetzung durch Tool Produktphase: Tests und Bewertungen, Dokumentation und Wartung 21.11.2000 Entwicklung von Benutzerschnittstellen, Florian Fuchs

3.4.3 Lösungsansätze der vierten Generation Nachteile beschränkte Anzahl und Möglichkeiten der Tools Vorteile Zeitersparnis in vielen Fällen gute Gestaltung Nachteile - in letzter Zeit mehr Vorteile - 21.11.2000 Entwicklung von Benutzerschnittstellen, Florian Fuchs

Entwicklung von Benutzerschnittstellen, Florian Fuchs 3.4.4 Modell von Pressman, 1987 Kombination der Modelle 1 - 3 1. Anforderungskatalog, unklare Anforderungen werden identifiziert 2. Prototyp durch iterative Entwicklung und Bewertung des HCI, Tools der 4. Generation 3. Übergang zum Endprodukt mit konventionellen Vorgehensweisen Anforderungskatalog erstellt von Entwickler, Kunde und Benutzer: Aufstellen der Anforderungen und Feststellen der unbekannten, im Laufe der Entwicklung noch zu definierenden Anforderungen Prototyp: erste Entwürfe des UI und der sichtbaren Teile und iterative Bewertung und Verbesserung, bis alle Anforderungen definiert und erfüllt sind. Dabei Benutzung von 4th-generation-tools zur schnellen und einfachen Entwicklung Übergang zum Endprodukt: konventionelle Vorgehensweise, da Qualitätssicherung und Wartung berücksichtigt werden muss 21.11.2000 Entwicklung von Benutzerschnittstellen, Florian Fuchs

3.5 Grundlegende Phasen der Softwareentwicklung 1. Definition (definition) Systemanalyse, Projektplanung, Anforderungskatalog 2. Entwicklung (development) Softwaregestaltung, Programmierung, Tests,Verbesserung 3. Wartung (maintenance) Änderungen, Korrekturen, Anpassungen Definition Welche Informationen müssen verarbeitet werden? welche Funktionalität, Leistung, welche Benutzerschnittstelle wird benötigt, welche Aufgaben müsen erfüllbar sein, Charakteristiken der Benutzergruppe, welche Designeinschränkungen, nach welchen Kriterien kann Design bewertet werden Entwicklung Wie Gestaltung von Datentrukturen und Softwarearchitekturen, Implementierung von prozeduralen Einzelheiten, Entwicklung des UI, Übertragung in Programmiersprache, wie Tests und Bewertung Wartung Änderungen, ... 21.11.2000 Entwicklung von Benutzerschnittstellen, Florian Fuchs

Entwicklung von Benutzerschnittstellen, Florian Fuchs 4. Zusammenfassung Softwareentwicklung beschäftigt sich mit Gestaltung eines kompletten Systems und seines Lebenszyklus. Dabei Mangel an Prinzipien, Methoden und Werkzeugen zur Gestaltung der HCI Modelle der Vorgehensweisen sind stark idealisiert Grundlegend: Aufgabenanalyse vor, während und nach Entwicklung - Grundlegende Kenntnis des Gestaltungsprozesses zur Anwendung von HCI-Methoden und Tools notwendig - abhängig von Art des Projekts, des Entwicklungsteams, der Organisationsform - Aus voherigen Kapiteln: Analyse der Benutzer und Aufgaben essentiell deshalb: Design-Methoden müssen andauernde Aufgabenanalyse berücksichtigen 21.11.2000 Entwicklung von Benutzerschnittstellen, Florian Fuchs