Towards Standardisation in User Interface Development: the UsiXML Contribution

David Faure1, Jean Vanderdonckt2, and the UsiXML Consortium
1Thales Research & Technology, France
2Université catholique de Louvain, Louvain School of Management, Belgium
david.faure@thalesgroup.com, jean.vanderdonckt@uclouvain.be

http://fr.slideshare.net/jeanvdd/faure-vanderdonckt-cosummit2013

-

What is standardisation in UI development?
Why and how to standardize?
The UsiXML Project
Standardisation actions
-

-

-

Contents
Output
Comparison

What's next?

ITEA & Artemis Co-Summit'2013 (Stockholm, 4-5 December 2013)

-

Standardisation is the process of developing and
implementing technical standards, e.g., for
-

-

Standardisation is everywhere in
-

-

Independence, interoperability, reusability,…
Computer Science: data exchange standards
Software Engineering
Database Management Systems
Information Systems

But, surprisingly, not in Human-Computer Interaction
(HCI) and User Interface (UI) development


-

Standardisation in UI dev. has not been reached because
UI development is intrinsically complex

-

Multi-factorial success: user, platform, environment,…
Usability is not simply common sense
User experience is more than usability

UI development is expensive

-

On the average, 48% of the code written for the 69 applications studied
was devoted to the UI

No agreement on what to standardise

-

UI widgets, interaction styles, interaction modalities,…

Frontiers of standardisation are undecidable

-

Lowest common multiple
Largest common denominator
Something between?


-

-

UI dev. tools are often limited to surface widgets

Desired Interface

Interface builder solution


-

-

Many widgets could be used for the same goal

-

The same widget could have many different "look and feel"


-

Why:
The time of "I will only use my own language" is over
Need for rigorous method engineering
Need for incremental development of software support
instead of reinventing the wheel each time
Maturity in UI dev. has been achieved, thus giving
opportunity to rely on it
Some past attempts were not successfull because

-

-

Moderate scientific soundness (e.g., limited expressiveness)
Only local acceptance
No large pool of organisations contributing, testing, improving
Little or no consensus on contents and format
Private or non-royalty free formats

-

Advantages
-

-

-

Independence: the UI could be designed independently
from its implementation (e.g., MVC/PAC/MVP
architectures)
Expressiveness: the UI could be expressed in a common
(mainly declarative) format
Openess: the UI format is free-of-charge
Interoperability: a UI description could be exchanged
from one software to another
Reusability: parts or whole of a UI description could be
reused in similar interactive applications
Involvement: eveybody could contribute in principle

-

Shortcomings
-

Stopping criteria: where to start is easy, where to stop is
not
Trade-off: between expressiveness and legibility
Speed: standardisation process could be tedious and
iterative
Difference: between human readability and machine
processability
Lack of generalisation: what is not in the standard always
poses some problem
Intrinsic incompleteness: while the standard freezes, the
technology continues evolving

-

How: standardisation is promoted by international
standardisation bodies
-

-

American National Standards Institute (ANSI)
International Organization for Standardization (ISO)
The Organization for the Advancement of Structured
Information Standards (OASIS)
The Telecommunications Industry Association (TIA)
World Wide Web Consortium (W3C)
…


UsiXML defines, validates, and standardises an open user interface
description language (UIDL), increasing productivity and reusability,
and improving usability and accessibility of industrial interactive
applications using the μ7 concept
Goal 1: The UsiXML ―µ7‖ concept elicitation and promotion
•

Multi-device, multi-platform, multi-user, multi-linguality / culturality, multi-organisation, multi-context,
multi-modality

Goal 2: Development of the UsiXML language and the modeldriven method
•
•
•

Standard User Interface Description Language
New models to capture µ7 aspects
UI development methodology

Goal 3: Set up development tools and demonstration of the validity
on applications
•
•
•

Tools development
Usability support
Validation through demonstrators


UI Market trends& UsiXML Market positioning

μ Modality
•New contexts and constraints
imposed to use various modalities

μ Platform
•Cross Platform consumer & user
behaviour

μ Context
•Pattern recognition
•Contextual analysis
•Anytime, anywhere
•Big Data, In-memory computing
•Digital Asset Management
•Analytics

μ Device

μ7

