Web Application Interface Modelling - UWE Approach

Worum geht es?Umsetzung

ZusammenfassungEnde

Modellierung von Benutzerschnittstelleneiner 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


ZusammenfassungEnde

Overview

1 Worum geht es?MotivationZiel

2 UmsetzungZusammenfassung der UWE MethodeKonzeptuelles ModellNavigationsmodellVoruberlegungen zum PrasentationsmodellPrasentationsmodell zur Implementierung

3 Zusammenfassung

4 Ende



ZusammenfassungEnde

MotivationZiel

Definition

Die Benutzerschnittstelle eines Softwaresystems ist zunehmend als einekomplexe Softwarekomponente anzusehen. Sie spielt eine außerstwichtige Rolle fur die “Usability” eines Softwaresystems.

Problem:

Die Problembeschreibung (fur Benutzerschnittstellen) erfolgt haufigausschließlich in einem technischen Losungsraum.

Es fehlt hierbei dennoch an:

einer domanenspezifischen Problembeschreibung sowie

anwendungsbereichabhangigen und sichtenspezifischenAbstraktionen.



ZusammenfassungEnde

MotivationZiel

U.a. entstehen hierdurch folgende Probleme:

Unubersichtlichkeit in den Ergebnissen der Implementierung.

Der Fokus liegt haufig auf unwesentlichen Dingen.

Schlechte Wartbarkeit.

Geringere Nutzerakzeptanz.

Hohere Fehleranfalligkeit.

u.v.m.



ZusammenfassungEnde

MotivationZiel

Abstraktion bei der Web-Applikations-Entwicklung hinsichtlich folgenderFragestellungen:

1 Was soll der Nutzer mit einer Web-Applikation tun konnen?

2 Welche Informationen muss das System enthalten?

3 Welche Informationen werden dem Nutzer zur Verfugung gestelltund wie kann er durch diese Informationen navigieren?

4 Wie werden dem Nutzer Informationen prasentiert und wie kann ermit dem System interagieren?

Das Ziel ist ein

methodisches und modellgetriebenes Vorgehen (Model DrivenEngineering) beim Erstellen dieser Sichten und weitestgehendautomatische Transformation zwischen den Sichten bis hin zueinsetzbarem Quellcode.



ZusammenfassungEnde

Zusammenfassung der UWE MethodeKonzeptuelles ModellNavigationsmodellVoruberlegungen zum PrasentationsmodellPrasentationsmodell zur Implementierung

UWE — UML-based Web Engineering

Prozess und Notation zur Erstellung von Webanwendungen

Folgt dem MDA-Ansatz (MOF-konforme Metamodelle undQVT-Transformationen)

CIM, PIM und PSM entstehen weiterhin durch MDA

Zusatzliche Sichtenbildung des PIM zum spezielleren Vorgehen beimWeb-Engineering



ZusammenfassungEnde


UWE Design Schritte

klassische Anforderungsdefinition

Akteure mit Use Cases etc. fur funktionale Anforderungen

klassisches Konzeptionsdesign

Modellierung der AnwendungsdomaneInhaltsmodellierung: Klassendiagramme fur Informationsstrukturen(Inhaltsmodell)



ZusammenfassungEnde


UWE Design Schritte

klassische Anforderungsdefinition

Akteure mit Use Cases etc. fur funktionale Anforderungen

klassisches Konzeptionsdesign

Modellierung der AnwendungsdomaneInhaltsmodellierung: Klassendiagramme fur Informationsstrukturen(Inhaltsmodell)



ZusammenfassungEnde


UWE Design Schritte

Navigationsdesign

Basiert auf InhaltsmodellAbstrakte Beschreibung der Navigationsmoglichkeiten einesBenutzersIdentifizierung von Navigationselementen

Prasentationsdesign

Platzierung der Navigationselemente und Informationen inabstrakten Sichten (UI Views)

Implementierung



ZusammenfassungEnde


UWE Design Schritte

