INITIATION AU

UX / UI DESIGN
M. Constantin NITCHEU
Email : constantin.nitcheu@institutjeanjean.org

Année académique 2023-2024

Sommaire

❑ Introduction

❑ Objectifs pédagogiques

❑ UX vs UI

❑ Les dix règles d’un bon design

❑ Les bases du design UI

❑ Style de conception (Design styles)

❑ Processus de conception (Design process)

❑ Système de conception (Design system)

❑ Cas pratique
 Introduction

Les deux termes UX (User Experience) et UI (User Interface) ont pour point

commun d'avoir une approche user centric (centrée sur l'utilisateur).

➢ L'UI designer s'occupe plus particulièrement de faire en sorte que le design de

l'interface utilisateur corresponde aux attentes de son commanditaire et réponde

aux besoins des utilisateurs.

➢ L'UX designer sera lui plutôt sur l'architecture et l'ergonomie du site.

Ces deux métiers sont complémentaires et doivent travailler ensemble afin que

toute l'approche centrée sur l'utilisateur soit cohérent et harmonieux.

 I. Objectifs pédagogiques

A la fin de ce cours, l’étudiant devra être capable de :

✓ Faire la différence entre UX et UI;

✓ Connaitre les dix règles d’un bon design selon Dieter Rams;

✓ Définir une palette de couleurs;

✓ Concevoir des interfaces attrayantes et épurées.

 II. UX vs UI

❑ L'UX ou User Experience définit et étudie la facilité

d'utilisation d'un produit. Dans le cas des produits

numériques, il s'agit de l'interface, des modes de

navigation et des communications. L'objectif de l'UX est

de permettre au plus grand nombre d'utilisateurs

possible de comprendre et d'utiliser un produit. Si le rôle

du concepteur de l'interface utilisateur est de définir

l'aspect et la convivialité du produit, le rôle du

concepteur d’expérience utilisateur est de définir son

fonctionnement.
 II. UX vs UI

➢ En dehors de la planification de l'architecture de l'information, l'UX couvre également différents

types de recherche (enquêtes, tests A/B, groupes de discussion, interviews, ateliers, etc.) .

➢ L'interface utilisateur fait partie de l'expérience utilisateur car la lisibilité et l'apparence influencent

également la facilité d'utilisation et façonnent nos sentiments envers un produit.

 II. UX vs UI

❑ UI ou User Interface est la représentation visuelle d'un

produit numérique. Ses cas d'utilisation évidents sont les

applications et les sites web. L'interface utilisateur est le

lien entre l'utilisateur et la fonctionnalité d'un produit.

Elle permet d'atteindre le résultat souhaité grâce à une

série d'interactions homme-machine. Il s'agit d'une série

de textes, de formes, de graphiques et de photographies

combinés de manière à permettre une interaction fluide

et naturelle.
 II. UX vs UI

➢ Une interface est un mélange de grille, de disposition, de typographie, de couleurs, d'animations et

de micro-interactions. En d'autres termes, l'interface utilisateur est tout ce dont nous faisons

l'expérience, principalement avec nos yeux. L'architecture de l'information définie par l'UX est un

modèle pour l'aspect final raffiné de l'interface utilisateur.

➢ Un concepteur d'interface utilisateur est responsable de l'aspect final du produit. Son travail

consiste à définir son style unique et à l'adapter au marché cible. Cette représentation visuelle doit

être lisible, utilisable et dépourvue de tout élément inutile et distrayant.

 II. UX vs UI

NB : La conception d’interface n’est pas de l’art, On a souvent l'impression que les concepteurs

d'interface utilisateur et les concepteurs graphiques sont sur un pied d'égalité. Il s'agit d'une

simplification excessive qui doit être clarifiée. Un graphiste est généralement associé à un artiste,

alors que le design d'interface utilisateur est plutôt un métier, qui respecte un ensemble de

règles strictes. Les interfaces utilisateur ne sont pas "peintes avec des pixels", comme beaucoup de

gens le pensent. Il s'agit d'un plan précis et visuel d'un produit fonctionnel. Ce ne sont pas des

œuvres d'art sur un mur de galerie, mais plutôt un plan architectural.

 III. Les dix règles d’un bon design

Une interface utilisateur de qualité est la

somme de plusieurs éléments. C'est l'interaction

des couleurs, de la typographie, des interactions,

de la mise en page, du style qui exige beaucoup

de travail, d'expérience et d'imagination. Si vous

débutez en tant que designer, essayez d'abord

d'utiliser les bonnes pratiques éprouvées.

L'innovation et votre propre style viendront

naturellement, avec l'expérience.

 III. Les dix règles d’un bon design
➢ Une excellente interface utilisateur est rarement terminée. Dans la plupart des cas, il s'agit d'un

processus continu dont les modifications et les mises à jour découlent des commentaires des

utilisateurs et des idées novatrices.

➢ Un bon point de départ consiste à suivre les 10 règles du bon design de Dieter Rams. L'ensemble

original est souvent appelé les 10 commandements du bon design. Ces règles, cependant, étaient

destinées à couvrir initialement la conception d'objets du monde réel, ceux présentées ici sont

adaptés à l'interface utilisateur.

➢ NB : «Un bon design rend un produit facile à utiliser »

 III. Les dix règles d’un bon design
1. Un bon design est innovant

L'innovation est une bonne chose, mais elle ne doit pas se faire au détriment de l'utilité. Le

modèle d'interaction "Tirer pour rafraîchir" de Twitter en est un bon exemple. Il s'agissait d'un moyen

totalement nouveau, mais étrangement naturel et amusant d'actualiser votre contenu. Presque

invisible, il a pourtant fait son chemin dans d'innombrables autres produits. N'innovez pas pour le

plaisir d'être différent - les boutons triangulaires ne remplaceront pas les boutons rectangulaires

classiques dans un avenir proche.

Les micro-interactions sont aujourd'hui les plus innovantes. Il s'agit de définir comment des

éléments familiers s'influencent mutuellement en fonction des entrées de l'utilisateur, est toujours

ouverte aux idées nouvelles et créatives.

 2. Un bon design rend le produit utile

L'utilisabilité est la base de l'expérience utilisateur. La convivialité de l'IU, cependant, est surtout

une question de clarté. Les polices de caractères décoratives, l'absence de grille ou les couleurs

criardes réduisent la lisibilité de l'interface utilisateur et, par conséquent, sa convivialité.

3. Un bon design est esthétique

L'esthétique est assez subjective et la façon dont nous la percevons a beaucoup changé depuis

les années 70. Une chose qui n'a pas changé est que l'esthétique provient de l'harmonie interne.

Toutes les conceptions qui reposent sur de bons principes seront plus esthétiques que les

conceptions aléatoires
 4. Un bon design dur longtemps

Si la grille et l'espace blanc sont bien choisis, la conception restera valable, même après un

changement radical des tendances en matière de design. Les dégradés ou les illustrations ne

résisteront peut-être pas aussi bien, mais la précision et la clarté du design ne vieillissent pas.

5. Un bon design rend un produit compréhensible

Une interface utilisateur compréhensible est un mélange de bonne lisibilité, de hiérarchie

appropriée et de type de contenu adéquat. La plupart de ces éléments découlent d'une bonne

approche des grilles, des mises en page et de la précision générale. Une fois la partie conception

terminée, vous pouvez travailler sur la partie linguistique en conséquence.

 6. Un bon design est discret

Avec les outils de conception modernes, il est particulièrement facile d'aller jusqu'au bout des

couleurs, des animations et de l'enrobage. Ce type de conception a de l'allure sur les portfolios

Dribbble, mais on oublie souvent que le rôle de l'interface utilisateur est de fournir du contenu.

L'apparence de l'application Instagram est moins importante que les photos ou les vidéos qu'elle

contient. Essayez de ne pas tomber dans le piège de la forme au-dessus de la fonction.

7. Un bon design est honnête

L'honnêteté est facile à déterminer, notamment dans les conceptions plus complexes et à fort

contenu, comme les tableaux et les graphiques.

 8. Un bon design est minutieux jusque dans les détails

La précision de la conception est visible, notamment dans les éléments de faible importance, qui

sont toujours créés avec soin et attention aux détails. Une micro-interaction lors d'un clic sur une case

à cocher, ou un petit X utilisé pour fermer une fenêtre ne doivent pas être traités comme une

réflexion après coup. Faites en sorte que même vos termes et les conditions des écrans sont belles, et

les utilisateurs le remarqueront.

9. Un bon design est respectueux de l’environnement

Même les produits virtuels (comme la plupart des interfaces utilisateur) affectent

l'environnement d'une certaine manière. Bien sûr, l'effet n'est pas aussi important qu'avec la

fabrication physique, mais nous devrions tenir compte de la consommation d'énergie des serveurs

