UX/UI : les bases de l'ergonomie web

Tu as deja quitte un site web parce que tu ne trouvais pas ce que tu cherchais ? Ou parce que le design te semblait confus, lent, ou tout simplement moche ? C'est exactement la que l'UX et l'UI entrent en jeu. Dans le cadre du BTS NDRC et plus largement de toute formation touchant au digital, comprendre l'ergonomie web n'est plus optionnel : c'est une competence cle. Combine ces principes avec de bonnes animations CSS et des landing pages optimisees pour creer des experiences web memorables.

UX vs UI : quelle difference ?

On confond souvent UX et UI, et pourtant ces deux disciplines sont bien distinctes, meme si elles sont complementaires. L'UX (User Experience) designe l'experience globale de l'utilisateur lorsqu'il interagit avec un produit ou un service. L'UI (User Interface) concerne l'interface visuelle : les couleurs, la typographie, les boutons, les icones.

Pour simplifier : l'UX, c'est le parcours. L'UI, c'est le decor. Un beau decor dans un parcours incomprehensible ne sert a rien. Et un parcours logique dans un decor repoussant ne donnera pas envie de rester.

Le design n'est pas seulement ce a quoi un produit ressemble. Le design, c'est comment il fonctionne. — Steve Jobs

Voici les differences principales :

UX Design : recherche utilisateur, architecture de l'information, wireframes, tests d'utilisabilite, parcours utilisateur
UI Design : design visuel, palette de couleurs, typographie, composants d'interface, animations et micro-interactions
Objectif commun : creer une experience fluide, intuitive et agreable pour l'utilisateur final

Les principes de l'ergonomie web

L'ergonomie web repose sur des principes scientifiques et des lois cognitives que tout futur professionnel du digital devrait connaitre. Ces principes guident la conception d'interfaces qui respectent la facon dont notre cerveau traite l'information.

La loi de Hick

Plus tu proposes de choix a un utilisateur, plus il mettra de temps a prendre une decision. C'est la loi de Hick. En pratique, cela signifie qu'il faut limiter les options visibles, hierarchiser l'information et guider l'utilisateur vers l'action principale. Un menu de navigation avec 15 liens sera moins efficace qu'un menu avec 5 categories bien pensees.

La loi de Fitts

La loi de Fitts etablit que le temps pour atteindre une cible depend de sa taille et de sa distance. En design, cela veut dire que les boutons d'action importants (call-to-action) doivent etre grands, visibles et places a des endroits strategiques. Un bouton "Acheter" minuscule en bas de page, c'est une erreur classique.

La charge cognitive

Notre cerveau a une capacite limitee de traitement de l'information. La charge cognitive represente l'effort mental necessaire pour utiliser une interface. Pour la reduire :

Utiliser des conventions connues (logo en haut a gauche, panier en haut a droite)
Regrouper les informations par categorie (loi de proximite de Gestalt)
Eviter les animations superflues qui distraient
Privilegier la coherence visuelle sur l'ensemble du site
Utiliser des libelles clairs plutot que du jargon technique

Le processus de design UX

Le design UX n'est pas une question d'inspiration spontanee. C'est un processus structure, iteratif, qui s'appuie sur la recherche et les tests. Voici les grandes etapes :

Recherche utilisateur (UX Research) : interviews, sondages (utilise Google Forms ou Typeform gratuit), analyse des personas, etude de la concurrence. L'objectif est de comprendre les besoins reels des utilisateurs, pas de deviner ce qu'ils veulent
Architecture de l'information : organiser le contenu de maniere logique avec FigJam (gratuit, integre a Figma) ou Miro (plan gratuit). C'est le squelette du site : arborescence, categories, hierarchie des pages
Wireframing : creer des maquettes filaires dans Figma (gratuit). Utilise le plugin Wireframe de Figma Community pour avoir des composants pre-faits et aller plus vite. On se concentre sur le placement des elements et le parcours utilisateur
Prototypage : transformer les wireframes en prototypes interactifs directement dans Figma (mode Prototype). Ajoute des transitions, des hover states et des interactions pour simuler l'experience finale
Tests d'utilisabilite : utilise Maze (maze.co — plan gratuit pour 1 projet) pour faire tester ton prototype par de vrais utilisateurs et obtenir des metriques quantitatives automatiquement (taux de reussite, temps par tache, clics inutiles)

Exemple concret : imagine que tu redesignes le site de ton association etudiante. Commence par interviewer 5 etudiants sur ce qu'ils cherchent (evenements ? inscriptions ? contact ?). Cree une arborescence dans FigJam. Dessine les wireframes dans Figma. Prototypage le parcours "inscription a un evenement". Teste avec 3 camarades via Maze. En un week-end, tu as un processus UX complet a mettre dans ton portfolio.

Si tu ne parles pas a tes utilisateurs, tu ne fais pas de l'UX. Tu fais de la decoration.

Les outils du designer

