A UML Profile for GUI Layout · Lin 2000: DENIM: Finding a Tighter Fit Between Tools and Practice...

A UML Profile for GUI Layout

Erfurt, 27.-30.09.2004

Kai Blankenhorn, Mario Jeckle †

A UML Profile for GUI Layout - Kai Blankenhorn, Mario Jeckle 3/26

Situation

UML 2 knows 13 diagrams”General purpose modeling language” (OMG 2003a)

Impossible to model GUI layout with UML

Graphics designers create non-UML models of GUIs (Newman & Landay 2000)

Layout is modeled using schematics or wireframes (Newman & Landay 2000)

Motivation Foundation Previous Work Metamodel ExampleSituation Importance of GUIs Problems in daily work Goals


Importance of GUIs

The most obvious part of a software systemBig impact on overall cost and productivity (Myers 1993; Galitz 2002)

Realization: UI code makes up about 50% of application code (van der Veer & van Vliet 2001; Galitz 2002)

Especially important for the success of web pages (Shneiderman 1997; Lohse & Spiller 1998)

Central aspect of usability efforts

Yet little support by UML



Problems in daily work

Application design separated into two fields:Software design – made by software engineersGUI design – made by graphics designers

Difficult to coordinate them efficiently

How to specify and discuss GUI layout ideas?Customer‘s ideasDedicated layout specification phase prior to creating mockups

A model without the GUI is incompleteHarder for programmers to know what to doLess control over application development



Goals

Extension of the UMLInteraction and dynamics: modeled using traditional UML diagramsCreate a new diagram for GUI layout

Standards conformant

UML look and feel

Easy to apply in existing processes

Mimic designer sketches



UML 2

Object oriented general purpose modeling language

UML metamodel: model of the UML in MOF (OMG 2003a)

Extended using profiles: (OMG 2003a)

Tailor the UML metamodel to new platforms or domainsMetamodel classes may be extended using stereotypes

Additional semanticsConstrained syntaxDifferent presentation through stereotype icons

Directly supported by UML tools (theoretically)

UML 2 Diagram Interchange Designer ScribblesMotivation Foundation Previous Work Metamodel Example


Diagram Interchange (Boger et al. 2002)

Integral part of UML 2.0 (OMG 2003b)

Originated from XMI

Makes UML diagrams layout awareEvery UML Element is assigned a GraphElement


GraphElement

+position: Point

GraphEdge

+Waypoints {ordered} [2..*] : Point

GraphNode

+size [0..1] : Dimension

«DataType»Point

+x : Double+y : Double

«DataType»Dimension

+width : Double+height : Double


Designer Scribbles

Hand-drawn abstraction of a GUI’s designDesign ideas and considerationsCommon practice among designersCommonly used symbols for widgets

Sometimes abstracted into wireframes



Interactive Sketching

Pinto-Albuquerque (2000)Layout documents with hand-drawn shapes using shape recognitionEmphasis on converting sketches into HTML documentsNo formal model is createdNotation of its own

DENIM (Lin et al. 2000)

Sketch recognition Emphasis on creating a complete model of the UIFormal model not connected to UMLNotation derived from designer sketches

Can be used for sketching UML diagrams

Interactive Sketching UWE OMMMA-LMotivation Foundation Previous Work Metamodel Example


UWE

UML-based Web Engineering (Hennicker & Koch 2001)

Proposes a design process and models for hypermedia designBased on a UML 1.x profilePresentational model:

Structural organization of the presentationSubstitute for sketchingNotation of its ownLayout information not established in the metamodel



OMMMA-L

Visual Language for the Object-Oriented Modeling of MultiMedia Applications (Sauer & Engels 1999)

Heavyweight extension of UMLPresentation diagram:

Static and dynamic elementsBounding boxes mark areas on the screenLayout information not established in the metamodel



General Structure

TechnicallyStereotypes of Class contained in a UML 2.0 profileInterrelated using stereotyped AssociationsUser-defined stereotype iconsSemantics modelled using OCL constraints on the stereotypes

Division of a Screen into ScreenAreasContainerScreenArea: contains other ScreenAreasFunctionalScreenArea: owns one or more UIFunctionalities

UIFunctionalitiesStaticUIFunctionalities: Text, Image, Heading, LogoActivatableUIFunctionalities: Link, Form, Navigation, Workspace

General structure Stereotypes GUI Layout package ScreenArea Inheritance References PackageMotivation Foundation Previous Work Metamodel Example


