Experiences and requirements for a User Interaction Modeling Language
Upcoming SlideShare
Loading in...5
×
 

Experiences and requirements for a User Interaction Modeling Language

on

  • 4,645 views

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 ...

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.

Statistics

Views

Total Views
4,645
Views on SlideShare
1,717
Embed Views
2,928

Actions

Likes
1
Downloads
43
Comments
0

12 Embeds 2,928

http://pjmolina.com 1984
http://www.modeldrivenstar.org 881
http://feeds.feedburner.com 34
http://www.twylah.com 7
http://127.0.0.1 6
http://a0.twimg.com 4
http://apps.synaptive.net 4
http://translate.googleusercontent.com 3
https://translate.googleusercontent.com 2
http://honyaku.yahoofs.jp 1
http://seoautomated.com 1
http://ranksit.com 1
More...

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Experiences and requirements for a User Interaction Modeling Language Experiences and requirements for a User Interaction Modeling Language Presentation Transcript

  • 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 IFML metamodel - 2 16
  • The IFML metamodel - 3 17
  • 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
  • IFML concrete syntax by example 22
  • IFML concrete syntax by example 23
  • 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