Design representation classification framework formality change - PDF document

TDT4250 - Modeling of Information Systems, Autumn 2006 What aspects of a UI do we want to capture? Graphical aspects � use of colors, fonts, layout etc. � Structure � hierarchical structure of interaction elements � Information � what information is accessible in which parts of the UI � what is the relationsship between information in various parts of the UI � Behavior � when are the various interaction elements active � how are changes in the UI triggered by the user � 1 TDT4250 - Modeling of Information Systems, Autumn 2006 Design representation classification framework formality change formality perspective problem vs. solution abstract vs. concrete change detail granularity 2 1 1

TDT4250 - Modeling of Information Systems, Autumn 2006 The UI modelling part of MODIS presents two notations for dialog and interaction CAP – Canonical Abstract Prototype Diamodl – Dialog modelling language These cover different aspects of design and different regions of the representation space Intro – UI modelling 3 TDT4250 - Modeling of Information Systems, Autumn 2006 Classification of design representations From problem to solution (perspective) � From high to low level (granularity) � Level of formality � formality perspective our target granularity Representation must be tailored to the needs of the design process and � its participants 4 2 2

TDT4250 - Modeling of Information Systems, Autumn 2006 Scenario 1 – engineering tradition � Build task model � Annotated with information usage � contextual information used for decision making � data that is operated on � Identify dialog structures that support tasks � Map AIOs to CIOs � rules and heuristics � device characteristics 5 TDT4250 - Modeling of Information Systems, Autumn 2006 Scenario 2 – the designer approach � Sketch or prototype with the user � Document information flow and behavior � express what a concrete design does not � complement, not replace concrete description � Look for alternative designs for abstract � appreciate that concrete prototypes are not always about concrete design � systematically search for design alternatives 6 3 3

TDT4250 - Modeling of Information Systems, Autumn 2006 Example: Hybrid GUI/ modelling tool 7 TDT4250 - Modeling of Information Systems, Autumn 2006 Example from CAP lecture � Which elements of this model could/should have been given a more formal definition/ specifiction � How? 8 4 4

TDT4250 - Modeling of Information Systems, Autumn 2006 DiaMODL – key features � Abstract model of interaction � abstract specification of functional dialog elements � visual, compositional and scalable notation � platform- and device-independent � formal ”enough”, executable but incomplete � Particularly weell suited for business applications � Hybrid language � based on Pisa interactors and UML Statecharts � integrated with domain modelling language, e.g. UML 9 TDT4250 - Modeling of Information Systems, Autumn 2006 Generic interaction (Pisa black box) Notation for generic input � and output components Dataflow-oriented � Interactor mediates information in � two directions 10 5 5

TDT4250 - Modeling of Information Systems, Autumn 2006 Scalable notation Specification of functionality � output and input � of integers Description of construction � composition of sub-interactors � string input combined with � parsing and unparsing Same abstract description, � many alternative concrete interaction objects 11 TDT4250 - Modeling of Information Systems, Autumn 2006 Use of UML � Data � need for representing configurations of concrete objects (placeholders for values, i.e. variables) � collaboration diagram elements capture this � elements and sets are mapped to classes and (multi-)objects � Behavior � Statecharts was already used � scale better than Activity charts 12 6 6

TDT4250 - Modeling of Information Systems, Autumn 2006 More complex interaction objects Functionality defined in terms of configuration of � domain objects Utilise power of � domain modelling language Output: Set � Input: Subset � � UML is not ideal for expressing mathematical relations Alternative implementation 13 TDT4250 - Modeling of Information Systems, Autumn 2006 ... and their composition Interactor for � each set Two buttons and � add and remove functions 14 7 7

TDT4250 - Modeling of Information Systems, Autumn 2006 Java Beans � Properties are mapped to gates or resources 15 TDT4250 - Modeling of Information Systems, Autumn 2006 Generic tree interactor 16 8 8

TDT4250 - Modeling of Information Systems, Autumn 2006 javax. swing. JList 17 TDT4250 - Modeling of Information Systems, Autumn 2006 javax. swing. JTree 18 9 9

TDT4250 - Modeling of Information Systems, Autumn 2006 Configuration of larger elements... hierarchy message list single message 19 TDT4250 - Modeling of Information Systems, Autumn 2006 ... and their composition ... � Selection 1 � Selection 2 Output: � Output: � Mail Node hierarchy Set of related Messages Input: Mailbox � Input: Message instance � � Message Output: Message instance � 20 10 10

TDT4250 - Modeling of Information Systems, Autumn 2006 ... and detailed specification in terms of domain model Selection 1 � Output: � Mail Folder hierarchy Input: Mailbox � Selection 2 � Output: � Set av related Messages Input: Message-element � Message � Output: Message-element � Stretches UML’s notation � 21 TDT4250 - Modeling of Information Systems, Autumn 2006 Activation and sequencing 22 11 11

TDT4250 - Modeling of Information Systems, Autumn 2006 State-oriented CIOs � Direct manipulation � Web page navigation � Mode selection in toolbars � Tab folders 23 TDT4250 - Modeling of Information Systems, Autumn 2006 Generic interactors Identify reusable � patterns Generalize � interactor composition 24 12 12

TDT4250 - Modeling of Information Systems, Autumn 2006 ...generic interactors � Instantiate generic interactor by binding parameters 25 TDT4250 - Modeling of Information Systems, Autumn 2006 ...customize generic interactors � Provide interactor for setting parameter 26 13 13

TDT4250 - Modeling of Information Systems, Autumn 2006 Patterns � Problem description = interactor specification � Solution = interactor composition 27 TDT4250 - Modeling of Information Systems, Autumn 2006 Goal: Hybrid GUI/ modelling tool 28 14 14

TDT4250 - Modeling of Information Systems, Autumn 2006 Open source Java implementation � Data model � simplification and extension of UML’s meta-model � use Eclipse Modelling Framework (EMF) � Behavior � Statechart/interactor machinery � Editor � first version based on Eclipse (EMF, Graphical Editing Framework (GEF) and Workbench integration) � second version based on Eclipse’s Graphical Modelling Framework (GMF), which extends EMF and GEF with lots of features 29 TDT4250 - Modeling of Information Systems, Autumn 2006 Future work � Validation in industry � real interest expressed, but not really tried out � Hybrid GUI-builder and modelling tool � mixed-mode GUI-building and dialog modelling � bottom-up user-centered prototyping process � Distributed user interface � interactor model may be split into parts and deployed across interconnected devices � XML-based (instant) messaging 30 15 15

TDT4250 - Modeling of Information Systems, Autumn 2006 Conclusion � DiaMODL � language for specifying and documenting dialog design � visual and scalable notation partly based on UML � Strengths � platform/device independent � covers several interaction styles � Weaknesses � executable, but incomplete � poor tool support, but it’s on its way � too little industry validation 31 16 16