Expérience utilisateur et conception d'interfaces pour les logiciels techniques

Conception d'un logiciel de simulation professionnelle

Utilisateurs professionnels

Design UX

Design UI

CLIENTGexcon
LOCATIONLondon, UK
TEAMUX designer, UI designer, designer d'interaction, chef de projet, product owner, chercheur.
WEBSITE

Ce logiciel est reconnu comme étant le logiciel de dynamique des fluides le plus puissant grâce à ses capacités de simulation. Ce n'est pas une surprise, puisqu'il a été créé dans les années 90 par l'Institut Chr. Michelsen pour la science.

Cependant, le problème est le suivant : les utilisateurs initiaux sont maintenant à la retraite et leurs homologues plus récents préfèrent des logiciels moins performants en raison de processus d'apprentissage plus faciles.

Ce problème les a amenés à faire appel à notre agence de design UX. Nous avons été chargés de repenser l'ensemble de l'expérience utilisateur et, par conséquent, d'offrir au logiciel 25 années supplémentaires sur l'étagère.

NOS CONTRIBUTIONS

Cartographie des exigences

Recherche sur les utilisateurs

Benchmarking

Design UX

Prototypage

UI Design - Light and Dark

Design System

Assurance qualité

BRISER LE CERCLE VICIEUX DE L'INTERDÉPENDANCE

Le logiciel existait depuis 25 ans et son histoire se manifestait sous la forme d'un réseau d'interdépendances complexes. Comment surmonter cela en tant que concepteur UX ?

Tout d'abord, nous avons convaincu les chefs de produit que si nous devions concevoir pour l'avenir, nous devrions aller au-delà de leurs intuitions sur les besoins des utilisateurs dans le passé.

Nous avons entrepris quatre semaines de recherche sur les utilisateurs et avons cartographié les besoins des futurs utilisateurs. La deuxième astuce que nous avons utilisée dans notre processus a consisté à commencer par le milieu avant de nous lancer dans une conception imprévisible de bout en bout. Nous avons identifié 10 défis clés en matière de conception UX et développé quelques solutions possibles pour chacun d'entre eux - en six semaines, nous avons tracé un espace d'options en matière de conception UX.

Les deux parties étaient satisfaites : les prémisses de la transformation UX étaient en place et la compréhension des besoins des utilisateurs, orientée vers l'avenir, les soutenait. De plus, nous avions une idée approximative de ce à quoi pourraient ressembler les zones clés de l'interface utilisateur, ce qui nous a aidés dans notre démarche de conception.

Diagramme montrant le processus de conception de l'UX et de l'UI pour les logiciels techniques.
Quotes
Je n'arrive pas à croire tout ce que vous avez appris en trois jours, même certains des experts que je forme ont besoin de plus de temps.
UX research user
Franz Zdravistch
Ph.D.​​ Chief Training Engineer

COMPRENDRE 15 ANS DE DETTE TECHNIQUE

On dit que "les concepteurs détestent la dette technique et préfèrent une ardoise vierge".

Ce n'est pas le cas pour notre agence de design UX. L'histoire est et sera toujours une riche source d'information qui ne demande qu'à être utilisée pour la conception de logiciels professionnels.

La question est la suivante : comment assimiler autant de choses en si peu de temps ? On s'assoit et on apprend.

La force réside dans l'apprentissage autonome, ce qui, dans le cas de ce projet de conception, signifie : lire les manuels, étudier avec des tutoriels sur Youtube, effectuer des tests/exercices dans le logiciel et, surtout, se poser beaucoup de questions.

Nous avons posé ces questions aux principales parties prenantes. Certaines d'entre elles étaient destinées aux chefs de produit, d'autres aux développeurs. En fin de compte, au cours d'une semaine, ils ont passé environ quatre heures avec nous. C'était précisément assez pour nous permettre de démarrer.

Captures d'écran d'une ancienne interface utilisateur d'un logiciel de simulation CFD.

LA CARTOGRAPHIE DES BESOINS DES UTILISATEURS PROFESSIONNELS

