Distributed User Interfaces: How to Distribute User Interface Elements across Users, Platforms, and...

Distributed User Interfaces:How to Distribute User Interface Elements across Users, Platforms, and Environments

Jean VanderdoncktLouvain Interaction Lab

Université catholique de [email protected]

mailto:[email protected]

Keynote address - Interaccion'2010 (Valencia, 6-10 September 2010)

What is the situation today?One user performing one task on one domain in one context of use• The predominant paradigm: single…

• Monitor, device• Computing platform• User• Environment• Context of use• Domain and task

2

one many


Introduction• DUI = Distributed User Interface across

– Multiple Users: single user stereotypes vs. multiple stereotypes– Multiple computing Platforms: single platform vs. multiple platforms

• Simultaneously• Asynchronously

– Multiple surrounding Environments (physical): same place vs. multiple places• Problem to be addressed: the design and the development of DUIs while

taking into account– Aspects that are common to various distributions– Aspects that are specific to some distributions

• Today, there is an ontological confusion in the various distributions possible– The State of the Art is largely inconsistent– It is difficult to compare related work


One dimension at a time

4

• The predominant paradigm: single…

• Monitor, device• Computing platform• User• Environment• Context of use• Domain and task

one many


Multi-monitor/device

• Why take care of multiple monitors?– Device side

• Monitor surface isincreasing, while priceis decreasing

– User side• Users prefer more display surface• User’s productivity increases from 10% to 30%

(although some usability problems are raised)

[Harris,2002]

Projected LCD Pricing 2002-2005

$437$378 $327 $283

$699$597

$510$436

$1,089

$905

$752$625

$0

$200

$400

$600

$800

$1,000

$1,200

2002 2003 2004 2005

$U

S

15" -13.5%

17" -14.6%

18" -16.9%


Mutiple PCs and Displays

0%

10%

20%

30%

40%

50%

60%

70%

80%

None Multiple monitorsattached to

multiplecomputers.

Laptop anddesktop monitor

connectedtogether.

Dualmon or higher

Config

Pe

rce

nt

Re

sp

on

da

nts

All


• Why take care of multiple monitors?– User side

[Harris,2002]



• Why take care of multiple monitors?Effects of Display Size on Task Times

0

20

40

60

80

100

120

140

160

DISPLAY

Avera

ge T

ask

Tim

e (

Seco

nds)

Small

Large

[Czerwinsky,2005]



• Why take care of multiple monitors?

[Czerwinsky,2005]

The tasks were easy to perform

0

1

2

3

4

5

Small LargeDisplay SizeA

vera

ge R

ati

ng (

1=

Dis

agre

e,

5=

Agre

e)



• Why take care of multiple monitors?

[Czerwinsky,2005]

I was satisfied with the ease of windows layout

012345

Display Size

Ave

rage

Rat

ing

(1=D

isag

ree,

5=Agr

ee)

Small

Large



• Distribution of UIs across monitors (hardware)– Coupling different monitors to the same

workstation



• Distribution of UIs across monitors (hardware)– Coupling different monitors to the same

workstation

Hard wired, manual solution

Opportunistic

Lack of reusability



• Distribution of UIs across monitors (software)– Partitioning of a window across several screens to

obtain a DUI



• Extending a Desktop with another Monitor

Ref_1 SCREEN_1 SCREEN_2

1 2

4 5

3

6

8 9

1 2

4 5

3

6

8 9 7

2

4

8

5

5

5 6

Without anti-aliasing. No pixel information is lost. But proportions are. Rendering quality is quite bad.

1 1-2 3 2-3 With anti-aliasing. Pixel information are lost (e.g. pixel 2). Proportions are quite ok. Rendering quality is good

1-4 3-6

4-7 6-9

7 9 7-8 8-9

7

[Demeure et al.,2004]


The 4C Framework for DUIs• C1 (Computation) represents the computation of a DUI, i.e.

what are the elements to be distributed during the operation• C2 (Communication) represents the dimension of distribution

time, i.e. when are the elements of an interactive system distributed

• C3 (Coordination) represents the dimension of distribution responsibility, i.e. who is distributing the interactive system– Detection, computation, selection, execution => ISATINE framework

[Lopez2006]

• C4 (Configuration) represents where a UI is distributed. It therefore poses the problem of how to distribute it– Conserving physical pixels – Conserving logical pixels – Conserving semantic pixels

Developmenttime

Compiletime

Load/startuptime

Executiontime

Design time Run time

Static distribution Dynamic distribution

Customizable UI Configurable UI Tunable UI Mutable UI

Developmenttime

Compiletime

Load/startuptime

Executiontime

Design time Run time

Static distribution Dynamic distribution

Customizable UI Configurable UI Tunable UI Mutable UI

SCREEN_1 SCREEN_2



Dimensions of the 4C

• C4 (Configuration) represents where a UI is distributed. It therefore poses the problem of how to distribute it by conserving– Physical pixels – Logical pixels – Semantic pixels

D.H / S.H

D.Pix / S.Pix < 1 D.L / S.L

Fewer pixels

Same number of pixels

More pixels but D shorter than S

More pixels and D equal to S

More pixels and D taller than S




