SlideShare a Scribd company logo
1 of 44
Multichannel
    User Interfaces
         Pedro J. Molina, PhD.   pjmolina@icinetic.com
                                 @pmolinam

         Rubén Jiménez           rjimenez@icinetic.com
                                 @rubenjmarrufo
Contents
   Introduction
   UIs and multichannel
   UI Technologies
   UI Model & Code Generation
   Demos
   Conclusions
   Q&A

      © Icinetic 2012            2
Introduction



 We do MDSD Tools for developers
 Focused on .NET technologies &
  Architecture services
 HQ in Seville, Spain, EU


                       © Icinetic 2012   3
Introduction
 Pervasive User Interfaces
 Contextual

 Services across devices

 Costs of making and distributing Software



                       © Icinetic 2012        4
UIs and multichannel




       © Icinetic 2012   5
UIs and multichannel
 One day in the future:
     There could be a unique SW language
     And a unique HW platform
     Able to drive all your gadgets and devices
     Contextual
     Able to follow you across changing your context,
      location or device



                          © Icinetic 2012                6
UIs and multichannel
 However, in the meanwhile, we have:
   Many devices
   Many HW choices
   Many SW platforms to build for

             Difficult choice: Where to invest?




                        © Icinetic 2012           7
UIs and multichannel
 Businesses need to provide
   Access to product and services to the great market-
    share as possible
   Different platforms: fragment the market when
    launching a new product or service
   Technology is just a commodity
   Technology diversity increases the costs of market
    acquisition


                        © Icinetic 2012                   8
UI Technologies
 Choose your flavour:

                                                          ?
                         Smartphone        Smartphone
                             Tablet          Tablet


                                                v 3.1.3
                                                v 4.2.1
                                                  v 5.1



                         © Icinetic 2012                  9
UI Development

 Then
   Hire a good development team
   Don’t forget designers and UX
   Keep them focused and happy!




                    © Icinetic 2012   10
Required UI programming skills
 Main platforms:
Platform         Languages                         IDE
The Web          HTML5 + CSS3 + JavaScript         None/Many
                 + Server side lang.
Windows          XAML + C#                         Visual Studio, Expression Blend
Apple            Objective-C + Cocoa               XCode
Java / Android   Java + UI toolkit                 Eclipse


                                     Difficult to master all of them!

                                 © Icinetic 2012                                     11
UI Technologies
 Variable and moving target
    Hardware: new devices every 6 months
    Software: new OS mobile versions every
     year
    APIs: new APIs, all the time!




    Not an easy train to follow!


                              © Icinetic 2012   12
UI Style-guides
 iOS

 Android

 WP7 / W8 Metro




                   © Icinetic 2012   13
UI Style-guides
 Each platform provides a differentiated one
   Involving not only aesthetics aspects

   But also UX aspects on device accordingly to the style of
    interaction

   Application on a device should behave coherent with the
    platform


   Not all applications fits well on each device

                             © Icinetic 2012                    14
Is there space for modelling
           and code generated UIs?
 Probably
    not for “radically original” games
    and not for new interaction styles


 But convenient and efficient for day to day
    Information Systems
    Information production / consumption needs
    Business Software

                          © Icinetic 2012         15
Once again: Art or Engineering?




             © Icinetic 2012      16
Once again: Art or Engineering?




                               Both!
             © Icinetic 2012           17
© Icinetic
             18
2012
© Icinetic
             19
2012
UIs and plumbing
 Behind a good User Interface
   There is a lot of plumbing


 Definition: (Developer) Plumbing
   Repetitive infrastructure code with small
    variations
   Boring to write, source of bugs
   Low added value
   But: needed to run the full application

                             © Icinetic 2012    20
Plumbing samples: UI Architecture
 UI frameworks
   MVC

   MVVM

   MVP
      Supervising Controller
      Passive View


                           © Icinetic 2012   21
