Webdesign — 26 mai 2015 — Aucun commentaire
4 étapes de base à ne pas négliger pour la création graphique de vos interfaces

Lorsqu’on souhaite créer une interface, il est important de comprendre le processus qui a permis d’aboutir au produit fini. On peut déterminer 4 étapes. Elles permettent d’obtenir une interface en partant d’une idée qui prendra forme et deviendra fonctionnelle. J’en profiterai pour indiquer aux débutants quelques liens et astuces qui pourront les aider s’ils souhaitent créer une interface. L’aspect graphique est important mais il ne faut pas oublier la partie développement ainsi que le référencement et le marketing qui arrivent par la suite…

1) Concept et réflexion

Le copy strat est un document fourni par un client à l’agence de publicité dans lequel les objectifs de communication et la cible sont définis. Il va donc falloir définir le concept de votre projet d’interface. Cette première étape est la plus importante ! Elle va déterminer tout votre projet. A l’aide d’un brainstorming, vous devrez déterminer précisément les valeurs que vous vous voulez transmettre, les fonctionnalités de l’interface, etc.

Concernant la cible, vous devrez vous poser différentes questions : que va apporter mon interface à ma cible, sur quel support sera-t-elle visible, à quelle occasion va-t-elle l’utiliser et dans quel contexte ? Il faut donc étudier son internaute.

A partir de cette réflexion, on peut établir un brief créatif : il s’agit de fournir aux créatifs (nous) les éléments clés qui guideront leur travail de création. Même si leur « terrain de jeu » doit être bordé de contraintes liées au concept, il faut tout de même avoir l’esprit ouvert. Ne restez pas focalisé sur une seule idée mais développez-en plusieurs, ne rejetez pas immédiatement une idée qui vous paraît a priori inadéquate : aucune idée n’est mauvaise. En deux mots, lâchez-vous ! Sortez des sentiers battus… Ce processus s’appelle l’idéation : générer, développer et tester des idées.

2) Ce qui existe déjà

Après avoir déterminé notre concept et notre thème, on effectue un benchmarking pour connaitre les tendances actuelles concernant ce projet donné. Il s’agit d’analyser ce qui existe déjà en en tirant pour chaque élément les points positifs et négatifs. Pour cela, il faut mettre en place une veille documentaire qui doit concerner les concurrents directs reconnus comme leaders ainsi que les entreprises appartenant à un autre secteur dactivité mais dont la performance est reconnue.

On va regrouper sur une même planche tout ce qu’on a pu trouver. C’est le moodboard. Il va ainsi reprendre les tendances existantes de manière visuelle auxquelles on va rajouter des ambiances, des visuels, des palettes de couleur, des typographies ou encore des icônes correspondant au projet. Le moodboard servira donc de base de travail pour toute la partie créative du projet.

Ces recherches de tendances vont nous aider à la réalisation de notre projet.

3) L’ergonomie

Avant de se lancer sur les maquettes, il est important d’établir dans un premier temps le parcours utilisateur. Pour cela, il faut se demander avant tout quel sera le but final de l’utilisateur. A partir de ce but, il faut réfléchir à ses besoins pour y parvenir : aura-t-il besoin de rentrer des données personnelles ? De se connecter à Facebook ? De choisir un produit ? Cette étape est primordiale car elle permettra à l’utilisateur de gagner du temps : obtenir ce qu’il veut en un minimum de temps. On va commencer par faire une arborescence qui va lister toutes les pages qui seront disponibles et les répertorier dans un ordre précis sans préciser le contenu de chaque page. Ce parcours peut être formalisé sous forme de différentes « images-écran ». Elles doivent se succéder de manière cohérente et détailler les différents éléments présents à chaque étape.

wireframmmes

Après avoir défini le parcours utilisateur, il va falloir détailler chaque interface et rendre l’ensemble ergonomique. Un site web est ergonomique quand il est utile et utilisable. C’est-à-dire qu’il répond à un besoin et qu’il facilite la satisfaction du besoin. Un site ergonomique se préoccupe donc de ses utilisateurs : c’est l’UX (user experience). Il va donc falloir créer des wireframes en pensant à l’agencement de chaque élément de chaque interface. Vous pouvez aussi utiliser Illustrator, Balzamiq, Axure ou même Sketch. Mais votre crayon avec une feuille peut être tout aussi efficace !

Quatre conseils pour une bonne ergonomie :

– Les zones cliquables doivent être bien visibles : évitez les petits boutons. Pensez aux malvoyants ou aux personnes pressées qui pourraient se demander où cliquer,

– Prenez en compte les zones plus ou moins atteignables par le curseur de la souris.

– Évitez le surplus d’informations : créez des catégories,

– Ne polluez pas votre interface avec des pop-up car elles agaceront l’utilisateur.

4) L’interface finale

Finalement, on peut passer à l’étape de création de l’interface utilisateur (UI). On va pouvoir utiliser les wireframes réalisés au préalable. Avant de commencer la création de l’interface utilisateur, il vaut mieux d’abord créer son propre kit UI dans lequel il y aura tous les éléments graphiques nécessaires à  l’interface. Par exemple, les boutons, le formulaire, les champs, le menu etc. Ces éléments seront cohérents les uns avec les autres graphiquement puisqu’ils respecteront la charte graphique. Il est important que tous les éléments du kit soient affordants. C’est-à-dire qu’il faut qu’ils aient la capacité à suggérer l’action qu’ils permettent de réaliser. Par exemple, un bouton cliquable doit suggérer la possibilité de cliquer dessus.

Avec ce kit UI et vos wireframes, vous n’aurez aucune difficulté à créer votre interface utilisateur !

Pour créer la meilleure interface possible, il est nécessaire d’utiliser des grilles. Ces grilles vont permettre de placer correctement les différents éléments. Elles peuvent être réalisées grâce à des logiciels dédiés. Sur photoshop, je vous conseille l’extension guide-guide par exemple.

Une fois vos interfaces terminées sur le plan graphique, il est important de réfléchir aux animations possibles. Par exemple, faut-il un effet de parallaxe au scroll ou à quoi ressemblera le hover des boutons etc.

Si vous voulez vous inspirer d’exemples d’animations possibles, voici quelques sites qui pourront vous aider : ICI , ICI ou encore ICI.

Un fois ces étapes respectées, il ne faut pas oublier de tester vos interfaces auprès de personnes qui ne sont pas a priori à l’aise lorsqu’elles utilisent une interface graphique. N’oubliez pas non plus de faire tester l’interface par ceux qui correspondent à votre cible principale. D’autre part, n’oubliez pas que votre interface doit être adaptable aux différents supports (mobile et tablette). Elle doit donc pouvoir être responsive.

Quoi qu’il en soit, le plus important c’est de satisfaire l’utilisateur. Il faut donc arriver à le garder jusqu’à la fin du parcours et ce, grâce à une UI innovante et une UX cohérente.

Articles similaires

Articles Recommandés



L'auteur

Héloïse Hauteville

Étudiante dans une école du web, je cherche toujours à découvrir davantage de choses dans les domaines liés à la communication digitale. Je suis vivement intéressée non seulement par le monde du web et des nouvelles technologies mais également par le webdesign. J'affectionne ainsi la découverte des nouveautés en faisant de la veille active, ce qui développe mon engouement pour l'Inbound marketing.

 


0 Commentaire

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *