Conception de l'interface utilisateur

Conception UI design et clarification de l'interface

La conception d'interface utilisateur fixe les principes fonctionnels et ergonomiques de votre site web. La définition de l'interface utilisateur est généralement transversale à l'ensemble de votre dispositif, c'est à dire qu'elle concerne chaque écran du support numérique.
La conception d'interface commence par un travail de zoning et de wireframing (tracé en noir et blanc des principes de conception) et préfigure le fonctionnement du dispositif, avant la production de l'interface graphique et les développements.

Alors, qu'est-ce que la définition de l'interface utilisateur et la conception d'interface ?
Pourquoi est-ce important de définir les priorités d'interface utilisateur avant de concevoir les zoning et les wireframes ? Quelles sont les techniques à utiliser en amont de la conception d'interface ? En quoi la définition de l'interface est-elle un des fondamentaux du design de l'interface utilisateur ?

Cet article présente la technique de la définition d'interface utilisateur ainsi que les méthodes permettant de la mettre en oeuvre. Il est illustré par un exemple de définition d'interface utilisateur. Ces travaux relèvent du design de l'information et de la conception d'interface au sens large (UI design - user interface design). Par extension, la définition de l'interface utilisateur est une tâche qui entre dans les techniques de design UX (user experience design)...

Les basiques : l'interface utilisateur fait le lien entre l'usager et l'annonceur à travers un écran... La nature de l'expérience découle en partie de la qualité de l'interface.
Il est donc essentiel que l'interface utilisateur prenne en compte tous les enjeux du projet, notamment les performances et l'expérience utilisateur. La définition de l'interface est une des premières interventions du concepteur avant la conception effective des écrans.

Pour rappel, la conception d'interface se matérialise par le travail de zoning macro et de wireframing micro... Le zoning s'attache à déterminer les fonctions affectées aux zones de l'écran de façon transversale quand les wireframes détaillent la ventilation des éléments à l'écran pour chaque gabarit.
La définition de l'interface est l'étape qui précède ces travaux en définissant tout simplement les éléments prioritaires qui doivent figurer dans les gabarits types.

La conception fonctionnelle ne se résume donc pas uniquement aux wireframes. Un travail préalable doit clarifier les objectifs de chaque écran : c'est le rôle de la définition de l'interface. La définition du fonctionnement de l'interface utilisateur va de pair avec la conception des zoning, même si ce n'est pas exactement la même chose...
Le zoning affecte une fonction à chaque partie de l'interface, afin de créer des repères stables et transversaux au sein du site web ou du support numérique. La définition de l'interface utilisateur liste les informations à faire figurer dans chaque template avec une logique de priorisation. C'est un guide pour le concepteur et un moyen d'orienter la conception sur la performance et aussi l'expérience d'utilisation.

Priorisation des informations à afficher

Le travail de conception fonctionnelle débute par la définition des règles de l'interface utilisateur. Il est question d'orienter les choix de conception. Dans la mesure où l'interface utilisateur a vocation à centraliser de nombreuses informations, le concepteur gagne à s'appuyer sur la définition des besoins de chaque unité d'affaire, de chaque profil métier, voire des utilisateurs finaux...

Cette démarche de clarification de l'interface utilisateur est un marqueur tangible du design d'expérience utilisateur : on cherche à établir une liste de priorités pour l'émetteur et pour le récepteur. En effet, la conception d'interface ne relève pas d'un travail magique de création ou de l'application systématique de conventions ergonomiques. Ce sont les flux d'information qui gravitent autour du projet qui permettent d'établir la liste des éléments à faire figurer dans l'interface utilisateur. Ces inputs proviennent des besoins du commanditaire, des attentes des utilisateurs finaux, et de certaines exigences des métiers digitaux (techniques, ergonomiques, graphiques)...

En résumé, avant de concevoir et de matérialiser le fonctionnement de l'interface utilisateur, le concepteur (UI designer) rassemble les informations prioritaires qui vont orienter, cadrer, impacter l'interface.
Quelle est la nature des données impactantes sur l'interface utilisateur ?

Nature des informations à figurer dans l'interface utilisateur

La nature des informations ayant un impact sur l'interface utilisateur sont les suivantes :

• Enjeux marketing.
• Enjeux business.
• SEO - search engine optimization.
• Problématiques d’accessibilité.
• Contraintes techniques.
• Envergure fonctionnelle et éditoriale.
• Standards ergonomiques.
• Charte graphique.
• Attentes et besoins usagers.

L'ensemble de ces éléments forment une chaine de contraintes qui vont pressuriser le travail de conception d'interface utilisateur. Ce sont les données collectées au cours du recueil des besoins (métier et usager) et l'analyse du besoin qui permettent d'établir ces informations.

Sur le plan opérationnel, ces flux doivent être considérés comme autant d'éléments de nature à impacter l'interface. Le concepteur va procéder au travail d'interfaçage et de priorisation de l'information :

• Parcours d'utilisation prioritaires à valoriser.
• Messages pincipaux à prioriser.
• Cibles prioritaires.
• Actions (call to action) à prioriser.
• Contenus à prioriser.
• Fonctions à prioriser.
• Sections et rebond à pousser.

