Modelling the User Interface

Pedro J. Molina
Pedro J. MolinaFounder at Metadev en Metadev
Modelling the
  User Interface

                     Pedro J. Molina, PhD.
                                 Software Engineer
                   Capgemini Spain | Valencia
                                pjmolina@gmail.com
                      http://pjmolina.com/metalevel
Contents
   UI: Art or Science?
   Domains
   Modelling UIs
   The Abstractions of an UI
   Code Generation for UIs




                                2
UI. Art or Science?
Science                                                                                   Art
Deterministic                    Evidence-based                              Open-Ended



                                       Art                               Science

     Focus                      look & feel                          architecture

   Method                         intuition                         investigation

  Validation                    subjective                        testing, metrics
      Source:   http://www.teehanlax.com/blog/2010/01/20/the-art-science-of-evidence-based-design

                                                                                                    3
Domains



Types of User Interfaces




                           4
Command Line Interface




   Source:   Matrix, 1999: Trinity hacking the Electric Power Plant with nmap.
                                                                                 5
Games: joystick, motion




                          6
WIMPs




        7
Touch UIs
Modelling the User Interface
Desktop




          10
Web




      11
Mobile




OK. Today, the world is going Mobile.
But in what platform should we invest in?




                                            12
Future UIs: Internet TV is comming




                                     13
Others

 Aural Interfaces

 3D Users Interfaces

 Motion Based Interfaces

 And more to come…

                              14
Future UIs: Internet Fridge?




                               15
Focus on: Business Information Systems
   Works mainly with business data
   Stored in a persistence layer
   Offers CRUD operations
   Workflows
   Expedient/Request management
   Transactions
   Reporting
   Business Intelligence
   Multichannel: desktop, web, mobile
   But soon also: TV and fridge, remember!!
                                               16
Typical Features in Information Systems UIs

  Coherent
  Standardization
    Common set of tools for developers
    Less learning time for users
  Corporate Style Guide
    Designs, colors, fonts, etc. are predefined
  Usability / Accessibility compliance
    To be certified by a 3rd party

                                                   17
What makes a UI a good UI?
 Clear
 Concise
 Familiar
 Responsive (feedback)
                                        Easy of use
 Consistent
 Attractive (design and aesthetics)
 Efficient
 Forgiving (Undo choices)


                                                       18
Novak’s rule

“   Automatic Programming is defined as
              the synthesis of a program from an specification.

    If automatic programming is to be useful, the specification
    must be smaller and easier to write than the program would
    be if written in a conventional programming language.”

                                                   G.S. Novak.




                                                            19
So, is UI Modelable? Generable?
 Can we apply Separation of Concerns?
   Common part vs variable part
   Design guides vs functionality of the UI


 Can we do it better than the traditional form?
   Novak’s rule will be the unappealable judge
   Let’s try!


                                                   20
Main Benefits to Model (& Generate)
the UI

   Fast prototyping              Quality (error free)
   Fast Time to Market           Consistency / Homogeneity
   Multi-channel UIs             Style-guide
   Technology independence       Accessibility Assurance
     Business surviving the      Formal validation, usability
      Technology                   validation




                                                             21
The Tech Tale & UI Technology Trends




                                       ?
To be continued … more chapters of the tech war to come.

                BTW: That is why I love Technology Independence in MDD.
                Always ready to throw away my technology stack for a another one.
                                                                               22
Modelling the UI




                   23
Dimensions of UI design

                          Problem  Solution
Detail   Absract




                                               Source: [Trætteberg2004]
                                                                          24
Some UI Models
    Tasks models
    Dialogue/Interactions models
    Navigation models
    Presentation models
    Component models
    Dynamic models
    Presentation logic models

                                    25
Some UI Models




                 26
But also…
 Wireframes
 Sketches
 Mockups




                           27
But also…
   Wireframes
   Sketches
   Use cases
   Mockups




                             28
Wireframe Samples




                    29
Navigation Maps




                  30
Task Model Samples




                     31
Presentation Models




                      32
Design tools
 Paper
 SW drawing tools
   Illustrator, FreeHand
   Visio, Word, Excel


 Specific Sketching Tools
   Balsamiq, Axure, Protoshare


                                  33
Standarization inniatives
   Red Whale Inc. XIML Forum
   Harmonia Inc. UIML ongoing standardization on OASIS
   UsiXML UCL, Jean Vanderdonckt
   Mozilla XUL
   Microsoft XAML
   WebRatio on standardizing WebML via OMG

But...
 Is it too early?
 Are UIs too broad in domain?




                                                          34
The Quest for the right level of abstraction



                                                             Entry Page
                                                              <<Login>>




 Do we need to specify the behavior of a login page one over again?
 Definitely, not interested in working at this level of detail.

 Login is a well known UI Pattern. Use is as a commodity, as a COTS.

                                                                          35
Patterns to the rescue
 Patterns in Software
     identify recurring problems
     in a given domain
     provide well known solutions
     and criteria to
        when to apply the pattern
        and when not to

 Language patterns

                                     36
Some useful Concepts
 Interaction Object [Vanderdonck&Bodart93]
   AIO vs CIO

 Interaction Units

 Navigation

 UI Patterns

                                              37
Some Abstractions
   Service IU
   Instance IU
   Population IU
   Master/Detail IU
   Wizard IU




                                38
Hierarchical Action Tree (HAT)
 A task oriented tree providing the user access to the system.


     Intermediate nodes:          grouping labels
     Leaf nodes:                  links to interaction units
          Store View
                           Purchases
                                    Purchase article
                                    Purchase to supplier
                                    Pending orders
                           Sales
                                    Sell article
                                    New order
                                    Pending orders
                           Store
                                     ...

                                                                  39