(l'optimisation de l'application pour des chargements plus rapides peut également être effectuée
 dans l'interface utilisateur) et des méthodes systémiques de construction des produits qui

permettent de les rendre plus rapides.

10. Un bon design est peu désigné que possible

Le moins est le mieux. Cette règle s'accorde bien avec la discrétion de l'entreprise. un produit.

L'interface utilisateur n'est pas censée être la star du spectacle. Elle n'existe que pour fournir du

contenu (texte, audio, vidéo, images, etc.) et ne doit pas les dominer visuellement. Une interface

utilisateur de qualité utilise donc les directives de la marque pour créer le meilleur canal possible de

diffusion du contenu. L'ornementation et les éléments inutiles peuvent conduire à un projet

surdimensionné qui a un impact négatif sur l'expérience réelle. Le design est un chemin, pas un but.

Concevoir intelligemment.
 III. Les Bases du design

❑ Les écrans ❑ Boutons

❑ Mise en page et Grille ❑ Formulaires

❑ Les couleurs ❑ Modal & Pop-up

❑ Les gradients ❑ Navigation

❑ Typographie ❑ Animation

❑ Icônes ❑ Photos
 1. Les écrans

La conception de l'interface utilisateur est une question d'affichage. Étant donné que l'interface

utilisateur est tout ce que nous voyons, il est essentiel de comprendre sur quoi nous la voyons. Aux

premiers jours du web, c'était assez simple : vous conceviez un écran d'une taille comprise entre 640

x 480 et 800 x 600 pixels. Mais c'était à la fin des années 90, et les choses ont commencé à changer

rapidement par la suite. La plupart des écrans de l'époque avaient des résolutions similaires, étaient

très lourds et ne pouvaient pas afficher beaucoup de couleurs. Ils avaient également des taux de

rafraîchissement faibles qui se traduisaient par une expérience de défilement médiocre. Les écrans

de cette époque limitaient souvent les possibilités visuelles des sites Web.
Avant les écrans plats d'aujourd'hui, la plupart des

interfaces utilisateur étaient affichées sur des

moniteurs cathodiques de l'ancienne génération.

Ils avaient souvent un peu de flou à l'image (même

à des résolutions plus élevées), mais dans la plupart

des cas, vous pouvez facilement distinguer les

pixels individuels
La technologie a fait un bond en avant depuis les débuts d'Internet. Aujourd'hui, le téléphone que

vous tenez dans votre main a une résolution qui n'existait pas il y a vingt ans. Ils affichent également

des millions de couleurs et ont des taux de rafraîchissement très élevés.

Une comparaison rapide. Un écran à tube cathodique typique de la fin des années 90 avait

environ 1/6 de la résolution de l'iPhone actuel, qui est beaucoup plus petit.
Pour les appareils mobiles, il est également essentiel de penser à la portée moyenne. Une interface

composée de manière aléatoire peut être compliquée à utiliser d'une seule main et entraîner des

frustrations. Nous partons du principe que le modèle d'utilisation typique du téléphone est une main

unique qui tient le téléphone, le pouce de cette même main effectuant la plupart des tâches à l'écran.
 La portée peut également aider à déterminer la facilité

de navigation dans le produit. Le célèbre modèle de menu

hamburger se trouve à l'endroit le moins favorable que l'on

puisse imaginer pour les droitiers.

Les onglets alignés en bas sont, dans la plupart des

cas, la manière la plus simple de concevoir des menus et

devraient être considérés comme le premier choix pour

presque tous les produits.

 2. Mise en page et Grille

La grille est une structure de lignes qui permet de maintenir la cohérence de votre mise en page.

C'est le plan structurel de tout bon projet, car il aide à créer la hiérarchie entre les éléments et permet

une meilleure compréhension et un meilleur traitement.

 Même si nous ne voyons pas les lignes de la grille dans le projet final (généralement), même un

changement subtil qui sort des règles préétablies aura un impact significatif sur la façon dont nous

percevons le résultat final. C'est la différence inconsciente entre un bon et un excellent projet. C'est

pourquoi il est essentiel de définir la grille dès le début du projet. La création de règles et de lignes

directrices dès le début permettra une plus grande cohérence et un déploiement plus rapide.

La construction d'une grille doit toujours commencer par le choix de sa valeur de base. C'est le plus

petit nombre que nous utilisons pour définir toutes les autres valeurs. En général, toutes les valeurs

de la grille doivent être divisibles par ce nombre de base.

➢ Les formes
 3. Les couleurs

Le choix de la bonne palette de couleurs est l'une des étapes les plus cruciales et essentielles du

processus de conception. Les teintes que nous utilisons influencent le style et l'humeur du projet,

créent l'aspect et la sensation et sont très mémorables.

C'est aussi la raison pour laquelle les personnes qui ne se souviennent pas du nom du produit

l'appellent "cette application bleue" ou "ce site web noir et blanc".

Les couleurs sont également fortement liées à nos émotions, il ne faut donc pas les choisir sur la

seule base de l'esthétique.

Certaines couleurs, comme le rouge ou le vert, ont des associations émotionnelles puissantes

dans la plupart des cultures.

 L'accessibilité d'un produit numérique est une science qui consiste à s'assurer que le produit est

adapté aux utilisateurs âgés, aux malvoyants, aux daltoniens et à d'autres personnes (y compris les

personnes utilisant des écrans à faible contraste et de mauvaise qualité). L'idée générale est qu'un

produit numérique doit être facile à "voir" pour tout le monde.

Les composantes de la couleur comme la luminosité et la saturation influencent le contraste, qui

affecte directement la lisibilité. Plus la lisibilité est élevée, plus le produit est facile à utiliser pour un

large groupe de personnes.

NB : ‘’ Le contraste est essentiel pour l'accessibilité’’