Ui design : Les fondamentaux

Vous venez de passer plusieurs heures sur Amazon et Cdiscount à rechercher, comparer, analyser des dizaines de produits. Vous avez trouvé la perle rare sur Asos ou Vinted après avoir scrollé toutes les pages. Ou encore, vous avez exploré toutes les fonctionnalités de votre banque en ligne N26 ou Revolut sans vous arracher les cheveux.

Puis vous vous êtes demandé : comment ces marques ont-elles réussi à me faire autant apprécier l'utilisation de leur site web ou application mobile ? Comment ont-elles fait pour que tout semble me tomber sous la main au premier coup d'œil ?

Ce n'est pas de la magie. Voici l'ingrédient clé d'une expérience de navigation réussie : l'UI design. Découvrez les fondamentaux à maîtriser pour une expérience utilisateur fluide et captivante !

Qu'est-ce que l'UI design ?

Le terme “UI”, “user interface” en anglais signifie "interface utilisateur". Pour vous la faire courte, ce type de design vise à optimiser la manière dont l'utilisateur va interagir avec l'environnement graphique dans lequel il évolue. Le but est de rendre l'application ou le site internet attractif et de créer de l'engagement en incitant l'utilisateur à rester sur la page.

L'UI design regroupe tout un ensemble d'éléments visuels : boutons, textes, images, sliders, champs de saisie...D'autres éléments comme les couleurs, la typographie, le défilement des pages, les animations ou toute autre micro interaction ont leur importance dans l'expérience UI.

Quelles différences entre l'UX et l'UI design ?

Développer un produit que les utilisateurs vont adorer utiliser requière à la fois un bon UX et UI. Les deux sont centrées sur les besoins de l'utilisateur mais exigent des skills différents.

Les UX designer interviennent dès le début du projet. Leur travail consiste à effectuer des recherches, définir un persona, étudier une problématique pour proposer la meilleure solution possible.

Les UI designers sont chargés de soigner l’apparence du produit afin de le rendre attrayant et réactif pour l'utilisateur ciblé en plus d'être optimisé pour différentes tailles d’écran ou appareils.

C'est pourquoi ces deux compétences doivent être maîtrisées et cohabiter ensemble, en harmonie.

Faisons un petit récap des différences entre UX et UI design :

• L'UX design viser à apporter une solution et l'UI design améliore le look et l'utilisabilité.
• L'UI fait partie de l'UX design. En ce sens, il est nettement plus spécifique.
• Le designer UX intervient dès la première étape du processus de conception. L'UI designer collabore avec lui après la phase de recherche et avant le développement logiciel.
• Si l’UX vise à proposer la meilleure expérience utilisateur possible, l’UI vise à améliorer l’interaction entre l’utilisateur et le produit.

Différences entre UI et Ux Design. Source: Coursera.org

Les différentes tendances de l'UI design

On vous en parlait déjà dans un précédent article, les tendances du webdesign évoluent si rapidement qu'il est difficile de rester à jour. Jetons un œil aux principaux courants de l'UI qui ont marqué notre histoire depuis les débuts d'internet. Et n'oubliez pas que comme chaque effet de mode, les tendances sont vouées à apparaître, disparaître, puis réapparaître...

Le Skeuomorphisme

Cette technique de design vise à imiter un objet réel lors de sa conception digitale en y ajoutant le plus de détails et de réalisme possible. Les premières interfaces graphiques étaient designées sous ce principe. Steve Jobs a introduit ce design dans les années 80 afin de permettre à l'utilisateur moyen de comprendre facilement les fonctionnalités d'un ordinateur. C'est pourquoi les icônes d’IOS ressemblaient parfaitement aux éléments du monde réel. La « corbeille » ou bien encore « l’enveloppe mail » en sont des exemples.

