SlideShare a Scribd company logo

Modelling the User Interface

Pedro J. Molina
Pedro J. Molina
Pedro J. MolinaFounder at Metadev

Introduction to the User Interface domain for business applications, a pattern based approach to model the UI and code generation techniques to make it possible. Session for Code Generation 2011

Modelling the User Interface

1 of 74
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
Ad

Recommended

Asp.net html server control
Asp.net html  server controlAsp.net html  server control
Asp.net html server controlSireesh K
 
Line drawing algo.
Line drawing algo.Line drawing algo.
Line drawing algo.Mohd Arif
 
Chapter 5 : ANIMATION
Chapter 5 : ANIMATIONChapter 5 : ANIMATION
Chapter 5 : ANIMATIONazira96
 
Algorithms for Computer Games - lecture slides 2009
Algorithms for Computer Games - lecture slides 2009Algorithms for Computer Games - lecture slides 2009
Algorithms for Computer Games - lecture slides 2009Jouni Smed
 
Chapter 3 : IMAGE
Chapter 3 : IMAGEChapter 3 : IMAGE
Chapter 3 : IMAGEazira96
 
GRPHICS01 - Introduction to 3D Graphics
GRPHICS01 - Introduction to 3D GraphicsGRPHICS01 - Introduction to 3D Graphics
GRPHICS01 - Introduction to 3D GraphicsMichael Heron
 

More Related Content

What's hot

What's hot (20)

Multichannel User Interfaces
Multichannel User InterfacesMultichannel User Interfaces
Multichannel User Interfaces
 
Chapter 7 : MAKING MULTIMEDIA
Chapter 7 : MAKING MULTIMEDIAChapter 7 : MAKING MULTIMEDIA
Chapter 7 : MAKING MULTIMEDIA
 
Raster scan system
Raster scan systemRaster scan system
Raster scan system
 
Multimedia chapter 2
Multimedia chapter 2Multimedia chapter 2
Multimedia chapter 2
 
what is Font in multimedia
 what is Font in multimedia what is Font in multimedia
what is Font in multimedia
 
Html Form Controls
Html Form ControlsHtml Form Controls
Html Form Controls
 
Basic Software Tools for multi-media
Basic Software Tools for multi-mediaBasic Software Tools for multi-media
Basic Software Tools for multi-media
 
Chapter 2 : TEXT
Chapter 2 : TEXTChapter 2 : TEXT
Chapter 2 : TEXT
 
Dynamic HTML Event Model
Dynamic HTML Event ModelDynamic HTML Event Model
Dynamic HTML Event Model
 
Numeric Data Types & Strings
Numeric Data Types & StringsNumeric Data Types & Strings
Numeric Data Types & Strings
 
Multimedia software hardware
Multimedia software hardwareMultimedia software hardware
Multimedia software hardware
 
Lec02 03 rasterization
Lec02 03 rasterizationLec02 03 rasterization
Lec02 03 rasterization
 
Introduction to 2D/3D Graphics
Introduction to 2D/3D GraphicsIntroduction to 2D/3D Graphics
Introduction to 2D/3D Graphics
 
Visual Basic Controls ppt
Visual Basic Controls pptVisual Basic Controls ppt
Visual Basic Controls ppt
 
ADO .Net
ADO .Net ADO .Net
ADO .Net
 
Active x control
Active x controlActive x control
Active x control
 
Html images syntax
Html images syntaxHtml images syntax
Html images syntax
 
Basics of Image Processing using MATLAB
Basics of Image Processing using MATLABBasics of Image Processing using MATLAB
Basics of Image Processing using MATLAB
 
VISUAL BASIC 6 - CONTROLS AND DECLARATIONS
VISUAL BASIC 6 - CONTROLS AND DECLARATIONSVISUAL BASIC 6 - CONTROLS AND DECLARATIONS
VISUAL BASIC 6 - CONTROLS AND DECLARATIONS
 
Html forms
Html formsHtml forms
Html forms
 

Similar to Modelling the User Interface

By the Book: Examining the Art of Building Great User Experiences in Software
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
 
By the Book: Examining the Art of Building Great User Experiences in Software
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
 
ThingsCon Amsterdam 2015 - Koen van Niekerk
ThingsCon Amsterdam 2015 - Koen van Niekerk ThingsCon Amsterdam 2015 - Koen van Niekerk
ThingsCon Amsterdam 2015 - Koen van Niekerk ThingsConAMS
 