Interaction Unit
 It is an abstraction of a window, a scenario where user interacts with the
  system

     Based on: AIO & Presentation Unit
     Extended with behaviour semantics



                               Interaction Unit

                            Name
                            Alias
                            Help message
                            ...




                                                                               40
Service Interaction Unit
 Represents an IU for a service.

   Gathers input arguments and launches the service.




                   Class
                   Service




                                                    41
Instance Interaction Unit
 Abstracts object presentation.
    Composed of:
       Display Set
       Actions
       Navigation                                  What to see?




                                                       <
                                   Code                  What to do?
                                   Country.Name
                Class              Name




                                                            <
                                       Customer_Edit
                                   Surname
                                       Customer_Delete
                                   Address.Street
                                       Country_Nationalize




                                                       >
                Display Set            ...




                                                                <
                Actions                     Currency
                                                           Explore data




                                                            >
                Navigation                  Country
                                            Invoices
                                            Receipts
                                            Payments




                                                                >
                                                                    42
Population Interaction Unit
     Represents a set of objects
            Composed of:
                  Filters
                  Order Criteria
                  Display Set
                  Actions
                  Navigation
                                                          What to see?


  How to search?




                                                            <
                                         Code
                                         Country.Name             What to do?
                        Class            Name
                        Filters




                                                                <
                                             Customer_Edit
                                         Surname
                        Order Criteria       Customer_Delete
                                         Address.Street




                                                            >
           <




date ASC
code DES                Display Sets         Country_Nationalize




                                                                     <
                        Actions              ...  Currency
                                                  Country        Explore data




                                                                >
                        Navegation
           >




                                                  Invoices
                                                  Receipts
                                                  Payments




                                                                     >
           How to sort?


                                                                         43
Master/Detail Interaction Unit
 Represents a composed pattern with head-details semantics.


     Composed of:
        A Master Component
        One or many Detail Components

       Customer
                                  Master


      Current Invoices                                Due Payments
                             Detail 1      Detail 2



       Invoices                                       Payments


                                                                     44
Just-UI / Diagramming

                           Population_Class2                   MasterDetail1            ServiceNew
Instance1



                                      Alias2                               Alias3                    Alias4
            Alias1



     (a) Instance IU          (b) Population IU                  (c) Master/Detail IU        (d) Service IU




                                               (e) Navigational Link




  Graphical primitives in Just-UI.



                                                                                                              45
Just-UI / Diagramming
                                                    S_Rent

                         MD_Contract-Vehicle
                                                             Rent Vehicle

                         Current Contract-Vehicle       S_Return


                                                                Return Vehicle


                                                                                     S_Change_Address

P_Vehicle                P_OldContracts
                                                    I_User
                                                                                         Change Address

      Vehicle Fleet               Old Contracts                                          S_Delete_User
                                                                User

                                                                                                Delete User

                                                    S_Create_Fare


                                                             Create Fare

                                                        S_Change_Fare
                         I_Fare

                                                                 Change Fare
                                      Fare
                                                               S_Delete_Fare


                                                                       Delete Fare

Example of graphical language for UI specification.


                                                                                                              46
Just-UI / Diagramming




Just UI / VISIO Prototyping stencil


                                      47
Layered Approach


                               UII_Invoice


                                                              N
UIMD_InvoiceAndLines
                                             Invoice
                                                              A

          Invoice detail                              Lines



                               UIP_InvoiceLines



                                                              N   A/Z


                                              LInes
                                                              A




                                                                        48
Just-UI / Diagramming




                        49
Just-UI / Diagramming




                        50
A          B                           Introduction
A uses B
                 Service IU            Defined Selection
                                       Argument Grouping
                                                             Conceptual
                                       Status Recovery       User
                                                             Interface
                                       Dependency
                                                             Patterns
                                       Supplementary Info.

                 Instance IU           Display Set
HAT
                                       Actions
                                       Navigation

                 Population IU         Filter
                                       Order Criteria           Level 1 (1)

                                                                Level 2 (4)
                                       Master IU
                 Master/Detail IU                               Level 3 (11)
                                       Detail IU
                                                                         51
Level 1        Level 2              Level 3
More info about: CUIP
Index of
Conceptual User Interface Patterns
available on-line at:




                                     http://pjmolina.com/cuip

                                                          52
Mappings: AIO  CIO Desktop
   Hierarchical Action Tree   Menu
   Interaction Unit           Form
   Action                     Button
   Navigation                 Button
   Display Set
     An object                Labels
     Many objects             Grid
 Defined Selection            Combo-boxes
 ...

                                             53
Mappings: AIO  CIO Web / HTML

   Hierarchical Action Tree   Dynamic Menu
   Interaction Unit           HTML page
   Action                     <A> Link
   Navigation                 <A> Link
   Display Set
     An object                HTML Labels
     Many objects             <Table>
 Defined Selection            <Option>
 ...

                                              54
Platform constraints
   Physical Size
   Screen resolution
   Interaction Style
   Storage
   Computational Power
   Connectivity



                                 55
Aesthetics vs Functionality
                 Progressive enhancement
                 Unobtrusive Javascript




                   Sample:   www.datatables.net
                                                  56
Code Generation for UIs
 AIO to CIO mapping driven by:
    Direct (expert hardcoded it)
    Heuristics
    Designer choices

 Important to keep coherent Interaction Styles




                                                  57
UI CG approaches
 DB  Default UI  Code




                            58
UI CG approaches
 Models  Default UI  code




                               59
Demo: Essential & Io




                       60
UI CG approaches
 Models  Default UI  code




                               61
UI CG approaches
 Reverse engineering




                             62
Guideline compliance
 Windows / Mac / X11 Guidelines

 Usability / Accessibility Guidelines

 US Section 508 / Accessibility

 W3C WAI / AAA Recommendations

    Conformance Level A             Priority 1. must
    Conformance Level Double-A      Priority 2. should
    Conformance Level Triple-A      Priority 3. may


                                                           63
Guideline compliance
 Put as much as possible standardisation inside the common part.
    Implement such common part using the guideline criterion to be
     compliant with.
    Usually guidelines also include best practices in the domain  study
     them deeply before starting the design of the output

 Now the code generator produces compliant software by design.

 In some contexts the product must be certified to be compliant
    If you can proof the compliance of your code generator output, you
     will get the certification for all the output produced by the generator.




                                                                                64
High vs Low level UI modelling
UI Modelling

High level Spec.
                                        Low level Spec.

Pros:
                                        Pros:
     near to the problem domain
                                             adapted to the target device
     more general
                                             very precise

Cons:                                   Cons:
     difficult to implement                 device dependent
     rigid automatic implementations        difficult to be re-targeted to
                                              another device




                                                                               65
Modelling & Code Gen. Technologies
   Diagramming tools
        Eclipse GMF
        Eclipse Graphiti
        MS DSL Tools
        MetaEdit+
        Obeo Designer

   Textual Domain Specific Languages
      Xtext
        Grammars & Parsers: ANTLR

   Templates
        Strict separation of model, transformation & presentation (template)
        output grammars  StringTemplate

   And many more...




                                                                                66
Balance: flexibility vs Homogeneity
                     Parameterisation
                      Reduces common parts
                      Increases family size
                      Increases complexity




Immutable                                      Variability
 Sample:
 Background color                                Sample:
 fixed to #34FF23                                Background color
                                                 can be specified




                    Standardisation
                     Increases common parts
                     Reduces family size
                     Simplifies the system

                                                             67
User Interface Code Generation
 Key concept
   AIO  Abstract Interface Object (technology independent)
   CIO  Concrete Interface Object (platform dependent)
   Mappings between them


 Architectures
   MVC  Model View Controller
   Direct data-binding



                                                           68
User Interface Code Generation
                                          AIO                  CIO
 AIO  CIO Selection
                                   Concept           Desktop     Web
                                   View              Form        HTML Page
    Based on platform mapping
                                   List of objects   Grid        Table

    Based on data type

    Based on usability rules

    Based on UI designer choice




                                                                             6
User Interface Code Generation
 Automatic Layout Generation
    There is not silver bullet                        Choices depend on
    However, you can find good heuristics to solve        Domain
     80% of cases                                          Device physical constrains
    Column alignment, multicolumn, grid, liquid
     layout, etc.




                                                                                    70
Creativity vs Automation.
                          Where to put the division line?

 Artist & GUI designers                                    Programmers
     Skills:                                                     Skills:
         Creativity                                                  Analytic thinking
         Design aesthetics                                           Abstraction
         Usability
                                                                  Tools:
     Tools:                                                          IDEs, compilers, debuggers,
         Dreamweaver, Illustrator, Freehand,                           profilers.
           Expression Blend

              They have different skills sets, tools & languages
              It is difficult to find people with both skills
              Languages oriented to split concerns: HTML, Javascript vs CSS and Images

              Team work is needed to
                 • Improve communication
                 • Clear separation of concerns (SoC) & responsibilities
                 • Degrees of freedom
                                                                                              71
Summing up
 UI is (not?) different to other computer science
  concerns
 UI coherence needed: UI componentization helps
 UI can be generated (50-90%) * (your mileage can vary)

 MDD needs better tool support to be mainstream
 Tools are improving in the latest years
 But we can do it better


 So ...

                                                           72
Let’s do it!
           73
Thank you!




Questions?
               @pmolinam
1 de 74

Recomendados

User Interface Design For Programmers por
User Interface Design For ProgrammersUser Interface Design For Programmers
User Interface Design For ProgrammersChris Poteet
1.7K vistas17 diapositivas
User interface software tools past present and future por
User interface software tools past present and futureUser interface software tools past present and future
User interface software tools past present and futureAlison HONG
685 vistas32 diapositivas
Interactive Machine Learning por
Interactive Machine LearningInteractive Machine Learning
Interactive Machine Learningbutest
305 vistas7 diapositivas
Introducing MDSD por
Introducing MDSDIntroducing MDSD
Introducing MDSDPedro J. Molina
10.2K vistas41 diapositivas
Animated Transitions between User Interface Views por
Animated Transitions between User Interface ViewsAnimated Transitions between User Interface Views
Animated Transitions between User Interface ViewsJean Vanderdonckt
666 vistas32 diapositivas
UCD Generator (ICIET 2007) por
UCD Generator (ICIET 2007)UCD Generator (ICIET 2007)
UCD Generator (ICIET 2007)IT Industry
281 vistas6 diapositivas

Más contenido relacionado

La actualidad más candente

HCI por
HCI HCI
HCI Er. Arpit Sharma
213 vistas20 diapositivas
Design engineering por
Design engineeringDesign engineering
Design engineeringPreeti Mishra
5.9K vistas35 diapositivas
Web technologies: Model Driven Engineering por
Web technologies: Model Driven EngineeringWeb technologies: Model Driven Engineering
Web technologies: Model Driven EngineeringPiero Fraternali
5.7K vistas45 diapositivas
UML Generator (NCC18) por
UML Generator (NCC18)UML Generator (NCC18)
UML Generator (NCC18)IT Industry
373 vistas6 diapositivas
User Interface Design por
User Interface DesignUser Interface Design
User Interface DesignJReifman
45.1K vistas52 diapositivas
Workflow diagramming and information architecture por
Workflow diagramming and information architectureWorkflow diagramming and information architecture
Workflow diagramming and information architectureDianna Miller
46 vistas23 diapositivas

La actualidad más candente(20)

