Interfaces et expérience utilisateur (UI et UX) : On démêle tout ça !

L’expérience utilisateur (UX) relève à bien des titres de la psychologie et dépend de la qualité des perceptions et interactions induites par l’interface (UI).
On attend d’une charte graphique esthétique et utilisabilité, cependant, contrairement à une oeuvre d’art affranchie des nécessités de la vie pratique, notre perception doit être tournée vers l’action.
Une charte graphique d’interface ne doit pas laisser de place à l’interprétation et le visiteur doit comprendre le message précis qu’on veut lui transmettre.
C’est là que repose toute la complexité du design d’interface.

Une charte graphique d’interface ne doit pas laisser de place à l’interprétation et le visiteur doit comprendre le message précis qu’on veut lui transmettre. 

C’est là que repose toute la complexité du design d’interface✨.

.

Je vous ai perdu ? Pas de panique on vous explique tout ici !

Vous avez besoin d’une charte graphique pour une plateforme web, une application mobile, un logiciel ou tout ce qui peut de prêt ou de loin se trouver en ligne?
Laissez vous guider, on vous accompagne.

On ne peut faire de design d’interface (UI) sans prendre en compte l’expérience utilisateur, et ça ne s’improvise pas.

Il ne faut pas seulement s’intéresser à ce que vous souhaitez sur le rendu visuel final car vous nous direz dans la majorité des cas que vous souhaitez un design sobre et épuré 🤬, mais il faut prendre en considération des paramètres beaucoup plus précis et se poser les bonnes questions.

Une des priorité est de comprendre le métier et le marché:
Comment le produit sera utilisé? Par qui? Dans quel but?

Nous allons donc nous intéresser à

M

Vos objectifs business

M

Vos cibles (personas)

M

Vos contraintes métier

M

Vos utilisateurs

M

Vos goûts

M

Vos valeurs

Et hop on va faire rentrer tout ça dans une interface !

En pratique comment on bosse?

Avec des post-its 🎉. Et c’est pas une blague, c’est une méthode reconnue et appréciée des équipes car elle permet de sortir la tête des écrans et de se poser les bonnes questions en modélisant votre métier.

On appelle cette méthode l’Event Storming, elle est basée sur une méthode agile et fonctionne par ateliers durant lesquels on va penser et construire les différentes étapes de votre application.
Ces ateliers regroupent différents corps de métier, les designers, chef de projet mais surtout nous travaillons en étroite collaboration avec l’équipe technique qui va développer l’application. Cela peut être votre équipe, votre prestataire ou notre partenaire en développement winzana.com.

C’est un travail d’équipe

Et c’est super sérieux, on rigole pas avec les post-its qui ont tous un rôle bien précis et une couleur bien définie.

La schématisation de votre interface, le bien nommé Wireframe

Une fois qu’on a posé les post-its sur la table, on va pouvoir s’attaquer aux wireframes en se concentrant sur l’expérience de l’utilisateur.

Le Wireframe, également maquette fonctionnelle est le schéma de votre interface utilisateur. Il va permettre de définir l’agencement des blocs et composants qu’elle doit contenir.

A ce stade là c’est souvent compliqué pour vous de vous projeter sur le rendu final mais c’est une étape importante pour poser la structure du logiciel, l’ergonomie et vérifier qu’aucune fonctionnalité n’a été oubliée.

« Wireframe » (de wire: cable/grillage et frame: cadre/carcasse) peut se traduire grossièrement par « structure filaire ». On le comparera à « l’ossature » du site web.

La représentation de votre charte graphique d’interface dans un Moodboard

Le Moodboard, ou planche de tendance reprend les éléments graphiques qui vont composer votre charte à savoir

M

La palette de couleurs

M

Les typographies

M

Les styles de visuels

M

L'iconographie

M

Et le logo si nécéssaire

Une fois qu’on a tous ces éléments il y a plus qu’à reprendre les Wireframes et y appliquer ce qui a été défini dans le Moodboard en respectant toujours les grands principes du design.

Et paf ! ça fait des maquettes

Les maquettes sont donc bel et bien la fusion des Wireframes avec le Moodboard. Elles sont la dernière étape avant le début du développement et doivent vous donner un aperçu au plus proche du rendu final de votre interface. Il est souvent recommandé de faire quelques maquettes pour les supports mobiles afin de fixer le rendu responsive du projet.

Les maquettes doivent s’approcher au maximum du rendu final de votre interface.
Ci-dessus, quelques exemples de maquettes.
Vous l’aurez compris un design d’interface réussi ne s’improvise pas. Il s’agit d’un travail sérieux (aussi sérieux que des post-its) sur auquel il est important d’accorder le temps nécessaire. En effet un design d’interface bien préparé permet de faire gagner beaucoup de temps sur la phase de développement de votre projet !

Ces magnifiques articles pourraient aussi vous plaire

Si jamais vous avez le temps de vous cultiver un peu, n’hésitez pas à faire un détour ou deux !

L’essor des illustrations sur le web

L’essor des illustrations sur le web

Depuis les premières palpitations du cœur bouillonnant du Web et de l'informatique, les illustrations se sont progressivement faites une place importante dans les pages, articles et autres interfaces.Il est possible de classer les créations graphiques du numériques en...

Le logo, vous n’avez pas fini d’en entendre parler

Le logo, vous n’avez pas fini d’en entendre parler

Vous reconnaissez sans doute un McDonald’s, un Apple Store ou même un magasin Nike au loin juste en voyant le visuel de leur logo, même si le nom de ces marques n’est pas intégré à leur logo. C’est parce qu’elles sont reconnues mondialement et qu’il suffit d’un regard...

Share This