Plumbing sample: Comms
 Service invocation

    RPC / Binary

    Web Services / SOAP

    REST / JSON

    HTTP / HTTPS / SPEEDY
     / WebSockets

                           © Icinetic 2012   22
UI Modelling Hypothesis
 So:
  1.    Can we raise the level of abstraction and capture
        the essence of the UI in a model?

  2. Can we alleviate the developers plumbing pain?

  3. Can we expose this UI on multiple channels and
     technologies?


                           © Icinetic 2012                  23
What’s changes in a UI?
 Technology

 Style guides

 Widgets and concrete interaction

 Plumbing: platform/tech specific



                       © Icinetic 2012   24
What’s remains immutable in a UI?
 Patterns & UX principles
     A Master-Detail will be always a Master-Detail
     A Filter
     A collection of objects
     Navigation
     Command
     Selection
     Task …

                          © Icinetic 2012              25
Conceptual UI Patterns
       Login
       Instance
       Population
       Master/Detail
       Service
       Wizard
       Filter
       …                     pjmolina.com/cuip

            © Icinetic 2012                  26
CUIP: Population
 Set of objects                   Rendering
      Filter                        Grid
      Order criteria                Table
      Display set                   List
      Actions
      Navigation




                © Icinetic 2012                 27
CUIP: Population
 Set of objects                   Rendering
      Filter                        Grid
      Order criteria                Table
      Display set                   List
      Actions
      Navigation




                © Icinetic 2012                 28
CUIP: Population
 Set of objects                   Rendering
      Filter                        Grid
      Order criteria                Table
      Display set                   List
      Actions
      Navigation




                © Icinetic 2012                 29
CUIP: Population
 Set of objects                   Rendering
      Filter                        Grid
      Order criteria                Table
      Display set                   List
      Actions
      Navigation




                © Icinetic 2012                 30
A sample: Personal Banking
 Oriented to: banking end users
    Easy to use

 Targeting frequent operations
    Check accounts balance
    Order a transfer
    Review account entries

 Multi-device: pc, mobile, tablet, etc.
                        © Icinetic 2012    31
Structure: Class Model




        © Icinetic 2012   32
UI Navigational Model




        © Icinetic 2012   33
Code Generation




     © Icinetic 2012   34
Demo Time

 Modelling domain
 Generated Services

 Modelling UI
 Generated UI



                       © Icinetic 2012   35
So far, we have seen:
 Default UI/Inferred (when nothing was specified)
 Graphical and textual notations combined for UI
 Services consumption and composition
   From a model exposed by a system in runtime
 Device independent UI modelling
 WYSIWYG modelling approach



                       © Icinetic 2012               36
Applications
 UI prototyping
   “Wizard of Oz” Technique

 Rapid multichannel Service delivery

 UIs via Service composition (Mashups)

 Ubiquitous & contextual interfaces

                       © Icinetic 2012    37
Multi-channel
                          Datatabase



                          Data Access
                             Layer


                         Business Logic
                             Layer



                         Services Layer




            App 1


    User Interface                        User Interface
        Layer                                 Layer

             Views                                 Views


           Controllers                           Controllers


          View Models                           View Models




    UI-1                                  UI-2
    © Icinetic 2012                                            38
MD Composed UIs (Mashups)
         Datatabase                                                Datatabase



         Data Access                                               Data Access
            Layer                                                     Layer


        Business Logic                                            Business Logic
            Layer                                                     Layer



        Services Layer                                            Services Layer




App 1                                      App 2


                                             User Interface
                                                 Layer

                                                      Views


                                                    Controllers


                                                   View Models




                                             Composed App UI
                         © Icinetic 2012                                           39
Conclusions



 Pervasive devices are already here to stay

 While we found “the platform” to rule them’all
    we need to deal with diversity of HW, SW and APIs


                        © Icinetic 2012                  40
