UI Development

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