# Fonctions d'utilisabilité dans les studios de conception de langages dédiés graphiques

Théo Giraudet, Pierre-Charles David

<figure><img src="image_1.png" /></figure>

To cite this version:

Théo Giraudet, Pierre-Charles David. Fonctions d'utilisabilité dans les studios de conception de langages dédiés graphiques. IHM 2023 - 34e Conférence Francophone sur l'Interaction Homme-Machine, Apr 2023, Troyes, France. pp.1-2. hal-04164888

HAL Id: hal-04164888

https://inria.hal.science/hal-04164888

Submitted on 18 Jul 2023

HAL is a multi-disciplinary open access
archive for the deposit and dissemination of sci-
entific research documents, whether they are pub-
lished or not. The documents may come from
teaching and research institutions in France or
abroad, or from public or private research centers.

L'archive ouverte pluridisciplinaire HAL, est
destinée au dépôt et à la diffusion de documents
scientifiques de niveau recherche, publiés ou non,
émanant des établissements d'enseignement et de
recherche français ou étrangers, des laboratoires
publics ou privés.

<figure><img src="image_2.png" /></figure>

Distributed under a Creative Commons Attribution 4.0 International License
# Fonctions d'utilisabilité dans les studios de conception de langages dédiés graphiques

Théo Giraudet
Obeo
Nantes, France

**ACM Reference Format:**

Théo Giraudet and Pierre-Charles David. 2023. Fonctions d'utilisabilité dans les studios de conception de langages dédiés graphiques. In *Proceedings of Atelier GL-IHM à IHM 2023 (GL-IHM – IHM 2022)*. ACM, New York, NY, USA, 2 pages. https://doi.org/10.1145/nnnnnnn.nnnnnnn

Pierre-Charles David
Obeo
Nantes, France

## 1 INTRODUCTION

Cet article présente des fonctions d'utilisabilité importantes dans le domaine de la conception de langages dédiés et de leurs environnements graphiques d'éditions. En exemple illustratif, l'article introduit Eclipse Sirius Web [2], une application Web open-source<fnref n="1" /> permettant la conception de studios de modélisation dédié. Dans un second temps, nous détaillons les fonctionnalités d'utilisabilité que nous considérons importantes pour l'utilisation d'environnements de modélisation dédiés comme ceux que Sirius Web propose de créer.

## 2 SIRIUS WEB

Sirius Web est une application Web développée par la société Obeo [2]. Sous-projet de Eclipse Sirius visant à porter Eclipse Sirius Desktop dans le web, Sirius Web permet à une personne nommée *spécifieur* de concevoir son propre langage dédié (*domain-specific language* – DSL) ainsi que l'atelier de modélisation correspondant.

Plus précisément, Sirius Web permet à un spécifieur de concevoir la syntaxe abstraite de son DSL (*méta-modèle*) de manière graphique à l'aide d'une représentation diagramme (cf. Figure 1). Sirius Web permet également au spécifieur de définir une ou plusieurs représentations graphiques (i.e. syntaxe concrète, e.g. diagrammes, formulaires) sur la base de la syntaxe abstraite précédemment définie. L'application utilise ces syntaxes abstraites et concrètes pour fournir à des utilisateurs de ces DSL un environnement graphique et interactif pour créer des modèles de ce DSL (cf. Figure 2). Sirius Web est donc à la fois l'environnement de conception et d'utilisation des langages. Pour finir, Sirius Web est conçu pour permettre une collaboration en temps réel.

## 3 FONCTIONS D'UTILISABILITÉ

Sirius Web est une application hautement interactive nécessitant, entre autre, des fonctions d'utilisabilité propres au domaine de la modélisation graphique de diagrammes. Toutes celles énumérées par la suite ne sont pas nécessairement présentes dans Sirius Web mais sont considérées comme importantes pour le domaine que l'application couvre.

**Faciliter la lisibilité.** Une notion importante des diagrammes est celle de disposition (*layout*) [3]. La disposition libre, décidée par l'utilisateur est une fonction qui peut être importante pour que celui-ci organise le diagramme au plus proche de la représentation mentale qu'il en a. L'outil peut cependant proposer l'application d'un layout automatique pour réorganiser le diagramme. En autres fonctionnalités, citons par exemple le zoom sémantique [1] ou la possibilité de cacher, estomper manuellement des entités ou relations pour les diagrammes les plus conséquents.

