Web Application Interface Modelling - UWE Approach

1. Worum geht es? Umsetzung Zusammenfassung Ende Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML Analyse und Modellierung von prozessorientierten Systemen - Sommersemester 2008 Helko Glathe 01. Juli 2008 Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML

2. Worum geht es? Umsetzung Zusammenfassung Ende Overview Worum geht es? 1 Motivation Ziel Umsetzung 2 Zusammenfassung der UWE Methode Konzeptuelles Modell Navigationsmodell Vor¨berlegungen zum Pr¨sentationsmodell u a Pr¨sentationsmodell zur Implementierung a Zusammenfassung 3 Ende 4 Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML

3. Worum geht es? Umsetzung Motivation Zusammenfassung Ziel Ende Definition Die Benutzerschnittstelle eines Softwaresystems ist zunehmend als eine komplexe Softwarekomponente anzusehen. Sie spielt eine üßerst a wichtige Rolle f¨r die “Usability” eines Softwaresystems. u Problem: Die Problembeschreibung (f¨r Benutzerschnittstellen) erfolgt hüfig u a ausschließlich in einem technischen L¨sungsraum. o Es fehlt hierbei dennoch an: einer dom¨nenspezifischen Problembeschreibung sowie a anwendungsbereichabh¨ngigen und sichtenspezifischen a Abstraktionen. Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML

4. Worum geht es? Umsetzung Motivation Zusammenfassung Ziel Ende U.a. entstehen hierdurch folgende Probleme: Un¨bersichtlichkeit in den Ergebnissen der Implementierung. u Der Fokus liegt h¨uﬁg auf unwesentlichen Dingen. a Schlechte Wartbarkeit. Geringere Nutzerakzeptanz. H¨here Fehleranf¨lligkeit. o a u.v.m. Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML

5. Worum geht es? Umsetzung Motivation Zusammenfassung Ziel Ende Abstraktion bei der Web-Applikations-Entwicklung hinsichtlich folgender Fragestellungen: Was soll der Nutzer mit einer Web-Applikation tun k¨nnen? o 1 Welche Informationen muss das System enthalten? 2 Welche Informationen werden dem Nutzer zur Verf¨gung gestellt u 3 und wie kann er durch diese Informationen navigieren? Wie werden dem Nutzer Informationen pr¨sentiert und wie kann er a 4 mit dem System interagieren? Das Ziel ist ein methodisches und modellgetriebenes Vorgehen (Model Driven Engineering) beim Erstellen dieser Sichten und weitestgehend automatische Transformation zwischen den Sichten bis hin zu einsetzbarem Quellcode. Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML

6. Zusammenfassung der UWE Methode Worum geht es? Konzeptuelles Modell Umsetzung Navigationsmodell Zusammenfassung Vor¨berlegungen zum Pr¨sentationsmodell u a Ende Pr¨sentationsmodell zur Implementierung a UWE — UML-based Web Engineering Prozess und Notation zur Erstellung von Webanwendungen Folgt dem MDA-Ansatz (MOF-konforme Metamodelle und QVT-Transformationen) CIM, PIM und PSM entstehen weiterhin durch MDA Zus¨tzliche Sichtenbildung des PIM zum spezielleren Vorgehen beim a Web-Engineering Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML

7. Zusammenfassung der UWE Methode Worum geht es? Konzeptuelles Modell Umsetzung Navigationsmodell Zusammenfassung Vor¨berlegungen zum Pr¨sentationsmodell u a Ende Pr¨sentationsmodell zur Implementierung a UWE Design Schritte klassische Anforderungsdeﬁnition Akteure mit Use Cases etc. f¨r funktionale Anforderungen u klassisches Konzeptionsdesign Modellierung der Anwendungsdom¨ne a Inhaltsmodellierung: Klassendiagramme f¨r Informationsstrukturen u (Inhaltsmodell) Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML

8. Zusammenfassung der UWE Methode Worum geht es? Konzeptuelles Modell Umsetzung Navigationsmodell Zusammenfassung Vor¨berlegungen zum Pr¨sentationsmodell u a Ende Pr¨sentationsmodell zur Implementierung a UWE Design Schritte klassische Anforderungsdeﬁnition Akteure mit Use Cases etc. f¨r funktionale Anforderungen u klassisches Konzeptionsdesign Modellierung der Anwendungsdom¨ne a Inhaltsmodellierung: Klassendiagramme f¨r Informationsstrukturen u (Inhaltsmodell) Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML

