Une méthodologie en 4 étapes pour concevoir vos IHM
Définir l’architecture de l’information et les flux de navigation
Réalisation de « sketch » en basse fidélité pour poser les bases
Réalisation d’une maquette dynamique et de spécifications IHM
Propositions d’habillage graphique haute fidélité adapté à votre univers
Ces 4 étapes permettent de suivre tout le cycle de vie du produit.
Dans le cas de projets en Agile, les maquettes pourront évoluer au grès des itérations et s’affiner tout au long du processus.
Pourquoi faire du maquettage IHM ?
Une maquette, contrairement à un prototype codé, est « jetable ». Alors pourquoi dépenser du temps et de l’argent au lieu de coder directement le produit ? Car le maquettage est une étape fondamentale de la conception « centrée utilisateur » ! Il permet de se poser des questions concernant les contenus à mettre en avant, les modalités d’interaction les plus adaptée, les flux de navigation les plus pertinents, etc. Le tout en pouvant explorer plusieurs pistes car, justement, rien n’est figé et aucune ligne de code n’est encore écrite !
De plus, les maquettes peuvent être accompagnées de spécifications IHM, bien utiles aux développeurs lorsqu’ils passeront à l’action.
Quel retour sur investissement attendre du maquettage IHM ?
GAIN DE TEMPS POUR LES DÉVELOPPEURS
Toutes les problématiques de mise en forme et de navigation sont abordées en amont, aucun gaspillage de temps pour les développeurs.
ERREURS DE CONCEPTION EVITÉES
Tous les écueils en termes d’affichage ou de navigation sont identifiés et résolus au stade de la maquette, la prise en compte précoce des attentes et habitudes des utilisateurs évite de leur fournir des écrans qui les induisent en erreur et qu’il faudra modifier.
UN SUPPORT A LA DISCUSSION EFFICACE
Tous les acteurs du projet peuvent participer aux réunions de présentation des IHM : il sera plus facile de trouver un consensus en ayant le résultat final sous les yeux.
DES SPÉCIFICATIONS FONCTIONNELLES COMPLÈTES
Nous mettons à disposition de nos clients des documents de spécification IHM qui peuvent être très détaillés (état des composants, positionnement, comportement, priorités de développement, etc.).
LA POSSIBILITE DE COMPARER
Plusieurs maquettes peuvent être comparées entre elles, afin de faire des choix éclairés en fonction des résultats des tests utilisateurs. Il est possible également de comparer l’existant aux maquettes afin de mieux en apprécier les évolutions.
Les maquettes interactives peuvent être exclusivement fonctionnelles ou bien intégrer également l’habillage graphique afin d’obtenir le rendu exact du produit final, sans écrire la moindre ligne de code. Pratique pour les démos !
AVANT-APRÈS maquettage et habillage graphique
Avant l’intervention
Le produit tel qu’il était avant l’intervention : look & feel démodé, problèmes d’organisation des contenus et d’utilisation de l’espace à l’écran.
Après maquettage
La maquette réalisée par nos ergonomes, ici avec Axure RP Pro : accompagnée de spécifications fonctionnelles qui facilitent l’implémentation par les développeurs et les graphistes, elle est idéalement soumise à des tests de validation auprès des utilisateurs.
Après habillage graphique
Le produit « habillé » par notre UI designer : la charte graphique est plus moderne, épurée et égayée par des touches de couleurs subtiles en accord avec l’identité visuelle de la marque et l’univers métier.
Les normes ISO au coeur de la conception
En plus de se baser sur les profils des utilisateurs et sur les retours de la MOA, nos maquettes sont conçues dans le respect des référentiels normés existants, comme la norme ISO 9241 (utilisabilité et interaction homme-machine), la norme ISO 10073 (réduction de la charge mentale) ou encore les référentiels français et internationaux concernant l’accessibilité des interfaces (RGAA2, WCAG2…).
Nos choix d’affichage des contenus et d’utilisation de composants IHM est également fait en tenant compte des spécificités du langage de programmation et du framework du produit final, afin d’assurer l’implémentabilité de nos recommandations.
Parmi nos interventions
Parlez-nous de votre projet