Cognitive Digital Twin by Fariz Saračević
Cognitive Digital Twin by Fariz SaračevićCognitive Digital Twin by Fariz Saračević
Cognitive Digital Twin by Fariz SaračevićBosnia Agile
 
Interfaces to ubiquitous computing
Interfaces to ubiquitous computingInterfaces to ubiquitous computing
Interfaces to ubiquitous computingswati sonawane
 
The Essentials of Great Search Design (ECIR 2010)
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
 
Brokerage 2007 presentation hci
Brokerage 2007 presentation hciBrokerage 2007 presentation hci
Brokerage 2007 presentation hciimec.archive
 
A Pragmatic View of UX Driven Development
A Pragmatic View of UX Driven DevelopmentA Pragmatic View of UX Driven Development
A Pragmatic View of UX Driven DevelopmentAkshay Luther
 
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
 
Flying Pixels Ent Apps Jeremy Chone
Flying Pixels Ent Apps Jeremy ChoneFlying Pixels Ent Apps Jeremy Chone
Flying Pixels Ent Apps Jeremy Chonerajivmordani
 
4 - Architetture Software - Architecture Portfolio
4 - Architetture Software - Architecture Portfolio4 - Architetture Software - Architecture Portfolio
4 - Architetture Software - Architecture PortfolioMajong DevJfu
 
Mixed Reality Interfaces and Product Management
Mixed Reality Interfaces and Product ManagementMixed Reality Interfaces and Product Management
Mixed Reality Interfaces and Product ManagementJeremy Horn
 
OpenDolphin with GroovyFX Workshop at GreachConf, Madrid
OpenDolphin with GroovyFX Workshop at GreachConf, MadridOpenDolphin with GroovyFX Workshop at GreachConf, Madrid
OpenDolphin with GroovyFX Workshop at GreachConf, MadridDierk König
 
Future of interface design
Future of interface designFuture of interface design
Future of interface designTodd Soulas
 
Fundamental principles of Usability and User Centred Design
Fundamental principles of Usability and User Centred DesignFundamental principles of Usability and User Centred Design
Fundamental principles of Usability and User Centred DesignBART RADKA
 
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...
Industrial and Academic Experiences with a User Interaction Modeling Language...Marco Brambilla
 
Software Architecture Erosion and Modernization
Software Architecture Erosion and ModernizationSoftware Architecture Erosion and Modernization
Software Architecture Erosion and Modernizationbmerkle
 
8. design patterns
8. design patterns8. design patterns
8. design patternsAPU
 

Similar to Modelling the User Interface (20)

By the Book: Examining the Art of Building Great User Experiences in Software
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
 
By the Book: Examining the Art of Building Great User Experiences in Software
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
 
ThingsCon Amsterdam 2015 - Koen van Niekerk
ThingsCon Amsterdam 2015 - Koen van Niekerk ThingsCon Amsterdam 2015 - Koen van Niekerk
ThingsCon Amsterdam 2015 - Koen van Niekerk
 
Cognitive Digital Twin by Fariz Saračević
Cognitive Digital Twin by Fariz SaračevićCognitive Digital Twin by Fariz Saračević
Cognitive Digital Twin by Fariz Saračević
 
Interfaces to ubiquitous computing
Interfaces to ubiquitous computingInterfaces to ubiquitous computing
Interfaces to ubiquitous computing
 
The Essentials of Great Search Design (ECIR 2010)
The Essentials of Great Search Design (ECIR 2010)The Essentials of Great Search Design (ECIR 2010)
The Essentials of Great Search Design (ECIR 2010)
 
Brokerage 2007 presentation hci
Brokerage 2007 presentation hciBrokerage 2007 presentation hci
Brokerage 2007 presentation hci
 
A Pragmatic View of UX Driven Development
A Pragmatic View of UX Driven DevelopmentA Pragmatic View of UX Driven Development
A Pragmatic View of UX Driven Development
 
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
 
Flying Pixels Ent Apps Jeremy Chone
Flying Pixels Ent Apps Jeremy ChoneFlying Pixels Ent Apps Jeremy Chone
Flying Pixels Ent Apps Jeremy Chone
 
4 - Architetture Software - Architecture Portfolio
4 - Architetture Software - Architecture Portfolio4 - Architetture Software - Architecture Portfolio
4 - Architetture Software - Architecture Portfolio
 