Chaque écran va être considéré à travers un objectif central. La modélisation des gabarits sera effectuée en rapport à chacun des points évoqués ci-dessus.

Modèles de définition d'interface à télécharger

Pour vous aider dans le travail de conception, IAFACTORY met à votre disposition un ensemble de modèles de conception à télécharger dont les zoning et la définition de l'interface. Ces documents constituent des livrables et sont téléchargeables en accès immédiat via notre shop.

Pour maitriser toutes les étapes de la conception d'interface, vous pouvez jeter un oeil à notre tutoriel dédié à la conception d'interface utilisateur et au design de l'interaction. Notre formation complète à l'UX design reprend également toutes les méthodes UX design et UI design.

Prioriser les fonctions et la ventilation des éléments à l'écran

La définition de l'interface utilisateur vise à prioriser les informations à faire figurer à l'écran. C'est une étape stratégique en matière de design de l'information : identifier les registres d'informations, hiérarchiser ces données et les prioriser. La définition des règles d'interface va donc servir de conducteur pour le design d'information des écrans. Les parcours centraux bénéficieront d'une forte valorisation, de même que les principaux appels à l'action.

La définition des règles de l'interface se révèle comme un travail de design stratégique de structuration de l'information. Cette démarche de conception est orientée sur la performance.
On affecte un objectif à chaque écran, et on détermine les accroches clés : accroches éditoriales, call to action, fonctions prioritaires et parcours central...

Voici les objectifs poursuivis par la définition de l'interface utilisateur.

• Affecter un objectif clairement défini à chaque gabarit.
• Orienter la conception d'interface sur les besoins réels.
• Synthétiser les éléments prépondérants en amorce de la conception.
• Prioriser les composantes de l’interface et les parcours à valoriser.
• Clarifier les éléments ayant un impact en termes d’interface.
• Prioriser les contenus et les fonctions pour chaque chaque écran.
• Fixer la taille des zones de travail, d’expression et d’occupation de l’écran.
• Clarifier la gestion des problématiques d’accessibilité.
• Clarifier les technologies utilisées, leurs implications.
• Expliciter les spécificités de la solution de gestion de contenu.
• Valoriser la performance.
• Considérer l'expérience utilisateur dans chaque écran.

Au final, le rassemblement de toutes ces informations permet de faciliter et d’accélérer le travail de l'UI designer : il peut cadrer efficacement son travail et éviter de faire des choix à contresens du projet, en s'appuyant sur des éléments tangibles.
Les apports d’une définition d’interface :

• Projet centré sur la performance.
• Projet conçu sur les besoins réels.
• Fixe le cadre de conception de tous les supports rattachés au dispositif.
• Clarifie les enjeux de conception-production-développement.
• Favorise les gains de productivité.

Comment définir l'interface utilisateur ?

Il s’agit de centraliser au sein d’un document synthétique les éléments à fort impact en termes d’interface utilisateur. Ce travail implique une bonne connaissance des latitudes et des enjeux du projet web (business, marketing, référencement, technique, fonctionnelle, éditoriale, graphique).

La définition des règles d’interface est réalisée en collaboration entre les équipes fonctionnelles, éditoriales, techniques et les profils de designer. C’est un document clé du projet et de la conception. Dans le cadre de dispositif interactif complexe (écosystèmes, multilingue, multi-pays, transactionnels), la définition de l'interface utilisateur constitue un tracé régulateur et un guide de conception puissant qui oriente tous les choix opérés en conception.

La clarification des informations à prioriser considère les problématiques d’accessibilité, les contraintes fixées par le périmètre fonctionnel et éditorial d’un outil de gestion de contenu ou d'une plateforme transactionnelle. Le respect des standards ergonomiques, la prise en compte des éléments structurants de charte graphique et d'identité visuelle sont autant de facteurs complémentaires pouvant pressuriser la conception.

Le document de définition de l'interface utilisateur rappel également les informations à prioriser... Il convient de rappeler que le concepteur ne dispose pas nécessairement de tout l’historique du projet. Les designers n’ont par ailleurs pas toujours le temps de prendre connaissance de l’intégralité de la documentation projet à disposition lorsqu’elle existe... En effet, chaque profil est absorbé dans ses tâches de production. Ainsi, la définition des règles d’interface permet de fluidifier le travail du concepteur tout en gardant le projet sur les rails définis et actés lors des phases précédentes. Répétons-le, c'est un document ultra-puissant, pourtant vous ne le verrez probablement jamais passer dans votre projet : personne ne l'utilise ! Et oui, fonçons vite en wireframing ! Et tant pis pour les méthodes :).

Lister les contraintes impactant l'interface utilisateur

Sur le plan opérationnel, le premier travail à réaliser en matière de définition des règles d'interface consiste à identifier les contraintes. On peut aussi parler de cadre plutôt que de contraintes car l'environnement technique n'est pas forcément une contrainte :)...

Voici la liste des éléments de nature à cadrer l'interface utilisateur :

