Task-Driven Plasticity: One Step Forward with UbiDraw Jean Vanderdonckt, Juan Manuel González Calleros Université catholique de Louvain (UCL) Louvain School of Management (LSM) - Information Systems Unit (ISYS) Belgian Laboratory of Computer-Human Interaction (BCHI) http://www.isys.ucl.ac.be/bchi

Outline Introduction Related Work UbiDraw Evaluation Conclusion

Introduction

Related Work

UbiDraw

Evaluation

Conclusion

Outline Introduction Related Work UbiDraw Evaluation Conclusion

Introduction

Related Work

UbiDraw

Evaluation

Conclusion

Motivation Porting User Interfaces Always has posed challenges Adaptation to screen sizes Introduction of alternative modalities

Porting User Interfaces

Always has posed challenges

Adaptation to screen sizes

Introduction of alternative modalities

Motivation Ubiquitous computing The context in not anymore limited or known The surrounding world becomes an interface to virtually any type of interactive system

Ubiquitous computing

The context in not anymore limited or known

The surrounding world becomes an interface to virtually any type of interactive system

Traditional solutions Porting UIs has been solved by: Techniques that do not affect the initial design Simple Porting zoom in/out Advantages consistency between the different versions Drawbacks Simple porting reduce the available screen real estate zooming may induce many operations related to the zoom manipulation

Porting UIs has been solved by:

Techniques that do not affect the initial design

Simple Porting

zoom in/out

Advantages

consistency between the different versions

Drawbacks

Simple porting reduce the available screen real estate

zooming may induce many operations related to the zoom manipulation

Traditional solutions Gathering functions that are related in principle to the same task. Related functions can also presented in collapsible tool bars

Gathering functions that are related in principle to the same task.

Related functions can also presented in collapsible tool bars

Traditional solutions Plastic User Interfaces Concerns the capacity of a multi-context UI to preserve usability properties across the various contexts of use (User, Platform, Environment) Technique that changed the UI design Some reconfiguration of the UI is often needed. reconfiguration of UI widgets (low level of abstraction) Task Level (high level of abstraction) To investigate to what extent UI can be ”plastified” at a higher level of concern than the physical one

Plastic User Interfaces

Concerns the capacity of a multi-context UI to preserve usability properties across the various contexts of use (User, Platform, Environment)

Technique that changed the UI design

Some reconfiguration of the UI is often needed.

reconfiguration of UI widgets (low level of abstraction)

Task Level (high level of abstraction)

Solution proposed UbiDraw Vectorial hand drawing application that adapts its user interface. displaying, undisplaying, resizing, and relocating tool bars and icons according to the current user’s task , the task frequency , or the user’s preference for some task. The context watcher sends this information to the ubiquitous widgets so as to support task-driven plasticity. supports task-driven plasticity based on a small toolkit of task-driven plastic widgets, called UbiWidgets. Usability evaluation investigates the effect of using UbiWidgets on the user preference by conducting some usability testing.

UbiDraw

Vectorial hand drawing application that adapts its user interface.

displaying, undisplaying, resizing, and relocating tool bars and icons

according to the current user’s task , the task frequency , or the user’s preference for some task.

The context watcher sends this information to the ubiquitous widgets so as to support task-driven plasticity.

supports task-driven plasticity based on a small toolkit of task-driven plastic widgets, called UbiWidgets.

Usability evaluation

investigates the effect of using UbiWidgets on the user preference by conducting some usability testing.

Outline Introduction Related Work UbiDraw Evaluation Conclusion

Introduction

Related Work

UbiDraw

Evaluation

Conclusion

Multiplicity of contexts of use Context of use = (User, Platform, Environment) TV is multi-media family device #1 Family Device Booking notification Everywhere connectivity for simple data exchange Travelling Travel booking site Powerful interface for complex operations Working Multimedia Travel programme Sporting Experience Role Location

Context of use = (User, Platform, Environment)

Cameleon Reference Framework Final user Interface T Concrete user Interface T Task and Domain T Abstract user Interface T T=Target context of use Concrete user Interface S Final user Interface S Task and Domain S Abstract user Interface S S=Source context of use UsiXML unsupported model UsiXML supported model User S User T Environment T Reification Abstraction Reflexion Translation Platform S Environment S Platform T

Related Work software probe allows deploying interactive systems that constantly probe the context of use for a significant change and that reflect such a change into a UI adaptation. [Calvary, Coutaz and Thevenin 2001] [Jabarin and Graham 2003]

software probe allows deploying interactive systems that constantly probe the context of use for a significant change and that reflect such a change into a UI adaptation.

Related Work The implementation is independent of the underlying computing platform and that offers multiple representations of concrete UIs for the same description. [Schneider et al. 2002]

The implementation is independent of the underlying computing platform and that offers multiple representations of concrete UIs for the same description.

Related Work A toolkit of context-aware widgets that embed plasticity: in this toolkit, widgets have been abstracted with respect to the underlying physical environment so as to form platform-independent widgets. These widgets can also change their interaction modality. [Crease et al. 2000]

A toolkit of context-aware widgets that embed plasticity: in this toolkit, widgets have been abstracted with respect to the underlying physical environment so as to form platform-independent widgets. These widgets can also change their interaction modality.

Related Work Comets propagates interaction needs from the final UI to the task and domain level through concrete and abstract UIs via a set of logical mappings. [Demeure et al. 2000]

Comets propagates interaction needs from the final UI to the task and domain level through concrete and abstract UIs via a set of logical mappings.

Our Work It drives the plasticity mechanism from a task model located at the task & domain level. A change of the context of use is firstly interpreted in terms of a task variation that is then reflected into the Concrete UI level and Final UI level, respectively.

It drives the plasticity mechanism from a task model located at the task & domain level. A change of the context of use is firstly interpreted in terms of a task variation that is then reflected into the Concrete UI level and Final UI level, respectively.

Outline Introduction State of the Art UbiDraw Evaluation Conclusion

Introduction

State of the Art

UbiDraw

Evaluation

Conclusion

UbiDraw Develop in a multi-platform environment (Mozart) Using a multi-paradigm language (Qtk based on Oz programming) Functionalities are group by similarities in tool bars: File Draw Options Retouch Every toolbar can be displayed at different locations depending on screen size and resolution of the application running on a particular platform

Develop in a multi-platform environment (Mozart)

Using a multi-paradigm language (Qtk based on Oz programming)

Functionalities are group by similarities in tool bars:

File

Draw

Options

Retouch

Every toolbar can be displayed at different locations depending on screen size and resolution of the application running on a particular platform

UbiDraw Each group may be displayed in three different ways according with its status Hidden Vertical Horizontal

Each group may be displayed in three different ways according with its status

UbiDraw To determine the size of a non-hidden toolbar and how many icons should be displayed the last icon being clicked, the rank representing the users’ preference/need for this icon, and the amount of clicks on this icon. The higher the priority of an icon is, the more likely it will be displayed

To determine the size of a non-hidden toolbar and how many icons should be displayed

the last icon being clicked,

the rank representing the users’ preference/need for this icon, and

the amount of clicks on this icon.

The higher the priority of an icon is, the more likely it will be displayed

Software Architecture The process of plasticity is located at the UI control component: the plasticity is regulated at the highest possible level in the meta-model. In this case, only control rules govern the plasticity. CUI

The process of plasticity is located at the UI control component: the plasticity is regulated at the highest possible level in the meta-model.

In this case, only control rules govern the plasticity.

Run-Time Plasticity in UbiDraw Steps for run time plasticity as it is implemented in UbiDraw Adaptation with UbiDraw always results from user initiative

Steps for run time plasticity as it is implemented in UbiDraw

Adaptation with UbiDraw always results from user initiative

UbiWidget

