![Page 1: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/1.jpg)
IFML: Building the front end of Web and Mobile applications with OMG’s
Interaction Flow Modeling Language
Marco Brambilla [email protected]
@marcobrambi
![Page 2: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/2.jpg)
The modeling approach
![Page 3: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/3.jpg)
What is a model?
Models
Mapping Feature A model is based on an original (=system)
Reduction Feature A model only reflects a (relevant) selection of the original‘s properties
Pragmatic Feature A model needs to be usable in place of an original with respect to some purpose
ModelrepresentsSystem
Purposes: • descriptive purposes• prescriptive purposes
![Page 4: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/4.jpg)
CIM, PIM, PSM
Modeling Levels
Computation independent (CIM): describe requirements and needs at a very abstract level, without any reference to implementation aspects
Platform independent (PIM): define the behavior of the systems in terms of stored data and performed algorithms, without any technical or technological details
Platform-specific (PSM): define all the technological aspects in detail
![Page 5: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/5.jpg)
Modeling levels - CIM
Eg., business process
![Page 6: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/6.jpg)
Modeling levels - PIM
Eg., business object description and constraints
![Page 7: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/7.jpg)
Modeling levels - PSM
How the functionality in the PIM is realized on a certain platform
Using a UML-Profile for the selected platform, e.g., EJB
![Page 8: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/8.jpg)
The UI Modeling Problem
![Page 9: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/9.jpg)
User interface and interaction development is a painful phase of software process
… for everybody!
… not only for the Web!
UI Modeling Problem
![Page 10: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/10.jpg)
Costly and Inefficient process Complexity of
user interfaces (UIs)Ineffective
tools
Manualdevelopment
No MDE technology
The UI Design Problem
![Page 11: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/11.jpg)
No model driven
engineering
Platform independent
description of UIs
Focused on user interactions
No definition of graphics and styles
Reference external models
The UI Design solution: IFML
![Page 12: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/12.jpg)
User interaction has been overlooked in software engineering standards
Hence the Interaction Flow Modeling Language (IFML)
Standardization gap
![Page 13: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/13.jpg)
13
We were going to make them an offer they couldn’t
refuse.
In less than 2 years (a record in OMG!), we obtained approval of the IFML standard
The Object Management Group
![Page 14: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/14.jpg)
User interaction has been overlooked in software engineering standards
Hence the Interaction Flow Modeling Language (IFML)
In less than 2 years (a record in OMG!), we obtained approval of the beta IFML standard
Version 1.0 due to come out in these weeks
Standardization gap
![Page 15: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/15.jpg)
The Interaction FlowModeling Language
![Page 16: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/16.jpg)
IFML Objectives
Binding to Persistence
Layer
Navigation Path
Binding to Business Logic
Content
Event
![Page 17: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/17.jpg)
IFML Objectives: Content
Content
![Page 18: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/18.jpg)
IFML Objectives: Navigation Path
![Page 19: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/19.jpg)
IFML Objectives: Navigation Path
![Page 20: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/20.jpg)
IFML Objectives: Events
Mouse Over
![Page 21: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/21.jpg)
IFML Objectives: Events
![Page 22: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/22.jpg)
IFML Objectives: Binding to business logic
![Page 23: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/23.jpg)
IFML Objectives: Binding to business logic
![Page 24: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/24.jpg)
IFML Objectives: Binding to persistence
Content
Book
Title: stringCover: fileList Price: currencyPrice: currencySave: currencyRating: integer………
![Page 25: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/25.jpg)
IFML Overview - Extensibility
![Page 26: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/26.jpg)
IFML Essentials
![Page 27: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/27.jpg)
Multiple views for the same application
Mobile and multi-device applications
Visualization and input of data, and production of events
Components independent of concrete widgets and presentation
Interaction flow, initiated by the user or by external events
User context: the user status in the current instant of the interaction (position, history, machine, platform,…)
Modularization of the model (design-time containers for reuse purpose)
User input validation and constraints, according to OCL or other existing constraint languages
Covered aspects
![Page 28: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/28.jpg)
IFML by example
Basic navigation flow between ViewComponents
![Page 29: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/29.jpg)
IFML by example
Basic navigation flow between ViewComponents
Artists List
Artists
Artist
Event
View Component
View ContainerParameterBinding«ParameterBindingGro
up» SelectedArtist AnArtist
![Page 30: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/30.jpg)
IFML by example
Album Search
«Window» AlbumSearch
AlbumList
«Window» Albums
AlbumDetails
«Window» Album
«ParameterBindingGroup» Title AlbumTitleYear AlbumYear
«ParameterBindingGroup»SelectedAlbum AnAlbum
«Form» «List» «Details»
![Page 31: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/31.jpg)
IFML by example
Nesting of ViewContainers
Tagged ViewContainers (XOR)
Artist and Album List
Albums&Artists
Albums&Artists
Artist Details
Artist
Album Details
Album
[XOR] Album or Artist
«ParameterBindingGroup»SelectedAlbum AnAlbum
«ParameterBindingGroup»SelectedArtist AnArtist
Select Artist
Select Album
![Page 32: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/32.jpg)
ViewComponentParts:
• Data binding
• Parameters
Types of ViewComponents (<<List>>)
IFML – adding details to ViewComponents
«DataBinding» MailMessage
«ConditionalExpression» self.mm2MailMessageGroup = MailBox
«List» Message List
«Parameter» MailBox : MailBox
![Page 33: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/33.jpg)
Joint use of IFML and other modeling languages:• DataBinding to classes and attributes of UML Class Diagrams• Also with other content models, such as: Entity-Relationship,
Ontologies, …
Data binding
![Page 34: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/34.jpg)
IFML by example
Actions
AlbumList
Albums
AlbumDeletion
«ParameterBindingGroup»SelectedAlbum AnAlbum
![Page 35: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/35.jpg)
Joint use of IFML and other modeling languages
Connection of Actions to back-end business logic as • UML methods of classes• whole UML dynamic diagrams
– activity diagram, sequence diagram, state chart diagram, …
Dynamic Behaviour
![Page 36: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/36.jpg)
IFML by example
Actions
AlbumList
Albums
AlbumDeletion
«ParameterBindingGroup»SelectedAlbum AnAlbum
«Behaviour» Album.Delete
![Page 37: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/37.jpg)
OnSelect event
OnSubmit event
IFML – subtyping events
Throwingevents
Catchingevents
![Page 38: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/38.jpg)
.. And as many others as you want!
IFML – subtyping components
![Page 39: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/39.jpg)
IFML by example
ActivationExpression, SubmitEvent, Event generation
MessageList
MailBox
«Menu» Message toolbar
«Parameter» MessageSet
Delete
Archive
Report
MoveTo Labels
«ActivationExpression»not MessageSet.isEmpty()
MessageSelection
Delete
Archive
Report
«ParameterBindingGroup»SelectedMessages MessageSet
«ParameterBindingGroup»SelectedMessages MessageSet
«List»
![Page 40: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/40.jpg)
IFML concrete syntax by example
intra-component events and flows
[L] Message Writer
Send
«Form» Message Writer
«SimpleField» to: String
«SimpleField» cc: String
«SimpleField» bcc: String
«SimpleField» subject: String
«SimpleField» body: String
«Parameter» State
«SimpleField» attachment: …
Save
Add cc
Add bcc
Edit Subject
Add attachment
Reply to all
Reply
Forward
Discard
«ActivationExpression»State <> “Forward”
Send Save
«ActivationExpression»State = “Reply” or State = “Reply All”
«ParameterBindingGroup»“Re:” + subject subject from tocc ccbody body“Reply All” State
«ParameterBindingGroup»“Re:” + subject subject from tocc ccbody body“Reply All” State
«ParameterBindingGroup» “Fw:” + subject subject body body “Forward” State
«ActivationExpression»State <> “Reply”
«ActivationExpression»State <> “Reply All”
Action Confirmed
Action Confirmed
![Page 41: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/41.jpg)
IFML concrete syntax by example
<<Details>>
Confirmation Message
Confirmation PageAction
Confirmed
Capturing of custom events
Note: typical problem of event-based systems (termination, …)
![Page 42: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/42.jpg)
IFML example – online payment
ProductList
Shopping Cart
«List»
Customer Information
Customer Information
«Form» Execute the
payment
Checkout
«ParameterBindingGroup»Name Name
Payment Information
Payment Information
«Form»
«ParameterBindingGroup»Name NameCreditCard CC
Confirmation
ConfirmationMessage
«Details»«ParameterBindingGroup»Total Amount
![Page 43: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/43.jpg)
IFML concrete syntax – modules
IFML Modules - definition
Execute the
payment
«ParameterBindingGroup»Name Name
«ParameterBindingGroup»Name NameCreditCard CC
Customer Information
Customer Information
«Form»Payment
Information
Payment Information
«Form»
AmountConfirmation
Payment Execution
![Page 44: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/44.jpg)
IFML concrete syntax – modules
IFML Modules - usage
Shopping Cart
Checkout
«ParameterBindingGroup»Total Amount
Confirmation
ConfirmationMessage
«Details»
PaymentExecution
ProductList
«List»
![Page 45: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/45.jpg)
Multiple aspects modeling – 1 (business and requirements)
UML Use Case BPMN process
UML Sequence
IFML
UML Statechart
Handle Rental
Sales Clerk Handle Renter
<<Include>> <<Extend>>
Handover Car
<<UML Actor>> Sales Clerk
<<UML Model>> IT system
new rental
change days
accept payment
![Page 46: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/46.jpg)
Integration with UML Use Cases
Each use case can be described by
A business process
A plain UI description in IFML
Some UML dynamic diagrams (e.g., activity, sequence, …)
Handle Rental
Sales Clerk Handle Renter
<<Include>> <<Extend>>
Handover Car
![Page 47: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/47.jpg)
Integration with BPMN
The UI of each activity can be described by
An IFML module
Some UML dynamic diagrams (e.g., activity, sequence, …)
Execute the
payment
«ParameterBindingGroup»Name Name
«ParameterBindingGroup»Name NameCreditCard CC
Customer Information
Customer Information
«Form»Payment
Information
Payment Information
«Form»
AmountConfirmation
Payment Execution
![Page 48: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/48.jpg)
Example of UML - IFML mapping
IFML Model
<< Use Case>> Handle Rental
xUM
L U
se C
ase
Dia
gra
m
<<xUML Actor>> Sales Clerk
<< Use Case>> Handle Renter
<<Include>> <<Extend>>
<< Use Case>> Handover Car
<<UML Actor>> Sales Clerk
Handle Rental
xUML Sequence Diagrams
<<UML Model>> IT system
new rental
change dates
accept payment
IFML models can be reworked or refined after being generated
![Page 49: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/49.jpg)
Multiple aspects modeling – 2 (implementation and architecture)
UML Sequence
UML Deployment
IFML
UI Mockup models
![Page 50: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/50.jpg)
Description of deployment architecture
UI is just one facet of system design
Often need to position it in a broader architectural vision
UML deployment diagram
Integration with UML
![Page 51: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/51.jpg)
51
UML
Sequence
Diagrams
Tiers and calls
Explicit description of interactions between tiers
![Page 52: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/52.jpg)
• Manual specification of BPMN process model
• Automatic transformation of BPMN to WebML
• Possible manual refinement of WebML models
• Automatic running code generation on J2EE platform
• Virtuous development cycle
Model-driven Development Process
(IFML)
![Page 53: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/53.jpg)
The generated model artifacts
![Page 54: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/54.jpg)
Executability experiment within OMG
![Page 55: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/55.jpg)
An official metamodel of the language which describes the semantics of and relations between the modeling constructs
A graphical concrete syntax for the interaction flow notation which provides an intuitive representation of the user interface composition, interaction and control logic for the front-end designer
A UML Profile consistent to the metamodel
An interchange format between tools using XMI
All this, specified through standard notations themselves
Practical results of having a standard
![Page 56: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/56.jpg)
Static aspects
Also: interchange with profile-based diagrams. The UML Profile for IFML
« p a g e »AlbumSe arch
« p a g e »Albums
« p a g e »Album
Album Se arch Album Inde x Album De tail
Dynamic aspects
« in d e x»M Box List
« in d e x»M e ssage
Inde x
Se le ctMa ilMe ssa g e s(mBo x)
![Page 57: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/57.jpg)
BPMN and/or UML editor
Tight and seamless integration between different modeling tools• Thanks to XMI interchange format, UML profiles, vendor-specific notation
implementations• Thanks to model to model transformations
IFML modeling and industrial-strenght
UI generation
Model integration and interchange
UML tool implementing IFML profile
Other Domain-specific modeling tool
XMI model exchange
Model to model
transformation
![Page 58: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/58.jpg)
Joint usage of IFML with other MDA languages can be devised:• SysML• SoaML• …
… and also with other frameworks (e.g., Model Driven Enterprise Engineering)
Broader, enterprise-wide system modeling
![Page 59: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/59.jpg)
The Metamodel-- excerpts --
![Page 60: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/60.jpg)
InteractionFlowModel
![Page 61: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/61.jpg)
IFML Model
![Page 62: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/62.jpg)
ViewElements
![Page 63: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/63.jpg)
Referencing Content and Behaviour
![Page 64: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/64.jpg)
Events
![Page 65: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/65.jpg)
Context
![Page 66: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/66.jpg)
Examples
![Page 67: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/67.jpg)
Typical email interface
Usability
Friendliness
Complex interaction flows
Example 1: online mailer (e.g., Gmail)
![Page 68: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/68.jpg)
[D] [L] MailMessages
[XOR] MAIL Top
[L] Contacts
Top down design from containers
![Page 69: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/69.jpg)
Message List
MailBox
[XOR] MessageManagement
[L] Settings
[XOR] MessageSearch
MailBoxList
[D] [L] Messages
«Window» [XOR] MAIL Top
[L] MessageWriter
«List»
«List»
…
Starting adding ViewComponents
![Page 70: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/70.jpg)
Message List
MailBox
[XOR] MessageManagement
[L] Settings
[XOR] MessageSearch
MailBoxList
[D] [L] Messages
«Window» [XOR] MAIL Top
[L] MessageWriter
«List»
«List»
«ParameterBindingGroup»SelectedMailBox MailBox
…
.. And further details
![Page 71: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/71.jpg)
«List» MBoxList
«List» MessageList
«DataBinding» MailMessage
«ConditionalExpression»self.mm2MailMessageGroup = MailBox
«DataBinding» MailMessageGroup
«ParameterBindingGroup»SelectedMailBox MailBox
MessageList
Parameters and Conditions
«Parameter» MailBox
![Page 72: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/72.jpg)
MessageList
«Menu» Message toolbar
«Parameter» MessageSet
Delete
Archive
Report
MoveTo
MessageSelection
MailBox
Labels
«ActivationExpression»not MessageSet.isEmpty()
«ParameterBindingGroup»SelectedMessages MessageSet
«List»
Activation expressions
![Page 73: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/73.jpg)
MessageList
«Menu» Message toolbar
«Parameter» MessageSet
Delete
Archive
Report
MessageSelection
«Modeless» Tag Chooser
«Modal» Tag Creator
Select Tag Tag Folder List
Create New
New Tag Folder
Create
Message toolbar
MessageSelection
[XOR] Tags
Mailbox
«List»
«List»
«Form»
![Page 74: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/74.jpg)
MessageList
«Menu» Message toolbar
«Parameter» MessageSet
Delete
Archive
Report
MoveTo
MessageSelection
«Modeless» Tag Chooser
«Modal» Tag Creator
Select Tag
MailBox
Tag Folder List
Create New
New Tag FolderCreate
Delete
Archive
Report
Associate to Tag /
Move to folder
Create Tag and
Associate Tag / Move to folder
«List»
«ParameterBindingGroup»SelectedMessages MessageSet
«ParameterBindingGroup»SelectedMessages MessageSet
«ParameterBindingGroup»SelectedTag ATag
«List»
«ParameterBindingGroup»NewTagName TagName
«Form»
![Page 75: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/75.jpg)
[XOR] MessageSearch
[D] Search
Message keyword search
«Modeless» FullSearch
Message Full Search
Show search options
Search mail Search mail
MailBox
Message List
«List»
«Form» «Form»
«ParameterBindingGroup»Keyword Key
«ParameterBindingGroup»Keyword KeyFrom FromKeyTo ToKey
«ParameterBindingGroup»Keyword Keyword
Search forms
![Page 76: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/76.jpg)
[XOR] MessageSearch
[D] Search «Modeless» FullSearch
Search mail
MailBox
«Form» Message Keyword Search «Form» Message Full Search
«SimpleField» Keyword: String«SimpleField» Keyword: String
Search mail
«SimpleField» From: String
«List» Message List
«DataBinding» MailMessage
«ConditionalExpression» MailMessage IN self.mm2MailMessageGroup = Mailbox«ConditionalExpression»( if (Key.size() <= title.size()) then Sequence(1..title.size() - Key.size()) -> exists(i | title.substring(i,i+ Key.size()) = Key )else false) OR(if (from.size() <= self.from.size()) then Sequence(1..self.from.size() - from.size()) -> exists(i | self.from.substring(i,i+ from.size()) = from )else false)
Show search options«ParameterBindingGroup»
Keyword Key
«ParameterBindingGroup»Keyword Keyword
«ParameterBindingGroup»Keyword KeyFrom From
Search Conditions
![Page 77: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/77.jpg)
Message Details
Message Details
[L] Message Writer
Message Writer
Send
[XOR] Message Reader
Reply
Forward
ReplyAll
Send
«ActivationExpression»MessageRecipients.size() > 1
«ParamBindingGroup»MessageId MessageId
«Details»
«Form»
…
Message follow-up
![Page 78: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/78.jpg)
«Form» MessageWriter
Search mail
«RichTextSimpleField» Body
«RichTextToolBar» Toolbar
[ClientSide]
ApplyFormat
[ClientSide]
ApplyFormat
Remove format «Modal» Alert
Cancel
[ClientSide]
ApplyFormat
Ok
[L] Message Writer
Client Side Logic
![Page 79: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/79.jpg)
Typical mobile UI
Simple app
Complex interactions
Touch events
Example 2: Instagram
AutoMobile FP7 SME EU research project
http://automobile.webratio.com
![Page 80: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/80.jpg)
• Media (photos)
• Users
• Activity
• Tag
Content
![Page 81: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/81.jpg)
Sign in
[H] Start Page
Register Sign In
Sign InRegister
![Page 82: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/82.jpg)
Top level – app structure
[XOR] Instagram Top
[D][L] Home
[L] Explore
[L] Take Picture
[L] Profile
[L] News
Refresh UpdateContent
<<modeless>>NoCon
normalTermination
exceptionalTermination
![Page 83: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/83.jpg)
How to avoid duplication
[XOR] Instagram Top
[D][L] Home
[L] Explore
[L] Take Picture
[L] Profile
[L] News
Refresh UpdateContent
<<modeless>> NoConn
normalTerminationexceptionalTermination
[L] News
Refresh
UpdateContent<<modeless>>
NoConnnormalTermination
exceptionalTermination
[L] Profile
Refresh
UpdateContent<<modeless>>
NoConnnormalTermination
exceptionalTermination
[L] Take Picture
Refresh
UpdateContent<<modeless>>
NoConnnormalTermination
exceptionalTermination
[L] Explore
Refresh
UpdateContent<<modeless>>
NoConnnormalTermination
exceptionalTermination
[L][D] Home
Refresh
UpdateContent<<modeless>>
NoConnnormalTermination
exceptionalTermination
![Page 84: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/84.jpg)
Media Viewer
Media.postedBy: User (profilePhoto, userName)Media(postTime)
Media - file PostedBy (User) - profilePhoto - userName LikedBy (User)
Contains (Comment) QualifiedBy (Tag) Mentions (User)
Media (file)
Media.contains : Comment (text)
Media.LikedBy : User (username)
Media (location)
"Like" event
"Comment" event
Media object menu
"Refresh" event
![Page 85: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/85.jpg)
<<Module>> MediaViewer
Media Viewer model
«NestedList» MediaViewer
«DataBinding» Media
«NestedDataBinding» likedBy
«NestedDataBinding» contains
«VisualizationAttributes» postTime, location, file
«VisualizationAttributes» numLikes
«ConditionalExpression» MediaOIDs->includes (oid)
«VisualizationAttributes» userName
«VisualizationAttributes» userName, text
seeLikers
seeAllComments
BlockSize=6
«ActivationExpression»size() > 6
«NestedDataBinding» comprises«VisualizationAttributes» tagName
«ActivationExpression»likedBy->size() <= 10
«ActivationExpression»numLikes > 10
«NestedDataBinding» mentions«VisualizationAttributes» userName
«ParameterBindingGroup»OIDs MediaOIDs
«NestedDataBinding» postedBy
«VisualizationAttributes» userName, photo
«OrderBy» postTime DESC
![Page 86: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/86.jpg)
Other renderings
![Page 87: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/87.jpg)
Other renderings
Contains (Comment) QualifiedBy (Tag)
SeeSameTag event
![Page 88: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/88.jpg)
Detailed MediaViewer
«NestedList» MediaViewer
<< Modal >> User Media Menu
<< Modal >> LoggedUser MediaMenu
«DataBinding» Media
See Location
See User
<<ModuleReference>> Map
<<ModuleReference>> User
<<ModuleRef>> Tag
«NestedDataBinding» contains
SeeAllComments
«VisualizationAttributes» postTime, location, file
«VisualizationAttributes» numLikes
«ActivationExpression»likedBy->size() <11
See Media Menu
See User
SeeSameTag
Comment
Toggle Preference
Like
<<DoubleTouch>> Like/
UnlikeUpdate
See Tagged Users <<Touch>>
Play / Stop <<Touch>>
Play/Stop
«ActivationExpression»type==“Video”
«ActivationExpression»username != Context.username
«ActivationExpression»userName == Context.username
<<ModuleReference>> Likers
SeeLikers
See Media Logged Menu
«ActivationExpression»numLikes >10
BlockSize=6
«VisualizationAttributes» userName, text
«NestedDataBinding» comprises«VisualizationAttributes» tagName
See User
«NestedDataBinding» mentions«VisualizationAttributes» userName
See User
«NestedDataBinding» likedBy
«ConditionalExpression» MediaOIDs->includes (oid)
«VisualizationAttributes» userName
«NestedDataBinding» postedBy
«VisualizationAttributes» userName, photo
Share Delete TagPeople CopyURL
Report CopyURL
![Page 89: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/89.jpg)
User Profile UI
Upper section
Lower section
Commands
Profile menu
ProfileData ProfileData
![Page 90: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/90.jpg)
User Profile – map and photos of you
MediaMap PhotosOfUser
![Page 91: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/91.jpg)
<<XOR>> ProfileViewer
<<Module>> User
<<ViewContainer>> ProfileData
Overall view of User Profile
[XOR] <<ViewContainer>> UserPosts
[D][L] <<ModuleReference>> MediaTiled
ToggleFollowed
«Details» UserInfo
EditYourProfile
Options<<View Container>> OptionsMenu
BlockCancel
«ActivationExpression»userName != Context.username
Posts
SeeFollowers
SeeFollowing«VisualizationAttributes» profilePhoto, userName, name, bio, numPosts, numFollowing, numFollowers
«DataBinding» User
«ActivationExpression»userName == Context.username
«ActivationExpression»userName != Context.username
«ParamBindingGroup» username user
«ConditionalExpression» userName == user
[L] <<ModuleReference>> MediaViewer
[L] <<MapView >> MediaMap
«Marker» <<List>> Locations
«VisualizationAttributes» file
«DataBinding» Media
«ConditionalExpression» postedBy .userName == user
[L] <<ViewContainer>> PhotosOfUser
<<List>> TaggedMedia
«VisualizationAttributes» file
«DataBinding» Media
«ConditionalExpression» tags.userName == user
Toggle
Options<<View Container>> LoggedOptionsMenu
«ActivationExpression»userName == Context.username
EditPhoto
<<View Container>> PhotoMenu
Pick ImportFacebookTake
<<View Container>> ProfileEditor
<<View Container>> Search
«List» PostOIDs
«DataBinding» Media
«ConditionalExpression» postedBy == user
«ParamBindingGroup» MediaOids Oids
![Page 92: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/92.jpg)
<<Module>> MediaTiled
Media tiles
<<ViewContainer>> MediaAsTiles
<<ModuleReference>> MediaViewer
«List» MediaTiles
«VisualizationAttributes» file
«DataBinding» Media
«ConditionalExpression» MediaOIDs->includes (oid)
Select
«ParameterBindingGroup»OIDs MediaOIDs
«ParamBindingGroup» Selected MediaOIDs
<<orderB>>y postTime DESC
![Page 93: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/93.jpg)
93
Classical ecommerce web site
Extensive coverage of products and details (huge site!)
But patterns of interaction are much simpler than minimalist mobile UIs!
Basic content model coming up next…
Example 3: eBay
![Page 94: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/94.jpg)
Figure 9.27
![Page 95: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/95.jpg)
Search bar
![Page 96: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/96.jpg)
High-level site structure
<<siteview>> eBayWebInterface
[L] <<page>> DailyDeals[H][L] <<page>> Home [L] <<area>> CustomerSupport [L] <<area>> Sell
[L] <<area>> SellerCenter
[L] <<area>> Community
[L] <<area>> Policies
[L] <<area>> MyeBay [L] <<modeless>> Notifications
[L] <<area>> Annoucements [L] <<area>> MoneyBack[L] <<area>> SecurityCenter[L] <<area>> ResolutionCenter
[L] <<page>> SiteMap [L] <<page>> OfficialTime [L] <<page>> Survey
[D] <<page>> Tell us
<<page>> Create
<<page>> Review<<area>> Listings Categories & Collections[L] <<page>> NewFeatures
![Page 97: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/97.jpg)
Categories
![Page 98: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/98.jpg)
All Categories – right hand side dropdown
![Page 99: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/99.jpg)
Search with autocompletion
![Page 100: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/100.jpg)
LoggedIn User Menu
OverviewMaster Page
Register
Sign in
«Details» UserName«DataBinding» Context
«DataBinding»Context
«Details» Shopping Cart
«DataBinding» Cart
«ConditionalExpression»of.userName=user
MyCollections
«Form» Search
Search
«Autocompletion» Search
«DataBinding» QuerySuggestion
«VisualizationAttributes» text
«Simplefield» SearchKey:string«ActivationExpression»completion=false
«SelectionField» category
«DataBinding» Category
«VisualizationAttributes» name
Hide Suggestions
Show Suggestions
«ActivationExpression»completion=true
«ParamBindingGroup»true completion
«ParamBindingGroup»false completion
«ParamBindingGroup»SearchKey KeywordSelectedCategory CategoryId
«Tree» ShopByCategory
«DataBinding» Category
«VisualizationAttributes» Name
«NestedDataBinding» Subcategories
«VisualizationAttributes» Name
Search Results
Select
SettingsSign out
«ActivationExpression»Context.userName = null
«ActivationExpression»Context.userName != null
<<modeless>> Category tree
ShopByCategory
TrendingCollectionsAllCategories
Advanced
AdvancedSearch
«VisualizationAttributes» userName
«VisualizationAttributes» numItems
«ParamBindingGroup»userName user
![Page 101: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/101.jpg)
Search options
«Form» Left Search Single Options
«ScrollableList» Products
«Simplefield» MinimumPrice
«Simplefield» MaximumPrice
Search
«SelectionField» Format
«DataBinding» PurchaseFormat
«VisualizationAttributes» Name
«SelectionField» ItemLocation
«DataBinding» Listing
«VisualizationAttributes» Location
«Form» Left Search Multiple Options
«SelectionField» Size Type
«DataBinding» Fashion
«VisualizationAttributes» typeOfSize
«SelectionField» Size
«DataBinding» Fashion
«VisualizationAttributes» Location
«ConditionalExpression» self.getSizeType (SelectedCategory) AND SelectedCategory=“Fashion”
Deselect
See Size
«OnChange»Select
«ConditionalExpression» self. getSizeType (typeOfSize) AND SelectedCategory=“Fashion”
«ParamBindingGroup»selectedSizeType sizeType
«SelectionField» Color
«DataBinding» Listing
«VisualizationAttributes» color
«ConditionalExpression»
«Autocompletion» Brand«DataBinding» Listing
«VisualizationAttributes» brand
Deselect
«OnChange»Select
«OnChange»Select
Deselect
«SelectionField» DeliveryOptions
«DataBinding» Listing
«VisualizationAttributes» Location«SelectionField»Condition
«DataBinding» Listing
«VisualizationAttributes» itemCondition
«SelectionField» OtherOptions
«DataBinding» AvailableOptions
«VisualizationAttributes» name, selection
«OnChange»Select
Deselect
«OnChange»Select
Deselect
«OnChange»Select
«OnChange»Select
«OnChange»Select
![Page 102: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/102.jpg)
The WebRatio tool
![Page 103: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/103.jpg)
Drawing vs. modeling
Tool support for MDE/MDD
![Page 104: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/104.jpg)
An Eclipse-based development environment allowing:Modeling: ER + IFML + BPMN
100% code generation of standard JEE applications• Clear separation between design time and run time• No proprietary runtime
Quick and agile development cycles
Extending the generation rules• Defining new presentation styles• Defining new components
Versioning, teamwork, full lifecycle mgt
Truly multi-role model-driven development
What is WebRatio
Requirement Analysis
Solution Modeling
Prototype Generation
Results Verification
![Page 105: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/105.jpg)
WebRatio is
now at 7th release
on the market since 2001
WebRatio customers
130+ companies and 500+ commercial users
mainly Italy, USA, Europe and Latin America
WebRatio adoption
15,000+ users of the free edition
Used in hundreds of universities all over the world
WebRatio partners
40+ software houses and system integrators
300+ universities worldwide, 13.000+ students
Some numbers
![Page 106: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/106.jpg)
You capture business requirements in abstract, technology independent models
BPMN + IFML
WebRatio – Step 1
BusinessUser
WebRatioModeller
![Page 107: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/107.jpg)
You customize the environment by defining your own generation rules
HTML 5 + CSS + Java
WebRatio – Step 2
LayoutDesigner
JavaProgrammer
![Page 108: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/108.jpg)
You get a tailored, yet standard, Java Web applicationwith no proprietary runtime
Code generation
WebRatio – Step 3
WebRatioModeller
BusinessUser
![Page 109: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/109.jpg)
Get the application
WebApp
DBMS
Browser
SOACustom
InformationSystem
Standard execution environment
Standard JavaApplication
Server
![Page 110: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/110.jpg)
Involve business users in the development process and converge quickly to the target
Agile, quick prototyping
Requirement Analysis
SolutionModelling
ApplicationGeneration
ResultsValidation
![Page 111: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/111.jpg)
Model
GenerationRules
GenerationEngine
Do not change the generated application code
Touch the generation rules instead
The MDE Virtuous Cycle
GeneratedApplication
?
![Page 112: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/112.jpg)
Case Studies
![Page 113: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/113.jpg)
Kinds of application
Corporate Operations
Human Capital Management
Product Life Cycle Management
CustomerRelationshipManagement
Enterprise Resource Planning
Supply Chain Management
Knowledge Support
Sales and LeadManagement
Marketing Resources Mgt
Web CustomerServices
B2C/B2BE-Commerce
Learning Management
Document Management
Project Management
Customer Information Mgt
Partner Relationship Mgt
Recruitment
Training
Workforce Management
Supplier Relationship Mgt
Business Intelligence
Web Content Management
Knowledge Management
Risk and Compliance
Enterprise Governance
Order Mgt
Payment Services Orchestration
Web Front-End of accounting sys.
Front-Office Process Mgt
Financial Services
![Page 114: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/114.jpg)
B2C + CMS Web applications initially for 14 EU countries
Corporate news, Product technical & commercial data, Service & Partner area, Where to Buy…
Multilingual, multi-actor, distributed workflows for local and central PMs, local and central MarCom managers
... and a: very limited Time to Market (7 weeks!!)
Acer
![Page 115: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/115.jpg)
Size & effort
Class Dimension Value Number of localized B2C web sites 14 Number of main CMS applications 4 (Admin, News, Product, Other
content) Number of supported languages 12 for B2C Web sites, 1 for
CMS Number of data entry masks 39 Number of automatically generated database tables 46 Number of automatically generated database views 82 Number of automatically generated database queries
279 for data extraction, 89 for data update
Number of automatically generated JSP page templates
48
Number of automatically generated or reused Java classes
250
Size
Number of automatically generated Java lines of code
12500 Non commented lines of code
Number of elapsed workdays 49 Number of development staff-months (analysts and developers)
6 staff-months (6 weeks x 4 persons)
Total number of prototypes 9 Average elapsed man days between consecutive prototypes
5,4
Time & effort
Average number of development man days per prototype
15,5
![Page 116: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/116.jpg)
Size & effort
DEGREE OF AUTOMATION Number of manually written SQL statements 17(SQL constraints) Percentage of automatically generated SQL code 96% Number of manually written/adapted Java classes /JSP templates 10% JSP templates
manually adapted Percentage of automatically generated Java and JSP code 90% JSP templates,
100% Java classes COST AND ROI
Total cost of software development of first version 75.000 € HW, SW licenses, and connectivity cost of first version 70.000 € (db server
license) Return on investment of first version 12-15 months Average effort of extension to one additional country 0,5 staff-months Average cost of extension to one additional country 7.500 € Average ROI of extension to one additional country 2 months
PRODUCTIVITY Number of function points 177 (B2C web site)
+ 612 (CMS) = 789 Average number of function points delivered per staff-month 131,5
![Page 117: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/117.jpg)
On the positive side:
Almost 80% of the delivery effort concentrates in the phases of data design, hypertext design and prototyping:
• more development time is spent with the application stakeholders
MDD allows a more flexible distribution of responsibilities between the IT department and the business units
The peak productivity rates has reached five times the number of delivered function points per staff-month of a traditional programming language like Java
Comments
![Page 118: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/118.jpg)
On the negative side..
Acer estimates that it took from 4 to 6 months to have fully productive developers with MDD, IFML, and WebRatio
Difficult to find skilled people
..but..
The initial investment in human capital required by MDD pays off in the mid term
• MDD benefits testing, maintenance, and evolution (which account for over 60% of the total lifecycle cost)
• reasoning on the system is far more effective at the conceptual level
Comments (continued)
![Page 119: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/119.jpg)
Maintenance effort
Served Contries and Applications
4 4 4 5 5
1724
32
41
56
1721 24
28 31
0
10
20
30
40
50
60
2001 2002 2003 2004 2005
Year
Un
its
Number of developers
Number ofmaintainedapplications
Number of servedcountries
![Page 120: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/120.jpg)
• Public company owned by the City of Turin in Italy
• Local public transport serving 190 million passengers every year.
• A new e-ticketing system (avail able at http://ecommerce.gtt.to.it and serving 64,000 daily passengers)
• published on-line in only 2 months.
• The application comprises 100 page templates (IFML pages) and 1215 IFML units.
• KEY: iterative and quick prototyping approach supported by WebRatio
GTT: Turin Transportation Group
![Page 121: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/121.jpg)
• Multi-utility company buying and selling wholesale electric power.
• Integrated Energy Management System that replaced individual productivity tools used by traders for the management of electric power.
• KEY: quick prototyping approach and involvement of actual users in the development process.
• Deployment of final app in 6 months after the initial meeting with WebRatio (time to market that took one-third of the time estimated in case of adoption of a traditional development)
A2A: Utility in Milan
![Page 122: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/122.jpg)
• Banking (UniCredit)
• BPM + SOA + Web interfaces
• Crucial points: modularization, multiple models integration, multiple tools integration, strict runtime platform requirements
• Banking (ABI)
• System integration (Pure backend!)
• Why IFML?
• Latin America
• Cooperatives, banks, public bodies, central government
• Wholesale (IKEA)
• Financial / leasing (GE Capital)
Other experiences
![Page 123: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/123.jpg)
• Models integration
• Large applications with strong need for coherence and standardized paradigms
• Cooperatives, banks, public bodies, central government
• Service orientation
• No pure modeling exists
• Code generation still win-win
Where IFML works
![Page 124: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/124.jpg)
Components and pages per project
![Page 125: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/125.jpg)
Components per page (avg)
![Page 126: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/126.jpg)
Man/days per component
![Page 127: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/127.jpg)
Man/days per page
![Page 128: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/128.jpg)
Tool usage stats
![Page 129: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/129.jpg)
Conclusion: innovation eco-system
Research (Research group
at Polimi)
Method, Language
and Platform
Spin-off(WebRatio)
Customers (including EU
projects)
Teaching (Polimi and int.l courses)
innovation
innovation toolsuite
Toolsuite, industrial requirements
innovation
requirementsuse cases
Standard
& other SME Partners
![Page 130: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/130.jpg)
Some Ads
“Model Driven Software Engineering in Practice”. Brambilla, Cabot, Wimmer.
Morgan&Claypool, USA, 2012
www.modeldrivenstar.com And the upcoming IFML book!
Interaction Flow Modeling Language
Model-driven UI Engineering of Web and Mobile Apps with IFML
Morgan Kaufmann, The OMG press,
USA, Q4 2014
![Page 131: IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling & design. ICWE 2014. A standard of Object Management Group by Marco Brambilla](https://reader035.vdocuments.us/reader035/viewer/2022062511/54c2f1744a7959996b8b4576/html5/thumbnails/131.jpg)
S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai, M. Matera: Designing Data-Intensive Web Applications, Morgan-Kaufmann Publishers, San Francisco, ISBN 1-55860-843-5 (Series edited by Jim Gray, foreword by Adam Bosworth) 590 pages.
M. Brambilla, J. Cabot, M. Wimmer: Model Driven Software Engineering in Practice. Morgan & Claypool, USA, September 2012, foreword by Richard Soley (OMG), 184 pages. ISBN 978-1608458820.
Manolescu, M. Brambilla, S. Ceri, S. Comai, P. Fraternali: Model-driven design and deployment of service-enabled web applications. ACM Trans. Internet Technology (TOIT). 5(3), pp. 439-479 (2005).
M. Brambilla, S. Ceri, P. Fraternali, I. Manolescu: Process modeling in Web applications. ACM Trans. Softw. Eng. Methodol (TOSEM). 15(4), pp. 360-409 (2006).
M. Brambilla, I. Celino, S. Ceri, D. Cerizza, E. Della Valle, F. M. Facca: Model-Driven Design and Development of Semantic Web Service Applications, ACM Trans. on Internet Technology (TOIT). 8(1), pp.3:1 - 3:31 (2007).
M. Brambilla: From Requirements to Implementation of Ad-hoc Social Web Applications: an Empirical Pattern-Based Approach. IET Software, 6(2), 2012, pp.114-126.
M. Brambilla, S. Ceri, S. Comai, C. Tziviskou. Exception Handling in Workflow-Driven Web Applications. WWW 2005 Int. Conference on World Wide Web. ACM, pp. 170-179.
(some) references