Towards Standardisation in User Interface Development: the UsiXML Contribution

Towards Standardisation in User Interface Development: the UsiXML Contribution

David Faure1, Jean Vanderdonckt2, and the UsiXML Consortium1Thales Research & Technology, France

2Université catholique de Louvain, Louvain School of Management, Belgium

[email protected], [email protected]://fr.slideshare.net/jeanvdd/faure-vanderdonckt-cosummit2013

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

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

- Contents- Output- Comparison

- What's next?


What is standardisation in UI dev.?- Standardisation is the process of developing and

implementing technical standards, e.g., for- Independence, interoperability, reusability,…

- Standardisation is everywhere in- 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


What is standardisation in UI dev.?- 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"




- What's next?


Why and how to standardise?- 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


Why and how to standardise?- 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


Why and how to standardise?- 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


Why and how to standardise?- 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)- …




- What's next?


Goals

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

μ7


μ Modality

•New contexts and constraints imposed to use various modalities

μ Context

μ Device

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

μ Organization

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

μ User

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

μ Linguality

μ Platform

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

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

•Cross Platform consumer & user behaviour

UI Market trends& UsiXML Market positioning


Task & Domain (T&D)

Cameleon Reference Framework in UsiXML

Final User Interface (FUI)

WindowWindow Concrete User Interface (CUI)

AICfacet=control

AbstractIndividualContainer Abstract User Interface

(AUI)

textInputtextInput buttonbutton buttonbutton

AICfacet=control

AICfacet=control

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


The Cameleon Reference Framework (CRF)

17


Concrete User Interface (CUI)

Abstract User Interface (AUI)

Task & Domain (T&D)

Context of use

User

Platform

Environment




Task & Domain (T&D)

Context of use

User

Platform

Environment

Recommended by





Task & Domain (T&D)

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

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

Recommended by

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


What is UsiXML?- 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


What is UsiXML?- 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


What is UsiXML?- UsiXML dev. method is structured as follows

Models

Specification language

Step-wise method

Software toolssupport

involves

described in

Development method


Forward Development Method

22

Domain Model

Task Model

Context Model

Mapping Model

Abstract User Interface

UsiTask editor

UsiDomain editor

UsiContext editor UsiAbstract gen./editor

Forward Development Method


23

ConcreteUser Interface

WindowBuilder (WB) as CUI editor

XWT meta-model adapted

Developed MT4j widgets integrated in WB

XWT implementation + « hand coded »

Interactive interface

UsiConcrete gen./editor

Some UsiXML software- 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.

Some UsiXML software- 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

Some UsiXML software- UsiWSC: Usable User Interface for Interactive

Web Service Composition


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.

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

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

Some UsiXML software- 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.

Some UsiXML software- UsiDistrib: Distributed User Interfaces across

devices


Name Effect

Display Display an item in one or more UIs

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

3 roles:The drawerThe observerThe guesser

Some UsiXML software- UsiKiosk: Distributed User Interfaces across

devices (by See & Touch)


Some UsiXML software- UsiExplain: Self-explanatory user interfaces by

model-driven engineering (by UJF)


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

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

Some UsiXML software- SECRET: reverse engineering of GUIs (by UCLM)


Some UsiXML software- UsiResourcer: reverse engineering of GUIs from

their resource file


Executable

Interactive

application

Final U

I le

vel

Concr

ete

UI

level

Resourcedecompilati

on

UsiResourcer:Resource recovery

Resource

files

CUI model

New Re-

sourcefile

GrafiXML:

CUI Modelediting

New Executab

leInteracti

ve applicati

on

Resource recompilati

on

New CUI

model

GrafiXML: GUI

generation

New GUI

Phase 2:Modeling the source

GUI

Phase 1: Resource decompilation

resource

model

Phase 3: Resource to CUI M2M

transformation

Phase 4: Forward engineering

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.

Some UsiXML software- UsiView: animated transition between UsiXML

and code


Conceptualview

a

Internalview

b

Externalview

c

Animated transition between conceptual and external views

Animated transition between internal and external views

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.

Some UsiXML software- UsiCentral: Authoring environment (by

www.defimedia.be)



UsiXML End User Club

Befor

e 17

-Juil

17-ju

il.

25-ju

il.

23-a

oût

22-s

ept.

13-o

ct.

18-o

ct.

7-no

v.

23-d

éc.

15-fé

vr.

20-fé

vr.

19-a

vr.

7-m

ai

11-ju

in

3-ao

ût

05-s

ept

28-s

ept

17-o

ct

07-n

ov

02-d

éc

07-ja

nv

01-fé

vr

13-m

ars

0

10

20

30

40

50

60

70

Number of End User Club members

ObserversSupportersPromoters

Num

ber

of

mem

bers


Observers


Supporters


Promoters




- What's next?

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


7 Standardisation actions: comparison

- 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


7 Standardisation action• 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.



7 Standardisation actionsW3C 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• …


7 Standardisation actionsISO 24744 deliverables:

• Meta-model, graphical notation, …

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

endeavour

method

metamodelActivity

WorkUnit

Task Technique

* *

methodologies assessment quality tools


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




- What's next?


What's next?- 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


More information- The ITEA2 UsiXML fiche: http://www.itea2.org/project/index/view/?

project=1127

- The UsiXML project web site:www.usixml.eu

- 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_SfKW8yXZAVuESKWEKUqwRQa16ORCi6 - UsiXML Twitter:

https://twitter.com/usixml

3689 visitors in 2012

http://www.itea2.org/project/index/view/?project=1127

http://www.itea2.org/project/index/view/?project=1127

http://www.usixml.eu/

http://www.usixml.org/

https://www.facebook.com/UsiXML



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



http://www.youtube.com/playlist?list=PLn_SfKW8yXZAVuESKWEKUqwRQa16ORCi6

http://www.youtube.com/playlist?list=PLn_SfKW8yXZAVuESKWEKUqwRQa16ORCi6




Thank you very much for your attention!

Towards Standardisation in User Interface Development: the UsiXML Contribution

Technology

Transcript of Towards Standardisation in User Interface Development: the UsiXML Contribution