• The predominant paradigm: single…– Monitor, device– Computing platform– User– Environment– Context of use– Domain and task

16

one many


Multi-platform

1970 1980 1990 2000 2010 2020

10

100

1000

10000(Amount of end users)

(Amount of interactive systems)

50

500

5000

50000

1 system for 100 users

1 system for 1 user

2 or 3 systemsfor 1 user

10 to 50 systemsfor 1 user

Source: M. Weiser Source: Forrester Research, 2002


Multi-platformUnit Sales (per thousand)

0

100.000

200.000

300.000

400.000

500.000

600.000

700.000

800.000

900.000

1.000.000

1997

1998

1999

2000

2001

2002

2003

2004

2005

2006

2007

Mobile Terminals

PC units

[Pierce et al.,2004]


Multi-platform

• Problem: how to design a UI that takes care of multiple computing platforms?

• Some solutions:– DistriXML = software architecture for distributing

UIs from one computing platform to another at run-time [Grolaux et al., 2005]

– MigriXML = software architecture for migrating Uis from one platform to another at run-time with adaptation [Molina et al., 2006]


The Painter’s Palette

+ =


Digital Painter’s Palette


Useful area is wasted !


Multi-platform

• Problem: how to design a UI that takes care of multiple computing platforms?

Pencil

Palette

Painting

Paintingtool

[Grolaux & Vanderdonckt,2005]

http://www.isys.ucl.ac.be/bchi/publications/2005/Grolaux-Interact2005.pdf


Multi-platform

[Grolaux & Vanderdonckt,2005]



Multi-platform


Example using a Pocket PC


Multi-platform


Multi-platform• DEMIPLAT Principle for migration: Detach


Multi-platform• DEMIPLAT Principle for migration: Detach - Migrate


Multi-platform• DEMIPLAT Principle for migration: Detach - Migrate - Plastify


Multi-platform• DEMIPLAT Principle for migration:

Detach - Migrate - Plastify - Attach


Multi-platform• This is not a floating bar

Process


Computer B

Process

Multi-platform

Process

Computer A


MigriXML architecture

• Interactive system architecture– GUI application

• Arch meta-model or ‘Slinky’ meta-model

– Platform• Layered structure

[Molina, Vanderdonckt, Gonzalez, 2006]



Case study

• The user’s environment is a small office, with five different platforms


Case study

• Two different user interfaces


Case study

• Migrating from one laptop to the other

12

3 4

Aspire 200015”, 16:10 1280x800

PT-LB10SU4:3

800x600

Latitude15”, 4:3

1024x768


Case study

• Migrating from a laptop to the Pocket PC

1

2

3

Aspire 200015”, 16:10 1280x800

e7503,8”, 3:4240x320




39

one many


Multiple users

• Design guideline #1: provide multiple ways to carry out a task by different users– Interactive systems should better support multiple users

in multi-tasking because group definition changes

[Mandviwalla & Olfman, 2000]


Multiple users

• Design guideline #2: support multiple work methods– A same task could involve different sub-tasks depending

on the context

• Design guideline #3:support group evolution– GR1 et GR2 changent en fonction du temps

[Mandviwalla & Olfman, 2000]




42

one many


Multi-context

• The Sedan-Bouillon Tourist Application with Plasticity

• The Slides Manager

Title

Content

N A V I G A T I





44

one many


What we had for multi-platform• Application layer :

o UI is dynamically migratable

• o UI is dynamically adaptable


What we have for multi-tasking• Ext/Tk toolkit


Display Site

Architecture overview• Transparent proxy mechanisms

– Proxies relay event bindings from the functional core– Widgets trigger these events inside the CM at the display site– The CM relays and triggers the event at the application site– Proxies store all their event bindings

Application Site

Communication ManagerFunctional Core Widget 1 Proxy

Widget 2 Proxy

Widget … Proxy

Widget N Proxy

Widget 1

Widget 2

Widget …

Widget N

User Interface

(using TCP)

Event Listener

Event Triggerer


Multi-tasking combined

• Set of services offered to multiple users using multiple platforms in the same context

[Vandervelpen et al., 2005]



Conclusion

• Think everything distributed according to the following « template »

• Everything could be thought distributed– Accessibility, evaluation– Virtual, mixed reality


Conclusion• Advantages of the 4C framework for DUI

– Multiple monitors, same platform, same user– Multiple platforms, same user– Multiple platforms, different users, but same technological

space– Multiple platforms, different users, different technological

spaces• Limitations

– Framework oriented towards the context of use– Some aspects not considered in the framework

• Ambient intelligence• Possible extension

• Generalization needed


For more information and downloading,http://www.isys.ucl.ac.be/bchi

User Interface eXtensible Markup Languagehttp://www.usixml.org

FP7 Selfman projecthttp://www.ist-selfman.org/

Thank you very much!

FP7 Serenoa projecthttp://serenoa.morfeo-project.org/wiki/index.php/Main_Page

http://www.isys.ucl.ac.be/bchi

http://www.usixml.org/

http://www.usixml.org/

Distributed User Interfaces: How to Distribute User Interface Elements across Users, Platforms, and...

Documents

Transcript of Distributed User Interfaces: How to Distribute User Interface Elements across Users, Platforms, and...