Pedro J. Molina, PhD. [email protected]
@pmolinam
Rubén Jiménez [email protected]
@rubenjmarrufo
Multichannel
User Interfaces
Contents
© Icinetic 2012 2
Introduction
UIs and multichannel
UI Technologies
UI Model & Code Generation
Demos
Conclusions
Q&A
Introduction
We do MDSD Tools for developers
Focused on .NET technologies &
Architecture services
HQ in Seville, Spain, EU
© Icinetic 2012 3
Introduction
Pervasive User Interfaces
Contextual
Services across devices
Costs of making and distributing Software
© Icinetic 2012 4
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
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
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
UI Technologies
Choose your flavour:
© Icinetic 2012 9
? Smartphone
Tablet
Smartphone
Tablet
v 3.1.3 v 4.2.1
v 5.1
UI Development
Then
Hire a good development team
Don’t forget designers and UX
Keep them focused and happy!
© Icinetic 2012 10
Required UI programming skills
Main platforms:
© Icinetic 2012 11
Platform Languages IDE
The Web HTML5 + CSS3 + JavaScript
+ Server side lang.
None/Many
Windows XAML + C# Visual Studio, Expression Blend
Apple Objective-C + Cocoa XCode
Java / Android Java + UI toolkit Eclipse
Difficult to master all of them!
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
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
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
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
Plumbing samples: UI Architecture
UI frameworks
MVC
MVVM
MVP
Supervising Controller
Passive View
© Icinetic 2012 21
Plumbing sample: Comms
Service invocation
RPC / Binary
Web Services / SOAP
REST / JSON
HTTP / HTTPS / SPEEDY / WebSockets
© Icinetic 2012 22
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
What’s changes in a UI?
Technology
Style guides
Widgets and concrete interaction
Plumbing: platform/tech specific
© Icinetic 2012 24
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
Conceptual UI Patterns
Login
Instance
Population
Master/Detail
Service
Wizard
Filter
…
© Icinetic 2012 26
pjmolina.com/cuip
CUIP: Population
Set of objects
Filter
Order criteria
Display set
Actions
Navigation
© Icinetic 2012 27
Rendering
Grid
Table
List
CUIP: Population
Set of objects
Filter
Order criteria
Display set
Actions
Navigation
© Icinetic 2012 28
Rendering
Grid
Table
List
CUIP: Population
Set of objects
Filter
Order criteria
Display set
Actions
Navigation
© Icinetic 2012 29
Rendering
Grid
Table
List
CUIP: Population
Set of objects
Filter
Order criteria
Display set
Actions
Navigation
© Icinetic 2012 30
Rendering
Grid
Table
List
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
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
Applications
UI prototyping
“Wizard of Oz” Technique
Rapid multichannel Service delivery
UIs via Service composition (Mashups)
Ubiquitous & contextual interfaces
© Icinetic 2012 37
Multi-channel
© Icinetic 2012 38
Data Access Layer
Business LogicLayer
Services Layer
Datatabase
User InterfaceLayer
Controllers
Views
View Models
App 1
UI-1
User InterfaceLayer
Controllers
Views
View Models
UI-2
MD Composed UIs (Mashups)
© Icinetic 2012 39
Data Access Layer
Business LogicLayer
Services Layer
Datatabase
Data Access Layer
Business LogicLayer
Services Layer
Datatabase
User InterfaceLayer
Controllers
Views
View Models
App 1 App 2
Composed App UI
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
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
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
Conclusions
© Icinetic 2012 43
Looking for flights to Seychelles on the bathroom
Finishing the purchase, later, in the car
Questions & (might be) Answers
© Icinetic 2012 44
www.radarc.net
pjmolina.com/essential
pjmolina.com/cuip