Les outils utiles pour travailler sur un projet UX
L’essor de l’UX/UI design a foisonné considérablement le nombre des outils UX/UI. Ces logiciels rivalisent fortement pour offrir les meilleures solutions pour collaborer en ligne, gérer efficacement un projet UX, automatiser les tests utilisateurs, entretenir des relations avec les usagers, cartographier l’user flow, etc.
De nouveaux outils créatifs viennent renforcer l’espace de travail de l’UI/UX Designer. Ils ont même dépassé nos attentes dans le design d’interface et l’architecture de l’information, comme Photoshop ou Figma.
Ils permettent non seulement d’optimiser les flux de travail, mais aussi ils les aident à se focaliser sur la dimension humaine pour assurer une excellente expérience utilisateur.
3 outils de wireframing
Le wireframing est un dessin graphique simplifié qui sert à définir la structure du futur site web, application mobile ou solution SaaS ainsi que l’agencement des différents composants graphiques, avant la conception interactive. C’est un modèle statique qui ne génère aucune interaction.
Cette maquette graphique est élaborée à l’occasion d’une refonte ou une nouvelle création. Elle représente un support de communication efficace, qui permet de schématiser les idées de l’UX Designer, d’une manière explicite et de l’aider à les rectifier facilement, selon les exigences du Lead UX.
Voici quelques outils de wireframing :
Sneakpeekit
Sneakpeekit est un outil de prototypage low-fidelity présentant un système de grilles à télécharger. Il simule une feuille A4 (qui peut être pointillée), avec des marques de colonnes. Il permet de générer et de dessiner les idées plus rapidement. Les détails peuvent être représentés dans la phase du prototypage.
Sneakpeekit offre différents types de modèles pour dessiner des croquis clairs pour la structure de l’interface utilisateur :
- Un modèle de grille A4 dédié essentiellement pour la conception d’icônes, de logos et de polices pour les sites web.
- Un canevas de navigateur web pour dessiner les pages du site.
- Plusieurs canevas de navigateurs web pour concevoir plus rapidement un plan de navigation entre les pages du site.
- Plusieurs mockups pour les terminaux mobiles : Smartphone ou tablette, afin d’économiser le papier et le temps nécessaires pour esquisser les wireframes des applications mobiles.
Balsamiq
Balsamiq Wireframes est un outil de wireframing destiné au grand public des professionnels de l’UX : UX/UI designer, développeurs web, Product managers, etc. Il simule les représentations sur un tableau blanc ou un bloc-notes, dans l’objectif de se concentrer sur les éléments qui doivent être présents sur l’interface et la façon de les hiérarchiser. Cela permet d’éviter les discussions superflues sur les choix des couleurs ou les images, qui peuvent être abordés dans la phase de prototypage.
Balsamiq est un outil intuitif et facile de manipulation qui permet au concepteur de générer et de mettre à jour plusieurs idées et conceptions, plus rapidement, sans avoir besoin de se former.
Axure
Axure est une solution de wireframing complète qui aide le concepteur à créer des maquettes web claires et pertinentes. Il permet de réduire la complexité de la conception et de progresser plus aisément vers la conception des prototypes.
Axure offre au designer tous les mécanismes pour créer plus rapidement sa maquette, à l’aide des diagrammes visuels, des icônes, des zones de textes, etc. Il suffit de glisser et déposer les éléments dont il a besoin, à partir de la bibliothèque correspondante, dans le canevas et de travailler confortablement.
Avec Axure, il est possible pour l’équipe prenante de travailler en temps réel sur le même projet. Les collaborateurs peuvent commenter ou partager les réalisations, comme ils peuvent importer des wireframes à partir des bibliothèques tierces.
4 outils de prototypage
Le prototypage web est une phase cruciale dans tout projet de conception d’un site web. En effet, le maquettage graphique permet d’élaborer un cahier de charges visuel et favorise la génération d’idées de conception créatives. Cette technique permet aussi de développer des interfaces web agréables et garantes d’une meilleure expérience utilisateur.
L’objectif ultime d’un prototype est de créer un modèle graphique le plus proche possible de la conception finale. En outre, le prototypage permet d’effectuer des tests utilisateurs, avant de développer effectivement l’interface web. Pour ce faire, il existe plusieurs outils performants à employer.
Adobe XD
Adobe XD est une une solution d’UI/UX design performante développée par Adobe. Elle permet de réaliser des wireframes, des prototypes et des animations, d’une manière très simple.
Adobe XD offre des options intéressantes pour développer des maquettes XD malléables et responsives. Notamment, cet outil permet de :
- Donner une nouvelle dimension au design grâce à des objets 3D immersifs.
- Créer des animations ludiques et des transitions amusantes, à l’aide de la fonctionnalité Auto-Animate. Outre des interactions fascinantes, des défilements attractifs et des icônes animées, pour renforcer l’interactivité du design.
- Concevoir une expérience utilisateur agréable à l’aide d’une boîte à outils facile d’usage.
- Créer le design une seule fois et le réutiliser plusieurs fois, en effectuant quelques ajustements pour l’adapter au nouveau contexte.
- Centraliser tous les fichiers dans une seule bibliothèque, dont le contenu est partagé et accessible à toutes les parties prenantes.
- Favoriser le travail et la synergie de l’équipe, grâce au principe de « Coediting ». Tous les membres de l’équipe peuvent travailler ensemble sur les mêmes ressources (les dernières versions mises à jour), en temps réel. Les collaborateurs peuvent inviter d’autres acteurs pour participer au projet, comme les rédacteurs web, les clients, etc.
Adobe XD assure une prise en main facile, grâce à son interface intuitive. Il aide le designer à concevoir les maquettes du site d’une façon optimale, à l’aide de son système de calques et sa librairie de composants centralisée.
Figma
Figma est une application accessible via le navigateur web qui permet principalement de concevoir un Design System. L’utilisateur peut l’employer sans avoir besoin d’installer un logiciel. C’est une application facile d’utilisation, car elle ne requiert pas de fortes connaissances en design et elle ne demande pas de configuration matérielle puissante pour s’exécuter.
Figma est un outil de conception d’interfaces web et de prototypes interactifs. Il booste la créativité du designer et étoffe son inventivité, pour donner vie à ses wireframes et créer une maquette engageante. De plus, il optimise le processus de test de l’interface web, grâce à une maquette conviviale qui simule la version finale de l’interface.
C’est un outil collaboratif extrêmement puissant, qui fédère les UI designers, les développeurs web et tout acteur impliqué dans le projet autour du processus de conception. Toute l’équipe peut travailler sur le même gabarit en temps réel, à travers une interface intuitive et inspirante qui donne envie de bosser.
Pour rappel, lire : Les possibilités de Figma
Sketch
Sketch est un outil de conception graphique relativement récent. Il est conçu essentiellement pour Mac OS X. C’est un outil léger et moins gourmand en mémoire vive (par rapport aux logiciels de la suite Adobe).
Il s’agit d’un outil de design intuitif qui permet de développer, prototyper et tester des interfaces web facilement. A cet effet, il offre de nombreuses fonctionnalités à l’utilisateur, qui peut effectuer ces tâches :
- Développer des prototypes interactifs.
- Profiter de composants UI réutilisables pour accélérer la conception de l’interface.
- Créer des icônes avec des finitions fines et précises et des graphiques vectoriels impressionnants, qui s’adaptent à toutes les résolutions, sans perte de qualité.
- Regrouper plusieurs maquettes dans un même canevas. En effet, le canevas Sketch est très étendu et peut regrouper plusieurs réalisations à la fois.
- Créer des interfaces web flexibles et responsives. Le concepteur peut vérifier cet aspect en installant l’application Sketch sur son smartphone et en utilisant l’outil de prévisualisation Mirror.
Sketch est aussi un outil de design collaboratif qui optimise le travail de l’équipe à travers des mécanismes modernes, comme :
- Le cloud partagé : il permet de partager tous les fichiers de conception entre tous les membres de l’équipe, avec un accès instantané. Les collaborateurs peuvent inviter leurs collègues et leurs clients pour travailler en parallèle sur les mêmes ressources.
- Collaboration interactive : les idées et les conceptions sont testées et validées en temps réel, grâce à un système de commentaire intégré.
- Exportation facile des ressources : Tous les fichiers sont accessibles à tous les développeurs, qui peuvent les télécharger gratuitement à travers le navigateur web.
Origami
Origami est un outil de conception innovant destiné à créer des designs et des animations modernes. En plus, il permet de :
- Développer, partager et simuler des prototypes interactifs sur différents terminaux, facilement et gratuitement.
- Créer des interfaces responsives qui s’affichent correctement sur toutes les résolutions, grâce à des layouts dynamiques. Ce type de mise en page est parfaitement flexible et s’adapte facilement à toutes les modifications.
- Créer des transitions et des interactions fluides entre les interfaces web afin de rendre l’expérience utilisateur plus attrayante.
- Importer des calques à partir de Figma et Sketch dans Origami, afin d’enrichir et compléter le projet par les fichiers des autres membres de l’équipe.
- Favoriser la communication des membres de l’équipe sur les idées de conception et les prototypes réalisés.
Origami est un outil de prototypage puissant qui permet de développer des prototypes hyperréalistes qui s’approchent du produit final.
5 outils de gestion de projet
Trello
Trello est une plateforme de gestion de projet performante. Elle est enrichie de raccourcis et de fonctionnalités, qui permettent de faciliter la communication entre les membres de l’équipe et de booster leur productivité.
Cet outil collaboratif découle de la méthode agile Kanban et appartient à la génération de Slack. Pour plus de flexibilité, Trello peut être associé à Slack. Cela permet de coordonner le travail des deux communautés et collaborer d’une manière plus efficace.
A travers son interface simple et intuitive, l’utilisateur peut réaliser ces tâches :
- Organiser les fonctions (rédaction, développement web, marketing, etc) selon des tableaux.
- Organiser les tâches de chaque fonction selon des cartes.
- Gérer les cartes : ajouter, déplacer, copier ou archiver les cartes,
- Gérer les tâches : ajouter des étiquettes, assigner des membres, copier, déplacer ou archiver une tâche.
- Assurer un suivi minutieux de l’avancement dans le projet, avec des dates limites, des notifications et des checklists.
- Personnaliser l’espace de travail pour le rendre plus convivial. Par exemple, l’utilisateur peut modifier le fond d’écran et marquer les priorités avec une couleur attirante.
Slack
Slack est un outil collaboratif inédit qui permet de renforcer le travail en équipe et de communiquer plus efficacement. Il permet d’optimiser les flux de communication et d’accélérer le processus de prise de précision, grâce à des fonctionnalités innovantes permettant de :
- Centraliser toutes les données, les fichiers, les messages et les collaborateurs travaillant sur les mêmes ressources dans des canaux. Ces professionnels peuvent échanger des idées, partager des fichiers en temps réel, fixer des objectifs et prendre des décisions dans un espace commun. C’est une bonne alternative pour structurer les projets et établir un ordre de priorité entre eux.
- Révolutionner la communication avec des partenaires externes à l’entreprise (fournisseurs, clients, entreprises partenaires). Les conversations classiques à travers les e-mails sont instantanées et centralisées dans la plateforme. A cet effet, Slack assure un espace de travail hautement sécurisé, qui protège contre les mails indésirables et préserve la confidentialité des messages échangés.
Freedcamp
Freedcamp est un outil de gestion de projet intelligent, basé sur la méthode agile Kanban. Il est très utile pour renforcer la cohésion entre les membres de l’équipe. A cet effet, il propose un lot d’outils pour automatiser et optimiser les différentes tâches. Par exemple, il permet de :
- Gérer la liste des tâches d’une manière conviviale. L’utilisateur dispose d’un contrôle total sur le niveau de visibilité de ses tâches. Il peut mettre certaines de ses missions visibles par toute la communauté ou restreindre la visibilité de ses tâches privées.
- Diviser les tâches les plus complexes en sous-tâches plus simples et y attribuer des objectifs avec des dates limites.
- Avoir une vue d’ensemble sur la progression dans l’accomplissement des tâches.
- Optimiser la communication entre les collaborateurs à travers l’échange de commentaires en temps réel.
- Centraliser tous les fichiers du projet, qui seront accessibles à tous les membres de l’équipe à partir de la même plateforme. L’utilisateur peut gérer ses fichiers aisément, à travers le système de versionning.
- Sauvegarder les projets et renforcer la sécurité de leurs données, grâce à la fonctionnalité de Backup.
- Assurer une meilleure flexibilité dans la gestion des tâches, grâce à l’intégration d’outils tierces, comme Dropbox, Google Agenda et Google Drive. De plus, Freedcamp peut être associé à des logiciels CRM externes.
Redmine
Redmine est un logiciel gratuit de gestion de projet en Open Source. Il assure les fonctionnalités suivantes :
- Le suivi et la gestion sécurisée des projets.
- La gestion des utilisateurs (le système peut enregistrer un nombre illimité d’utilisateurs) et de leurs tâches.
- La gestion des délais et la planification des tâches.
- La création de listes de demandes pour créer, trier et regrouper des tâches.
- L’élaboration de rapports de projets à travers des diagrammes de Gantt et des graphiques d’avancement (burndown chart) pour suivre le progrès dans le projet.
- La gestion et le classement des documents.
- La création du roadmap de développement du produit.
Teamwork
Teamwork est un logiciel de planification et de gestion de projet flexible et facile d’utilisation. Il peut être employé pour un usage basique ou professionnel. Parmi ses nombreuses fonctionnalités, on peut citer :
- Teamwork Desk qui permet de centraliser toutes les interactions avec les clients dans un même espace. Cela permet de briser le système d’information en silos, d’interagir directement avec les clients et de répondre rapidement à leurs demandes.
- Une gestion flexible du flux de travail, à travers un système de chat moderne qui favorise le partage de fichiers et la communication en temps réel entre les collaborateurs. Cela garantit d’améliorer la cohérence et l’interactivité de leur travail. Outre des outils de reporting, comme les diagrammes de Gantt et les tableaux de bord qui aident à prendre les décisions plus rapidement.
- Une gestion plus simplifiée des projets complexes.
- La répartition des tâches entre les collaborateurs et le suivi du temps de réalisation.
- Le contrôle de l’exploitation des ressources du projet en temps réel. Teamwork permet au responsable de l’équipe de savoir qui utilise une ressource et comment il l’utilise, à un instant donné.
- L’intégration d’applications tierces comme Dropbox, Xero, Slack, Hubspot, etc.
3 outils de création d’User Flow
Lucidchart
Lucidchart est un outil puissant de création et de partage de diagrammes et de graphiques analytiques en ligne. Il s’adapte à toutes les activités et à tous les secteurs.
Cette solution est très sollicitée par les professionnels de l’ingénierie et de l’informatique. Elle permet de :
- Optimiser la communication entre les collaborateurs et augmenter l’efficacité de leur collaboration sur les différentes missions : brainstorming, conception et gestion de produit, prise de décisions, etc.
- Faciliter la compréhension d’un processus à l’aide d’un diagramme illustratif.
- Cartographier le user flow (ou le parcours utilisateur) pour illustrer le chemin à emprunter par l’usager pour atteindre son objectif. Cela éclaire l’expert UX sur les points de frictions qui peuvent entraver la bonne expérience du produit et sur les points d’améliorations envisagées.
Gliffy
Gliffy est un logiciel de création de diagrammes. Il peut être utilisé par tous les professionnels des différents secteurs. A travers son interface intuitive, l’utilisateur peut effectuer ces tâches :
- Glisser et déposer aisément le graphique dans son espace de travail.
- Utiliser des templates et des thèmes sophistiqués pour enrichir son rapport.
- Favoriser la collaboration et la communication entre les membres de l’équipe. Notamment, ils peuvent visualiser, éditer ou commenter les diagrammes en temps réel.
- Optimiser le flux de travail, grâce à l’intégration d’applications tierces comme Jira et Conluence.
- Garder trace des projets réalisés grâce au système de versions.
Flowcharts de whimsical
Whimsical permet la création d’ organigrammes, des cartes mentales et des user flows en ligne. Il favorise la communication visuelle entre les collaborateurs en temps réel. A cet effet, il leur offre une boîte à outils enrichie de formes et de textes pour créer et styliser aisément les composants graphiques.
L’expert UX peut employer flowcharts de whimsical pour composer son user flow en toute fluidité. Le résultat est une représentation graphique claire et détaillée du parcours utilisateur.
3 outils de test et évaluation UX
Optimalworkshop
Optimalworkshop est une solution de test quantitatif et qualitatif du parcours utilisateur. A cet effet, il offre des outils puissants pour améliorer la compréhension des utilisateurs, comme :
- Optimal sort : il est basé sur la technique de tri de cartes, qui aide à constituer une idée sur comment l’utilisateur conçoit, regroupe et organise l’information. Cela aide l’expert UX à prendre des décisions pertinentes concernant la hiérarchisation de l’information.
- Questions : permet de réaliser des sondages en ligne, permettant de recueillir des informations pertinentes sur leurs besoins et avis. Ce qui aide l’entreprise à adapter l’UX à leurs attentes.
- Treejack : c’est un outil de test d’arborescence qui aide à analyser le contenu d’un site web, afin de dévoiler les points qui nécessitent des améliorations pour optimiser l’architecture de l’information dans sa globalité.
Lookback
Lookback est un logiciel d’Apple qui permet d’observer en ligne comment l’utilisateur passe le test d’utilisabilité. Il profite de la synchronisation entre les différents appareils d’Apple pour partager l’information (qui se trouve sur le MAC où ce logiciel a été enregistré), sur tous ces terminaux.
C’est un outil innovant de recherche utilisateur en ligne. Il intègre les techniques performantes de communication à distance pour :
- Interviewer les utilisateurs n’importe où ils sont localisés.
- Enregistrer la session de l’expérience utilisateur. L’observateur observe et enregistre le test passé par l’utilisateur. Notamment, il peut prendre des notes horodatées, pour décrire le parcours réalisé par le participant. Pour plus de praticité, toutes les sessions seront centralisées dans le Cloud.
- Réaliser des tests modérés et non modérés sur des applications, des sites web ou des prototypes.
Usabilla
Usabilla permet de collecter les feedbacks des utilisateurs en temps réel, après l’expérience du site web. Ces retours sont indispensables pour :
- Elaborer des recommandations plus mûres, qui sont basées sur les avis concrets des utilisateurs.
- Guider l’expert dans les choix d’optimisation à prendre, pour rendre le site plus performant et plus désirable.
- Améliorer l’UX du site, tout en se basant sur les suggestions des utilisateurs.
Le mot de la fin
Le projet UX intègre plusieurs outils et plusieurs compétences diverses. Chaque projet passe par une série d’étapes pour le mettre en place et chaque phase déploie des ressources matérielles et humaines déterminées. Donc, pour garantir le bon déroulement du projet et la bonne collaboration entre les membres de l’équipe prenante, l’entreprise doit réaliser une étude de faisabilité.
L’étude de faisabilité consiste à réaliser une étude des besoins et des objectifs du projet UX. En plus d’une étude de marché pour déceler les menaces et les opportunités d’innovation.
by 