Mixed Reality Interfaces and Product Management
Mixed Reality Interfaces and Product ManagementMixed Reality Interfaces and Product Management
Mixed Reality Interfaces and Product Management
 
OpenDolphin with GroovyFX Workshop at GreachConf, Madrid
OpenDolphin with GroovyFX Workshop at GreachConf, MadridOpenDolphin with GroovyFX Workshop at GreachConf, Madrid
OpenDolphin with GroovyFX Workshop at GreachConf, Madrid
 
Future of interface design
Future of interface designFuture of interface design
Future of interface design
 
Explicit architecture
Explicit architectureExplicit architecture
Explicit architecture
 
Fundamental principles of Usability and User Centred Design
Fundamental principles of Usability and User Centred DesignFundamental principles of Usability and User Centred Design
Fundamental principles of Usability and User Centred Design
 
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...
Industrial and Academic Experiences with a User Interaction Modeling Language...
 
User Experience 2: Talk@Stabilo
User Experience 2: Talk@StabiloUser Experience 2: Talk@Stabilo
User Experience 2: Talk@Stabilo
 
Software Architecture Erosion and Modernization
Software Architecture Erosion and ModernizationSoftware Architecture Erosion and Modernization
Software Architecture Erosion and Modernization
 
8. design patterns
8. design patterns8. design patterns
8. design patterns
 

More from Pedro J. Molina

dotnetMalaga-2020 Gestión de la configuración en aplicaciones Web
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
 
Infrastructure as Code with Terraform
Infrastructure as Code with TerraformInfrastructure as Code with Terraform
Infrastructure as Code with TerraformPedro J. Molina
 
Essential as the base for Web DSLs
Essential as the base for Web DSLsEssential as the base for Web DSLs
Essential as the base for Web DSLsPedro J. Molina
 
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
 
Esencia de Web Components
Esencia de Web ComponentsEsencia de Web Components
Esencia de Web ComponentsPedro J. Molina
 
Esencia de web components
Esencia de web componentsEsencia de web components
Esencia de web componentsPedro J. Molina
 
Securizando por construcción mediante MDE
Securizando por construcción mediante MDESecurizando por construcción mediante MDE
Securizando por construcción mediante MDEPedro J. Molina
 
Building APIs with the OpenApi Spec
Building APIs with the OpenApi SpecBuilding APIs with the OpenApi Spec
Building APIs with the OpenApi SpecPedro J. Molina
 
Micro vs Nano (servicios)
Micro vs Nano (servicios)Micro vs Nano (servicios)
Micro vs Nano (servicios)Pedro J. Molina
 
Diseño de APIs con OpenAPI
Diseño de APIs con OpenAPIDiseño de APIs con OpenAPI
Diseño de APIs con OpenAPIPedro J. Molina
 
SVQDC 2017 Tecnologías para Microservicios
SVQDC 2017 Tecnologías para MicroserviciosSVQDC 2017 Tecnologías para Microservicios
SVQDC 2017 Tecnologías para MicroserviciosPedro J. Molina
 
Tecnologías para microservicios
Tecnologías para microserviciosTecnologías para microservicios
Tecnologías para microserviciosPedro J. Molina
 
Opensouthcode: Microservicios sobre MEAN Stack
Opensouthcode: Microservicios sobre MEAN StackOpensouthcode: Microservicios sobre MEAN Stack
Opensouthcode: Microservicios sobre MEAN StackPedro J. Molina
 

More from Pedro J. Molina (20)

MDE en la industria
MDE en la industriaMDE en la industria
MDE en la industria
 
Terraform
TerraformTerraform
Terraform
 
dotnetMalaga-2020 Gestión de la configuración en aplicaciones Web
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
 
Infrastructure as Code with Terraform
Infrastructure as Code with TerraformInfrastructure as Code with Terraform
Infrastructure as Code with Terraform
 
Are Startups for me?
Are Startups for me?Are Startups for me?
Are Startups for me?
 
Meow Demo
Meow DemoMeow Demo
Meow Demo
 
Essential as the base for Web DSLs
Essential as the base for Web DSLsEssential as the base for Web DSLs
Essential as the base for Web DSLs
 
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
 
Esencia de Web Components
Esencia de Web ComponentsEsencia de Web Components
Esencia de Web Components
 
Esencia de web components
Esencia de web componentsEsencia de web components
Esencia de web components
 
OpenAPI 3.0.2
OpenAPI 3.0.2OpenAPI 3.0.2
OpenAPI 3.0.2
 