Conclusions
 So far, today we have seen:
   1.   How to raise the level of abstraction and capture
        the essence of a User Interface in a model

   2. How to alleviate the developer plumbing pain

   3. How to target multiple channels and
      technologies


                          © Icinetic 2012                   41
Conclusions
 MDSD applied to UI
   can makes the difference in terms of time to
    market, quality & productivity

   provide new forms of UIs not possible in the
    traditional way i.e. contextual ones



                     © Icinetic 2012               42
Conclusions
 Looking for flights to Seychelles on the bathroom
 Finishing the purchase, later, in the car




        © Icinetic 2012                       43
Questions &         (might be)   Answers




                           www.radarc.net
                           pjmolina.com/essential
                           pjmolina.com/cuip
         © Icinetic 2012                        44

More Related Content

What's hot

Architectural styles and patterns
Architectural styles and patternsArchitectural styles and patterns
Architectural styles and patternsHimanshu
 
Geoscience satellite image processing
Geoscience satellite image processingGeoscience satellite image processing
Geoscience satellite image processinggaurav jain
 
Authentication service security
Authentication service securityAuthentication service security
Authentication service securityG Prachi
 
Introduction to IoT Architectures and Protocols
Introduction to IoT Architectures and ProtocolsIntroduction to IoT Architectures and Protocols
Introduction to IoT Architectures and ProtocolsAbdullah Alfadhly
 
Software quality assurance
Software quality assuranceSoftware quality assurance
Software quality assuranceAman Adhikari
 
Software Engineering (Project Scheduling)
Software Engineering (Project Scheduling)Software Engineering (Project Scheduling)
Software Engineering (Project Scheduling)ShudipPal
 
Chapter 5 IoT Design methodologies
Chapter 5 IoT Design methodologiesChapter 5 IoT Design methodologies
Chapter 5 IoT Design methodologiespavan penugonda
 
Software estimation
Software estimationSoftware estimation
Software estimationMd Shakir
 
Architecture design in software engineering
Architecture design in software engineeringArchitecture design in software engineering
Architecture design in software engineeringPreeti Mishra
 
User Interface Analysis and Design
User Interface Analysis and DesignUser Interface Analysis and Design
User Interface Analysis and Design Saqib Raza
 
Risk management(software engineering)
Risk management(software engineering)Risk management(software engineering)
Risk management(software engineering)Priya Tomar
 
Software architecture design ppt
Software architecture design pptSoftware architecture design ppt
Software architecture design pptfarazimlak
 
Anatomy of android application
Anatomy of android applicationAnatomy of android application
Anatomy of android applicationNikunj Dhameliya
 

What's hot (20)

netconf and yang
netconf and yangnetconf and yang
netconf and yang
 
Architectural styles and patterns
Architectural styles and patternsArchitectural styles and patterns
Architectural styles and patterns
 
CS8592-OOAD Lecture Notes Unit-5
CS8592-OOAD Lecture Notes Unit-5 CS8592-OOAD Lecture Notes Unit-5
CS8592-OOAD Lecture Notes Unit-5
 
Geoscience satellite image processing
Geoscience satellite image processingGeoscience satellite image processing
Geoscience satellite image processing
 
Authentication service security
Authentication service securityAuthentication service security
Authentication service security
 
Introduction to IoT Architectures and Protocols
Introduction to IoT Architectures and ProtocolsIntroduction to IoT Architectures and Protocols
Introduction to IoT Architectures and Protocols
 
Software quality assurance
Software quality assuranceSoftware quality assurance
Software quality assurance
 
Software Engineering (Project Scheduling)
Software Engineering (Project Scheduling)Software Engineering (Project Scheduling)
Software Engineering (Project Scheduling)
 
Chapter 5 IoT Design methodologies
Chapter 5 IoT Design methodologiesChapter 5 IoT Design methodologies
Chapter 5 IoT Design methodologies
 
Aneka platform
Aneka platformAneka platform
Aneka platform
 