Les utilisateurs professionnels de logiciels ont des besoins complexes. Les flux de travail comportent de nombreuses étapes et sont rarement linéaires. Les utilisateurs veulent et doivent faire beaucoup de choses différentes. Cependant, aucun modèle ne semble exister. Toutes les interactions, contrairement aux tableaux de bord du web, se font sur un seul écran, sans pages liées.

Les chefs de produit peuvent sembler avoir une connaissance approfondie d'une routine, mais ils ne saisissent qu'une fraction de la diversité réelle des besoins des utilisateurs.

Sachant cela, nous nous sommes engagés avec de vrais utilisateurs pour découvrir les nuances nécessaires. En nous appuyant sur notre expérience en matière de recherche sur les utilisateurs et de recherche technique, nous avons abordé le projet de manière pragmatique et efficace.

Diagramme d'analyse des besoins des utilisateurs pour la conception de l'interface graphique d'un logiciel complexe.
Graphique abstrait avec un cube sombre et une sphère claire pour briser une étude de cas UX.

LA RECHERCHE RÉVÈLE DES OPPORTUNITÉS DE PRODUITS

Les parties prenantes ont été surprises lorsque l'étude a révélé que certaines fonctionnalités, les plus coûteuses à entretenir, n'étaient guère importantes pour les utilisateurs

Cet exemple montre clairement que repenser le concept d'un produit est payant à long terme, même s'il subit des changements mineurs ou majeurs. L'exercice ne prend pas beaucoup de temps, mais il apporte beaucoup de valeur :

• Elle aligne les délais de développement sur les besoins du marché ; • Elle permet d'éviter le gaspillage des ressources ; • Elle révèle les priorités relatives, ce qui permet de prendre des décisions de conception plus tard dans la phase de conception ; • Elle ravive l'enthousiasme de l'équipe pour le travail difficile qui l'attend ; • Elle aide le marketing à comprendre comment le produit sera utile aux clients à l'avenir.

Ne serait-il pas étrange que les logiciels professionnels restent inchangés alors que la conception, le code, les utilisateurs et même le monde entier évoluent et changent ?

Diagramme qui détaille les caractéristiques d'un logiciel professionnel technique dans le processus de développement d'un produit.
Diagramme montrant le processus de conception de mini-prototypes pour l'interface utilisateur d'un logiciel professionnel.

L'EXPLORATION DE LA CONCEPTION À L'AIDE DE MINI-PROTOTYPES

Au lieu de nous lancer tête baissée dans un long processus de conception, nous avons pris six semaines pour forger l'ossature de la nouvelle interface utilisateur. Notre approche était inattendue.

Nous avons identifié les dix principaux défis liés à l'interface utilisateur qui déterminent l'expérience utilisateur de l'ensemble de l'application. Ensuite, nous avons créé une série de mini-prototypes pour chaque défi et cartographié les options de conception disponibles.

En six semaines, nous avons développé un total de 45 solutions. Nous avons recueilli les réactions des utilisateurs, des ingénieurs et des parties prenantes. Ensuite, nous avons soigneusement examiné les avantages et les inconvénients de chaque solution. Cette comparaison nous a permis de déterminer celles qui fonctionnaient bien ensemble.

Au bout de six semaines, nous avions mis au point l'ossature de l'expérience utilisateur du logiciel, sur la base de tests, d'expériences et de données factuelles. C'est à ce moment-là que le reste du processus de conception devient prévisible.

Un briefing écrit pour la conception d'un composant d'interface utilisateur pour un logiciel technique

LE DESIGN UX INTELLIGENT SE DÉCOUVRE, IL NE SE CRÉE PAS

Comme tout résultat d'efforts d'ingénierie, une interface utilisateur doit refléter la réalité. Elle est censée être basée sur les besoins quotidiens des utilisateurs, sur ce que le code peut faire et sur ce qui se vend sur le marché.

Les avantages de la cartographie des options de conception pour les parties les plus importantes de l'expérience de l'utilisateur sont les suivants : • Elle permet d'établir des faits qui serviront de base à la conception ; • Elle apporte de la clarté à toutes les parties prenantes grâce à des éléments visuels ; • Elle va au-delà des clichés, contrairement à un processus linéaire ; • Elle favorise la cohérence ;

