Je crée de nombreuses interfaces utilisateur en utilisant JSL, certaines simples et d'autres beaucoup plus compliquées, mais la plupart suivent des principes similaires : les scripts utilisent des modèles similaires, ils ont une mise en page similaire sur le lanceur, les rapports se ressemblent, etc.
Dans cette présentation, je montre comment j'utilise JSL pour créer des interfaces utilisateur de type JMP, les types de modèles que j'utilise généralement et les choix que je fais lors du développement de ces plateformes. Je présente également différents types de boîtes d'affichage, la création d'une interface utilisateur avec JSL, les modèles de script, le processus de décision que j'applique lors de la création d'interfaces utilisateur, ainsi que des conseils et des bonnes pratiques pour la programmation JMP.
Bienvenue à ma présentation par affiche sur la création d'interfaces utilisateur avec JSL structuré. Pour vous donner un peu de contexte, je travaille dans le secteur de l'électronique en Finlande, plus précisément comme spécialiste en intégration et science des données au sein d'une équipe dédiée. Une de mes missions consiste à créer des applications JMP personnalisées. Cette affiche porte sur la manière dont je les crée, ou plutôt dont je structure leur contenu. Initialement prévue comme un article, cette présentation a dû être retravaillée rapidement, mais le résultat final devrait convenir.
Commençons sans plus tarder. Le point le plus important de cette affiche est, à mon avis, de s'inspirer des plateformes JMP. En effet, les utilisateurs les connaissent très bien. Si vous organisez votre contenu de la même manière que JMP, ils prendront en main vos outils beaucoup plus rapidement.
Voici un exemple de la plateforme JMP. Il s'agit ici d'une distribution très simple. À gauche, le lanceur et à droite, le rapport. Le lanceur et le rapport affichent l'icône du titre de la fenêtre. JMP organise le contenu dans des panneaux. À gauche, vous générez des sélecteurs de colonnes dans le sélecteur de colonnes de filtre. En dessous, vous trouverez parfois des options supplémentaires.
Au centre, vous trouverez ces boutons. Les deux boutons suivants sont des listes déroulantes permettant à l'utilisateur de sélectionner les colonnes à analyser ou sur lesquelles il souhaite effectuer des actions. Leur nom indique clairement à quoi servent ces colonnes. À droite, vous trouverez les boutons d'action.
Dans les rapports, la structure est généralement très verticale. Ici, j'ai opté pour des statuts afin de faciliter la compréhension de mon point de vue. Le contenu est organisé selon une structure parent-enfant, une structure hiérarchique, et est généralement encadré par des triangles rouges. Nous testons ce type de structure car les utilisateurs peuvent accéder à l'architecture et aux analyses à partir de ces triangles rouges. Le contenu est organisé, avec des encadrés thématiques, des tableaux, etc. Ce type de structure est familier aux utilisateurs de JMP.
Lorsque vous concevez votre outil et pensez à vos utilisateurs, imaginez comment ils l'utiliseront. Pour cela, vous pouvez utiliser des storyboards, par exemple. Le résultat n'est pas forcément identique à ce diagramme. Vous pouvez opter pour un format de type bande dessinée. Nous proposons également ce type d'interface : l'utilisateur commence par une vue, puis clique sur un élément pour afficher la vue suivante, et ainsi de suite.
Lors de la conception de ce système, il est utile de réfléchir au fonctionnement de la plateforme JMP, car cela permet de retrouver des connaissances de base. Je ne détaillerai pas ce point. Il s'agit simplement d'un exemple de mise en œuvre.
Quelques exemples de maquettes. Une démonstration rapide ou une première ébauche de votre interface. Ici, j'ai une version papier très simple. J'aime commencer par celle-ci. Elles sont très rapides à modifier, à mettre à jour si nécessaire, et on peut en recréer une si quelque chose ne va pas. En général, je consulte rapidement un membre de l'équipe JMP. Celle-ci est très simpliste, mais je peux la tester. Celle-ci fonctionne, celle-ci ne fonctionne pas, et je la modifie si besoin. Je peux peut-être utiliser mon modèle pour en créer une version plus épurée afin de voir à quoi elle ressemblerait en réalité.
Maquette suivante. Même zone, on commence avec du papier, puis j'ai utilisé un outil différent : Excalidraw. Création d'une maquette. J'aurais pu ajouter des notes, et ainsi de suite, ainsi qu'un prototype JMP un peu plus avancé, à titre de démonstration. Ceci provient déjà de l'application prototype, mais vous pouvez en reproduire une partie.
Il y a un filtre de données, puis un outil de création de graphiques. Cet outil peut être totalement indépendant. Il contient des images provenant d'ailleurs. Si vous venez de configurer cette mise en page, déplacez ces images vers un outil distinct. J'utiliserai probablement PowerPoint. Il est facile de les déplacer. Vous pouvez structurer le tout et obtenir ainsi une meilleure vue d'ensemble de l'interface utilisateur.
Ensuite, pensez à utiliser des modèles et n'oubliez pas l'expérience utilisateur. J'utilise moi-même des modèles de style de script. Leur principal intérêt est de développer des applications plus rapidement. Ces modèles sont plus robustes et offrent un rendu plus professionnel. À noter également que je ne conçois pas mes interfaces pour des résolutions supérieures ou inférieures à la Full HD, car la plupart des utilisateurs privilégient encore cette dernière.
L'expérience utilisateur. JMP étant un outil très interactif, il est essentiel de prendre en compte l'expérience utilisateur, et pas seulement l'interface. Voici quelques exemples de mauvaise expérience utilisateur : les fenêtres de démonstration. Par exemple, pour le partage de réseau local, une fenêtre de démonstration s'affiche ; l'utilisateur ne peut pas revenir au tableau de données pour identifier les colonnes pertinentes. Il doit d'abord fermer le lanceur, fermer le tableau, puis relancer le lanceur. À mon avis, c'est une mauvaise expérience.
Autre point à noter : les fenêtres ont tendance à se redimensionner si des cadres de dessin extensibles sont utilisés. Je préfère conserver des tailles de fenêtre fixes après leur création, puis utiliser une barre de défilement pour se déplacer. Enfin, les barres d'outils et les menus restent accessibles à l'utilisateur, car JMP permet de lancer plusieurs plateformes. On peut avoir une plateforme ouverte, accéder au menu de la barre d'outils et lancer la plateforme suivante, ce qui accélère considérablement l'analyse.
Comparaison de mes plateformes et des plateformes JMP. En haut, les plateformes JMP. Ici, il s'agit d'une plateforme étroite, en bas. L'interface est assez similaire. À gauche, les sélecteurs de colonnes, puis les listes communes où l'utilisateur ajoute des éléments, et les actions à droite. La principale différence avec le lanceur, dans ce cas précis, réside dans le nom du tableau, actuellement en cours d'analyse. Sur les plateformes Manœuvre, le nom de l'application est généralement visible, ce qui n'est pas le cas ici.
Mais là, les différences sont plus importantes que dans nos rapports. Je n'ai pas besoin d'utiliser mes boîtes de dialogue, car j'ai déjà défini la quasi-totalité des options pour l'utilisateur. Il n'a pas besoin d'accéder aux menus à triangle rouge. Sur les plateformes JMP, il faut y accéder. Je peux utiliser les boîtes de page et les boîtes de feuille.
Je pense que le plus important, c'est que je peux… J'organise mon contenu horizontalement car nos écrans sont plus larges et plus hauts. De nombreuses plateformes JMP ont tendance à être très longues. Je préfère une disposition plus large car, étant donné leur petite taille, cela offre plus d'espace. De plus, le tableau et le nom de l'application sont visibles ici.
Voici un exemple d'application. Nous aurons deux exemples, mais j'en ai déjà présenté un peu plus. Il s'agit du script que l'utilisateur exécuterait pour lancer mon application. J'ai séparé les différentes parties du script, chacune ayant ses propres responsabilités. La configuration, les utilitaires et l'interface utilisateur sont dans des scripts distincts, ce qui, à mon avis, facilite leur gestion.
Ensuite, le script. Ce script principal contient un texte initial indiquant si la table est ouverte, si la fenêtre est déjà ouverte et si toutes ces conditions sont remplies, alors l'application est en cours d'exécution. Selon le résultat de la vérification, je peux afficher une erreur de fenêtre modale à l'utilisateur. Par exemple, si la fenêtre est déjà ouverte et qu'il ne s'agit pas d'une fenêtre modale, je ramènerai simplement l'application au premier plan afin que l'utilisateur puisse continuer à travailler.
Voici la fenêtre principale qui s'affiche après le lancement de l'application. Le code y est divisé en expressions distinctes. Il est beaucoup plus simple de gérer des expressions courtes en dehors de cette fenêtre que de longues expressions (pouvant contenir des centaines de lignes) dans une nouvelle fenêtre, généralement difficiles à gérer. Ces expressions courtes sont plus faciles à manipuler.
Il faudra peut-être parfois procéder à une évaluation et tester plusieurs compétences, mais en général, je pense que cette approche est préférable. Vous trouverez cet exemple au sein de la communauté, ainsi que quelques exemples supplémentaires tirés d'une présentation que j'ai faite à un groupe d'utilisateurs finlandais en 2023.
En résumé, voici quelques informations utiles : inspirez-vous des lancements et rapports de la plateforme JMP, car les utilisateurs les connaissent déjà. Ils s'habitueront ainsi plus rapidement à votre outil. Réfléchissez à la manière dont vos utilisateurs interagiront avec votre application. Créez des storyboards et des maquettes pour visualiser rapidement le rendu final. Ajoutez des modèles. Vous pouvez ainsi créer une application robuste et professionnelle avec des boucles. Familiarisez-vous avec les boîtes d'affichage les plus courantes et l'organisation du contenu en JSL.
JMP étant un outil très interactif, n'oubliez pas l'expérience utilisateur, car son interactivité est primordiale. Prenez en compte l'expérience utilisateur et l'interface. Merci.