Quid
QuidQuid
Quid
 
Securizando por construcción mediante MDE
Securizando por construcción mediante MDESecurizando por construcción mediante MDE
Securizando por construcción mediante MDE
 
Building APIs with the OpenApi Spec
Building APIs with the OpenApi SpecBuilding APIs with the OpenApi Spec
Building APIs with the OpenApi Spec
 
Micro vs Nano (servicios)
Micro vs Nano (servicios)Micro vs Nano (servicios)
Micro vs Nano (servicios)
 
Diseño de APIs con OpenAPI
Diseño de APIs con OpenAPIDiseño de APIs con OpenAPI
Diseño de APIs con OpenAPI
 
SVQDC 2017 Tecnologías para Microservicios
SVQDC 2017 Tecnologías para MicroserviciosSVQDC 2017 Tecnologías para Microservicios
SVQDC 2017 Tecnologías para Microservicios
 
Introducción a Angular
Introducción a AngularIntroducción a Angular
Introducción a Angular
 
Tecnologías para microservicios
Tecnologías para microserviciosTecnologías para microservicios
Tecnologías para microservicios
 
Opensouthcode: Microservicios sobre MEAN Stack
Opensouthcode: Microservicios sobre MEAN StackOpensouthcode: Microservicios sobre MEAN Stack
Opensouthcode: Microservicios sobre MEAN Stack
 

Recently uploaded

Bit N Build Poland
Bit N Build PolandBit N Build Poland
Bit N Build PolandGDSC PJATK
 
Zi-Stick UBS Dongle ZIgbee from Aeotec manual
Zi-Stick UBS Dongle ZIgbee from  Aeotec manualZi-Stick UBS Dongle ZIgbee from  Aeotec manual
Zi-Stick UBS Dongle ZIgbee from Aeotec manualDomotica daVinci
 
Tete thermostatique Zigbee MOES BRT-100 V2.pdf
Tete thermostatique Zigbee MOES BRT-100 V2.pdfTete thermostatique Zigbee MOES BRT-100 V2.pdf
Tete thermostatique Zigbee MOES BRT-100 V2.pdfDomotica daVinci
 
Bringing nullability into existing code - dammit is not the answer.pptx
Bringing nullability into existing code - dammit is not the answer.pptxBringing nullability into existing code - dammit is not the answer.pptx
Bringing nullability into existing code - dammit is not the answer.pptxMaarten Balliauw
 
Early Tech Adoption: Foolish or Pragmatic? - 17th ISACA South Florida WOW Con...
Early Tech Adoption: Foolish or Pragmatic? - 17th ISACA South Florida WOW Con...Early Tech Adoption: Foolish or Pragmatic? - 17th ISACA South Florida WOW Con...
Early Tech Adoption: Foolish or Pragmatic? - 17th ISACA South Florida WOW Con...Adrian Sanabria
 
AWS reInvent 2023 recaps from Chicago AWS user group
AWS reInvent 2023 recaps from Chicago AWS user groupAWS reInvent 2023 recaps from Chicago AWS user group
AWS reInvent 2023 recaps from Chicago AWS user groupAWS Chicago
 
Heltun_HE-RS01_User_Manual_B9AH.pdf
Heltun_HE-RS01_User_Manual_B9AH.pdfHeltun_HE-RS01_User_Manual_B9AH.pdf
Heltun_HE-RS01_User_Manual_B9AH.pdfMarielaL5
 
Cultivating Entrepreneurial Mindset in Product Management: Strategies for Suc...
Cultivating Entrepreneurial Mindset in Product Management: Strategies for Suc...Cultivating Entrepreneurial Mindset in Product Management: Strategies for Suc...
Cultivating Entrepreneurial Mindset in Product Management: Strategies for Suc...Product School
 
Launching New Products In Companies Where It Matters Most
Launching New Products In Companies Where It Matters MostLaunching New Products In Companies Where It Matters Most
Launching New Products In Companies Where It Matters MostProduct School
 
"The Transformative Power of AI and Open Challenges" by Dr. Manish Gupta, Google
"The Transformative Power of AI and Open Challenges" by Dr. Manish Gupta, Google"The Transformative Power of AI and Open Challenges" by Dr. Manish Gupta, Google
"The Transformative Power of AI and Open Challenges" by Dr. Manish Gupta, GoogleISPMAIndia
 