μ User
•Users evolving over time and new
user profiles appearing constantly
•Pattern recognition
•Natural user interfaces (voice,
gesture...)
•UX design

•Any Device (input/ouput)
•Mobile Devices
•M2M
•NFC
•Internet of things

μ Linguality
μ Organization
•Applications that need to be
extended to multiple organizations
•Cloud collaborative processes
•Integrated ecosystems

•Applications submitted to
internationalisation with new
languages, markets, cultures


Cameleon Reference Framework in UsiXML

Task & Domain (T&D)
AbstractIndividual
Container
AIC
facet=control

AIC
facet=control

AIC
facet=control

Window
textInput

button

button

Abstract User Interface (AUI)

Concrete User Interface
(CUI)
Final User Interface (FUI)

Calvary, G., Coutaz, J., Thevenin, D., Limbourg, Q., Bouillon, L., Vanderdonckt, J., A Unifying Reference Framework for Multi-Target User
Interfaces, Interacting with Computers, Vol. 15, No. 3, June 2003, pp. 289-308


Recommended by

Context of use

Context of use

User

User

Platform

Platform

Environment

Environment

Task & Domain (T&D)

Task & Domain (T&D)



(CUI)

(CUI)



17

Recommended by

Reification: from high- to lower-level
• T&D → AUI
• AUI → CUI: e.g., a GUI, a vocal UI
• CUI → FUI: e.g., HTML, VB for GUI

Task & Domain (T&D)

VoiceXML, X+V for Vocal UI

Abstraction: from low- to higher-level
• FUI → CUI: e.g., reverse HTML
• CUI → AUI: e.g. for changing modality
• AUI → T&D: e.g., for recovering task

Reflexion: at the same level
•
•
•
•

FUI: e.g. transcoding
CUI: e.g., graceful degradation
AUI: e.g., restructuring
T&D: e.g., for retasking


(CUI)

Limbourg, Q., Vanderdonckt, J., UsiXML: A User Interface Description Language Supporting Multiple Levels of Independence, in
Matera, M., Comai, S. (Eds.), “Engineering Advanced Web Applications”, Rinton Press, Paramus, 2004, pp. 325-338


-

-

-

User Interface eXtensible Markup Language (UsiXML) is a formal Domain-Specific Language
(DSL) used in Human-Computer Interaction (HCI) and Software Engineering (SE) in order to
describe any user interface of any interactive application independently of any implementation
technology
A user interface may involve variations depending on: the context of use (in which the user is
carrying out her interactive task), the device or the computing platform (on which the user is
working), the language (used by the user), the organization (to which the user belongs), the
user profile, the interaction modalities (e.g., graphical, vocal, tactile, haptics).
It is a User Interface Description Language (UIDL), a declarative specification language for
describing
-

-

Task, Domain, User, Platform, Environment
Abstract, Concrete UI
Other related aspects: mapping, transformation, commons, …

It is the first language in history to fully support all levels recommended by Cameleon
Reference Framework (CRF) in 2004 (now W3C)
Is composed of
-

Semantics for 9 meta-models (in UML 2.0 class diagrams and OWL 2 Full ontologies)
Abstract syntax
Concrete Syntax: XML Schema
Stylistics: graphical notation for most important concepts
Transformation-based


-

Is open
Is multi-model
Supports model-based or model-driven UI
Is Multi-level of abstraction
Is Multi-usage
Is Multi-path
-

Forward engineering
Reverse engineering
Lateral engineering
Cross-cutting

-

UsiXML dev. method is structured as follows
Development method
Software tools
support

Step-wise method
involves

Models
described in
Specification language


UsiDomain editor

Domain Model

Task Model

UsiTask editor

Mapping Model

Context Model

Abstract User Interface

22

UsiContext editor

UsiAbstract gen./editor

UsiConcrete gen./editor

 WindowBuilder (WB) as CUI editor
 XWT meta-model adapted

Concrete
User Interface

 Developed MT4j widgets integrated
in WB

XWT implementation
+ « hand coded »

 Interactive interface

23

ITEA & Artemis Co-Summit'2013
(Stockholm, 4-5 December 2013)

-

UsiDashBoard: support for method engineering

Cano, F.J., Vanderdonckt, J., Towards Methodological Guidance for User Interface Development Life Cycle, Proc. of 2nd Int. Workshop on User Interface
Extensible Markup Language UsiXML’2011 (Lisbon, 6 September 2011), Thales Research and Technology France, Paris, 2011, pp. 35-45.