9. Zusammenfassung der UWE Methode Worum geht es? Konzeptuelles Modell Umsetzung Navigationsmodell Zusammenfassung Vor¨berlegungen zum Pr¨sentationsmodell u a Ende Pr¨sentationsmodell zur Implementierung a UWE Design Schritte Navigationsdesign Basiert auf Inhaltsmodell Abstrakte Beschreibung der Navigationsm¨glichkeiten eines o Benutzers Identiﬁzierung von Navigationselementen Pr¨sentationsdesign a Platzierung der Navigationselemente und Informationen in abstrakten Sichten (UI Views) Implementierung Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML

12. Zusammenfassung der UWE Methode Worum geht es? Konzeptuelles Modell Umsetzung Navigationsmodell Zusammenfassung Vor¨berlegungen zum Pr¨sentationsmodell u a Ende Pr¨sentationsmodell zur Implementierung a Modelle des UWE Design Prozesses Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML

13. Zusammenfassung der UWE Methode Worum geht es? Konzeptuelles Modell Umsetzung Navigationsmodell Zusammenfassung Vor¨berlegungen zum Pr¨sentationsmodell u a Ende Pr¨sentationsmodell zur Implementierung a Wie f¨ngt die Entwicklung einer Web-Applikation an? a Was soll der Nutzer mit einer Web-Applikation tun k¨nnen? o Welche Informationen muss das System enthalten? Beispiel-Web-Applikation “Company” Die “Company” m¨chte sich im Internet pr¨sentieren. Hierzu sollen o a allgemeine Informationen uber die “Company” via Internet abrufbar sein. ¨ Dar¨ber hinaus k¨nnen Informationen zum Gesch¨ftsf¨hrer, zu Projekten, u o au zu s¨mtlichen Gesch¨ftsstellen und deren Mitarbeitern abgerufen werden. a a Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML

14. Zusammenfassung der UWE Methode Worum geht es? Konzeptuelles Modell Umsetzung Navigationsmodell Zusammenfassung Vor¨berlegungen zum Pr¨sentationsmodell u a Ende Pr¨sentationsmodell zur Implementierung a Anwendungsf¨lle zum Beispiel “Company” a ud: Use Cases of Company Example Company Show employees Show company infos of company Show tour through Show head projects of company of company Show departments Search employee of company of department WebAppUser WebAppUser Show employees Show projects of of department department Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML

15. Zusammenfassung der UWE Methode Worum geht es? Konzeptuelles Modell Umsetzung Navigationsmodell Zusammenfassung Vor¨berlegungen zum Pr¨sentationsmodell u a Ende Pr¨sentationsmodell zur Implementierung a Informationsstruktur zum Beispiel “Company” cd: Information structure of Company Example Company −Name :String −Kind :String −Description :String −MainEmailAdress :String + departments + head 1..* Employee Department Project 1..* + projects −Name :String −Adress :String −Name :String + employees 1..* −Birthdate :Date −Name :String −Cost :String −Position :String −Start :Date −End:Date −Abstract :String + employees 1..* + projects −Description :String 1..* Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML

16. Zusammenfassung der UWE Methode Worum geht es? Konzeptuelles Modell Umsetzung Navigationsmodell Zusammenfassung Vor¨berlegungen zum Pr¨sentationsmodell u a Ende Pr¨sentationsmodell zur Implementierung a Beginn der Entwicklung der Benutzerschnittstelle Welche Informationen werden dem Nutzer zur Verf¨gung gestellt? u Wie kann er durch diese Informationen navigieren? Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML

17. Zusammenfassung der UWE Methode Worum geht es? Konzeptuelles Modell Umsetzung Navigationsmodell Zusammenfassung Vor¨berlegungen zum Pr¨sentationsmodell u a Ende Pr¨sentationsmodell zur Implementierung a Metamodell zu Navigationsmodellen Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML

18. Zusammenfassung der UWE Methode Worum geht es? Konzeptuelles Modell Umsetzung Navigationsmodell Zusammenfassung Vor¨berlegungen zum Pr¨sentationsmodell u a Ende Pr¨sentationsmodell zur Implementierung a Notation zu Navigationselementen Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML

19. Zusammenfassung der UWE Methode Worum geht es? Konzeptuelles Modell Umsetzung Navigationsmodell Zusammenfassung Vor¨berlegungen zum Pr¨sentationsmodell u a Ende Pr¨sentationsmodell zur Implementierung a Konstruktionsschritte eines Navigationsmodells Relevante Klassen des konzeptuellen Modells werden 1 Navigationsklassen (siehe Use Cases) Zus¨tzliche Attribute f¨r relevante Informationen weggelassener a u 2 Konzeptionsklassen Definition zus¨tzlicher direkter Assoziationen zur Vermeidung von a 3 Umwegen Zugriffselemente werden zur Realisierung der Navigation definiert 4 (z.B. Indizes oder Suchen) Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML

23. Zusammenfassung der UWE Methode Worum geht es? Konzeptuelles Modell Umsetzung Navigationsmodell Zusammenfassung Vor¨berlegungen zum Pr¨sentationsmodell u a Ende Pr¨sentationsmodell zur Implementierung a Navigationsmodell zum Beispiel “Company” Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML

24. Zusammenfassung der UWE Methode Worum geht es? Konzeptuelles Modell Umsetzung Navigationsmodell Zusammenfassung Vor¨berlegungen zum Pr¨sentationsmodell u a Ende Pr¨sentationsmodell zur Implementierung a ¨ Erste Uberlegungen zur optischen Repr¨sentation der a Benutzerschnittstelle ¨ Abstrakt Uberlegungen, welche Navigationsstrukturen wie pr¨sentiert werden. a ¨ Uberg¨nge zwischen einzelnen Pr¨sentationen deﬁnieren. a a Grundlage f¨r prototypische Umsetzung u Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML

25. Zusammenfassung der UWE Methode Worum geht es? Konzeptuelles Modell Umsetzung Navigationsmodell Zusammenfassung Vor¨berlegungen zum Pr¨sentationsmodell u a Ende Pr¨sentationsmodell zur Implementierung a UML Erweiterung zum Sketching und Storyboarding Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML

26. Zusammenfassung der UWE Methode Worum geht es? Konzeptuelles Modell Umsetzung Navigationsmodell Zusammenfassung Vor¨berlegungen zum Pr¨sentationsmodell u a Ende Pr¨sentationsmodell zur Implementierung a Sketching Methode Deﬁnition Zu Beginn wird zu jeder Sicht einer Hauptbenutzerschnittstelle ein grober/abstrakter Entwurf angefertigt. Entscheidung dar¨ber, wie u Navigationsklassen repr¨sentiert und wie auf sie zugegriﬀen wird. a Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML

27. Zusammenfassung der UWE Methode Worum geht es? Konzeptuelles Modell Umsetzung Navigationsmodell Zusammenfassung Vor¨berlegungen zum Pr¨sentationsmodell u a Ende Pr¨sentationsmodell zur Implementierung a Beispiel: Sicht der Company Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML

28. Zusammenfassung der UWE Methode Worum geht es? Konzeptuelles Modell Umsetzung Navigationsmodell Zusammenfassung Vor¨berlegungen zum Pr¨sentationsmodell u a Ende Pr¨sentationsmodell zur Implementierung a Storyboarding Methode Definition Nach Erstellung abstrakter Benutzersichten werden Szenarios definiert, in denen die Sequenzen zu zeigender Benutzersichten durch m¨gliche o Navigationen des Nutzers definiert werden. Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML

29. Zusammenfassung der UWE Methode Worum geht es? Konzeptuelles Modell Umsetzung Navigationsmodell Zusammenfassung Vor¨berlegungen zum Pr¨sentationsmodell u a Ende Pr¨sentationsmodell zur Implementierung a Beispiel: Storyboard zum zeigen der Company-F¨hrung u und der Gesch¨ftsstellen a Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML

30. Zusammenfassung der UWE Methode Worum geht es? Konzeptuelles Modell Umsetzung Navigationsmodell Zusammenfassung Vor¨berlegungen zum Pr¨sentationsmodell u a Ende Pr¨sentationsmodell zur Implementierung a ¨ Schritte des Sketching und Storyboarding im Uberblick Erstellen einer Pr¨sentationsklasse f¨r jede Navigationsklasse. a u 1 Erstellen einer Pr¨sentationsklasse f¨r jedes Men¨ oder jeden Index. a u u 2 Erstellen einer Pr¨sentationsklasse f¨r jede Suche oder Tour. a u 3 Erstellen von Benutzersichten durch Aggregation entsprechender 4 Pr¨sentationsklassen. a Erstellen von Storyboard-Szenarios durch entsprechende Bindung 5 von Navigationselementen mit Sichten. Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML

35. Zusammenfassung der UWE Methode Worum geht es? Konzeptuelles Modell Umsetzung Navigationsmodell Zusammenfassung Vor¨berlegungen zum Pr¨sentationsmodell u a Ende Pr¨sentationsmodell zur Implementierung a Was ist ein Pr¨sentationsmodell? a Positionierung von Interaktions- und Informationselementen. Welche Informations- bzw. Interaktionselemente werden durch Interaktion ersetzt? Deﬁnition Ein Pr¨sentationsmodell deﬁniert, welche Informationen und a Navigationselemente an welcher Stelle dem Benutzer pr¨sentiert werden. a Z.B. welche Inhalte und Navigationselemente in Fenstern oder Teilen eines Fensters dargestellt werden sollen und welche dieser Inhalte durch Benutzung eines Verweises entfernt bzw. ersetzt werden. Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML

36. Zusammenfassung der UWE Methode Worum geht es? Konzeptuelles Modell Umsetzung Navigationsmodell Zusammenfassung Vor¨berlegungen zum Pr¨sentationsmodell u a Ende Pr¨sentationsmodell zur Implementierung a Metamodell zum Pr¨sentationsmodell a Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML

37. Zusammenfassung der UWE Methode Worum geht es? Konzeptuelles Modell Umsetzung Navigationsmodell Zusammenfassung Vor¨berlegungen zum Pr¨sentationsmodell u a Ende Pr¨sentationsmodell zur Implementierung a Pr¨sentationsmodell (Ausschnitt) zum Beispiel “Company” a Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML

38. Zusammenfassung der UWE Methode Worum geht es? Konzeptuelles Modell Umsetzung Navigationsmodell Zusammenfassung Vor¨berlegungen zum Pr¨sentationsmodell u a Ende Pr¨sentationsmodell zur Implementierung a Schritte des Baus eines Pr¨sentationsmodells a Deﬁnition Entscheidung dar¨ber, wieviele Fenster bzw. Framesets und deren u Untergliederung in Frames dem Benutzer dargestellt werden. Festlegung, ob ein oder mehrere Fenster verwendet werden. 1 Festlegung, ob Frames benutzt werden. Wenn ja, wieviele Frames 2 ein Frameset besitzt (siehe Partitionierung bei abstrakten Sichten). Transformation der Pr¨sentationsklassen abstrakter Sichten in a 3 Webseiten. Festlegung des Ortes (Frame oder Fenster) zum Erscheinen einer 4 Webseite. Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML

42. Zusammenfassung der UWE Methode Worum geht es? Konzeptuelles Modell Umsetzung Navigationsmodell Zusammenfassung Vor¨berlegungen zum Pr¨sentationsmodell u a Ende Pr¨sentationsmodell zur Implementierung a Pr¨sentationsﬂuss zum Beispiel “Company” a Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML

43. Zusammenfassung der UWE Methode Worum geht es? Konzeptuelles Modell Umsetzung Navigationsmodell Zusammenfassung Vor¨berlegungen zum Pr¨sentationsmodell u a Ende Pr¨sentationsmodell zur Implementierung a Schritte zur Definition eines Pr¨sentationsflusses a Deklaration des zu modellierenden Navigationspfades aus dem 1 Navigationsmodell. Festlegen der an dem Fluss beteiligten Fenster bzw. Frames. 2 Festlegen von eindeutigen “Display”-Nachrichten relevanter 3 Pr¨sentationsobjekte zum F¨llen der Fenster bzw. Frames. a u Festlegen von “Select”-, “Fill”- und “Submit”-Nachrichten zur 4 Definition von Interaktionsm¨glichkeiten des Benutzers. o ¨ Festlegen von “Open”- bzw. “Close”-Nachrichten zum Offnen bzw 5 Schließen eines Fensters. Festlegen von Aktivit¨tsbalken der Fesnter- bzw. Frameobjekte zur a 6 Verdeutlichung, ob ein Fenster oder Frame aktiv ist. Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML

49. Worum geht es? Umsetzung Zusammenfassung Ende Was wurde in diesem Vortrag vermittelt? Methodisches Vorgehen zur Erstellung von Web-Applikationen (Anforderungsdefinition − > Konzept(Inhaltsmodell − > Navigation − > Pr¨sentation) − > Implementierung). a Pr¨zise Notation zur technologieunabh¨ngigen Definition einer a a Web-Applikation Wiederverwendung und Erweiterung des UML-Metamodells (UML Profiles). Semiautomatischer Ansatz (teilweise automatisierte Transformation). Modellgetriebener Ansatz wird unterst¨tzt und folgt dem Prinzip der u MDA. Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML

50. Worum geht es? Umsetzung Zusammenfassung Ende Diskussion mit dem Publikum Verwendete Literatur: R. Hennicker and N. Koch. Modeling the user interface of web applications with uml, 2001. Alexander Knapp, Nora Koch, Martin Wirsing, and Gefei Zhang. UWE – Ein Ansatz zur modellgetriebenen Entwicklung von Webanwendungen. i-com, (6):5–12, March 2007. James A. Landay and Brad A. Myers. Sketching storyboards to illustrate interface behaviors. In CHI Conference Companion, pages 193–194, 1996. Helko Glathe Modellierung von Benutzerschnittstellen einer Web-Applikation mit UML

Web Application Interface Modelling - UWE Approach

Recomendados

Recomendados

Mais conteúdo relacionado

Destaque

Destaque (20)

Semelhante a Web Application Interface Modelling - UWE Approach

Semelhante a Web Application Interface Modelling - UWE Approach (20)

Web Application Interface Modelling - UWE Approach