User Interfaces can be modeled in a technology agnostic way using Conceptual User Interface Patterns. This talk shows how to take advantage of this approach and shows how to generate code to different devices and technologies.

1. Multichannel
User Interfaces
Pedro J. Molina, PhD. pjmolina@icinetic.com
@pmolinam
Rubén Jiménez rjimenez@icinetic.com
@rubenjmarrufo

2. Contents
 Introduction
 UIs and multichannel
 UI Technologies
 UI Model & Code Generation
 Demos
 Conclusions
 Q&A
© Icinetic 2012 2

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

4. Introduction
 Pervasive User Interfaces
 Contextual
 Services across devices
 Costs of making and distributing Software
© Icinetic 2012 4

5. UIs and multichannel
© Icinetic 2012 5

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

7. UIs and multichannel
 However, in the meanwhile, we have:
 Many devices
 Many HW choices
 Many SW platforms to build for
Difficult choice: Where to invest?
© Icinetic 2012 7

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

9. UI Technologies
 Choose your flavour:
?
Smartphone Smartphone
Tablet Tablet
v 3.1.3
v 4.2.1
v 5.1
© Icinetic 2012 9

10. UI Development
 Then
 Hire a good development team
 Don’t forget designers and UX
 Keep them focused and happy!
© Icinetic 2012 10

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

12. UI Technologies
 Variable and moving target
 Hardware: new devices every 6 months
 Software: new OS mobile versions every
year
 APIs: new APIs, all the time!
 Not an easy train to follow!
© Icinetic 2012 12

13. UI Style-guides
 iOS
 Android
 WP7 / W8 Metro
© Icinetic 2012 13

14. UI Style-guides
 Each platform provides a differentiated one
 Involving not only aesthetics aspects
 But also UX aspects on device accordingly to the style of
interaction
 Application on a device should behave coherent with the
platform
 Not all applications fits well on each device
© Icinetic 2012 14

15. Is there space for modelling
and code generated UIs?
 Probably
 not for “radically original” games
 and not for new interaction styles
 But convenient and efficient for day to day
 Information Systems
 Information production / consumption needs
 Business Software
© Icinetic 2012 15

16. Once again: Art or Engineering?
© Icinetic 2012 16

17. Once again: Art or Engineering?
Both!
© Icinetic 2012 17

18. © Icinetic
18
2012

19. © Icinetic
19
2012

20. UIs and plumbing
 Behind a good User Interface
 There is a lot of plumbing
 Definition: (Developer) Plumbing
 Repetitive infrastructure code with small
variations
 Boring to write, source of bugs
 Low added value
 But: needed to run the full application
© Icinetic 2012 20

21. Plumbing samples: UI Architecture
 UI frameworks
 MVC
 MVVM
 MVP
 Supervising Controller
 Passive View
© Icinetic 2012 21

22. Plumbing sample: Comms
 Service invocation
 RPC / Binary
 Web Services / SOAP
 REST / JSON
 HTTP / HTTPS / SPEEDY
/ WebSockets
© Icinetic 2012 22

23. UI Modelling Hypothesis
 So:
1. Can we raise the level of abstraction and capture
the essence of the UI in a model?
2. Can we alleviate the developers plumbing pain?
3. Can we expose this UI on multiple channels and
technologies?
© Icinetic 2012 23

24. What’s changes in a UI?
 Technology
 Style guides
 Widgets and concrete interaction
 Plumbing: platform/tech specific
© Icinetic 2012 24

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

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

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

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

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

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

31. A sample: Personal Banking
 Oriented to: banking end users
 Easy to use
 Targeting frequent operations
 Check accounts balance
 Order a transfer
 Review account entries
 Multi-device: pc, mobile, tablet, etc.
© Icinetic 2012 31

32. Structure: Class Model
© Icinetic 2012 32

33. UI Navigational Model
© Icinetic 2012 33

34. Code Generation
© Icinetic 2012 34

35. Demo Time
 Modelling domain
 Generated Services
 Modelling UI
 Generated UI
© Icinetic 2012 35

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

37. Applications
 UI prototyping
 “Wizard of Oz” Technique
 Rapid multichannel Service delivery
 UIs via Service composition (Mashups)
 Ubiquitous & contextual interfaces
© Icinetic 2012 37

38. Multi-channel
Datatabase
Data Access
Layer
Business Logic
Layer
Services Layer
App 1
User Interface User Interface
Layer Layer
Views Views
Controllers Controllers
View Models View Models
UI-1 UI-2
© Icinetic 2012 38

39. MD Composed UIs (Mashups)
Datatabase Datatabase
Data Access Data Access
Layer Layer
Business Logic Business Logic
Layer Layer
Services Layer Services Layer
App 1 App 2
User Interface
Layer
Views
Controllers
View Models
Composed App UI
© Icinetic 2012 39

40. Conclusions
 Pervasive devices are already here to stay
 While we found “the platform” to rule them’all
 we need to deal with diversity of HW, SW and APIs
© Icinetic 2012 40

41. Conclusions
 So far, today we have seen:
1. How to raise the level of abstraction and capture
the essence of a User Interface in a model
2. How to alleviate the developer plumbing pain
3. How to target multiple channels and
technologies
© Icinetic 2012 41

42. Conclusions
 MDSD applied to UI
 can makes the difference in terms of time to
market, quality & productivity
 provide new forms of UIs not possible in the
traditional way i.e. contextual ones
© Icinetic 2012 42

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

44. Questions & (might be) Answers
www.radarc.net
pjmolina.com/essential
pjmolina.com/cuip
© Icinetic 2012 44