**Faciliter la navigation.** Les diagrammes viennent également avec des fonctions d'utilisabilité spécifiques à la navigation [1] : déplacement libre dans le diagramme (*ascenseurs*, *pan*), zoom, récentrage du diagramme ou encore mise en évidence de l'élément sélectionné/survolé.

**Efficacité de l'édition.** Comme tout environnement d'édition, l'amélioration de l'efficacité lors de l'édition de diagrammes est un point crucial. Citons par exemple le connecteur magique (*fonctionnalité* qui connecte les entités en respectant la sémantique définie); palette d'outils; édition directe; raccourcis clavier; co-pier/coller/dupliquer (*syntaxe* ou *sémantique*); sélectionner toutes les entités (et/ou toutes les relations).

**Capacité de prise en main.** Apprendre un nouveau langage dédié et à l'éditer dans son environnement est une tâche cognitive importante qui peut être aidée par des fonctionnalités d'utilisabilité. Citons par exemple la proposition de templates côté utilisateurs pour démarrer un projet sans partir de zéro; les tooltips.

## 4 DÉFIS

L'ajout de fonctions d'utilisabilité pour une application comme Sirius Web implique différents défis.

**Toolkits incomplets.** Les toolkits open-source dédiés à la définition graphique de diagrammes offrent peu des fonctionnalités mentionnées dans la section précédente. Cela implique du développement ad-hoc chronophage lors du développement de Sirius Web. Elles se limitent aux fonctions premières de l'édition de diagrammes (opérations CRUD par exemple), fonctionnalités qui doivent être complétées par Obeo. Ces toolkits proposent par conséquent peu de support pour les fonctionnalités annexes telles que les fonctions d'utilisabilité.

<footnote n="1">1. https://github.com/eclipse-sirius/</footnote>

<footnote>Permission to make digital or hard copies of all or part of this work for personal or classroom use is granted without fee provided that copies are not made or distributed for profit or commercial advantage and that copies bear this notice and the full citation on the first page. Copyrights for components of this work owned by others than ACM must be honored. Abstracting with credit is permitted. To copy otherwise, or republish, to post on servers or to redistribute to lists, requires prior specific permission and/or a fee. Request permissions from permissions@acm.org.</footnote>

<footnote>GL-IHM – IHM 2022, 3 Avril 2023, Troyes, France</footnote>

<footnote>© 2023 Association for Computing Machinery.</footnote>

<footnote>ACM ISBN 978-x-xxxx-xxxx-x/YY/MM. $15.00</footnote>

<footnote>https://doi.org/10.1145/nnnnnnn.nnnnnnn</footnote>
<figure><img src="image_3.png" /><figcaption>FIGURE 1: Vue spécifieur de Sirius Web – dans la partie « Explorer » de l’interface, « Pokemon Domain » est la syntaxe abstraite construite par le spécifieur et « Pokemon View » est la syntaxe concrète (représentation diagramme) pour le dit modèle. Au centre, la représentation graphique du méta-modèle.</figcaption></figure>

<figure><img src="image_4.png" /><figcaption>FIGURE 2: Vue utilisateur de Sirius Web – dans la partie « Explorer » de l’interface, le modèle conçu par l’utilisateur conforme au DSL du spécifieur. Au centre, la représentation graphique du modèle de l’utilisateur.</figcaption></figure>

**Faire des fonctions d’utilisabilité génériques.** La création d’environnements de modélisation dédiés implique également des fonctions d’utilisabilité suffisamment génériques pour s’appliquer à n’importe quel domaine. Un autre défi relève alors d’une part de déterminer quelles sont ces fonctions d’utilisabilité que l’outil doit proposer et d’autre part de rendre celles-ci configurable par le spécifieur de façon à ce qu’il puisse les adapter à son besoin.

## RÉFÉRENCES

[1] Arnaud Blouin, Naouel Moha, Benoit Baudry, Houari Sahraoui, and Jean-Marc Jézéquel. 2015. Assessing the Use of Slicing-based Visualizing Techniques on the Understanding of Large Metamodels. Information and Software Technology 62, 0 (2015), 124–142. https://doi.org/10.1016/j.infsof.2015.02.007

[2] Obeo. 2023. https://www.eclipse.org/sirius/sirius-web.html

[3] Harald Störrle. 2012. On the Impact of Layout Quality to Understanding UML Diagrams: Diagram Type and Expertise. In IEEE Symposium on Visual Languages and Human-Centric Computing, 2012. 49–56.