Navigationsdesign


Prasentationsdesign


Implementierung



ZusammenfassungEnde


UWE Design Schritte

Navigationsdesign


Prasentationsdesign


Implementierung



ZusammenfassungEnde


Modelle des UWE Design Prozesses



ZusammenfassungEnde


Wie fangt die Entwicklung einer Web-Applikation an?

Was soll der Nutzer mit einer Web-Applikation tun konnen?

Welche Informationen muss das System enthalten?

Beispiel-Web-Applikation “Company”

Die “Company” mochte sich im Internet prasentieren. Hierzu sollenallgemeine Informationen uber die “Company” via Internet abrufbar sein.Daruber hinaus konnen Informationen zum Geschaftsfuhrer, zu Projekten,zu samtlichen Geschaftsstellen und deren Mitarbeitern abgerufen werden.



ZusammenfassungEnde


Anwendungsfalle zum Beispiel “Company”

WebAppUser

Company

Show head of company

Search employeeof department

Show employeesof department

Show projects ofdepartment

Show tour through projects of company

Show employeesof company Show company infos

Show departmentsof company

ud: Use Cases of Company Example

WebAppUser



ZusammenfassungEnde


Informationsstruktur zum Beispiel “Company”

Employee

−Name:String−Birthdate :Date−Position :String

Project

−Name:String−Cost :String−Start :Date−End:Date−Abstract :String−Description :String

Department

−Adress :String−Name:String

Company

−Name:String−Kind :String−Description :String−MainEmailAdress :String

cd: Information structure of Company Example

departments+1..*

projects+

1..*employees+

1..*

employees+ 1..* projects+

1..*

head+



ZusammenfassungEnde


Beginn der Entwicklung der Benutzerschnittstelle

Welche Informationen werden dem Nutzer zur Verfugung gestellt?

Wie kann er durch diese Informationen navigieren?



ZusammenfassungEnde


Metamodell zu Navigationsmodellen



ZusammenfassungEnde


Notation zu Navigationselementen



ZusammenfassungEnde


Konstruktionsschritte eines Navigationsmodells

1 Relevante Klassen des konzeptuellen Modells werdenNavigationsklassen (siehe Use Cases)

2 Zusatzliche Attribute fur relevante Informationen weggelassenerKonzeptionsklassen

3 Definition zusatzlicher direkter Assoziationen zur Vermeidung vonUmwegen

4 Zugriffselemente werden zur Realisierung der Navigation definiert(z.B. Indizes oder Suchen)



ZusammenfassungEnde









ZusammenfassungEnde









ZusammenfassungEnde









ZusammenfassungEnde


Navigationsmodell zum Beispiel “Company”



ZusammenfassungEnde


Erste Uberlegungen zur optischen Reprasentation derBenutzerschnittstelle

Abstrakt Uberlegungen, welche Navigationsstrukturen wieprasentiert werden.

Ubergange zwischen einzelnen Prasentationen definieren.

Grundlage fur prototypische Umsetzung



ZusammenfassungEnde


UML Erweiterung zum Sketching und Storyboarding



ZusammenfassungEnde


Sketching Methode

Definition

Zu Beginn wird zu jeder Sicht einer Hauptbenutzerschnittstelle eingrober/abstrakter Entwurf angefertigt. Entscheidung daruber, wieNavigationsklassen reprasentiert und wie auf sie zugegriffen wird.



ZusammenfassungEnde


Beispiel: Sicht der Company



ZusammenfassungEnde


Storyboarding Methode

Definition

Nach Erstellung abstrakter Benutzersichten werden Szenarios definiert, indenen die Sequenzen zu zeigender Benutzersichten durch moglicheNavigationen des Nutzers definiert werden.



ZusammenfassungEnde


Beispiel: Storyboard zum zeigen der Company-Fuhrungund der Geschaftsstellen



ZusammenfassungEnde


Schritte des Sketching und Storyboarding im Uberblick