Web technologies: Model Driven Engineering por Piero Fraternali
Web technologies: Model Driven EngineeringWeb technologies: Model Driven Engineering
Web technologies: Model Driven Engineering
Piero Fraternali5.7K vistas
UML Generator (NCC18) por IT Industry
UML Generator (NCC18)UML Generator (NCC18)
UML Generator (NCC18)
IT Industry373 vistas
User Interface Design por JReifman
User Interface DesignUser Interface Design
User Interface Design
JReifman45.1K vistas
Workflow diagramming and information architecture por Dianna Miller
Workflow diagramming and information architectureWorkflow diagramming and information architecture
Workflow diagramming and information architecture
Dianna Miller46 vistas
User interface design por Slideshare
User interface designUser interface design
User interface design
Slideshare2K vistas
User Experience Design - Designing for others por BART RADKA
User Experience Design - Designing for othersUser Experience Design - Designing for others
User Experience Design - Designing for others
BART RADKA1K vistas
Industrial and Academic Experiences with a User Interaction Modeling Language... por Marco Brambilla
Industrial and Academic Experiences with a User Interaction Modeling Language...Industrial and Academic Experiences with a User Interaction Modeling Language...
Industrial and Academic Experiences with a User Interaction Modeling Language...
Marco Brambilla9.1K vistas
User Interface Design in Software Engineering SE15 por koolkampus
User Interface Design in Software Engineering SE15User Interface Design in Software Engineering SE15
User Interface Design in Software Engineering SE15
koolkampus16.5K vistas
Chapter1(hci) por Latesh Malik
Chapter1(hci)Chapter1(hci)
Chapter1(hci)
Latesh Malik17.7K vistas
Human machine interfacing por Zeeshan Hasan
Human machine interfacingHuman machine interfacing
Human machine interfacing
Zeeshan Hasan1.1K vistas

Similar a Modelling the User Interface

By the Book: Examining the Art of Building Great User Experiences in Software por
By the Book: Examining the Art of Building Great User Experiences in SoftwareBy the Book: Examining the Art of Building Great User Experiences in Software
By the Book: Examining the Art of Building Great User Experiences in SoftwareEffectiveUI
758 vistas67 diapositivas
By the Book: Examining the Art of Building Great User Experiences in Software por
By the Book: Examining the Art of Building Great User Experiences in SoftwareBy the Book: Examining the Art of Building Great User Experiences in Software
By the Book: Examining the Art of Building Great User Experiences in SoftwareEffective
825 vistas67 diapositivas
ThingsCon Amsterdam 2015 - Koen van Niekerk por
ThingsCon Amsterdam 2015 - Koen van Niekerk ThingsCon Amsterdam 2015 - Koen van Niekerk
ThingsCon Amsterdam 2015 - Koen van Niekerk ThingsConAMS
302 vistas32 diapositivas
Cognitive Digital Twin by Fariz Saračević por
Cognitive Digital Twin by Fariz SaračevićCognitive Digital Twin by Fariz Saračević
Cognitive Digital Twin by Fariz SaračevićBosnia Agile
996 vistas21 diapositivas
Interfaces to ubiquitous computing por
Interfaces to ubiquitous computingInterfaces to ubiquitous computing
Interfaces to ubiquitous computingswati sonawane
5.5K vistas27 diapositivas
The Essentials of Great Search Design (ECIR 2010) por
The Essentials of Great Search Design (ECIR 2010)The Essentials of Great Search Design (ECIR 2010)
The Essentials of Great Search Design (ECIR 2010)Vegard Sandvold
1.2K vistas49 diapositivas

Similar a Modelling the User Interface(20)

