User Interaction is one of the most overlooked aspects by software modeling practices. Some approaches exist for describing user interfaces in terms of buttons and items to be put in the forms, but they mostly consist of WYSIWYG form building environments. Furthermore, no standard notation exist for modeling these application aspects.
This session will present the ongoing activities at OMG towards the standardization of a Interaction Flow Modeling Language (IFML): we will discuss the requirements and the scope of the sought standard, and we will propose a solution based on our 15-year experience in Web interaction design. We will be inspired by our WebML language, but we will also explain how to go beyond that, so as to cover mobile, multi-touch, collaborative applications, independently from the implementation platform.
We will also show how a dedicated interaction modeling tool like WebRatio can ease the development through a plethora of facilities supporting the developer, including: visual debugging, quick prototyping, multi-platform and cloud deployment, and so on.
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Experiences and requirements for a User Interaction Modeling Language
1. Experiences and requirements
for a User Interaction Modeling Language
Marco Brambilla marcobrambi
Politecnico di Milano and WebRatio
Emanuele Molteni emanuelemolteni
WebRatio
Code Generation 2012, Cambridge, March 28, 2012
2. Agenda
User Interaction complexity
The gap in UI modeling standards
Features, focus and objectives
Metamodel and UML profile
IFML by example
WebML and WebRatio
2
4. UI Modeling Problem
UI has been neglected in the MDE community
Complexity of UIs increase in time
• New events, devices, use cases, interactions
Crappy tools for UI programming around
• Widgets drag&drop
• Hooks to execution
No real MDE attempt to address the problem
4
5. User Interface vs. Interaction
UI blends into visualization and graphics
Distinguish Interaction from Interface
User interaction focus:
Previous attempts failed because of:
• Low usability and effectiveness of notation
• Missing solid implementations with vendors support
5
7. Standardization gap
A perceived gap in the standardization efforts
User interaction has been overlooked in modeling proposals
Previous attempts failed because of:
• Low usability and effectiveness of notation
• Missing solid implementations with vendors support
7
8. WebML in the OMG framework
Exploit the possible relations with
BPMN -- Already in place
Structure models (Class, components, CWM …)
SOAml
SysML
Others
Support the standardization
Refine the metamodel
Implement appropriate injectors to MOF-compliant models
8
10. Objectives of IFML
Expressing
Content of interfaces
User events and interaction
Binding to business logic
of the front-end of applications belonging to diverse domains
10
11. Advantages
formal specification of the different perspectives of the front-end
Isolate implementation-specific issues of UIs
separation of concerns in the user interaction design
enable the communication of interaction design to non-technical
stakeholders
automatic generation of code also for the application front-end part
11
12. Focus
The VIEW part of a software application
view components
view modules
events
interaction between components
Interaction between the user and the components (events)
the distribution of view components and referenced data and business logic at
the different tiers of the architecture
12
13. Mandatory application requirements
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 presenation
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 purposes of model
fragments)
User input validation, according to OCL or other existing constraint languages
But not:
inference rules that make model specification simpler and more concise
14
17. The UML profile for IFML
Static aspects
«page» «page» «page»
AlbumSearch Albums Album
Album Search Album Index Album Detail
«index» «index»
MBox List «link» Message
Index
18
18. The UML profile for IFML
Static aspects
Signals with tagged values
«signal» Tagged values.
SelectMailMessages
Parameter mBox
mBox :string out name: selectedMBox
in name: mBox
Dynamic aspects
SelectMailMessages(mBox)
«index»
«index»
Message
MBox List
Index
19
24. Some words on the WebML history
1998: Born within the W3I3 EU project
• Visual modeling of Web application interfaces
2003: Evolved to the management of Web services (WebSi EU project)
2005: Evolved to the support of business processes (WebSi EU project)
2006: Added support to semantic web aspects (SWS Challenge)
2007-2010: continuous improvements, metamodel definition, support for
additional aspects: reuse, async interactions, ...
Currently adopted in more than 300 universities worldwide for research
and education purposes
27
25. Effective and essential
A visual modeling language (DSL) ...
Oriented to the high level design
Incorporating all the details that are needed for refined specification
... Effective and essential ...
Including only the concepts relevant to the domain
No overhead because of verbose notation or orthogonality
... For user interaction design ...
Page contents
Navigation paths and UI events
... Within web applications
Born bottom-up from the features of dynamic web applications
28
26. Role and positioning
Contents: Process: User Interaction: Style:
ER, class, .. BPMN WebML CSS, ...
BPMN model
Backend:
soaML, WSDL..
Services
29
27. The WebML notation example
ReviewPage
GetUser CurrentUser PreferredArtists Two pages
Retrieval of session data
(CurrentUser)
CurrentUser
CurrentUser Artist Review Page
[UserPreference]
AllArtists
• Lists of (prefered) artists
ArtistDetails
• Links to artist details
Albums Page
Artist Artist • List of albums of selected
artist
KO
Albums • Checkbox and deletion of
AlbumIndex DeleteAlbum albums
OK
Album Album
[PlayedByArtist]
28. Content publishing units
IN: UnitName OUT:
Param1, ... ParamN Params
UnitType
Concept
[Selector (Param1, ..., ParamN)]
A WebML unit is the atomic information publishing element
A “view” defined upon a container of objects:
The instances of a concept
Based on one or more complex selection conditions (called selectors)
A unit may need some inputs and produces some outputs
Inputs are required to compute the unit itself (params of the selector)
Outputs can be used to compute other unit(s)
31
29. Links
AllArtists ArtistDetails
Artist Artist
Links in WebML have 3 purposes
Describe navigation paths
Transport parameters between units
Activate computation of units and execution of side effects
Normally, links are rendered as one or more anchors/buttons
based on the dataset and semantics of the source unit
Various behaviors are allowed (automatic, asynchronous, transport ..)
Transport links: only carry parameters, no navigation nor side effects
30. Operation units
OperationName OK
OpType
KO
Concept
[Selector (Param1, ..., ParamN)]
Execution of operations and business logic
Simple failure/success model of operations
Success: green “OK link” is navigated
Failure: red “KO link” is navigated
Chains of operations can be defined
Control dictated by links
Basic control flow elements available (loop, switch)
33
31. Units coverage
Content publishing
Data Index MultiData Entry Scroller Multichoice HierarchicalIndex
Session management Web Services
Login Logout Get Set Request-Response ….
CRUD Operations
Create Modify Delete Connect Disconnect
34
32. Foundations and extensibility
The language foundations
Basic set of units
Connection to a content model for data retrieval and management
Links for control and data flow
Page computation algorithms for execution semantics
• The page content is automatically calculated also in case of complex topologies
• Incoming links and dependencies among units are considered
The language is open
New units and operations can be specified
For implementing ad-hoc business logics
35
34. What is WebRatio
An Eclipse-based development environment allowing:
Modeling: ER + WebML + BPMN
100% code generation of standard JEE applications
• Clear separation between design time and run time
• No proprietary runtime
Requirement Analysis
Quick and agile development cycles
Extending the generation rules
• Defining new presentation styles
Results Verification Solution Modeling
• Defining new components
Versioning, teamwork, full lifecycle mgt
Prototype Generation
37
35. A fertile environment ...
... for designing, building and maintaining your
custom enterprise applications
38
36. WebRatio – Step 1
You capture business requirements in abstract,
technology independent models
WebRatio
Business Modeller
User
39
37. Design the model
Process Model Application Model
Define business processes Define data, services, logic and
managed by the application presentation details
BPMN notation WebML notation
40
38. WebRatio – Step 2
You customize the environment by defining your own
generation rules
Layout Java
Designer Programmer
41
39. Customize the generation rules
Layout templates Custom components
for a perfectly fine-tuned layout, for implementing any kind of
tailored to your visual identity business logic, integration or
complex task
42
40. WebRatio – Step 3
You get a tailored, yet standard, Java Web application
with no proprietary runtime
WebRatio Business
Modeller User
43
41. Get the application
Browser
Standard execution environment
Standard Java
Web Application
App Server
Custom
DBMS Information SOA
System
44
42. An evolutionary prototyping dev cycle
Involve business users in the development process and
converge quickly to the target
Requirement
Analysis
Solution
Results Modelling
Validation
Application
Generation
43. Why we chose Code Generation
3 reasons in favour of Code Generation
Execution environment is as standard as possible
• standard architecture, standard libraries
• fitting corporate IT policies
Two degrees of freedom instead of one
• not all the requirements can be modelled
• define, use and reuse your own generation rules
No vendor lock-in
• generated code is human-readable, applications can be easily maintained without the
tool
47
44. How you can keep on generating
Do you want to touch the generated application ?
Touch the generation rules instead !
?
Generation Generated
Model
Engine Application
Generation
Rules
49
45. Kinds of application
Document Customer
Management Information Mgt
Knowledge Web Content Sales and Lead
Management Management
Management
Learning Customer Partner
Management Knowledge Relationship Relationship Mgt
Support Management
Project Marketing
Management Resources Mgt
Business Web Customer
Supply Chain Services
Intelligence Management
B2C/B2B
E-Commerce
Web Front-End of Financial Enterprise
accounting sys.
Services Resource Supplier
Payment Services Planning Relationship Mgt
Orchestration
Product Life Cycle Human Capital Corporate
Front-Office
Management Management Operations
Process Mgt
Recruitment Enterprise
Governance
Training
Risk and
Workforce Compliance
Management
Order Mgt
50
46. Some relevant experiences
IT industry Energy & Utilities
worldwide web site +
• Web-based security law
CMS and product
compliance system
catalogue
• Green energy department
www.acer.com
internal knowledge base system
www.packardbell.com
Web-based, IT budget
Finance monitoring system
Web-based, multi country,
End-to-end Front-Office Web site + CMS + online
Process Mgt platform customer services
Ecuador cooperative network
cash flow compensation system Public Sector
Fashion & Furniture Electronic invoice mgt system
• Unsold items mgt system
Public transport pass e-ticketing system
• Warehouse mgt system
Mobile public portal
• Web-based cash control system
• Internal training system
51
47. Summary
WebRatio is
now at its 6th major release (the 7th due since the end of 2012)
on the market since 2001
WebRatio customers
120+ companies and 500+ users
in Italy, Europe and South 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, 12.000+ students
48. Visit us at the booth and win 5 free copies
of upcoming MDSE book and full access to
Morgan&Claypool library for 1 month!
Come and visit us at booth
www.webratio.com
contact@webratio.com
marcobrambi
emanuelemolteni
elenawebratio