Software quality
Software qualitySoftware quality
Software quality
 
Software estimation
Software estimationSoftware estimation
Software estimation
 
Architecture design in software engineering
Architecture design in software engineeringArchitecture design in software engineering
Architecture design in software engineering
 
Rad model
Rad modelRad model
Rad model
 
User Interface Analysis and Design
User Interface Analysis and DesignUser Interface Analysis and Design
User Interface Analysis and Design
 
Risk management(software engineering)
Risk management(software engineering)Risk management(software engineering)
Risk management(software engineering)
 
Software architecture
Software architectureSoftware architecture
Software architecture
 
Design Patterns
Design PatternsDesign Patterns
Design Patterns
 
Software architecture design ppt
Software architecture design pptSoftware architecture design ppt
Software architecture design ppt
 
Anatomy of android application
Anatomy of android applicationAnatomy of android application
Anatomy of android application
 

Viewers also liked

MortgageFlex System Solutions
MortgageFlex System SolutionsMortgageFlex System Solutions
MortgageFlex System SolutionsMortgageFlex
 
Transforming a 15 year old model-driven application from C++ to Java
Transforming a 15 year old model-driven application from C++ to JavaTransforming a 15 year old model-driven application from C++ to Java
Transforming a 15 year old model-driven application from C++ to JavaEric Malotaux
 
Mission: Impossible --- Purely declarative User Interface Modeling
Mission: Impossible --- Purely declarative User Interface ModelingMission: Impossible --- Purely declarative User Interface Modeling
Mission: Impossible --- Purely declarative User Interface Modelingademelt
 
Experiences and requirements for a User Interaction Modeling Language
Experiences and requirements for a User Interaction Modeling LanguageExperiences and requirements for a User Interaction Modeling Language
Experiences and requirements for a User Interaction Modeling LanguageMarco Brambilla
 
Modelling and code generation in .NET at Icinetic
Modelling and code generation in .NET at IcineticModelling and code generation in .NET at Icinetic
Modelling and code generation in .NET at IcineticIcinetic
 

Viewers also liked (7)

MortgageFlex System Solutions
MortgageFlex System SolutionsMortgageFlex System Solutions
MortgageFlex System Solutions
 
Transforming a 15 year old model-driven application from C++ to Java
Transforming a 15 year old model-driven application from C++ to JavaTransforming a 15 year old model-driven application from C++ to Java
Transforming a 15 year old model-driven application from C++ to Java
 
Mission: Impossible --- Purely declarative User Interface Modeling
Mission: Impossible --- Purely declarative User Interface ModelingMission: Impossible --- Purely declarative User Interface Modeling
Mission: Impossible --- Purely declarative User Interface Modeling
 
Modeling on the Web
Modeling on the WebModeling on the Web
Modeling on the Web
 
Experiences and requirements for a User Interaction Modeling Language
Experiences and requirements for a User Interaction Modeling LanguageExperiences and requirements for a User Interaction Modeling Language
Experiences and requirements for a User Interaction Modeling Language
 
Modelling and code generation in .NET at Icinetic
Modelling and code generation in .NET at IcineticModelling and code generation in .NET at Icinetic
Modelling and code generation in .NET at Icinetic
 
Mobile computing unit 5
Mobile computing  unit 5Mobile computing  unit 5
Mobile computing unit 5
 

Similar to Multichannel User Interfaces

Introduction to Reddo Webinar
Introduction to Reddo WebinarIntroduction to Reddo Webinar
Introduction to Reddo WebinarReddo Mobility
 
Redefining Perspectives 4 - Metro ui Session 1
Redefining Perspectives 4 - Metro ui Session 1Redefining Perspectives 4 - Metro ui Session 1
Redefining Perspectives 4 - Metro ui Session 1sapientindia
 
ANDROID presentation prabal
ANDROID presentation prabalANDROID presentation prabal
ANDROID presentation prabalPrabal Tyagi
 
