Multichannel User Interfaces

Multichannel
User Interfaces
Pedro J. Molina, PhD. pjmolina@icinetic.com
@pmolinam

Rubén Jiménez rjimenez@icinetic.com
@rubenjmarrufo

Contents
 Introduction
 UIs and multichannel
 UI Technologies
 UI Model & Code Generation
 Demos
 Conclusions
 Q&A

© Icinetic 2012 2

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

© Icinetic 2012 5

 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

 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

 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:

?
Smartphone Smartphone
Tablet Tablet

v 3.1.3
v 4.2.1
v 5.1

© Icinetic 2012 9

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:
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

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
 iOS

 Android

 WP7 / W8 Metro

© Icinetic 2012 13

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

Once again: Art or Engineering?

© Icinetic 2012 16

Once again: Art or Engineering?

Both!
© Icinetic 2012 17

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
 … pjmolina.com/cuip

© Icinetic 2012 26

CUIP: Population
 Set of objects  Rendering
 Filter  Grid
 Order criteria  Table
 Display set  List
 Actions
 Navigation

© Icinetic 2012 27

CUIP: Population
 Filter  Grid
 Actions
 Navigation

© Icinetic 2012 28

CUIP: Population
 Filter  Grid
 Actions
 Navigation

© Icinetic 2012 29

CUIP: Population
 Filter  Grid
 Actions
 Navigation

© Icinetic 2012 30

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
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

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

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
 Looking for flights to Seychelles on the bathroom
 Finishing the purchase, later, in the car

© Icinetic 2012 43

Multichannel User Interfaces

More Related Content

What's hot (20)

Viewers also liked (7)

Similar to Multichannel User Interfaces (20)

Recently uploaded (20)

Multichannel User Interfaces