ContextWatcher Assign a position and size to each UbiWidget when the context is changed The UbiWidget draw itself Strategy : Consider UbiWidgets ranking, Priority mechanism Highest ranking are displayed first Display the maximum number of widgets top left of the screen, with their minimal size

Assign a position and size to each UbiWidget when the context is changed

The UbiWidget draw itself

Strategy :

Consider UbiWidgets ranking,

Priority mechanism

Highest ranking are displayed first

Display the maximum number of widgets top left of the screen, with their minimal size

Links ContextWatcher and models

ModifyConfig Goal : reconfigure the adaptation of the UbiMenuBar Result: adaptivity & adaptability

Goal : reconfigure the adaptation of the UbiMenuBar

Result: adaptivity & adaptability

ContextWatcher Size allocation Example :

Example :

Outline Introduction State of the Art UbiDraw Evaluation Conclusion

Introduction

State of the Art

UbiDraw

Evaluation

Conclusion

Method Questionnaire-Based evaluation 9 users : not enough but better than nothing! Level of expertise using a PocketPC Familiarity with computer supported drawing Task Analysis – Four different task Load an existing drawing - PocketPC Draw a line - PocketPC Draw a rectangle with mid-sized lines - PocketPC Draw a house, resizing the canvas - Desktop The first three tasks had to be realized as quick as possible. Users were explicitly invited to test the plasticity of the application, that is to say to resize the main window to fit their task Users were asked to indicate which adaptation mechanism they favored ranking click number, click number Ranking

Questionnaire-Based evaluation

9 users : not enough but better than nothing!

Level of expertise using a PocketPC

Familiarity with computer supported drawing

Task Analysis – Four different task

Load an existing drawing - PocketPC

Draw a line - PocketPC

Draw a rectangle with mid-sized lines - PocketPC

Draw a house, resizing the canvas - Desktop

The first three tasks had to be realized as quick as possible.

Users were explicitly invited to test the plasticity of the application, that is to say to resize the main window to fit their task

Users were asked to indicate which adaptation mechanism they favored

ranking click number, click number Ranking

Method The user was then invited to rank the available tasks according to his preferences They were then invited to test the application with and without his customized ranking. Questionnaire The results were collected in a questionnaire with items represented according to 7-point Likert scale. Strongly Disagree 1 2 3 4 5 6 7 Strongly Agree (N/A) Some space was left at the end of the questionnaires for positive and negative aspects, and for further comments.

The user was then invited to rank the available tasks according to his preferences

They were then invited to test the application with and without his customized ranking.

Questionnaire

The results were collected in a questionnaire with items represented according to 7-point Likert scale.

Strongly Disagree 1 2 3 4 5 6 7 Strongly Agree (N/A)

Some space was left at the end of the questionnaires for positive and negative aspects, and for further comments.

Results and Discussion User Testing Preferences Results

User Testing

Preferences

Results

Outline Introduction State of the Art UbiDraw Evaluation Conclusion

Introduction

State of the Art

UbiDraw

Evaluation

Conclusion

Conclusion Original properties A unique form of plasticity A task-driven mechanism An instantiation of the general software architecture for plasticity A distribution of responsibilities A reasonable usability Consistency Continuity Further investigation is required to fully assess the usability properties of interest that are predefined in the plasticity notion. UbiDraw is restricted to a simple context change: window resizing and change of platform We did not investigate further how other changes of contextual properties may significantly or not affect the UI plasticity.

Original properties

A unique form of plasticity

A task-driven mechanism

An instantiation of the general software architecture for plasticity

A distribution of responsibilities

A reasonable usability

Consistency

Continuity

Further investigation is required to fully assess the usability properties of interest that are predefined in the plasticity notion.

UbiDraw is restricted to a simple context change: window resizing and change of platform

We did not investigate further how other changes of contextual properties may significantly or not affect the UI plasticity.

Thank you very much for your attention For more information and downloading, http://www.isys.ucl.ac.be/bchi http://www.usixml.org User Interface eXtensible Markup Language http://www.similar.cc European network on Multimodal UIs Special thanks to all members of the team!