Cerutti--Web Information Systems (postgrad seminar @ University of Brescia)
Cerutti--Web Information Systems (postgrad seminar @ University of Brescia)Cerutti--Web Information Systems (postgrad seminar @ University of Brescia)
Cerutti--Web Information Systems (postgrad seminar @ University of Brescia)Federico Cerutti
 
UGIdotNET App Modernisation Keynote
UGIdotNET App Modernisation KeynoteUGIdotNET App Modernisation Keynote
UGIdotNET App Modernisation KeynoteLorenzo Barbieri
 
Internship-Report-VitulChauhan-18132023-IT_CRUD-OPERATION.pdf
Internship-Report-VitulChauhan-18132023-IT_CRUD-OPERATION.pdfInternship-Report-VitulChauhan-18132023-IT_CRUD-OPERATION.pdf
Internship-Report-VitulChauhan-18132023-IT_CRUD-OPERATION.pdfVitulChauhan
 
Collaborative and agile development of mobile applications
Collaborative and agile development of mobile applicationsCollaborative and agile development of mobile applications
Collaborative and agile development of mobile applicationsAyushman Jain
 
Introduction of operating system(latest)
Introduction of operating system(latest)Introduction of operating system(latest)
Introduction of operating system(latest)JacksonKong
 
Integration solution: Instant access to Web Services into IMS applications
Integration solution: Instant access to Web Services into IMS applicationsIntegration solution: Instant access to Web Services into IMS applications
Integration solution: Instant access to Web Services into IMS applicationsVirtel - SysperTec
 
Designing Rich Mobile Apps in a Fragmented World
Designing Rich Mobile Apps in a Fragmented WorldDesigning Rich Mobile Apps in a Fragmented World
Designing Rich Mobile Apps in a Fragmented WorldWorklight
 
ACM SIGCHI EICS-2019 Keynote. Quid, Pedro J. Molina
ACM SIGCHI EICS-2019 Keynote. Quid, Pedro J. MolinaACM SIGCHI EICS-2019 Keynote. Quid, Pedro J. Molina
ACM SIGCHI EICS-2019 Keynote. Quid, Pedro J. MolinaPedro J. Molina
 
Linda maleki
Linda malekiLinda maleki
Linda malekiNASAPMC
 
Ionic App Platform Overview
Ionic App Platform Overview Ionic App Platform Overview
Ionic App Platform Overview Ionic Framework
 
2012.09.11 w3 c html5 mobile paradies
2012.09.11 w3 c html5   mobile paradies2012.09.11 w3 c html5   mobile paradies
2012.09.11 w3 c html5 mobile paradiesStephan Haux
 
Native vs Hybrid - Options to develop your mobile application
Native vs Hybrid - Options to develop your mobile applicationNative vs Hybrid - Options to develop your mobile application
Native vs Hybrid - Options to develop your mobile applicationLoic Ortola
 
INT Inc | Benefits of a Microservices Architecture
INT Inc | Benefits of a Microservices ArchitectureINT Inc | Benefits of a Microservices Architecture
INT Inc | Benefits of a Microservices ArchitectureThelma Gros
 
Web based, mobile enterprise applications
Web based, mobile enterprise applicationsWeb based, mobile enterprise applications
Web based, mobile enterprise applicationsManish Garg
 
Mobileuidevchallengesinnovate2012a 120607124912-phpapp02
Mobileuidevchallengesinnovate2012a 120607124912-phpapp02Mobileuidevchallengesinnovate2012a 120607124912-phpapp02
Mobileuidevchallengesinnovate2012a 120607124912-phpapp02Alexander Muse
 

Similar to Multichannel User Interfaces (20)

Introduction to Reddo Webinar
Introduction to Reddo WebinarIntroduction to Reddo Webinar
Introduction to Reddo Webinar
 