Harnessing the Power of GenAI for Exceptional Product Outcomes by Booking.com...
Harnessing the Power of GenAI for Exceptional Product Outcomes by Booking.com...Harnessing the Power of GenAI for Exceptional Product Outcomes by Booking.com...
Harnessing the Power of GenAI for Exceptional Product Outcomes by Booking.com...Product School
 
Revolutionizing The Banking Industry: The Monzo Way
Revolutionizing The Banking Industry: The Monzo WayRevolutionizing The Banking Industry: The Monzo Way
Revolutionizing The Banking Industry: The Monzo WayProduct School
 
Q1 Memory Fabric Forum: Intel Enabling Compute Express Link (CXL)
Q1 Memory Fabric Forum: Intel Enabling Compute Express Link (CXL)Q1 Memory Fabric Forum: Intel Enabling Compute Express Link (CXL)
Q1 Memory Fabric Forum: Intel Enabling Compute Express Link (CXL)Memory Fabric Forum
 
Synergy in Leadership and Product Excellence: A Blueprint for Growth
Synergy in Leadership and Product Excellence: A Blueprint for GrowthSynergy in Leadership and Product Excellence: A Blueprint for Growth
Synergy in Leadership and Product Excellence: A Blueprint for GrowthProduct School
 
21ST CENTURY LITERACY FROM TRADITIONAL TO MODERN
21ST CENTURY LITERACY FROM TRADITIONAL TO MODERN21ST CENTURY LITERACY FROM TRADITIONAL TO MODERN
21ST CENTURY LITERACY FROM TRADITIONAL TO MODERNRonnelBaroc
 
How we think about an advisor tech stack
How we think about an advisor tech stackHow we think about an advisor tech stack
How we think about an advisor tech stackSummit
 
DNA LIGASE BIOTECHNOLOGY BIOLOGY STUDY OF LIFE
DNA LIGASE BIOTECHNOLOGY BIOLOGY STUDY OF LIFEDNA LIGASE BIOTECHNOLOGY BIOLOGY STUDY OF LIFE
DNA LIGASE BIOTECHNOLOGY BIOLOGY STUDY OF LIFEandreiandasan
 
Quinto Z-Wave Heltun_HE-RS01_User_Manual_B9AH.pdf
Quinto Z-Wave Heltun_HE-RS01_User_Manual_B9AH.pdfQuinto Z-Wave Heltun_HE-RS01_User_Manual_B9AH.pdf
Quinto Z-Wave Heltun_HE-RS01_User_Manual_B9AH.pdfDomotica daVinci
 
Microsoft Azure News - Feb 2024
Microsoft Azure News - Feb 2024Microsoft Azure News - Feb 2024
Microsoft Azure News - Feb 2024Daniel Toomey
 
Manual sensor Zigbee 3.0 MOES ZSS-X-PIRL-C
Manual  sensor Zigbee 3.0 MOES ZSS-X-PIRL-CManual  sensor Zigbee 3.0 MOES ZSS-X-PIRL-C
Manual sensor Zigbee 3.0 MOES ZSS-X-PIRL-CDomotica daVinci
 

Recently uploaded (20)

Bit N Build Poland
Bit N Build PolandBit N Build Poland
Bit N Build Poland
 
Zi-Stick UBS Dongle ZIgbee from Aeotec manual
Zi-Stick UBS Dongle ZIgbee from  Aeotec manualZi-Stick UBS Dongle ZIgbee from  Aeotec manual
Zi-Stick UBS Dongle ZIgbee from Aeotec manual
 
Tete thermostatique Zigbee MOES BRT-100 V2.pdf
Tete thermostatique Zigbee MOES BRT-100 V2.pdfTete thermostatique Zigbee MOES BRT-100 V2.pdf
Tete thermostatique Zigbee MOES BRT-100 V2.pdf
 
Bringing nullability into existing code - dammit is not the answer.pptx
Bringing nullability into existing code - dammit is not the answer.pptxBringing nullability into existing code - dammit is not the answer.pptx
Bringing nullability into existing code - dammit is not the answer.pptx
 
Early Tech Adoption: Foolish or Pragmatic? - 17th ISACA South Florida WOW Con...
Early Tech Adoption: Foolish or Pragmatic? - 17th ISACA South Florida WOW Con...Early Tech Adoption: Foolish or Pragmatic? - 17th ISACA South Florida WOW Con...
Early Tech Adoption: Foolish or Pragmatic? - 17th ISACA South Florida WOW Con...
 