L'ecosysteme d'outils UX/UI a enormement evolue ces dernieres annees. Voici les incontournables que tu dois connaitre en 2026 :

Figma (gratuit)

Figma (figma.com) est devenu le standard de l'industrie pour le design d'interfaces. Son approche collaborative en temps reel, ses composants reutilisables et son systeme de design tokens en font l'outil de choix pour les equipes. La version gratuite inclut 3 fichiers Figma, le prototypage et l'acces a la communaute de plugins — largement suffisant pour un etudiant. Pour commencer, cree un compte gratuit et explore les templates de la Figma Community (fichiers de design gratuits partages par des pros).

Palette de couleurs et typographie

Pour creer des palettes harmonieuses, utilise Coolors.co (coolors.co — generateur de palettes gratuit). Appuie sur la barre d'espace pour generer des combinaisons, verrouille les couleurs qui te plaisent. Pour la typographie, Google Fonts (fonts.google.com) offre plus de 1500 polices gratuites et libres de droits. Combine une police de titre expressive (comme Syne, utilisee sur ce blog) avec une police de corps lisible (comme Inter).

Maze (tests utilisateurs)

Maze (maze.co) est un outil de test d'utilisabilite qui s'integre directement avec Figma. Tu importes ton prototype, tu definis des taches, et tu obtiens des metriques quantitatives sur le parcours de tes testeurs : taux de reussite, temps moyen, clics inutiles. Le plan gratuit permet 1 projet actif — parfait pour un projet etudiant.

Hotjar (heatmaps)

Hotjar (hotjar.com — gratuit jusqu'a 35 sessions/jour) te montre exactement ce que font tes visiteurs sur ton site : ou ils cliquent (heatmaps), comment ils scrollent, et tu peux meme regarder des enregistrements de sessions reelles. C'est un outil revelateur pour identifier les points de friction. Microsoft Clarity (clarity.microsoft.com) est une alternative 100% gratuite et sans limites.

D'autres outils meritent aussi ton attention :

Framer : prototypage avance avec du code, ideal pour des animations complexes
Coolors.co : generateur de palettes de couleurs accessibles et harmonieuses
Google Fonts : plus de 1500 polices gratuites, avec un outil de comparaison integre
Notion / FigJam : collaboration et organisation de la recherche UX
Contrast Checker (WebAIM) : verifie que tes couleurs sont accessibles (ratio de contraste WCAG)

Tendances UX/UI 2026

Le design d'interface evolue constamment. Voici les tendances majeures qui definissent l'annee 2026 :

Dark mode et themes adaptatifs

Le dark mode n'est plus une option, c'est une attente. Les utilisateurs veulent pouvoir basculer entre themes clair et sombre, et les interfaces doivent s'adapter automatiquement aux preferences systeme. Le dark mode reduit la fatigue visuelle et economise la batterie sur les ecrans OLED.

Glassmorphism et effets de profondeur

Le glassmorphism, cet effet de verre depoli avec transparence et flou d'arriere-plan, continue de dominer. Il apporte de la profondeur et de l'elegance aux interfaces modernes. Ce blog que tu lis en est un bon exemple, avec ses cartes semi-transparentes et ses effets de lumiere ambiante.

Micro-interactions

Les micro-interactions sont ces petites animations qui repondent aux actions de l'utilisateur : un bouton qui pulse au clic, une notification qui glisse, un formulaire qui se valide champ par champ. Elles rendent l'interface vivante et guident l'utilisateur de maniere subtile.

Design assiste par IA

L'IA generative transforme le workflow des designers. Des outils comme les plugins Figma alimentes par l'IA permettent de generer des layouts, de suggerer des palettes de couleurs harmonieuses, d'ecrire du microcopy et meme de produire des illustrations sur mesure. Le designer de 2026 est un orchestrateur qui utilise l'IA pour accelerer les taches repetitives.

Conclusion

L'UX/UI n'est pas une discipline reservee aux designers. C'est une competence transversale qui concerne tous les professionnels du digital. Que tu sois en BTS NDRC, en ecole de commerce ou en formation web, comprendre l'ergonomie te donnera un avantage enorme dans tes projets professionnels.

Retiens l'essentiel : place toujours l'utilisateur au centre de tes decisions. Teste, itere, ameliore. Le meilleur design est celui que l'utilisateur ne remarque meme pas, parce que tout fonctionne naturellement.

Chez Studens, on croit que chaque etudiant devrait maitriser ces fondamentaux. Pour commencer des aujourd'hui : (1) Cree un compte gratuit sur Figma, (2) Duplique un template de la Figma Community et personnalise-le, (3) Genere ta palette sur Coolors.co, (4) Choisis ta paire de polices sur Google Fonts. En une heure, tu as les bases de ton premier design system. Ensuite, explore les animations CSS pour donner vie a tes maquettes et les principes de conversion des landing pages pour maximiser l'impact.