En fin de compte, cette approche de la conception de l'expérience utilisateur rend le développement de produits prévisible tout en résolvant le dilemme de la poule et de l'œuf que représente la transformation d'interfaces utilisateur de logiciels professionnels complexes.

01 /06
arrow left
arrow right

DANS LA CONCEPTION DE L'EXPÉRIENCE UTILISATEUR DE BOUT EN BOUT

Après avoir établi le concept de base pour les 20 % les plus délicats de l'expérience utilisateur, il restait à traiter les 80 % restants.

Il nous a fallu quatre mois pour développer l'expérience utilisateur de bout en bout pour l'ensemble de l'application logicielle et de ses modules.

À ce stade de l'aventure, tout était prévisible et il n'y a guère eu de surprises notables pour l'équipe produit. Cependant, en coulisses, nous avons dû relever des défis chaque semaine. Notre objectif était de faire en sorte que l'interface intègre toutes les fonctionnalités de manière transparente.

Au cours de cette phase, nous avons produit des wireframes et des prototypes haute-fidélité. Cependant, l'essentiel était de recueillir des commentaires et d'itérer sur les conceptions afin de couvrir toutes les bases.

L'ÉQUILIBRE ENTRE LA ROBUSTESSE DE LA MISE EN PAGE ET LA FLEXIBILITÉ

Les logiciels professionnels sont délicats parce que, essentiellement, il n'y a qu'une seule vue et non une série de pages. Par conséquent, cette vue unique doit prendre en compte toutes les fonctionnalités du logiciel, tant actuelles que futures.

En tant que concepteurs, nous nous efforçons d'élaborer une mise en page et une architecture de l'expérience utilisateur qui présentent une structure logique. Cela aide les utilisateurs à utiliser leur intuition lorsqu'ils se demandent "où est quoi" et "que se passe-t-il si".

En même temps, nous visons la flexibilité - une interface utilisateur qui s'adapte à toutes les fonctionnalités à tout moment. En outre, l'interface utilisateur d'un logiciel professionnel doit être pratique dans tous les cas d'utilisation, en évitant une approche rigide.

Quatre mois de travail acharné ont été nécessaires pour trouver le juste équilibre entre robustesse et flexibilité.

LA VISUALISATION DES DONNÉES ET DES DÉTAILS TECHNIQUES

Pour rendre ce logiciel technique convivial, il fallait visualiser les données d'une manière adaptée aux ingénieurs. Il a également fallu concevoir des composants d'interface utilisateur qui expriment clairement les concepts techniques. Par exemple :

• Définition des paramètres du scénario ; • Diagrammes de vent ; • Mélanges chimiques ; • Bibliothèques de textures ; • Points de contrôle ; • Aperçu du projet ; • Barres d'état ; • Filtrage ;

Une fois de plus, notre approche de la conception consistant à proposer des options a donné d'excellents résultats. Cela a permis de comparer facilement les différentes options de conception sur la base de leurs mérites réels : "Est-ce qu'elles aident les utilisateurs techniques à comprendre plus facilement, ou pas ?

Ce processus permet d'obtenir de petits détails de conception qui non seulement améliorent l'expérience de l'utilisateur, mais s'intègrent également de manière transparente dans le cadre général, en améliorant l'humeur des utilisateurs et en garantissant une expérience cohérente.

Capture d'écran d'une interface utilisateur pour un logiciel de simulation technique, avec un composant de l'interface utilisateur mis en évidence
Composant d'interface utilisateur permettant de définir le mélange d'une substance chimique, en parallèle avec un diagramme de paramètres.
Diagramme expliquant un principe de conception de l'interface utilisateur appelé convention mnémotechnique

CONCEPTION MÉTICULEUSE DES COMPOSANTS DE L'INTERFACE UTILISATEUR

La conception de l'interface utilisateur du logiciel professionnel a été élaborée sur la base de principes utiles afin de garantir une cohérence qui satisfasse les utilisateurs techniques.

Par exemple, lors de la conception de composants pour l'interaction avec la géométrie 3D, nous avons utilisé des principes de couleur qui soutiennent la mémoire. En outre, notre grille garantit la cohérence des composants de l'interface utilisateur, quelles que soient les interactions des utilisateurs avec la géométrie 3D.