• Le périmètre fonctionnel de la solution technique.
• La technologie de la plateforme.
• La problématique responsive (design adaptatif).
• Les contraintes en matière de thème (un outil de gestion de contenu ou une plateforme ecommerce peuvent être assez structurants sur le plan du design).
• Le cadre ergonomique : accessibilité et règles à respecter.
• La publicité : autopromotion, publicité externe...
• La charte graphique, qui a un impact sur le design fonctionnel.

Les enjeux d'accessibilité sont importants, c'est d'ailleurs une obligation légale pour les sites publics. Il est toujours bon d'éviter de reléguer au second plan cette approche éthique indispensable à la conception universelle centrée pour les humains, prenant en compte les déficiences potentielles de chaque individu...

D’autre part, il convient d'établir les règles intangibles à respecter en phase de conception, notamment tous les paramètres et les contraintes imposés par la solution de gestion de contenu sélectionnée (périmètre fonctionnel, gestion des templates)...

Pour les projets pilotés par le design, la technique exerce une pression moindre, puisque le développement back-end visera à atteindre les objectifs fixés par le design...

Les problématiques d'encombrement publicitaire doivent également être prises en compte et impactent fortement le design. Cette démarche globale de prise en compte de l'environnement permet de définir les règles d'interfaces permanentes afin d'optimiser le travail du concepteur.

Fixer des objectifs à chaque écran

Ensuite, pour chacun des gabarits du dispositif, on va définir l'objectif du gabarit. Cela suppose d'avoir une vision d'ensemble de tous les gabarits du dispositif (cf. les travaux inventaire fonctionnel)...
Ainsi :

• Est-ce un gabarit de transition ? Un écran de liste ?
• S'agit-il d'un hub de redirection ?
• Avons-nous affaire à une fiche produit ?
• Est-ce que le gabarit doit générer des leads ?
• Propose-t-on des formulaires ?
• S'agit-il d'une page d'accueil locale ?

La nature du gabarit va déterminer les objectifs à atteindre.
Le fait d'attribuer un ou deux objectifs au gabarit permet d'orienter le travail de conception et d'éviter la dispersion (très fréquente dans le design tant les choix sont potentiellement illimités).
Le travail de design fonctionnel doit être guidé par la modélisation d'interface performante selon les principes d'ergonomie incitative. Cela permet de faciliter les choix de conception.

Prioriser les informations de l'interface utilisateur

Enfin, en amorce du travail de conception, il est très pertinent de rappeler les priorités des éléments à faire figurer dans l’interface : fonctionnalités prioritaires, contenus majeurs, parcours prioritaires. Ces données sont issues du recueil du besoin.

Pour chaque gabarit, le concepteur va établir la liste des priorités :

• Parcours prioritaires à pousser
  Inciter les internautes à suivre le parcours...
• Messages prioritaires à valoriser
  Exposer le visiteur au message...
• Cibles prioritaires à viser
  Privilégier le discours avec la cible...
• Actions prioritaires à mettre en avant
  Inciter le visiteur à réaliser l'action...
• Contenus prioritaires à valoriser
  Confronter l'utilisateur au contenu...
• Sections prioritaires à pousser
  Booster la visibilité de l'action...

Cette approche de conception génère de très bons résultats. Le design de l'information suit une structure clairement établie. Ce n'est pas l'interface qui préfigure l'information à afficher, c'est le projet et le besoins qui déterminent la modélisation de l'interface.

Pour la priorisation des cibles, vous pouvez notamment vous appuyer sur les profils de persona. Nous vous invitons à tester cette méthode dans votre projet, vous verrez sa puissance !

Démarche pour définir l'interface utilisateur

Fil rouge de la démarche de définition de l'interface utilisateur :

• Etude de la documentation projet si elle existe (charte, identité visuelle).
• Etude de la documentation technique si elle existe.
• Etude de l'analyse fonctionnelle et du recueil des besoins (si réalisé).
• Listing des contraintes technico-fonctionnelles.
• Listing du cadre ergonomique (accessibilité).
• Listing des formats publicitaires.
• Priorisation des cibles, pour chaque écran.
• Priorisation des messages, pour chaque écran : actions parcours, fonctions, contenus.
• Zoning macro : conception générale.
• Wireframing micro : conception détaillée.

Travaux complémentaires aux travaux d'interface utilisateur

Le concepteur pourra s'appuyer sur les travaux d'analyse du besoin pour alimenter la définition de l'interface utilisateur. L'analyse du besoin englobe le recueil du besoin côté commanditaire et côté utilisateur et débouche sur l'analyse fonctionnelle :

• expression de besoin métier,
• analyse des besoins des utilisateurs,
• analyse fonctionnelle (résumé du recueil des besoins).

En parallèle de la définition de l'interface utilisateur, le concepteur procède à la conception du zoning macro. La conception détaillée des wireframes qui permet de visualiser l'affectation précise des contenus et fonctionnalités à l'écran prend corps au travers de l'étape de wireframing.

Zoning et wireframes impliquent un travail approfondi sur le design de navigation. A l'issue de la conception, les spécifications fonctionnelles décrivent le fonctionnement de chaque écran.