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

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

6. Games: joystick, motion
6

7. WIMPs
7

8. Touch UIs

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

23. Modelling the UI
23

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

26. Some UI Models
26

27. But also…
 Wireframes
 Sketches
 Mockups
27

28. But also…
 Wireframes
 Sketches
 Use cases
 Mockups
28

29. Wireframe Samples
29

30. Navigation Maps
30

31. Task Model Samples
31

32. Presentation Models
32

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

49. Just-UI / Diagramming
49

50. Just-UI / Diagramming
50

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

60. Demo: Essential & Io
60

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

73. Let’s do it!
73

74. Thank you!
Questions?
@pmolinam