Redefining Perspectives 4 - Metro ui Session 1
Redefining Perspectives 4 - Metro ui Session 1Redefining Perspectives 4 - Metro ui Session 1
Redefining Perspectives 4 - Metro ui Session 1
 
ANDROID presentation prabal
ANDROID presentation prabalANDROID presentation prabal
ANDROID presentation prabal
 
Cerutti--Web Information Systems (postgrad seminar @ University of Brescia)
Cerutti--Web Information Systems (postgrad seminar @ University of Brescia)Cerutti--Web Information Systems (postgrad seminar @ University of Brescia)
Cerutti--Web Information Systems (postgrad seminar @ University of Brescia)
 
The Promise of Interoperability
The Promise of InteroperabilityThe Promise of Interoperability
The Promise of Interoperability
 
UGIdotNET App Modernisation Keynote
UGIdotNET App Modernisation KeynoteUGIdotNET App Modernisation Keynote
UGIdotNET App Modernisation Keynote
 
Internship-Report-VitulChauhan-18132023-IT_CRUD-OPERATION.pdf
Internship-Report-VitulChauhan-18132023-IT_CRUD-OPERATION.pdfInternship-Report-VitulChauhan-18132023-IT_CRUD-OPERATION.pdf
Internship-Report-VitulChauhan-18132023-IT_CRUD-OPERATION.pdf
 
Collaborative and agile development of mobile applications
Collaborative and agile development of mobile applicationsCollaborative and agile development of mobile applications
Collaborative and agile development of mobile applications
 
Introduction of operating system(latest)
Introduction of operating system(latest)Introduction of operating system(latest)
Introduction of operating system(latest)
 
The App Evolution Continues
The App Evolution ContinuesThe App Evolution Continues
The App Evolution Continues
 
Integration solution: Instant access to Web Services into IMS applications
Integration solution: Instant access to Web Services into IMS applicationsIntegration solution: Instant access to Web Services into IMS applications
Integration solution: Instant access to Web Services into IMS applications
 
Designing Rich Mobile Apps in a Fragmented World
Designing Rich Mobile Apps in a Fragmented WorldDesigning Rich Mobile Apps in a Fragmented World
Designing Rich Mobile Apps in a Fragmented World
 
ACM SIGCHI EICS-2019 Keynote. Quid, Pedro J. Molina
ACM SIGCHI EICS-2019 Keynote. Quid, Pedro J. MolinaACM SIGCHI EICS-2019 Keynote. Quid, Pedro J. Molina
ACM SIGCHI EICS-2019 Keynote. Quid, Pedro J. Molina
 
Linda maleki
Linda malekiLinda maleki
Linda maleki
 
Ionic App Platform Overview
Ionic App Platform Overview Ionic App Platform Overview
Ionic App Platform Overview
 
2012.09.11 w3 c html5 mobile paradies
2012.09.11 w3 c html5   mobile paradies2012.09.11 w3 c html5   mobile paradies
2012.09.11 w3 c html5 mobile paradies
 
Native vs Hybrid - Options to develop your mobile application
Native vs Hybrid - Options to develop your mobile applicationNative vs Hybrid - Options to develop your mobile application
Native vs Hybrid - Options to develop your mobile application
 
INT Inc | Benefits of a Microservices Architecture
INT Inc | Benefits of a Microservices ArchitectureINT Inc | Benefits of a Microservices Architecture
INT Inc | Benefits of a Microservices Architecture
 
Web based, mobile enterprise applications
Web based, mobile enterprise applicationsWeb based, mobile enterprise applications
Web based, mobile enterprise applications
 
Mobileuidevchallengesinnovate2012a 120607124912-phpapp02
Mobileuidevchallengesinnovate2012a 120607124912-phpapp02Mobileuidevchallengesinnovate2012a 120607124912-phpapp02
Mobileuidevchallengesinnovate2012a 120607124912-phpapp02
 

Recently uploaded

Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxUdaiappa Ramachandran
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 