Nous avons itéré sur plusieurs options de conception de l'interface utilisateur, en expérimentant diverses combinaisons de traits et d'opacités. Nous avons ensuite testé les composants dans tous les scénarios possibles afin de déterminer la solution optimale. Cette recherche permet de s'assurer qu'aucun élément indésirable ou défectueux de l'interface utilisateur n'est présent dans l'une ou l'autre des variantes.

La conception de l'interface utilisateur va au-delà d'une simple application des couleurs de la marque. Au contraire, elle améliore activement le flux de travail de l'utilisateur tout en conférant au logiciel un aspect et une convivialité intemporels.

Diagramme montrant comment l'agence de design a développé et testé un composant d'interface utilisateur pour un logiciel

SOUTIEN AUX DÉVELOPPEURS DE LOGICIELS

L'interface utilisateur a été conçue pour être réactive et facilement extensible en vue de développements futurs. Pour s'assurer que la conception fonctionne de manière transparente dans des scénarios réels, nous avons fourni aux développeurs une assistance complète.

Par exemple, au lieu de fournir de vagues principes et de laisser les développeurs découvrir par eux-mêmes comment les appliquer lorsqu'ils codent, nous avons proposé un système de conception qui offre une vue d'ensemble de tous les scénarios possibles. Il comprend des exemples détaillés pour garantir que l'interface utilisateur fonctionne efficacement dans toutes les circonstances.

En entrant dans ce niveau de détail, nous nous assurons que le système sous-jacent de la conception est logique et couvre tous les cas. En fournissant aux développeurs une exposition détaillée au système, nous avons rationalisé leurs efforts, leur permettant de se concentrer uniquement sur le codage.

Capture d'écran d'un système de conception détaillée d'un logiciel natif utilisé par des professionnels.
Diagramme comparant le mode clair et le mode foncé d'une interface graphique créée par une agence de design UX

CONCEPTION D'UNE INTERFACE UTILISATEUR CLAIRE ET SOMBRE

Nous avons développé l'interface utilisateur de ce logiciel professionnel avec des variantes sombres et claires. Cela permet de répondre aux besoins de différentes cohortes d'utilisateurs qui travaillent dans des environnements très différents.

Un système de règles est en place pour établir la connexion directe entre les états de l'interface utilisateur. Ainsi, chaque couleur dans le mode clair de l'interface utilisateur a son équivalent dans le mode sombre de l'interface utilisateur. Cette relation est basée sur une formule.

Les définitions cohérentes des couleurs garantissent qu'il n'y aura pas d'incohérence lors du passage d'un mode d'utilisation clair à un mode d'utilisation foncé.

Cette approche allège également la charge de travail des développeurs, en éliminant la nécessité de coder des interfaces utilisateur distinctes.

Sombre
Lumière
Capture d'écran d'un système de conception détaillée d'un logiciel natif utilisé par des professionnels.
Éléments de design

CONCEPTION DE L'INTERFACE UTILISATEUR ET DE L'INTERFACE GRAPHIQUE POUR LES LOGICIELS PROFESSIONNELS

Compte tenu de la riche histoire de ce logiciel professionnel, l'ambition principale de ce projet était de réinventer l'interface utilisateur tout en préservant les fonctionnalités qui ont résisté à l'épreuve du temps.

Le principal défi consistait à gérer la complexité du système. Cela a introduit de l'incertitude dans le projet de transformation UX.

Nous avons mis en place des phases échelonnées dans le temps afin d'atténuer la complexité. Au cours de ces sessions, nous avons étudié des solutions potentielles pour les principaux défis en matière d'interface utilisateur. En l'espace de deux mois, nous avons atteint un point où la feuille de route en matière de conception et de développement pour l'année suivante est devenue prévisible.

La phase finale a été centrée sur un travail précis et méticuleux pour déployer l'interface utilisateur envisagée. Il s'agissait d'étudier les détails techniques et de travailler avec les utilisateurs techniques pour déterminer quels composants expressifs pouvaient s'intégrer dans la structure flexible de l'interface utilisateur.