-

UsiComp: Composition of
user interfaces (by UJF)

Alfonso García Frey, Eric Ceret, Sophie Dupuy-Chessa, Gaëlle Calvary, Yoann Gabillon:
UsiComp: an extensible model-driven composer. Proc of ACM EICS 2012, pp. 263-268


-

UsiWSC: Usable User Interface for Interactive
Web Service Composition

http://webapps.fundp.ac.be/usiwsc/

Mohamed BOUKHEBOUZE, Waldemar Pires Ferreira NETO, Lim ERBIN, Philippe THIRAN, UsiWSC: Framework for Supporting an Interactive Web Service
Composition, in Proceeding of the 12th International Conference on Web Engineering ICWE'2012, Springer.


-

UsiGesture: incorporating gestures in GUIs

Beuvens, F., Vanderdonckt, J., Designing Graphical User Interfaces Integrating Gestures in the UsiGesture environment, Proc. of 30th ACM International
Conference on Design of Communication SIGDOC’2012 (Seattle, October 5-8, 2012), ACM Press, New York, 2012, pp. 313-322.


-

UsiDistrib: Distributed User Interfaces across
devices
Name
Effect
Display
Undisplay

Hide an item from one to many UIs

Move

Move an item from a UI to another one

Copy

Copy an item of an UI to another one

Insert
3 roles:
The drawer
The observer
The guesser

Display an item in one or more UIs

Insert an item in a container of a UI

Switch

Exchange two components in the same or different UIs

Merge

Merge two UIs together

Separate

Explode a UI in two or more separated UIs

Melchior, J., Grolaux, D., Vanderdonckt, J., Van Roy, P., A Toolkit for Peer-to-Peer Distributed User Interfaces: Concepts, Implementation, and Applications, Proc.
of 1st ACM SIGCHI Symposium on Engineering Interactive Computing Systems EICS’2009 (Pittsburgh, July 15-17, 2009), ACM Press, New York, 2009, pp. 69-78.


-

UsiKiosk: Distributed User Interfaces across
devices (by See & Touch)


-

UsiExplain: Self-explanatory user interfaces by
model-driven engineering (by UJF)

Alfonso García Frey, Gaëlle Calvary,
Sophie Dupuy-Chessa, Nadine Mandran:
Model-Based Self-explanatory UIs for
Free, but Are They Valuable? Proc. of IFIP
INTERACT (3) 2013: 144-161

http://iihm.imag.fr/publs/2013/PhD_Alfonso-Garcia-Frey.pdf


-

SECRET: reverse engineering of GUIs (by UCLM)


Phase 2:
Modeling the source GUI
resource
model

Phase 4: Forward engineering

Phase 3: Resource to CUI
M2M transformation

UsiResourcer:
Resource
recovery

CUI
model

GrafiXML:
CUI Model
editing

Phase 1: Resource decompilation
Executable
Interactive
application

Resource
decompilation

Resource
files

New Resource
file

GrafiXML:
GUI
generation

New CUI
model

Resource
recompilatio
n

New
Executable
Interactive
application

Sanchez, O., Vanderdonckt, J., Molina, J., Re-Engineering Graphical User
Interfaces from their Resource Files with UsiResourcer, Proc. of 7th Int. Conf. on
Research Challenges in Information Science RCIS’2013 (Paris, 29-31 May 2013),
IEEE Computer Society, Los Angeles, 2013.


New GUI

Concrete UI level

UsiResourcer: reverse engineering of GUIs from
their resource file

Final UI level

-

-

UsiView: animated transition between UsiXML
and code
a

Conceptual
view

Animated transition between conceptual and external views

b

Dessart, Ch.-E., Genaro Motti, V., and
Vanderdonckt, J., Animated Transitions
between User Interface Views, Proc. of
Int. Working Conf. on Advanced Visual
Interfaces AVI’2012 (Capri, May 21-25th,
2012), ACM Press, New York, 2012, pp.
341-348.

Internal
view

c

Animated transition between internal and external views


External
view

-

UsiCentral: Authoring environment (by
www.defimedia.be)


Number of End User Club members
70

60

Number of members

50

40

30

Observers
Supporters
Promoters

20

10

0