Recently uploaded (20)

Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptx
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 

Multichannel User Interfaces

  • 1. Multichannel User Interfaces Pedro J. Molina, PhD. pjmolina@icinetic.com @pmolinam Rubén Jiménez rjimenez@icinetic.com @rubenjmarrufo
  • 2. Contents  Introduction  UIs and multichannel  UI Technologies  UI Model & Code Generation  Demos  Conclusions  Q&A © Icinetic 2012 2
  • 3. Introduction  We do MDSD Tools for developers  Focused on .NET technologies & Architecture services  HQ in Seville, Spain, EU © Icinetic 2012 3
  • 4. Introduction  Pervasive User Interfaces  Contextual  Services across devices  Costs of making and distributing Software © Icinetic 2012 4
  • 5. UIs and multichannel © Icinetic 2012 5
  • 6. UIs and multichannel  One day in the future:  There could be a unique SW language  And a unique HW platform  Able to drive all your gadgets and devices  Contextual  Able to follow you across changing your context, location or device © Icinetic 2012 6
  • 7. UIs and multichannel  However, in the meanwhile, we have:  Many devices  Many HW choices  Many SW platforms to build for Difficult choice: Where to invest? © Icinetic 2012 7
  • 8. UIs and multichannel  Businesses need to provide  Access to product and services to the great market- share as possible  Different platforms: fragment the market when launching a new product or service  Technology is just a commodity  Technology diversity increases the costs of market acquisition © Icinetic 2012 8
  • 9. UI Technologies  Choose your flavour: ? Smartphone Smartphone Tablet Tablet v 3.1.3 v 4.2.1 v 5.1 © Icinetic 2012 9
  • 10. UI Development  Then  Hire a good development team  Don’t forget designers and UX  Keep them focused and happy! © Icinetic 2012 10
  • 11. Required UI programming skills  Main platforms: Platform Languages IDE The Web HTML5 + CSS3 + JavaScript None/Many + Server side lang. Windows XAML + C# Visual Studio, Expression Blend Apple Objective-C + Cocoa XCode Java / Android Java + UI toolkit Eclipse Difficult to master all of them! © Icinetic 2012 11
  • 12. UI Technologies  Variable and moving target  Hardware: new devices every 6 months  Software: new OS mobile versions every year  APIs: new APIs, all the time!  Not an easy train to follow! © Icinetic 2012 12
  • 13. UI Style-guides  iOS  Android  WP7 / W8 Metro © Icinetic 2012 13
  • 14. UI Style-guides  Each platform provides a differentiated one  Involving not only aesthetics aspects  But also UX aspects on device accordingly to the style of interaction  Application on a device should behave coherent with the platform  Not all applications fits well on each device © Icinetic 2012 14
  • 15. Is there space for modelling and code generated UIs?  Probably  not for “radically original” games  and not for new interaction styles  But convenient and efficient for day to day  Information Systems  Information production / consumption needs  Business Software © Icinetic 2012 15
  • 16. Once again: Art or Engineering? © Icinetic 2012 16
  • 17. Once again: Art or Engineering? Both! © Icinetic 2012 17
  • 18. © Icinetic 18 2012
  • 19. © Icinetic 19 2012
  • 20. UIs and plumbing  Behind a good User Interface  There is a lot of plumbing  Definition: (Developer) Plumbing  Repetitive infrastructure code with small variations  Boring to write, source of bugs  Low added value  But: needed to run the full application © Icinetic 2012 20
  • 21. Plumbing samples: UI Architecture  UI frameworks  MVC  MVVM  MVP  Supervising Controller  Passive View © Icinetic 2012 21
  • 22. Plumbing sample: Comms  Service invocation  RPC / Binary  Web Services / SOAP  REST / JSON  HTTP / HTTPS / SPEEDY / WebSockets © Icinetic 2012 22
  • 23. UI Modelling Hypothesis  So: 1. Can we raise the level of abstraction and capture the essence of the UI in a model? 2. Can we alleviate the developers plumbing pain? 3. Can we expose this UI on multiple channels and technologies? © Icinetic 2012 23
  • 24. What’s changes in a UI?  Technology  Style guides  Widgets and concrete interaction  Plumbing: platform/tech specific © Icinetic 2012 24
  • 25. What’s remains immutable in a UI?  Patterns & UX principles  A Master-Detail will be always a Master-Detail  A Filter  A collection of objects  Navigation  Command  Selection  Task … © Icinetic 2012 25
  • 26. Conceptual UI Patterns  Login  Instance  Population  Master/Detail  Service  Wizard  Filter  … pjmolina.com/cuip © Icinetic 2012 26
  • 27. CUIP: Population  Set of objects  Rendering  Filter  Grid  Order criteria  Table  Display set  List  Actions  Navigation © Icinetic 2012 27
  • 28. CUIP: Population  Set of objects  Rendering  Filter  Grid  Order criteria  Table  Display set  List  Actions  Navigation © Icinetic 2012 28
  • 29. CUIP: Population  Set of objects  Rendering  Filter  Grid  Order criteria  Table  Display set  List  Actions  Navigation © Icinetic 2012 29
  • 30. CUIP: Population  Set of objects  Rendering  Filter  Grid  Order criteria  Table  Display set  List  Actions  Navigation © Icinetic 2012 30
  • 31. A sample: Personal Banking  Oriented to: banking end users  Easy to use  Targeting frequent operations  Check accounts balance  Order a transfer  Review account entries  Multi-device: pc, mobile, tablet, etc. © Icinetic 2012 31
  • 32. Structure: Class Model © Icinetic 2012 32
  • 33. UI Navigational Model © Icinetic 2012 33
  • 34. Code Generation © Icinetic 2012 34
  • 35. Demo Time  Modelling domain  Generated Services  Modelling UI  Generated UI © Icinetic 2012 35
  • 36. So far, we have seen:  Default UI/Inferred (when nothing was specified)  Graphical and textual notations combined for UI  Services consumption and composition  From a model exposed by a system in runtime  Device independent UI modelling  WYSIWYG modelling approach © Icinetic 2012 36
  • 37. Applications  UI prototyping  “Wizard of Oz” Technique  Rapid multichannel Service delivery  UIs via Service composition (Mashups)  Ubiquitous & contextual interfaces © Icinetic 2012 37
  • 38. Multi-channel Datatabase Data Access Layer Business Logic Layer Services Layer App 1 User Interface User Interface Layer Layer Views Views Controllers Controllers View Models View Models UI-1 UI-2 © Icinetic 2012 38
  • 39. MD Composed UIs (Mashups) Datatabase Datatabase Data Access Data Access Layer Layer Business Logic Business Logic Layer Layer Services Layer Services Layer App 1 App 2 User Interface Layer Views Controllers View Models Composed App UI © Icinetic 2012 39
  • 40. Conclusions  Pervasive devices are already here to stay  While we found “the platform” to rule them’all  we need to deal with diversity of HW, SW and APIs © Icinetic 2012 40
  • 41. Conclusions  So far, today we have seen: 1. How to raise the level of abstraction and capture the essence of a User Interface in a model 2. How to alleviate the developer plumbing pain 3. How to target multiple channels and technologies © Icinetic 2012 41
  • 42. Conclusions  MDSD applied to UI  can makes the difference in terms of time to market, quality & productivity  provide new forms of UIs not possible in the traditional way i.e. contextual ones © Icinetic 2012 42
  • 43. Conclusions  Looking for flights to Seychelles on the bathroom  Finishing the purchase, later, in the car © Icinetic 2012 43
  • 44. Questions & (might be) Answers www.radarc.net pjmolina.com/essential pjmolina.com/cuip © Icinetic 2012 44