Souvenez vous du premier logo de Instagram, qui imitait parfaitement la forme d'un appareil photo vintage. Le skeuomorphisme n’est pas mort pour autant, au contraire, de nombreux designers en utilisent les fondamentaux en les rafraichissant.

Skeuomorphisme : premier logo d'Instagram

Le Flat Design

Introduit en 2006 par Microsoft, ce type de design se débarrasse des détails et fioritures du skeuomorphisme pour proposer un style beaucoup plus simple et intuitif. En effet, les designers sont partis du constat que les consommateurs sont déjà familiarisés avec les interfaces numériques et qu'il n'est plus nécessaire de surcharger les designs. Tous les éléments graphiques sont en 2D, ils apparaissent comme s'ils reposaient à plat sur une seule surface. C'est de là que vient le nom de « flat design ». Cette évolution du design est devenue la norme en matière d'applications web.

Flat Design : L'interface Microsoft

Le Neumorphisme

Si le Skeuomorphisme et le flat design avaient un enfant, ce serait le Neumorphisme. Ce type de design vise à combiner les éléments du Flat design avec les techniques du skeuomorphisme. L'objectif est d'attirer davantage l'attention de l'utilisateur en rendant les interfaces plus douces et lisibles. Pour cela, on joue avec les animations, les dégradés de couleurs, les ombres et les reliefs, afin de donner vie aux éléments d'une interface.

De gauche à droite : skeuomorphisme, flat design, et neumorphisme.

UI Design, les fondamentaux à maîtriser

Voici les règles et principes de base à prendre en compte lorsque vous travaillez les designs de vos sites web et applications.

Simplicité

La créativité fait partie des compétences de tout bon designer. Mais celle-ci ne doit pas prendre le dessus sur la simplicité. Retenez que toutes les entreprises les plus influentes ont une interface simple. Prenons Google Chrome par exemple : le seul et unique élément de la page d'accueil est la barre de recherche. Concentrez vous sur les principaux objectifs de votre utilisateur et trouvez le chemin le plus simple pour le conduire à la solution. L'idée est de simplifier sa prise de décision et d'alléger sa charge cognitive au maximum.

Exemple d'UI design réussi : Google Chrome

Visibilité / Clarté

Faites en sorte que chaque élément soit lisible. La taille des textes, les images, les boutons, les espaces sont des éléments importants de l'expérience utilisateur… Veillez à ce que les boutons d'appel à l'action soient suffisamment grands pour être facilement visibles et cliquables. Par ailleurs, soignez la lisibilité des textes, l'emplacement du menu et de la barre de recherche. L'utilisateur doit comprendre rapidement ou il peut/doit cliquer.

Consistance

C'est le fait de répéter la même structure et les mêmes paramètres pour un composant donné. Par exemple : les tailles de titre, la longueur des paragraphes, la couleur de boutons. Cela permet à l'utilisateur de comprendre plus facilement et plus rapidement l'information, en plus d'apporter une harmonie visuelle.

Esthétique

Le respect de la charte graphique, l'harmonie des couleurs, les polices utilisées vont contribuer à l'esthétique de votre site/application. Il faut savoir que les couleurs utilisées, le logo, ou encore la typographie vont avoir un réel impact sur vos utilisateurs, leurs émotions ainsi que sur l'image de votre produit. L’UI design a pour mission d’organiser les différents éléments visuels pour un rendu aussi bien fonctionnel que visuel.

Feedback

Le feedback est la réaction que va donner l'interface face à une action de l'utilisateur. Celle ci doit être claire, visible, et compréhensible. La personne doit savoir rapidement ce qu'elle est en train de faire : doit elle recharger la page, patienter, laisser son adresse e-mail ? Il peut s'agir d'un message de succès : "bravo votre formulaire a bien été envoyé", d'erreur : "l'image ne respecte pas le format demandé. Veuillez uploader une image de 150 x 150 px" ou même d'une animation de chargement.

Le feedback de Mailchimp après avoir validé l'envoi d'une campagne d'emailing.