-

OASIS Technical Committee on User Interface
Modelling Language
NESSI European platform
NEXOF-RA Reference Architecture
COST 294 Action "MAUSE" on Usability
ISO 24744 on Method Engineering: task and
study on notation
W3C Group on Model-Based User Interface
Design
OMG IFML

-

Process and means:
-

-

OASIS: by progressive incorporation (monthly telco)
OMG: by vote on proposals (F2F meetings and voting)
W3C: by submissions and consensus (weekly telco, F2F
meetings)
ISO: by progressive incorporation (telco and F2F
meetings)

Milestones:
-

W3C: first publication working draft, last call, candidate
recommendation, proposed
recommendation, recommendation


•

W3C Model-based User Interface Group
http://www.w3.org/wiki/Model-Based_User_Interfaces
The mission of the Model-Based UI Working Group, is to develop
standards as a basis for interoperability across authoring tools for
context aware user interfaces for Web-based interactive applications.
The MBUI Working Group's initial focus is on task models, and UI
components and integrity constraints at a level of abstraction
independent of the choice of device. Future work is anticipated on taking
this to the next level — the concrete UI which involves design choices
specific to broad classes of devices. Models at this level can be
compiled down for specific delivery channels, guided by author supplied
preferences (UI skins). Further out, we hope to address standards for
interoperable exchange of rules for dynamic adaptation to the context.

W3C deliverables:
•
•
•
•
•
•
•
•
•

Introduction to Model-Based UI design: definition, goals, potential
benefits for companies
Glossary
Use Cases
Task meta-model: first public release available
Abstract User Interface: first public release available
UI Commons
UI Configuration
User Model
…


ISO 24744 deliverables:
•

Meta-model, graphical notation, …
endeavour

method
methodologies

assessment

quality

tools

WorkUnit

Activity

Task

Technique
*

metamodel

*

Henderson-Sellers, B.: Method Engineering: Theory and Practice. In: Karagiannis, D., Mayr, H.C. (eds.) Information Systems Technology and
its Applications. 5th International Conference ISTA 2006, Gesellschaft für Informatik, Bonn. Lecture Notes in Informatics (LNI), vol. P-84, pp. 13–23 (2006)
Sousa, K., Vanderdonckt, J., Henderson-Sellers, B., Gonzalez-Perez, C., Evaluating a graphical notation for modelling software development
methodologies, Journal of Visual Languages and Computation, Vol. 23, No. 4, 2012, pp. 195-212


OMG Interaction Flow Modeling Language (IFML – www.ifml.org)
•

Meta-model, graphical notation, software,…

Model-Driven Software Engineering in Practice (Synthesis Lectures on Software
Engineering) by Marco Brambilla, Jordi Cabot and Manuel Wimmer (Sep
26, 2012


-

ITEA2 UsiXML project is finished, but UsiXML
continues
-

-

As a language: towards UsiXML 2.2 stable version
As a consortium: you can join
As a series of product & services: through companies
As a consulting agency: through spin-offs

W3C MBUI continues
-

More meta-models to be discussed: concrete UI, user
model, modalities, etc.
Need for company involvement and adoption
Need for more software support
Need for use cases

-

The ITEA2 UsiXML fiche:
http://www.itea2.org/project/index/view/?project=1127

-

The UsiXML project web site:
www.usixml.eu

-

3689 visitors in 2012

The UsiXML language web site:
www.usixml.org

-

UsiXML FaceBook page:
https://www.facebook.com/UsiXML

-

UsiXML SlideShare:
http://www.slideshare.net/search/slideshow?q=usixml

-

UsiXML PlayList:
http://www.youtube.com/playlist?list=PLn_SfKW8yXZAVuESKWEKUqw
RQa16ORCi6

-

UsiXML Twitter:
https://twitter.com/usixml


Thank you very much for your
attention!


Towards Standardisation in User Interface Development: the UsiXML Contribution

Recommandé

Recommandé

Contenu connexe

Similaire à Towards Standardisation in User Interface Development: the UsiXML Contribution

Similaire à Towards Standardisation in User Interface Development: the UsiXML Contribution (20)

Plus de Jean Vanderdonckt

Plus de Jean Vanderdonckt (20)

Dernier

Dernier (20)

Towards Standardisation in User Interface Development: the UsiXML Contribution