AWS reInvent 2023 recaps from Chicago AWS user group
AWS reInvent 2023 recaps from Chicago AWS user groupAWS reInvent 2023 recaps from Chicago AWS user group
AWS reInvent 2023 recaps from Chicago AWS user group
 
Heltun_HE-RS01_User_Manual_B9AH.pdf
Heltun_HE-RS01_User_Manual_B9AH.pdfHeltun_HE-RS01_User_Manual_B9AH.pdf
Heltun_HE-RS01_User_Manual_B9AH.pdf
 
Cultivating Entrepreneurial Mindset in Product Management: Strategies for Suc...
Cultivating Entrepreneurial Mindset in Product Management: Strategies for Suc...Cultivating Entrepreneurial Mindset in Product Management: Strategies for Suc...
Cultivating Entrepreneurial Mindset in Product Management: Strategies for Suc...
 
Launching New Products In Companies Where It Matters Most
Launching New Products In Companies Where It Matters MostLaunching New Products In Companies Where It Matters Most
Launching New Products In Companies Where It Matters Most
 
"The Transformative Power of AI and Open Challenges" by Dr. Manish Gupta, Google
"The Transformative Power of AI and Open Challenges" by Dr. Manish Gupta, Google"The Transformative Power of AI and Open Challenges" by Dr. Manish Gupta, Google
"The Transformative Power of AI and Open Challenges" by Dr. Manish Gupta, Google
 
Harnessing the Power of GenAI for Exceptional Product Outcomes by Booking.com...
Harnessing the Power of GenAI for Exceptional Product Outcomes by Booking.com...Harnessing the Power of GenAI for Exceptional Product Outcomes by Booking.com...
Harnessing the Power of GenAI for Exceptional Product Outcomes by Booking.com...
 
Revolutionizing The Banking Industry: The Monzo Way
Revolutionizing The Banking Industry: The Monzo WayRevolutionizing The Banking Industry: The Monzo Way
Revolutionizing The Banking Industry: The Monzo Way
 
Q1 Memory Fabric Forum: Intel Enabling Compute Express Link (CXL)
Q1 Memory Fabric Forum: Intel Enabling Compute Express Link (CXL)Q1 Memory Fabric Forum: Intel Enabling Compute Express Link (CXL)
Q1 Memory Fabric Forum: Intel Enabling Compute Express Link (CXL)
 
Synergy in Leadership and Product Excellence: A Blueprint for Growth
Synergy in Leadership and Product Excellence: A Blueprint for GrowthSynergy in Leadership and Product Excellence: A Blueprint for Growth
Synergy in Leadership and Product Excellence: A Blueprint for Growth
 
21ST CENTURY LITERACY FROM TRADITIONAL TO MODERN
21ST CENTURY LITERACY FROM TRADITIONAL TO MODERN21ST CENTURY LITERACY FROM TRADITIONAL TO MODERN
21ST CENTURY LITERACY FROM TRADITIONAL TO MODERN
 
How we think about an advisor tech stack
How we think about an advisor tech stackHow we think about an advisor tech stack
How we think about an advisor tech stack
 
DNA LIGASE BIOTECHNOLOGY BIOLOGY STUDY OF LIFE
DNA LIGASE BIOTECHNOLOGY BIOLOGY STUDY OF LIFEDNA LIGASE BIOTECHNOLOGY BIOLOGY STUDY OF LIFE
DNA LIGASE BIOTECHNOLOGY BIOLOGY STUDY OF LIFE
 
Quinto Z-Wave Heltun_HE-RS01_User_Manual_B9AH.pdf
Quinto Z-Wave Heltun_HE-RS01_User_Manual_B9AH.pdfQuinto Z-Wave Heltun_HE-RS01_User_Manual_B9AH.pdf
Quinto Z-Wave Heltun_HE-RS01_User_Manual_B9AH.pdf
 
Microsoft Azure News - Feb 2024
Microsoft Azure News - Feb 2024Microsoft Azure News - Feb 2024
Microsoft Azure News - Feb 2024
 
Manual sensor Zigbee 3.0 MOES ZSS-X-PIRL-C
Manual  sensor Zigbee 3.0 MOES ZSS-X-PIRL-CManual  sensor Zigbee 3.0 MOES ZSS-X-PIRL-C
Manual sensor Zigbee 3.0 MOES ZSS-X-PIRL-C
 

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