General Structure (cont'd)

Top level element in a model: Screen

Screen and ContainerScreenAreas form a hierarchySimilar to the window metaphorPosition relative to parent position



Stereotypes used

Extracted and abstracted from designer sketchesScreenArea

Represents an area within a screen of a graphical user interfacethat serves a purpose (think of tissue as an analogy)Subclasses: FunctionalScreenArea, ContainerScreenArea (notation basically the same)

ScreenContains all ScreenAreas that are displayed at a timeSpecial type of ContainerScreenAreaMust not be contained in any other ScreenArea

Motivation Foundation Previous Work Metamodel ExampleGeneral structure Stereotypes GUI Layout package ScreenArea Inheritance References Package


Stereotypes used (cont'd)

StaticUIFunctionalities: static, no behaviour or interaction

Image: static image, movie or animation

Text: continuous text with any alignment

Heading: short headline in a larger or otherwise distinct font

Logo: pictorial corporate design element

Motivation Foundation Previous Work Metamodel ExampleGeneral structure Stereotypes GUI Layout package ScreenArea Inheritance References Package


Stereotypes used (cont'd)

ActivatableUIFunctionalities: may have behaviour and can be activated

Link: navigable link to another ScreenArea

Form: requests information from the user

Navigation: provides links to all major parts of the systemdifferent semantics than a group of links

Workspace: interactively manipulating dataoften a blank area on the screen with special importance



GUI Layout packageGeneral structure Stereotypes GUI Layout package ScreenArea Inheritance References PackageMotivation Foundation Previous Work Metamodel Example

«stereotype»Text

«stereotype»Image

«stereotype»Logo

«stereotype»Heading

«stereotype»Workspace

«stereotype»Navigation

«stereotype»Link

«stereotype»Form

«stereotype»ScreenArea

*+contained

0..1 +container

«stereotype»FunctionalScreenArea

«stereotype»ContainerScreenArea

+isVisible: Boolean = false

Class

+isExternal: Boolean = false

{subsets class}

{subsets nestedClassifier}+position: Point {subsets position}+size: Dimention {subsets size}

DiagramInterchange::Point

DiagramInterchange::Dimension

«stereotype» «stereotype»ActivatableUIFunctionality StaticUIFunctionality

«stereotype»UIFunctionality

1..*{subsets nestedClassifier}

+functionality

1+owner{subsets class}

«stereotype»Screen

{ self.container->isEmpty() }

Class


ScreenArea Inheritance


ScreenAreas can be abstractCannot be instanciated

ScreenAreas can specialize other ScreenAreasInheriting their parent, size and positionOverwriting their contents

See the following example…


ScreenArea Inheritance (cont'd)


OrderConfirmation OrderSummary

ContentMainOrderForm RegistrationFormCouponForm


References Package


Package merged with GUI Layout package

Allow modeling of additional semantics using ReferencesLinkReferenceScreenFlow

Each Reference targets a ScreenArea

Enables modeling web specific aspects:Link targetsFlow of navigationSitemaps


References Package (cont'd)


«stereotype»LinkReference

«stereotype»ScreenFlow

«stereotype»Reference

«class»Association

«stereotype»Workspace

«stereotype»Navigation

«stereotype»Link

«stereotype»Form

{ reference->size()<=1 }

«stereotype»ActivatableUIFunctionality

{subsets ownedAttribute}+reference

*

0..1+source

{subsets classifier}

{subsets ownedAttribute}+reference

*

«stereotype»Screen

0..1{subsets classifier}

+source


References Package (cont'd)


Welcome

Author

Order

CatFiction

CatNonFiction

CatScientific

CatComics

Reviews Recommendations Login

UserDetails

Book


Motivation Foundation Previous Work Metamodel ExampleWeb Page Prototype


Motivation Foundation Previous Work Metamodel ExampleWeb Page Prototype


Thank you!Questions, please?

References:Boger et al. 2002: Diagram Interchange for UML. In: Jézéquel, J.-M. ; Hussmann, H.; Cook, S. (Eds.): UML 2002 – The Unified Modeling Language 5th International Conference,

Dresden, Germany, September 30–October 4, 2002, Springer LNCS vol. 2460.Galitz 2002: The Essential Guide to User Interface Design, Second Edition. New York: John Wiley & Sons.Hennicker & Koch 2001: Modeling the User Interface of Web Applications with UML. In: Evans, A.; France, R.; Moreira, A. (eds.) (2001): Practical UML-Based Rigorous Development

Methods - Countering or Integrating the eXtremists, Workshop of the pUML-Group at the UML 2001. Gesellschaft für Informatik, Köllen Druck+Verlag, October 2001, pp. 158-172.Jeckle et al. 2004: UML glasklar, München, Hanser, 2004.Lin 2000: DENIM: Finding a Tighter Fit Between Tools and Practice For Web Site Design. In: CHI Letters: Human Factors in Computing Systems, CHI 2000, pp. 510-517.Lohse & Spiller 1998: Quantifying the effect of user interface design features on cyberstore traffic and sales. In: Proceedings of CHI'98, New York: ACM, 1998, pp. 211-218.Myers 1993: Why are Human-Computer Interfaces Difficult to Design and Implement? Carnegie Mellon University Technical Report CMU-CS-93-183, July 1993.Newman & Landay 2000: Sitemaps, Storyboards, and Specifications: A Sketch of Web Site Design Practice. In: Boyarski, D.; Kellogg, W. A. (Eds.): Proceedings of the Conference on

Designing Interactive Systems: Processes, Practices, Methods, Techniques. New York: ACM Press, pp. 263-274.OMG 2003a: UML 2.0 Infrastructure Final Adopted Specification (ptc/03-09-15).OMG 2003b: Unified Modeling Language: Diagram Interchange, version 2.0. Final Adopted Specification (ptc/03-09-01).Pinto-Albuquerque et al. 2000: Visual Languages for Sketching Documents. Proc. of VL 2000, Seattle, September 2000 (2000), pp. 225-232.Sauer & Engels 1999: Extending UML for modeling of multimedia applications, Proc. IEEE Symposium on Visual Languages, Tokyo, September 13-16, 1999.Shneiderman 1997: Designing the User Interface, Third Edition. Addison Wesley, Reading, 1997.van der Veer & van Vliet 2001: A Plea for a Poor Man's HCI Component in Software Engineering and Computer Science Curricula. In: Computer Science Education, Vol. 13, no 3

(Special Issue on Human-Computer Interaction), pp. 207-226.

Prototype available at www.bitfolge.de/guilayout

Motivation Foundation Previous Work Metamodel Example The End

Date post:	27-Jul-2020
Category:	Documents
Upload:	others
View:	0 times
Download:	0 times