Contenu connexe
Similaire à Multichannel User Interfaces
Similaire à Multichannel User Interfaces (20)
Plus de Pedro J. Molina (16)
Multichannel User Interfaces
- 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
- 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
- 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
- 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
- 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
- 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