Prédictibilité

Le fait de respecter une architecture similaire permet à l'utilisateur de mieux comprendre ce qui va se passer par la suite. En plus d'améliorer son expérience, cela facilite son apprentissage et lui donne envie de revenir. Prenons l'application de rencontre Tinder par exemple, dès la première utilisation on comprend rapidement dans quel sens on doit "swiper" pour matcher avec une personne ou non. Ainsi, dans la mesure du possible, limitez le nombre de choses dont une personne doit se souvenir pour utiliser votre interface de manière efficiente.

Adaptabilité

Chaque interface ne doit pas seulement être réadaptée à chaque appareil, elle doit être repensée en fonction de comment l'utilisateur va évoluer dessus ; on n'utilise pas un ordinateur de la même manière qu'un téléphone. Par exemple, sur Safari mobile, vous remarquerez que depuis quelques mois la barre de recherche a été déplacée en bas pour faciliter l'accessibilité via le pouce étant donné que la main se positionne en bas du téléphone.

Les outils pour concevoir son Interface utilisateur (UI design)

Voici les trois outils les plus tendance en termes d'UI design. À vous de faire votre choix, selon votre utilisation.

Figma

Ce puissant outil de design permet aux UX et UI designers de collaborer en temps réel lors de la création d'interfaces graphiques et prototypes. Il aide à concevoir des sites web, applications et autres interfaces utilisateurs. Figma a été conçu dans l’esprit d’un design system qui réunit tous les éléments visuels d’un projet afin de concevoir des design cohérents.

Les petit plus : Figma est accessible directement à partir de n'importe quel navigateur web. L'offre de base est gratuite, ce qui permet de commencer à prendre l'outil en main.

Adobe XD

C'est un incontournable lorsque l'on parle d'UX/UI design. Ce logiciel de prototypage ultra avancé appartient à la suite Adobe Creative. Il permet de réaliser des maquettes, wireframes et prototypes afin de concevoir des interfaces digitales agréables et efficaces.

Ce logiciel ne permet pas la collaboration en temps réel mais vous pouvez créer des liens pour partager vos fichiers facilement.

Sketch

Encore un autre outil de prototypage vectoriel, accessible et facile d'utilisation. Grâce à sa fonctionnalité d'aperçu instantané vous pouvez prévisualiser facilement vos conceptions sur un appareil mobile.

A savoir : Sketch est uniquement disponible pour les utilisateurs de MacOs.

Comment devenir UI designer ?

Il n’existe pas de diplôme spécifique au métier de UI designer. Il y a cependant de nombreuses formations qui proposent un cursus allant de Bac+2 à Bac+5 et qui vous permettront d'acquérir une culture web et de développer vos compétences en UI/UX design.

Voici des exemples de formations :

Bac + 2 : DUT informatique ou métiers du multimédia.

Bac +3 à Bac+5 : Diplômes d’école d’art publiques (Beaux-Arts de Paris, Ecole Estienne..) , ou privées (Gobelins, Émile Cohl..) / Diplômes d’école de design ou de multimédia.

L’apprentissage en autodidacte reste une très bonne approche de ce métier en constante évolution. Il existe un grand nombre de formations en ligne sur des plateformes comme Udemy ou Domestika. Par ailleurs, n'hésitez pas à vous former aux outils de design et à réaliser des projets pour gagner en expérience. Un bon portfolio sera toujours plus important que n’importe quelle formation.

Derniers mots sur l'UI design

Vous avez maintenant toutes les bases pour réaliser des interfaces utilisateur élégantes et centrées sur les besoins de vos clients. Retenez qu'au delà de leur cohérence graphique, les meilleures interfaces sont les plus claires, réactives et simples d'utilisation. Besoin d'aide pour un projet ? Discutons en ! Envoyez nous un petit message et nous vous mettrons en relation avec l'un de nos designers Webflow.

‍