16. Focus on: Business Information Systems
Works mainly with business data
Stored in a persistence layer
Offers CRUD operations
Multichannel: desktop, web, mobile
But soon also: TV and fridge, remember!!
17. Typical Features in Information Systems UIs
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
18. What makes a UI a good UI?
Easy of use
Attractive (design and aesthetics)
Forgiving (Undo choices)
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.”
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
21. Main Benefits to Model (& Generate)
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
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.
33. Design tools
SW drawing tools
Visio, Word, Excel
Specific Sketching Tools
Balsamiq, Axure, Protoshare
34. Standarization inniatives
Red Whale Inc. XIML Forum
Harmonia Inc. UIML ongoing standardization on OASIS
UsiXML UCL, Jean Vanderdonckt
WebRatio on standardizing WebML via OMG
Is it too early?
Are UIs too broad in domain?
35. The Quest for the right level of abstraction
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.
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
37. Some useful Concepts
Interaction Object [Vanderdonck&Bodart93]
AIO vs CIO
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
Purchase to supplier
40. Interaction Unit
It is an abstraction of a window, a scenario where user interacts with the
Based on: AIO & Presentation Unit
Extended with behaviour semantics
42. Instance Interaction Unit
Abstracts object presentation.
Navigation What to see?
Code What to do?
Display Set ...
43. Population Interaction Unit
Represents a set of objects
What to see?
How to search?
Country.Name What to do?
Order Criteria Customer_Delete
code DES Display Sets Country_Nationalize
Actions ... Currency
Country Explore data
How to sort?
44. Master/Detail Interaction Unit
Represents a composed pattern with head-details semantics.
A Master Component
One or many Detail Components
Current Invoices Due Payments
Detail 1 Detail 2
45. Just-UI / Diagramming
Population_Class2 MasterDetail1 ServiceNew
Alias2 Alias3 Alias4
(a) Instance IU (b) Population IU (c) Master/Detail IU (d) Service IU
(e) Navigational Link
Graphical primitives in Just-UI.
46. Just-UI / Diagramming
Current Contract-Vehicle S_Return
Vehicle Fleet Old Contracts S_Delete_User
Example of graphical language for UI specification.
51. A B Introduction
A uses B
Service IU Defined Selection
Status Recovery User
Instance IU Display Set
Population IU Filter
Order Criteria Level 1 (1)
Level 2 (4)
Master/Detail IU Level 3 (11)
Level 1 Level 2 Level 3
52. More info about: CUIP
Conceptual User Interface Patterns
available on-line at:
53. Mappings: AIO CIO Desktop
Hierarchical Action Tree Menu
Interaction Unit Form
An object Labels
Many objects Grid
Defined Selection Combo-boxes
54. Mappings: AIO CIO Web / HTML
Hierarchical Action Tree Dynamic Menu
Interaction Unit HTML page
Action <A> Link
Navigation <A> Link
An object HTML Labels
Many objects <Table>
Defined Selection <Option>
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
64. Guideline compliance
Put as much as possible standardisation inside the common part.
Implement such common part using the guideline criterion to be
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.
65. High vs Low level UI modelling
High level Spec.
Low level Spec.
near to the problem domain
adapted to the target device
difficult to implement device dependent
rigid automatic implementations difficult to be re-targeted to
66. Modelling & Code Gen. Technologies
MS DSL Tools
Textual Domain Specific Languages
Grammars & Parsers: ANTLR
Strict separation of model, transformation & presentation (template)
output grammars StringTemplate
And many more...
67. Balance: flexibility vs Homogeneity
Reduces common parts
Increases family size
Background color Sample:
fixed to #34FF23 Background color
can be specified
Increases common parts
Reduces family size
Simplifies the system
68. User Interface Code Generation
AIO Abstract Interface Object (technology independent)
CIO Concrete Interface Object (platform dependent)
Mappings between them
MVC Model View Controller
69. User Interface Code Generation
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
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
71. Creativity vs Automation.
Where to put the division line?
Artist & GUI designers Programmers
Creativity Analytic thinking
Design aesthetics Abstraction
Tools: IDEs, compilers, debuggers,
Dreamweaver, Illustrator, Freehand, profilers.
They have different skills sets, tools & languages
It is difficult to find people with both skills
Team work is needed to
• Improve communication
• Clear separation of concerns (SoC) & responsibilities
• Degrees of freedom
72. Summing up
UI is (not?) different to other computer science
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