Pour concevoir une interface qui tient la route, vous allez devoir définir son scope fonctionnel, c'est-à-dire définir les fonctionnalités principales du service que vous concevez.
Définissez le scope fonctionnel
Pendant la phase d’idéation, vous allez générer des idées et des concepts que vous allez pouvoir maintenant traduire en fonctionnalités. Vous allez vous servir de la classification des solutions que vous avez réalisée dans les ateliers d’idéation pour identifier les fonctionnalités principales de votre service.
Une fonctionnalité, qu’est-ce que c’est ? C’est une action utilisateur qui répond à un besoin. Exemple : vous travaillez sur la refonte d’un site e-commerce. Pour rechercher un produit d'une marque spécifique, vos clients vont avoir besoin d'une fonction recherche.
Vous allez donc devoir définir les fonctionnalités principales du service que vous concevez. Ces fonctionnalités principales constituent le cœur du service, elles en sont la promesse. Elles répondent donc à la question : "Qu’est-ce qu’un utilisateur peut faire avec ce service ? Il peut faire…"
À vous de voir comment traduire ces fonctionnalités visuellement et de manière interactive. C’est votre travail de les intégrer dans un ou plusieurs des parcours utilisateurs et de les représenter (avec l’aide d’un UI designer). Vous pouvez faire la même chose en identifiant des fonctionnalités secondaires.
Sachez que, dans le cas d’un service existant, le scope peut rester isofonctionnel, donc sans nouvelles fonctionnalités. Votre travail sera donc de proposer une nouvelle expérience plus fluide et plus simple pour l’utilisateur. Mais vous pouvez aussi identifier de nouveaux besoins, donc potentiellement de nouvelles fonctionnalités.
Généralement, le scope fonctionnel d’un service peut être illustré sous la forme de scénarios (cas d’usage). Vous exprimerez, dans votre scénario illustré, une ou plusieurs fonctionnalités qui répondront aux besoins de l’utilisateur sur l’ensemble des points de contact avec le service.
Réalisez l’enchaînement des écrans
Une fois que vous avez identifié les fonctionnalités principales et secondaires, vous allez créer l’enchaînement des écrans en fonction du device à adresser. C’est ce que l’on appelle un user flow. Les étapes d’un parcours ne sont pas toujours identiques sur le web ou pour une application mobile. En effet, l’expérience que l’on souhaite proposer doit s’adapter au support.
Cette étape est importante, car elle vous permet d’identifier les écrans types de votre service.
Cela vous dit quelque chose ? Je vous en parlais dans le cours Auditez l’expérience utilisateur.
Un écran type est un ensemble d’écrans pour une thématique précise. Par exemple, un écran type de connexion a plusieurs variantes :
le cas d’une première connexion, comme l'inscription ;
le cas où l'utilisateur s’identifie ;
le cas où l'utilisateur souhaite réinitialiser son mot de passe, etc.
Pour vous aider, vous pouvez travailler en amont sur les scénarios d’usage de vos personas.
Cela va vous permettre de définir les enchaînements d’écrans de votre service que vous pouvez représenter en user flow.
Établissez le zoning et l'architecture des écrans
Une des étapes les plus importantes, lorsque vous allez concevoir une maquette pour en faire un prototype, c’est le zoning (l’emplacement du contenu) et l’architecture de l’information. Il est important de prendre en compte l’ensemble des besoins et des fonctionnalités pour pouvoir structurer l’ensemble. Cela permet de garder une cohérence sur l’ensemble des écrans types de votre prototype et de définir, pour chaque type de contenu, une zone spécifique dans l’écran.
Travailler l’architecture de l’information, c’est travailler sur l’organisation et la hiérarchie des contenus.
Voici un exemple pour la page d'accueil du site d'OpenClassrooms :
Vous pouvez voir plusieurs parties sur l’écran principal, chaque zone contient un type d'information ou action spécifique. Il y a :
en jaune, le header qui contient la navigation principale du site ;
en bleu foncé, un layer d'accroche qui contient des tags pour trouver une formation ;
puis en rose, les parcours de formation ;
en vert un CTA (Call To Action) de prise de contact ;
en turquoise, le footer du site.
Découvrez les modes de représentation pour réaliser des wireframes
Avant de passer à l’étape de production des wireframes, voici les deux modes de représentation possibles.
Le sketching (wireframes papier)
Vous pouvez choisir d’illustrer vos écrans en réalisant des croquis à la main. Sachez que vous n’avez pas besoin d’être un expert(e) en dessin pour réaliser des sketchs. Vous devez aller à l’essentiel en utilisant des formes simples. Ce qui est intéressant, c’est que vous pouvez organiser avec un bas niveau de fidélité vos contenus et la structure de vos écrans. Cette étape est importante pour commencer à élaborer vos écrans. Vous pouvez imprimer des modèles d'interfaces web et mobile que vous allez compléter. Dans le cas d’une conception sur mobile, cela vous permettra de prendre en compte les contraintes d’affichage pour structurer vos idées.
Sachez que vous pouvez réaliser un prototype mobile à partir de vos sketchs papier avec le service POP (Prototyping On Paper) qui va numériser vos sketchs. Cela peut vous servir si vous souhaitez tester des hypothèses simples et ajouter quelques interactions. L’application est disponible sur iOS et Android.
Exemple de wireframe sous la forme de croquis
Les wireframes réalisés dans un logiciel
Les wireframes sont des maquettes fil de fer, en niveaux de gris sans travail graphique. Dans un premier temps, il est important d’être focalisé sur la navigation, les fonctionnalités principales et la hiérarchie des contenus, et de ne prendre en compte que les aspects qui sont les plus structurants. Le wireframe est donc une représentation schématique, une sorte de squelette qui va montrer la structure des écrans. Vous pouvez fournir plusieurs versions de wireframes au fur et à mesure des itérations que vous allez faire. N’hésitez donc pas à faire tester ou à partager vos écrans dès les premières versions de wireframes.
Le wireframe statique vous permet d’anticiper la suite du projet (l'UI et le prototype) en travaillant avec une ou plusieurs résolutions d’écran, vous permettant de gérer vos points de rupture (breakpoints) si vous faites du responsive. Vous pourrez utiliser également une grille de construction spécifique.
En résumé
Il est important de garder en tête que vous devez trouver ce que vous allez montrer dans vos maquettes. Elles doivent contenir des fonctionnalités phares que vous allez concevoir de la manière la plus logique, fluide et contextuelle possible pour apporter la meilleure expérience utilisateur. Vous devez donc travailler votre contenu en le regroupant et en le hiérarchisant dans l’interface dans des zones claires et lisibles pour l’utilisateur. Vous pouvez réaliser ce travail en faisant des croquis ou en travaillant des wireframes statiques dans un logiciel spécifique.
N’oubliez pas l’étape du user flow qui permet de définir les liens entre vos écrans.