By the Book: Examining the Art of Building Great User Experiences in Software por EffectiveUI
By the Book: Examining the Art of Building Great User Experiences in SoftwareBy the Book: Examining the Art of Building Great User Experiences in Software
By the Book: Examining the Art of Building Great User Experiences in Software
EffectiveUI758 vistas
By the Book: Examining the Art of Building Great User Experiences in Software por Effective
By the Book: Examining the Art of Building Great User Experiences in SoftwareBy the Book: Examining the Art of Building Great User Experiences in Software
By the Book: Examining the Art of Building Great User Experiences in Software
Effective825 vistas
ThingsCon Amsterdam 2015 - Koen van Niekerk por ThingsConAMS
ThingsCon Amsterdam 2015 - Koen van Niekerk ThingsCon Amsterdam 2015 - Koen van Niekerk
ThingsCon Amsterdam 2015 - Koen van Niekerk
ThingsConAMS302 vistas
Cognitive Digital Twin by Fariz Saračević por Bosnia Agile
Cognitive Digital Twin by Fariz SaračevićCognitive Digital Twin by Fariz Saračević
Cognitive Digital Twin by Fariz Saračević
Bosnia Agile996 vistas
Interfaces to ubiquitous computing por swati sonawane
Interfaces to ubiquitous computingInterfaces to ubiquitous computing
Interfaces to ubiquitous computing
swati sonawane5.5K vistas
The Essentials of Great Search Design (ECIR 2010) por Vegard Sandvold
The Essentials of Great Search Design (ECIR 2010)The Essentials of Great Search Design (ECIR 2010)
The Essentials of Great Search Design (ECIR 2010)
Vegard Sandvold1.2K vistas
Brokerage 2007 presentation hci por imec.archive
Brokerage 2007 presentation hciBrokerage 2007 presentation hci
Brokerage 2007 presentation hci
imec.archive406 vistas
A Pragmatic View of UX Driven Development por Akshay Luther
A Pragmatic View of UX Driven DevelopmentA Pragmatic View of UX Driven Development
A Pragmatic View of UX Driven Development
Akshay Luther3.4K vistas
Designing Rich Mobile Apps in a Fragmented World por Worklight
Designing Rich Mobile Apps in a Fragmented WorldDesigning Rich Mobile Apps in a Fragmented World
Designing Rich Mobile Apps in a Fragmented World
Worklight809 vistas
Flying Pixels Ent Apps Jeremy Chone por rajivmordani
Flying Pixels Ent Apps Jeremy ChoneFlying Pixels Ent Apps Jeremy Chone
Flying Pixels Ent Apps Jeremy Chone
rajivmordani353 vistas
4 - Architetture Software - Architecture Portfolio por Majong DevJfu
4 - Architetture Software - Architecture Portfolio4 - Architetture Software - Architecture Portfolio
4 - Architetture Software - Architecture Portfolio
Majong DevJfu4K vistas
Mixed Reality Interfaces and Product Management por Jeremy Horn
Mixed Reality Interfaces and Product ManagementMixed Reality Interfaces and Product Management
Mixed Reality Interfaces and Product Management
Jeremy Horn1K vistas
OpenDolphin with GroovyFX Workshop at GreachConf, Madrid por Dierk König
OpenDolphin with GroovyFX Workshop at GreachConf, MadridOpenDolphin with GroovyFX Workshop at GreachConf, Madrid
OpenDolphin with GroovyFX Workshop at GreachConf, Madrid
Dierk König234 vistas
Future of interface design por Todd Soulas
Future of interface designFuture of interface design
Future of interface design
Todd Soulas386 vistas
Fundamental principles of Usability and User Centred Design por BART RADKA
Fundamental principles of Usability and User Centred DesignFundamental principles of Usability and User Centred Design
Fundamental principles of Usability and User Centred Design
BART RADKA10.1K vistas
Software Architecture Erosion and Modernization por bmerkle
Software Architecture Erosion and ModernizationSoftware Architecture Erosion and Modernization
Software Architecture Erosion and Modernization
bmerkle2.1K vistas
8. design patterns por APU
8. design patterns8. design patterns
8. design patterns
APU1.2K vistas
Exemplar: Designing Sensor-based interactions by demonstration... (a CHI2007 ... por bjoern611
Exemplar: Designing Sensor-based interactions by demonstration... (a CHI2007 ...Exemplar: Designing Sensor-based interactions by demonstration... (a CHI2007 ...
Exemplar: Designing Sensor-based interactions by demonstration... (a CHI2007 ...
bjoern6111.5K vistas

Más de Pedro J. Molina

MDE en la industria por
MDE en la industriaMDE en la industria
MDE en la industriaPedro J. Molina
10 vistas55 diapositivas
Terraform por
TerraformTerraform
TerraformPedro J. Molina
5 vistas1 diapositiva
dotnetMalaga-2020 Gestión de la configuración en aplicaciones Web por
dotnetMalaga-2020 Gestión de la configuración en aplicaciones WebdotnetMalaga-2020 Gestión de la configuración en aplicaciones Web
dotnetMalaga-2020 Gestión de la configuración en aplicaciones WebPedro J. Molina
85 vistas20 diapositivas
Infrastructure as Code with Terraform por
Infrastructure as Code with TerraformInfrastructure as Code with Terraform
Infrastructure as Code with TerraformPedro J. Molina
51 vistas34 diapositivas
Are Startups for me? por
Are Startups for me?Are Startups for me?
Are Startups for me?Pedro J. Molina
465 vistas18 diapositivas
Meow Demo por
Meow DemoMeow Demo
Meow DemoPedro J. Molina
228 vistas5 diapositivas

Más de Pedro J. Molina(20)

dotnetMalaga-2020 Gestión de la configuración en aplicaciones Web por Pedro J. Molina
dotnetMalaga-2020 Gestión de la configuración en aplicaciones WebdotnetMalaga-2020 Gestión de la configuración en aplicaciones Web
dotnetMalaga-2020 Gestión de la configuración en aplicaciones Web
Pedro J. Molina85 vistas
Infrastructure as Code with Terraform por Pedro J. Molina
Infrastructure as Code with TerraformInfrastructure as Code with Terraform
Infrastructure as Code with Terraform
Pedro J. Molina51 vistas
Essential as the base for Web DSLs por Pedro J. Molina
Essential as the base for Web DSLsEssential as the base for Web DSLs
Essential as the base for Web DSLs
Pedro J. Molina300 vistas
ACM SIGCHI EICS-2019 Keynote. Quid, Pedro J. Molina por 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
Pedro J. Molina646 vistas
Securizando por construcción mediante MDE por Pedro J. Molina
Securizando por construcción mediante MDESecurizando por construcción mediante MDE
Securizando por construcción mediante MDE
Pedro J. Molina237 vistas
Building APIs with the OpenApi Spec por Pedro J. Molina
Building APIs with the OpenApi SpecBuilding APIs with the OpenApi Spec
Building APIs with the OpenApi Spec
Pedro J. Molina1K vistas
SVQDC 2017 Tecnologías para Microservicios por Pedro J. Molina
SVQDC 2017 Tecnologías para MicroserviciosSVQDC 2017 Tecnologías para Microservicios
SVQDC 2017 Tecnologías para Microservicios
Pedro J. Molina1.1K vistas
Tecnologías para microservicios por Pedro J. Molina
Tecnologías para microserviciosTecnologías para microservicios
Tecnologías para microservicios
Pedro J. Molina3.6K vistas
Opensouthcode: Microservicios sobre MEAN Stack por Pedro J. Molina
Opensouthcode: Microservicios sobre MEAN StackOpensouthcode: Microservicios sobre MEAN Stack
Opensouthcode: Microservicios sobre MEAN Stack
Pedro J. Molina1.2K vistas

Último

Melek BEN MAHMOUD.pdf por
Melek BEN MAHMOUD.pdfMelek BEN MAHMOUD.pdf
Melek BEN MAHMOUD.pdfMelekBenMahmoud
17 vistas1 diapositiva
"Node.js Development in 2024: trends and tools", Nikita Galkin por
"Node.js Development in 2024: trends and tools", Nikita Galkin "Node.js Development in 2024: trends and tools", Nikita Galkin
"Node.js Development in 2024: trends and tools", Nikita Galkin Fwdays
17 vistas38 diapositivas
GDSC CTU First Meeting Party por
GDSC CTU First Meeting PartyGDSC CTU First Meeting Party
GDSC CTU First Meeting PartyNational Yang Ming Chiao Tung University
11 vistas25 diapositivas
TrustArc Webinar - Managing Online Tracking Technology Vendors_ A Checklist f... por
TrustArc Webinar - Managing Online Tracking Technology Vendors_ A Checklist f...TrustArc Webinar - Managing Online Tracking Technology Vendors_ A Checklist f...
TrustArc Webinar - Managing Online Tracking Technology Vendors_ A Checklist f...TrustArc
72 vistas29 diapositivas
Automating a World-Class Technology Conference; Behind the Scenes of CiscoLive por
Automating a World-Class Technology Conference; Behind the Scenes of CiscoLiveAutomating a World-Class Technology Conference; Behind the Scenes of CiscoLive
Automating a World-Class Technology Conference; Behind the Scenes of CiscoLiveNetwork Automation Forum
43 vistas35 diapositivas
Kyo - Functional Scala 2023.pdf por
Kyo - Functional Scala 2023.pdfKyo - Functional Scala 2023.pdf
Kyo - Functional Scala 2023.pdfFlavio W. Brasil
418 vistas92 diapositivas

Último(20)

"Node.js Development in 2024: trends and tools", Nikita Galkin por Fwdays
"Node.js Development in 2024: trends and tools", Nikita Galkin "Node.js Development in 2024: trends and tools", Nikita Galkin
"Node.js Development in 2024: trends and tools", Nikita Galkin
Fwdays17 vistas
TrustArc Webinar - Managing Online Tracking Technology Vendors_ A Checklist f... por TrustArc
TrustArc Webinar - Managing Online Tracking Technology Vendors_ A Checklist f...TrustArc Webinar - Managing Online Tracking Technology Vendors_ A Checklist f...
TrustArc Webinar - Managing Online Tracking Technology Vendors_ A Checklist f...
TrustArc72 vistas
Automating a World-Class Technology Conference; Behind the Scenes of CiscoLive por Network Automation Forum
Automating a World-Class Technology Conference; Behind the Scenes of CiscoLiveAutomating a World-Class Technology Conference; Behind the Scenes of CiscoLive
Automating a World-Class Technology Conference; Behind the Scenes of CiscoLive
iSAQB Software Architecture Gathering 2023: How Process Orchestration Increas... por Bernd Ruecker
iSAQB Software Architecture Gathering 2023: How Process Orchestration Increas...iSAQB Software Architecture Gathering 2023: How Process Orchestration Increas...
iSAQB Software Architecture Gathering 2023: How Process Orchestration Increas...
Bernd Ruecker48 vistas
Ransomware is Knocking your Door_Final.pdf por Security Bootcamp
Ransomware is Knocking your Door_Final.pdfRansomware is Knocking your Door_Final.pdf
Ransomware is Knocking your Door_Final.pdf
Security Bootcamp66 vistas
Igniting Next Level Productivity with AI-Infused Data Integration Workflows por Safe Software
Igniting Next Level Productivity with AI-Infused Data Integration Workflows Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Safe Software317 vistas
GDG Cloud Southlake 28 Brad Taylor and Shawn Augenstein Old Problems in the N... por James Anderson
GDG Cloud Southlake 28 Brad Taylor and Shawn Augenstein Old Problems in the N...GDG Cloud Southlake 28 Brad Taylor and Shawn Augenstein Old Problems in the N...
GDG Cloud Southlake 28 Brad Taylor and Shawn Augenstein Old Problems in the N...
James Anderson126 vistas
Business Analyst Series 2023 - Week 3 Session 5 por DianaGray10
Business Analyst Series 2023 -  Week 3 Session 5Business Analyst Series 2023 -  Week 3 Session 5
Business Analyst Series 2023 - Week 3 Session 5
DianaGray10345 vistas
【USB韌體設計課程】精選講義節錄-USB的列舉過程_艾鍗學院 por IttrainingIttraining
【USB韌體設計課程】精選講義節錄-USB的列舉過程_艾鍗學院【USB韌體設計課程】精選講義節錄-USB的列舉過程_艾鍗學院
【USB韌體設計課程】精選講義節錄-USB的列舉過程_艾鍗學院
Five Things You SHOULD Know About Postman por Postman
Five Things You SHOULD Know About PostmanFive Things You SHOULD Know About Postman
Five Things You SHOULD Know About Postman
Postman38 vistas
Special_edition_innovator_2023.pdf por WillDavies22
Special_edition_innovator_2023.pdfSpecial_edition_innovator_2023.pdf
Special_edition_innovator_2023.pdf
WillDavies2218 vistas
The Forbidden VPN Secrets.pdf por Mariam Shaba
The Forbidden VPN Secrets.pdfThe Forbidden VPN Secrets.pdf
The Forbidden VPN Secrets.pdf
Mariam Shaba20 vistas

Modelling the User Interface

  • 1. Modelling the User Interface Pedro J. Molina, PhD. Software Engineer Capgemini Spain | Valencia pjmolina@gmail.com http://pjmolina.com/metalevel
  • 2. Contents  UI: Art or Science?  Domains  Modelling UIs  The Abstractions of an UI  Code Generation for UIs 2
  • 3. UI. Art or Science? Science Art Deterministic Evidence-based Open-Ended Art Science Focus look & feel architecture Method intuition investigation Validation subjective testing, metrics Source: http://www.teehanlax.com/blog/2010/01/20/the-art-science-of-evidence-based-design 3
  • 4. Domains Types of User Interfaces 4
  • 5. Command Line Interface Source: Matrix, 1999: Trinity hacking the Electric Power Plant with nmap. 5
  • 7. WIMPs 7
  • 10. Desktop 10
  • 11. Web 11
  • 12. Mobile OK. Today, the world is going Mobile. But in what platform should we invest in? 12
  • 13. Future UIs: Internet TV is comming 13
  • 14. Others  Aural Interfaces  3D Users Interfaces  Motion Based Interfaces  And more to come… 14
  • 15. Future UIs: Internet Fridge? 15
  • 16. Focus on: Business Information Systems  Works mainly with business data  Stored in a persistence layer  Offers CRUD operations  Workflows  Expedient/Request management  Transactions  Reporting  Business Intelligence  Multichannel: desktop, web, mobile  But soon also: TV and fridge, remember!! 16
  • 17. Typical Features in Information Systems UIs  Coherent  Standardization  Common set of tools for developers  Less learning time for users  Corporate Style Guide  Designs, colors, fonts, etc. are predefined  Usability / Accessibility compliance  To be certified by a 3rd party 17
  • 18. What makes a UI a good UI?  Clear  Concise  Familiar  Responsive (feedback)  Easy of use  Consistent  Attractive (design and aesthetics)  Efficient  Forgiving (Undo choices) 18
  • 19. Novak’s rule “ Automatic Programming is defined as the synthesis of a program from an specification. If automatic programming is to be useful, the specification must be smaller and easier to write than the program would be if written in a conventional programming language.” G.S. Novak. 19
  • 20. So, is UI Modelable? Generable?  Can we apply Separation of Concerns?  Common part vs variable part  Design guides vs functionality of the UI  Can we do it better than the traditional form?  Novak’s rule will be the unappealable judge  Let’s try! 20
  • 21. Main Benefits to Model (& Generate) the UI  Fast prototyping  Quality (error free)  Fast Time to Market  Consistency / Homogeneity  Multi-channel UIs  Style-guide  Technology independence  Accessibility Assurance  Business surviving the  Formal validation, usability Technology validation 21
  • 22. The Tech Tale & UI Technology Trends ? To be continued … more chapters of the tech war to come. BTW: That is why I love Technology Independence in MDD. Always ready to throw away my technology stack for a another one. 22
  • 24. Dimensions of UI design Problem  Solution Detail   Absract Source: [Trætteberg2004] 24
  • 25. Some UI Models  Tasks models  Dialogue/Interactions models  Navigation models  Presentation models  Component models  Dynamic models  Presentation logic models 25
  • 27. But also…  Wireframes  Sketches  Mockups 27
  • 28. But also…  Wireframes  Sketches  Use cases  Mockups 28
  • 33. Design tools  Paper  SW drawing tools  Illustrator, FreeHand  Visio, Word, Excel  Specific Sketching Tools  Balsamiq, Axure, Protoshare 33
  • 34. Standarization inniatives  Red Whale Inc. XIML Forum  Harmonia Inc. UIML ongoing standardization on OASIS  UsiXML UCL, Jean Vanderdonckt  Mozilla XUL  Microsoft XAML  WebRatio on standardizing WebML via OMG But...  Is it too early?  Are UIs too broad in domain? 34
  • 35. The Quest for the right level of abstraction Entry Page <<Login>>  Do we need to specify the behavior of a login page one over again?  Definitely, not interested in working at this level of detail.  Login is a well known UI Pattern. Use is as a commodity, as a COTS. 35
  • 36. Patterns to the rescue  Patterns in Software  identify recurring problems  in a given domain  provide well known solutions  and criteria to  when to apply the pattern  and when not to  Language patterns 36
  • 37. Some useful Concepts  Interaction Object [Vanderdonck&Bodart93]  AIO vs CIO  Interaction Units  Navigation  UI Patterns 37
  • 38. Some Abstractions  Service IU  Instance IU  Population IU  Master/Detail IU  Wizard IU 38
  • 39. Hierarchical Action Tree (HAT)  A task oriented tree providing the user access to the system.  Intermediate nodes: grouping labels  Leaf nodes: links to interaction units Store View Purchases Purchase article Purchase to supplier Pending orders Sales Sell article New order Pending orders Store ... 39
  • 40. Interaction Unit  It is an abstraction of a window, a scenario where user interacts with the system  Based on: AIO & Presentation Unit  Extended with behaviour semantics Interaction Unit Name Alias Help message ... 40
  • 41. Service Interaction Unit  Represents an IU for a service.  Gathers input arguments and launches the service. Class Service 41
  • 42. Instance Interaction Unit  Abstracts object presentation.  Composed of:  Display Set  Actions  Navigation What to see? < Code What to do? Country.Name Class Name < Customer_Edit Surname Customer_Delete Address.Street Country_Nationalize > Display Set ... < Actions Currency Explore data > Navigation Country Invoices Receipts Payments > 42
  • 43. Population Interaction Unit  Represents a set of objects  Composed of:  Filters  Order Criteria  Display Set  Actions  Navigation What to see? How to search? < Code Country.Name What to do? Class Name Filters < Customer_Edit Surname Order Criteria Customer_Delete Address.Street > < date ASC code DES Display Sets Country_Nationalize < Actions ... Currency Country Explore data > Navegation > Invoices Receipts Payments > How to sort? 43
  • 44. Master/Detail Interaction Unit  Represents a composed pattern with head-details semantics.  Composed of:  A Master Component  One or many Detail Components Customer Master Current Invoices Due Payments Detail 1 Detail 2 Invoices Payments 44
  • 45. Just-UI / Diagramming Population_Class2 MasterDetail1 ServiceNew Instance1 Alias2 Alias3 Alias4 Alias1 (a) Instance IU (b) Population IU (c) Master/Detail IU (d) Service IU (e) Navigational Link Graphical primitives in Just-UI. 45
  • 46. Just-UI / Diagramming S_Rent MD_Contract-Vehicle Rent Vehicle Current Contract-Vehicle S_Return Return Vehicle S_Change_Address P_Vehicle P_OldContracts I_User Change Address Vehicle Fleet Old Contracts S_Delete_User User Delete User S_Create_Fare Create Fare S_Change_Fare I_Fare Change Fare Fare S_Delete_Fare Delete Fare Example of graphical language for UI specification. 46
  • 47. Just-UI / Diagramming Just UI / VISIO Prototyping stencil 47
  • 48. Layered Approach UII_Invoice N UIMD_InvoiceAndLines Invoice A Invoice detail Lines UIP_InvoiceLines N A/Z LInes A 48
  • 51. A B Introduction A uses B Service IU Defined Selection Argument Grouping Conceptual Status Recovery User Interface Dependency Patterns Supplementary Info. Instance IU Display Set HAT Actions Navigation Population IU Filter Order Criteria Level 1 (1) Level 2 (4) Master IU Master/Detail IU Level 3 (11) Detail IU 51 Level 1 Level 2 Level 3
  • 52. More info about: CUIP Index of Conceptual User Interface Patterns available on-line at: http://pjmolina.com/cuip 52
  • 53. Mappings: AIO  CIO Desktop  Hierarchical Action Tree Menu  Interaction Unit Form  Action Button  Navigation Button  Display Set  An object Labels  Many objects Grid  Defined Selection Combo-boxes  ... 53
  • 54. Mappings: AIO  CIO Web / HTML  Hierarchical Action Tree Dynamic Menu  Interaction Unit HTML page  Action <A> Link  Navigation <A> Link  Display Set  An object HTML Labels  Many objects <Table>  Defined Selection <Option>  ... 54
  • 55. Platform constraints  Physical Size  Screen resolution  Interaction Style  Storage  Computational Power  Connectivity 55
  • 56. Aesthetics vs Functionality  Progressive enhancement  Unobtrusive Javascript Sample: www.datatables.net 56
  • 57. Code Generation for UIs  AIO to CIO mapping driven by:  Direct (expert hardcoded it)  Heuristics  Designer choices  Important to keep coherent Interaction Styles 57
  • 58. UI CG approaches  DB  Default UI  Code 58
  • 59. UI CG approaches  Models  Default UI  code 59
  • 61. UI CG approaches  Models  Default UI  code 61
  • 62. UI CG approaches  Reverse engineering 62
  • 63. Guideline compliance  Windows / Mac / X11 Guidelines  Usability / Accessibility Guidelines  US Section 508 / Accessibility  W3C WAI / AAA Recommendations  Conformance Level A  Priority 1. must  Conformance Level Double-A  Priority 2. should  Conformance Level Triple-A  Priority 3. may 63
  • 64. Guideline compliance  Put as much as possible standardisation inside the common part.  Implement such common part using the guideline criterion to be compliant with.  Usually guidelines also include best practices in the domain  study them deeply before starting the design of the output  Now the code generator produces compliant software by design.  In some contexts the product must be certified to be compliant  If you can proof the compliance of your code generator output, you will get the certification for all the output produced by the generator. 64
  • 65. High vs Low level UI modelling UI Modelling High level Spec. Low level Spec. Pros: Pros:  near to the problem domain  adapted to the target device  more general  very precise Cons: Cons:  difficult to implement  device dependent  rigid automatic implementations  difficult to be re-targeted to another device 65
  • 66. Modelling & Code Gen. Technologies  Diagramming tools  Eclipse GMF  Eclipse Graphiti  MS DSL Tools  MetaEdit+  Obeo Designer  Textual Domain Specific Languages  Xtext  Grammars & Parsers: ANTLR  Templates  Strict separation of model, transformation & presentation (template)  output grammars  StringTemplate  And many more... 66
  • 67. Balance: flexibility vs Homogeneity Parameterisation  Reduces common parts  Increases family size  Increases complexity Immutable Variability Sample: Background color Sample: fixed to #34FF23 Background color can be specified Standardisation  Increases common parts  Reduces family size  Simplifies the system 67
  • 68. User Interface Code Generation  Key concept  AIO  Abstract Interface Object (technology independent)  CIO  Concrete Interface Object (platform dependent)  Mappings between them  Architectures  MVC  Model View Controller  Direct data-binding 68
  • 69. User Interface Code Generation AIO CIO  AIO  CIO Selection Concept Desktop Web View Form HTML Page  Based on platform mapping List of objects Grid Table  Based on data type  Based on usability rules  Based on UI designer choice 6
  • 70. User Interface Code Generation  Automatic Layout Generation  There is not silver bullet  Choices depend on  However, you can find good heuristics to solve  Domain 80% of cases  Device physical constrains  Column alignment, multicolumn, grid, liquid layout, etc. 70
  • 71. Creativity vs Automation. Where to put the division line?  Artist & GUI designers  Programmers  Skills:  Skills:  Creativity  Analytic thinking  Design aesthetics  Abstraction  Usability  Tools:  Tools:  IDEs, compilers, debuggers,  Dreamweaver, Illustrator, Freehand, profilers. Expression Blend  They have different skills sets, tools & languages  It is difficult to find people with both skills  Languages oriented to split concerns: HTML, Javascript vs CSS and Images  Team work is needed to • Improve communication • Clear separation of concerns (SoC) & responsibilities • Degrees of freedom 71
  • 72. Summing up  UI is (not?) different to other computer science concerns  UI coherence needed: UI componentization helps  UI can be generated (50-90%) * (your mileage can vary)  MDD needs better tool support to be mainstream  Tools are improving in the latest years  But we can do it better  So ... 72