Experiences and requirements for a User Interaction Modeling Language

Experiences and requirementsfor a User Interaction Modeling LanguageMarco Brambilla marcobrambiPolitecnico di Milano and WebRatioEmanuele Molteni emanuelemolteniWebRatio Code Generation 2012, Cambridge, March 28, 2012

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

The Problem of User Interaction

UI Modeling ProblemUI 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

User Interface vs. Interaction UI blends into visualization and graphics Distinguish Interaction from InterfaceUser interaction focus: Previous attempts failed because of: • Low usability and effectiveness of notation • Missing solid implementations with vendors support 5

The Standardization Gap

Standardization gapA 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

WebML in the OMG frameworkExploit the possible relations with BPMN -- Already in place Structure models (Class, components, CWM …) SOAml SysML OthersSupport the standardization Refine the metamodel Implement appropriate injectors to MOF-compliant models 8

The Standardization Effort: towards IFML

Objectives of IFMLExpressing Content of interfaces User events and interaction Binding to business logicof the front-end of applications belonging to diverse domains 10

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

FocusThe 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

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 languagesBut not: inference rules that make model specification simpler and more concise 14

The IFML metamodel - 1 15

The UML profile for IFMLStatic aspects «page» «page» «page» AlbumSearch Albums Album Album Search Album Index Album Detail «index» «index» MBox List «link» Message Index 18

The UML profile for IFMLStatic aspectsSignals with tagged values «signal» Tagged values. SelectMailMessages Parameter mBox mBox :string out name: selectedMBox in name: mBoxDynamic aspects SelectMailMessages(mBox) «index» «index» Message MBox List Index 19

IFML concrete syntax by example 20

A real example.. The complete Gmail UI GMAIL top [X] Messages [L D] <<XOR>> Message search <<D>> Search <<P>> FullSearch OUT: Keyword Message keyword Show search Message Message IN: SearchKey options full search search OUT: Keyword, From, notification To., ... IN: SearchKey, Search mail FromKey, ToKey, .. Mbox List <<XOR>> Message Management <<L>> Settings MailBox {Self.MessageRecipients >1} OUT: AllMessages <<XOR>> Message Reader IN: MessageSet MarkAll Message ReplyToAll AsRead MarkAll * Message Index details Forward Reply Delete <<D>> OUT: MessageID IN: MessageID Archive Message toolbar State =”Reply” OR Delete ”Forward” Archive <<parameter>> Report MessageSet Report <<L>> Message writer OUT: SelectedMessages MoveTo Discard IN: MessageSet Reply OUT: Subject, From, <<form>> Message Writer Cc, Body, “ReplyAll” ToAll State = Add Cc IN: “Re:”+ Subject, To, Cc, ”NewMessage” OR <<field>> To Body, State “Forward” <<P>> Tag chooser <<field>> Cc State =”Forward” Associate Add Bcc Reply OR ”ReplyToAll” Tag/ <<field>> Bcc to tag / Folder Move to Select Index State =”Reply” <<field>> Subject folder Tag OR ”ReplyToAll” OUT: Subject, From, <<field>> Body “”, Body, “Reply” OUT: SelectedTag Edit subject IN: ATag Forward IN: “Re:”+ Subject, To, Cc, Create <<field>> Attachment Body, State OUT: NewTag IN: ATag New <<parameter>> State <<M>> Tag creator Add attachment Create OUT: Subject, “”, “”, Body, Tag/ New Tag/ Send Save “Forward” Folder Create Folder IN: “Fw:”+ Subject, To, Cc, Body, State OUT: NewTagName IN: TagName State =”Reply” OR ”ReplyToAll” Send Save Action Action 24

A solid foundation: WebML

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

Effective and essentialA 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

Role and positioningContents: Process: User Interaction: Style:ER, class, .. BPMN WebML CSS, ... BPMN model Backend: soaML, WSDL.. Services 29

The WebML notation example ReviewPageGetUser 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]

Content publishing units IN: UnitName OUT: Param1, ... ParamN Params UnitType Concept [Selector (Param1, ..., ParamN)]A WebML unit is the atomic information publishing elementA “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

Links AllArtists ArtistDetails Artist ArtistLinks in WebML have 3 purposes Describe navigation paths Transport parameters between units Activate computation of units and execution of side effectsNormally, links are rendered as one or more anchors/buttonsbased 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

Operation units OperationName OK OpType KO Concept [Selector (Param1, ..., ParamN)]Execution of operations and business logicSimple failure/success model of operations Success: green “OK link” is navigated Failure: red “KO link” is navigatedChains of operations can be defined Control dictated by links Basic control flow elements available (loop, switch) 33

Units coverageContent publishingData Index MultiData Entry Scroller Multichoice HierarchicalIndexSession management Web Services Login Logout Get Set Request-Response ….CRUD OperationsCreate Modify Delete Connect Disconnect 34

Foundations and extensibilityThe 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 consideredThe language is open New units and operations can be specified For implementing ad-hoc business logics 35

WebRatio

What is WebRatioAn 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

A fertile environment ...... for designing, building and maintaining yourcustom enterprise applications 38

WebRatio – Step 1You capture business requirements in abstract,technology independent models WebRatio Business Modeller User 39

Design the modelProcess Model Application Model Define business processes Define data, services, logic and managed by the application presentation details BPMN notation WebML notation 40

WebRatio – Step 2You customize the environment by defining your owngeneration rules Layout Java Designer Programmer 41

Customize the generation rulesLayout 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

WebRatio – Step 3You get a tailored, yet standard, Java Web applicationwith no proprietary runtime WebRatio Business Modeller User 43

Get the application Browser Standard execution environment Standard Java Web Application App Server Custom DBMS Information SOA System 44

An evolutionary prototyping dev cycleInvolve business users in the development process andconverge quickly to the target Requirement Analysis Solution Results Modelling Validation Application Generation

Why we chose Code Generation3 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

How you can keep on generatingDo you want to touch the generated application ?Touch the generation rules instead ! ? Generation Generated Model Engine Application Generation Rules 49

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

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

SummaryWebRatio is now at its 6th major release (the 7th due since the end of 2012) on the market since 2001WebRatio customers 120+ companies and 500+ users in Italy, Europe and South AmericaWebRatio adoption 15,000+ users of the free edition Used in hundreds of universities all over the worldWebRatio partners 40+ software houses and system integrators 300+ universities worldwide, 12.000+ students

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 boothwww.webratio.comcontact@webratio.com marcobrambi emanuelemolteni elenawebratio

http://pjmolina.com	1196
http://www.modeldrivenstar.org	454
http://feeds.feedburner.com	34
http://www.twylah.com	7
http://a0.twimg.com	4
http://apps.synaptive.net	4
http://seoautomated.com	1
http://honyaku.yahoofs.jp	1
http://translate.googleusercontent.com	1

Experiences and requirements for a User Interaction Modeling Language

by Marco Brambilla

Accessibility

Categories

Upload Details

Usage Rights

9 Embeds 1,702

Statistics

Experiences and requirements for a User Interaction Modeling Language Presentation Transcript