Pedro J. Molina, PhD. pjmolina@icinetic.com

@pmolinam

Rubén Jiménez rjimenez@icinetic.com

@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

© Icinetic 2012 5

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

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?

© Icinetic 2012 17

Both!

© Icinetic 2012

18

© Icinetic 2012

19

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

Structure: Class Model

© Icinetic 2012 32

UI Navigational Model

© Icinetic 2012 33

Code Generation

© Icinetic 2012 34

Demo Time

Modelling domain

Generated Services

Modelling UI

Generated UI

© Icinetic 2012 35

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