Fabien Sevestre
11 Juillet 2023
Le projet de refonte
La technologie du cloud a révolutionné la manière dont nous stockons, partageons et accédons à nos données. Cependant, avec l’évolution constante des besoins des utilisateurs et les avancées technologiques rapides, il est essentiel de revoir régulièrement les applications existantes afin de garantir une expérience utilisateur fluide et intuitive.
La refonte d’un logiciel de cloud va bien au-delà de la simple réécriture du code. Elle nécessite une attention particulière portée à l’interface utilisateur (UI) et à l’expérience utilisateur (UX). En effet, même le logiciel le plus puissant et fonctionnel peut être rapidement rejeté par les utilisateurs s’il ne parvient pas à offrir une expérience agréable et intuitive.
La refonte d’un logiciel de cloud offre une occasion unique d’innover et d’apporter des améliorations significatives à la façon dont les utilisateurs interagissent avec leurs données. Découvrez notre processus de refonte, explorant les étapes clé, les considérations importantes et les bénéfices tangibles d’une interface utilisateur optimisée et d’une expérience utilisateur améliorée dans le domaine du cloud.
Une approche centrée utilisateur
Actuellement le logiciel est essentiellement centré sur l’aspect fonctionnel de l’application, autrement dit, il est nécessaire que chaque fonctionnalité soit correctement développée en respectant un certain nombre de critères du point de vue sécurité.
Dans cette nouvelle version de Parsec Cloud, nous avons mis l’accent sur l’expérience et l’interface utilisateur, tout en gardant un niveau de sécurité optimal.
L’UX et l’UI
Ces deux termes sont devenus communs dans la conception d’application, de site ou encore plus généralement dans la création d’un produit. L’expérience utilisateur a comme intérêt de centrer l’utilisateur au cœur d’un projet. On va se préoccuper de ses besoins, ses attentes, sa façon d’interagir avec le produit. Il est essentiel de prendre en compte cet aspect. Chez Parsec Cloud, nous avons mis en place plusieurs méthodes afin de recentrer l’utilisateur.
Comme son nom l’indique, User Interface (UI) concerne la conception graphique de l’interface. Tout comme l’UX, l’interface va être adaptée aux utilisateurs. Cela signifie qu’il faut connaître le profil de l’utilisateur, les outils qu’il utilise, mais également sa tranche d’âge et bien d’autres critères.
L’UI va s’appuyer sur la charte graphique de l’application afin de créer une harmonie entre les différents produits. Cela va de même pour le responsive en version tablette ou encore mobile.
L’essence de la création
La refonte d’une application passe également par le contenu textuel de celle-ci. Il faut penser à la façon dont on s’adresse à l’utilisateur et si le langage est adapté selon ses connaissances sur le sujet. D’autre part, chez Parsec Cloud, nous utilisons le modèle Zero Trust afin de bénéficier d’un niveau de sécurité où nous pouvons faire confiance uniquement à l’utilisateur final. Pour atteindre ce niveau d’exigence en matière de sécurité, nous avons revu les mots et les tournures de phrases utilisés afin qu’ils soient plus simples à comprendre. Une fonctionnalité peut être très intuitive dans son exécution, si l’utilisateur ne la comprend pas, il va probablement trouver d’autre façon d’y remédier ou tout simplement passer à autre chose. C’est pourquoi le choix du langage va être primordial, et encore plus particulièrement dans notre cas avec le niveau de sécurité de l’application.
Création des parcours utilisateurs
En tant que designer produit, il est impératif de bien comprendre les fonctionnalités et leur mise en œuvre au sein de l’application. C’est pourquoi nous avons élaboré plusieurs parcours utilisateur afin d’identifier les aspects clés à améliorer dans la future interface.
L’une de ces fonctionnalités nécessitant une compréhension approfondie du produit concerne l’ajout d’un nouvel utilisateur à un espace de travail. Dans ce processus, l’invité et le propriétaire de l’espace doivent échanger des codes via divers modes de communication tels que les appels, les messages ou les rencontres en personne, afin de garantir l’identification correcte des parties impliquées.
Pour mener à bien ce projet de refonte, il était primordial de commencer par une analyse approfondie des interactions et des interfaces existantes. Cette étape vise à faciliter la compréhension des mécanismes existants, tout en préparant le terrain pour des améliorations significatives dans le cadre de la refonte.
Les scénarios utilisateurs
Les scénarios utilisateurs représentent une séquence d’actions décrivant comment les utilisateurs interagissent avec le produit dans divers contextes. Ils jouent un rôle crucial dans la compréhension de l’utilisation d’un produit par les utilisateurs et dans l’identification des problèmes potentiels auxquels ils pourraient être confrontés.
Lors de la phase de conception, ces scénarios se sont révélés particulièrement utiles pour la réalisation de tests de prototypes avec des utilisateurs. Cela a permis à nos équipes de développement de se concentrer davantage sur les aspects techniques en utilisant les retours des utilisateurs pour guider les améliorations.
Pour illustrer cela, nous avons choisi deux ensembles de scénarios. Le premier concerne l’introduction initiale de l’utilisateur à l’application, également connue sous le nom de processus d’onboarding ». Le deuxième scénario concerne l’utilisateur qui possède déjà des documents dans son espace de travail. Pour ce dernier exemple, nous avons pu découvrir comment l’utilisateur interagit pour :
- créer un espace de travail
- Ajouter des éléments (fichiers/dossiers)
- Ajouter des utilisateurs à rejoindre un espace
- …
En utilisant ces scénarios, nous avons pu explorer de manière approfondie les parcours et les besoins des utilisateurs, en veillant à ce que notre conception réponde efficacement à leurs attentes et résolve les problèmes potentiels rencontrés lors de ces étapes clé de l’expérience utilisateur. Toute cette partie de scénarios utilisateur a été notamment utile lors de la phase des tests utilisateur permettant de valider (ou non) nos hypothèses sur la facilité d’utilisation de l’application.
Création d’un design system
Un design system se compose d’un ensemble de règles et d’outils (UI kit, charte graphique, composants d’interfaces/de code…) permettant de renforcer la cohérence entre nos interfaces, assurer le maintien de l’application afin d’assurer un écosystème et une meilleure expérience utilisateur.
Autre particularité du design system, il va permettre de faire évoluer rapidement une application pour les futures pages/fonctionnalités. Il va être possible d’apporter des modifications dans l’ensemble de l’écosystème. De par sa modularité, il offre la possibilité de modifier par exemple la couleur des boutons d’action et de les mettre à jour partout où cet élément est utilisé sans avoir à modifier l’intégralité du contenu.
Avec le design system de Parsec, nous souhaitons assurer une expérience cohérence afin de pouvoir par la suite concevoir des nouvelles fonctionnalités telles que l’intégration d’une suite collaborative.
Nous avons utilisé le design atomic, pour la conception de la refonte de l’application. Ce principe, créé à l’origine par Brad Frost, met en avant une vision atomique se basant sur la science pour s’adapter au design.
Afin de préciser, l’atomic design va permettre de créer des interfaces (dans notre cas) à l’aide de multiples composants que l’on va venir imbriquer les uns dans les autres (atomes, molécules, organismes, templates et pages). D’autre part, ces composants ont l’avantage d’être facilement réutilisables et adaptables selon nos besoins
Dans notre cas, nous nous sommes basés sur l’application existante afin de définir la liste de composants nécessaires à la création de l’ensemble des interfaces (formulaire, toggle, boutons d’appel à l’action – CAT, …).
Maquettes de l’application
La conception des maquettes s’est déroulée en plusieurs étapes. Nous avons commencé par organiser des ateliers d’idéation au sein de notre équipe, en nous basant notamment sur les retours des utilisateurs de l’application existante. Ces ateliers ont permis de générer de nombreuses idées de fonctionnalités et d’améliorations.
Une fois que nous avions élaboré la structure de base de l’interface à l’aide de wireframes, nous avons pu passer à l’étape de création des maquettes. Nous avons utilisé l’ensemble des composants du kit d’interface utilisateur (UI kit), qui regroupe tous les éléments visuels et fonctionnels nécessaires au design. Cela nous a permis de concevoir les interfaces en intégrant les fonctionnalités spécifiques à chaque écran.
Pour mieux illustrer l’importance de la création des composants, nous vous présentons un aperçu de l’interface d’accueil lorsqu’un utilisateur est connecté. Sur la partie gauche, nous avons découpé la page en zones afin de mettre en évidence les différents composants qui la composent. Vous pouvez constater que l’interface est entièrement constituée de ces composants. Ainsi, toute modification apportée à l’UI kit se répercute automatiquement sur l’ensemble des interfaces, assurant ainsi une cohérence globale.
En créant une identité graphique cohérente pour l’application Parsec Cloud, notre objectif était de permettre aux utilisateurs de la reconnaître facilement et de l’utiliser de manière intuitive. Nous avons accordé une attention particulière à la sécurité des données et à l’ergonomie, deux aspects fondamentaux que nous avons souhaité placer au cœur du projet.
Particularités de création des interfaces mobiles
Concevoir une interface mobile conviviale est important. C’est pourquoi chaque aspect de notre application a été soigneusement conçu grâce à une recherche approfondie. Nous avons repensé entièrement notre application existante disponible sur Android en adoptant une approche de l’atomic design. Ce processus nous a permis de créer une interface optimisée, parfaitement adaptée aux besoins des utilisateurs.
Que vous utilisiez notre application pour la première fois ou que vous soyez un utilisateur expérimenté, notre processus d’onboarding intuitif vous guidera sans effort tout au long de votre expérience. Nous avons pris en compte les retours de nos utilisateurs pour concevoir des fonctionnalités exceptionnelles, vous offrant un accès sécurisé et simplifié à tous vos documents.
Nous avons également veillé à ce que notre application s’adapte à votre système d’exploitation préféré, qu’il s’agisse d’Android ou d’iOS. Chez Parsec Cloud, notre objectif est de faciliter votre utilisation, en vous offrant une expérience fluide et personnalisée, en accord avec vos habitudes.
Prototypage des scénarios
Le prototypage est une étape essentielle dans la conception d’une application, car il permet de visualiser et de tester l’ensemble des scénarios de l’application de manière interactive.
En créant le prototype de l’application, cela a permis d’obtenir une meilleure compréhension des fonctionnalités de l’application ainsi que des retours d’utilisateurs potentiels. En outre, le prototypage a facilité la collaboration entre les membres de l’équipe de développement en leur permettant de travailler ensemble sur un produit en cours de développement. En somme, le prototypage a été un outil précieux pour optimiser la qualité et la convivialité des tests de l’application, tout en réduisant les coûts et les délais de développement.
L’atomic design a des avantages également au niveau du prototype. Cela permet de créer des composants d’interfaces qui vont être liés à des boutons, des pages ou simplement des interactions. Cela signifie que l’ensemble des composants utilisés dans l’application vont hériter de l’interaction du composant parent.
Tests utilisateurs
Une fois les prototypes terminés, nous avons mis en place des tests utilisateurs. Afin de créer des scénarios attractifs, l’utilisateur doit se sentir embarqué par les scénarios et avoir l’impression d’effectuer la tâche de façon réelle (importance de créer des maquettes hautes fidélités). Pour cela, il est recommandé de commencer son scénario par « Imaginez que… » et d’être assez précis l’immersion de l’utilisateur dans la réalisation d’une tâche. L’ensemble des scénarios ont été réalisés sur le prototype de la version ordinateur (desktop). Les tests ont été utilisés pour déterminer si les parcours que nous avions conçus lors de la phase de création des parcours utilisateur étaient cohérents et appropriés.
Ces tests ont été menés en deux parties. La première partie est le test des 5 secondes permettant de recueillir les premières impressions de l’utilisateur sur l’interface à laquelle il sera confronté dans la suite des tests utilisateurs. La seconde partie est l’ensemble des scénarios utilisateur pour lesquels il sera nécessaire de vérifier le bon fonctionnement. Avec les retours durant ces tests, nous avons pu améliorer les points de blocages et également ajouter des fonctionnalités afin de faciliter les interactions.
Création du mode sombre
Le mode sombre est devenu essentiel dans les applications. De nos jours, nos appareils s’ajustent automatiquement en fonction de l’heure du jour afin de maintenir une expérience visuelle cohérente avec les interfaces que nous utilisons, telles que la télévision, l’ordinateur, le smartphone, la montre connectée, etc. C’est pourquoi, lors de la conception des applications, il est généralement nécessaire de prendre en compte le mode sombre au même titre que le responsive design.
Dans notre approche, pour chaque variation de notre couleur de base, nous procédons à l’ajout ou à la réduction d’une couche de couleur blanche avec un niveau d’opacité pour le mode clair, et inversement avec le noir pour le mode sombre. Cela apporte des niveaux de couleurs homogènes qui soient utilisables dans l’ensemble de nos interfaces.
Nous comprenons l’importance de vous permettre de découvrir et de prendre en main cette nouvelle version dès sa sortie. En attendant, nous vous invitons à visiter le site Parsec.cloud, où vous pouvez dès à présent télécharger notre application Parsec Cloud. Cette application vous permet de sécuriser vos données sensibles et de profiter d’une gestion efficace de vos fichiers en toute confiance.
Restez à l’affût de nos prochaines communications pour ne pas manquer les dernières actualités sur la sortie de la nouvelle version.
Fabien Sevestre
UX Ingénieur Designer PARSEC