1 Erstellen einer Prasentationsklasse fur jede Navigationsklasse.

2 Erstellen einer Prasentationsklasse fur jedes Menu oder jeden Index.

3 Erstellen einer Prasentationsklasse fur jede Suche oder Tour.

4 Erstellen von Benutzersichten durch Aggregation entsprechenderPrasentationsklassen.

5 Erstellen von Storyboard-Szenarios durch entsprechende Bindungvon Navigationselementen mit Sichten.



ZusammenfassungEnde










ZusammenfassungEnde










ZusammenfassungEnde










ZusammenfassungEnde










ZusammenfassungEnde


Was ist ein Prasentationsmodell?

Positionierung von Interaktions- und Informationselementen.

Welche Informations- bzw. Interaktionselemente werden durchInteraktion ersetzt?

Definition

Ein Prasentationsmodell definiert, welche Informationen undNavigationselemente an welcher Stelle dem Benutzer prasentiert werden.Z.B. welche Inhalte und Navigationselemente in Fenstern oder Teileneines Fensters dargestellt werden sollen und welche dieser Inhalte durchBenutzung eines Verweises entfernt bzw. ersetzt werden.



ZusammenfassungEnde


Metamodell zum Prasentationsmodell



ZusammenfassungEnde


Prasentationsmodell (Ausschnitt) zum Beispiel “Company”



ZusammenfassungEnde


Schritte des Baus eines Prasentationsmodells

Definition

Entscheidung daruber, wieviele Fenster bzw. Framesets und derenUntergliederung in Frames dem Benutzer dargestellt werden.

1 Festlegung, ob ein oder mehrere Fenster verwendet werden.

2 Festlegung, ob Frames benutzt werden. Wenn ja, wieviele Framesein Frameset besitzt (siehe Partitionierung bei abstrakten Sichten).

3 Transformation der Prasentationsklassen abstrakter Sichten inWebseiten.

4 Festlegung des Ortes (Frame oder Fenster) zum Erscheinen einerWebseite.



ZusammenfassungEnde



Definition








ZusammenfassungEnde



Definition








ZusammenfassungEnde



Definition








ZusammenfassungEnde


Prasentationsfluss zum Beispiel “Company”



ZusammenfassungEnde


Schritte zur Definition eines Prasentationsflusses

1 Deklaration des zu modellierenden Navigationspfades aus demNavigationsmodell.

2 Festlegen der an dem Fluss beteiligten Fenster bzw. Frames.

3 Festlegen von eindeutigen “Display”-Nachrichten relevanterPrasentationsobjekte zum Fullen der Fenster bzw. Frames.

4 Festlegen von “Select”-, “Fill”- und “Submit”-Nachrichten zurDefinition von Interaktionsmoglichkeiten des Benutzers.

5 Festlegen von “Open”- bzw. “Close”-Nachrichten zum Offnen bzwSchließen eines Fensters.

6 Festlegen von Aktivitatsbalken der Fesnter- bzw. Frameobjekte zurVerdeutlichung, ob ein Fenster oder Frame aktiv ist.



ZusammenfassungEnde











ZusammenfassungEnde











ZusammenfassungEnde











ZusammenfassungEnde











ZusammenfassungEnde











ZusammenfassungEnde

Was wurde in diesem Vortrag vermittelt?

Methodisches Vorgehen zur Erstellung von Web-Applikationen(Anforderungsdefinition − > Konzept(Inhaltsmodell − > Navigation− > Prasentation) − > Implementierung).

Prazise Notation zur technologieunabhangigen Definition einerWeb-Applikation

Wiederverwendung und Erweiterung des UML-Metamodells (UMLProfiles).

Semiautomatischer Ansatz (teilweise automatisierte Transformation).

Modellgetriebener Ansatz wird unterstutzt und folgt dem Prinzip derMDA.



ZusammenfassungEnde

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 vonWebanwendungen.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.


Technology

Web Application Interface Modelling - UWE Approach