Les Acronymes du Web : UX/UI & Design

UX – User Experience

Ce que c’est vraiment

L’UX (User Experience, ou Expérience Utilisateur en français) désigne l’ensemble des émotions, perceptions et réactions qu’un visiteur ressent lorsqu’il interagit avec votre site web. Ce n’est pas seulement « est-ce que c’est beau ? », mais « est-ce que c’est facile, pratique, agréable, efficace ? ».

L’UX englobe tout le parcours utilisateur : de l’arrivée sur la page d’accueil à la conversion finale (achat, contact, inscription). Elle pose des questions simples mais essentielles : combien de clics faut-il pour accéder à l’information recherchée ? Les boutons sont-ils visibles et compréhensibles ? Le tunnel d’achat est-il fluide ? L’utilisateur se sent-il guidé ou perdu ?

Une bonne UX est invisible : l’utilisateur navigue sans réfléchir, trouve ce qu’il cherche naturellement, et accomplit son objectif sans friction. Une mauvaise UX, elle, se rappelle douloureusement à lui à chaque clic.

Pourquoi c’est important

Les chiffres sont sans appel : 9 utilisateurs sur 10 ne reviennent pas sur un site après une mauvaise expérience utilisateur. Un parcours d’achat compliqué, c’est un panier abandonné. Un formulaire de contact trop long, c’est un lead perdu. Une navigation confuse, c’est un utilisateur qui ne convertira pas.

À l’inverse, une UX bien pensée augmente mécaniquement vos conversions. Chaque friction supprimée, chaque parcours simplifié, chaque doute levé se traduit par plus d’engagements. Amazon, par exemple, a calculé que 100 millisecondes de lenteur sur son site lui coûtaient 1 % de chiffre d’affaires. Imaginez l’impact d’un parcours entier mal pensé.

L’UX, n’est pas du luxe : c’est un levier business direct.

Ce que ça change pour vous

Chez Highfive, nous vous impliquons dans la conception du parcours utilisateur, nous ne livrons jamais un site sans avoir testé, challengé, les parcours utilisateurs. Nous évaluons chaque étape critique : comment un visiteur arrive-t-il sur votre site ? Que cherche-t-il ? Quel chemin emprunte-t-il pour y parvenir ? Où peut-il se perdre ?

Concrètement, cela se traduit par :

• Des menus clairs et hiérarchisés, où chaque page est accessible en 3 clics maximum
• Des boutons d’action (CTA) visibles et explicites : « Demander un devis », pas « En savoir plus »
• Des formulaires courts et guidés : on ne demande que l’essentiel, avec des messages d’aide
• Un tunnel de conversion sans friction : moins d’étapes = plus de conversions

Exemple : pour un site e-commerce, nous testons le parcours d’achat du début à la fin, sur mobile ET desktop. Si un bouton est trop petit, si un champ est mal libellé, si une étape est inutile : on corrige.

Résultat ? Des sites qui convertissent, pas seulement qui existent.

UI – User Interface

Ce que c’est vraiment

L’UI (User Interface, ou Interface Utilisateur) représente la couche visuelle et interactive de votre site web : les couleurs, la typographie, les boutons, les icônes, la mise en page, les espacements. Tout ce que l’utilisateur voit et touche.

Si l’UX est l’architecte qui pense la structure du bâtiment, l’UI est le décorateur d’intérieur qui choisit les couleurs des murs, le mobilier, l’éclairage. L’UI transforme un wireframe fonctionnel en une interface esthétiquement cohérente et alignée avec votre identité de marque.

L’UI, c’est aussi la micro-interaction : l’animation au survol d’un bouton, la transition entre deux pages, le feedback visuel quand on remplit un formulaire. Ces détails créent une sensation de fluidité et de modernité.

Pourquoi c’est important

L’UI, c’est votre première impression. En 0,05 seconde, un visiteur se forge une opinion sur votre site (étude Microsoft). Si l’interface est datée, brouillonne, ou incohérente visuellement, votre crédibilité en prend un coup. À l’inverse, une UI soignée inspire confiance et professionnalisme.

L’UI joue également un rôle fonctionnel : un bouton mal contrasté peut être invisible, une typo trop petite illisible sur mobile, des couleurs mal choisies peuvent fatiguer l’œil. Une bonne UI facilite la lecture, guide le regard, met en avant les actions prioritaires.

Enfin, l’UI porte votre identité de marque. Les couleurs, les formes, les choix typographiques racontent qui vous êtes. Un cabinet d’avocats n’aura pas la même UI qu’une startup tech, même si les deux sites ont la même structure UX.

Ce que ça change pour vous

Chez Highfive, nous concevons des interfaces qui marient esthétique moderne et cohérence de marque. Chaque projet démarre par une phase de design où nous définissons :

• La palette de couleurs : basée sur votre charte graphique, optimisée pour le web (contraste WCAG)
• La typographie : hiérarchie claire (titres, texte courant, légendes), lisibilité sur tous écrans
• Les composants UI : boutons, cartes, formulaires, avec un style unifié
• Les micro-interactions : animations subtiles qui rendent l’interface vivante

Exemple : pour un site vitrine, nous avons opté pour une UI minimaliste avec beaucoup d’espaces blancs, une typographie élégante, et des photos en pleine largeur. Pour un e-commerce, l’UI était plus colorée, dynamique, avec des boutons arrondis et des illustrations ludiques.

L’UI ne se contente pas d’être jolie : elle sert votre message.

IHM – Interface Homme-Machine

Ce que c’est vraiment

L’IHM (Interface Homme-Machine) est le terme français équivalent à l’UI, mais avec une vision plus large. Elle englobe toutes les interactions possibles entre l’humain et le système informatique : clavier, souris, écran tactile, commande vocale, réalité virtuelle…

Dans le contexte du web, l’IHM s’intéresse à la façon dont l’utilisateur interagit concrètement avec l’interface : navigation au clavier (accessibilité), gestes tactiles (mobile), ergonomie des formulaires, affordance des éléments (un bouton doit ressembler à un bouton).

L’IHM dépasse la simple esthétique pour intégrer des notions d’ergonomie cognitive : comment l’utilisateur comprend-il l’interface ? Combien de charge mentale cela lui demande-t-il ? Les actions sont-elles prévisibles ?

Pourquoi c’est important

Une bonne IHM réduit la courbe d’apprentissage : l’utilisateur comprend immédiatement comment utiliser votre site, sans avoir besoin d’un mode d’emploi. Les conventions web (logo cliquable en haut à gauche, menu hamburger sur mobile) sont des exemples d’IHM réussie.

L’IHM est aussi centrale pour l’accessibilité : un site navigable uniquement à la souris exclut les utilisateurs de lecteurs d’écran ou de navigation clavier. Une IHM inclusive pense toutes les modalités d’interaction.

Enfin, l’IHM anticipe les erreurs humaines : si un utilisateur peut se tromper, il se trompera. Une bonne IHM prévient les erreurs (confirmation avant suppression) ou les rend faciles à corriger (annuler une action).

Ce que ça change pour vous

Chez Highfive, nous concevons des IHM intuitives et inclusives. Concrètement :

• Navigation clavier : les éléments interactifs sont accessibles au clavier (Tab, Enter)
• Zones de clic généreuses : surtout sur mobile, où le doigt est moins précis qu’une souris
• Feedback immédiat : si l’utilisateur clique, quelque chose se passe (chargement, changement de couleur, message de confirmation)
• Affordance claire : les boutons ressemblent à des boutons, les liens sont soulignés ou colorés

Exemple : sur un formulaire de contact, nous indiquons clairement les champs obligatoires, affichons des messages d’erreur en temps réel (« l’email n’est pas valide »), et proposons une confirmation visuelle après envoi (« Votre message a bien été envoyé »).

Une bonne IHM ne se remarque pas : elle fonctionne.

RWD – Responsive Web Design

Ce que c’est vraiment

Le RWD (Responsive Web Design, ou Design Adaptatif en français) désigne la capacité d’un site web à s’adapter automatiquement à la taille de l’écran : ordinateur de bureau, tablette, smartphone, voire écran TV ou montre connectée.

Techniquement, le responsive repose sur les media queries CSS, qui appliquent des styles différents selon la largeur de l’écran. Un menu horizontal sur desktop devient un menu hamburger sur mobile. Une grille de 4 colonnes devient une colonne unique. Les images se redimensionnent. Le texte s’agrandit.

L’idée fondamentale : un seul site, plusieurs affichages. Pas de version mobile séparée, pas de double maintenance. Un seul code qui s’adapte intelligemment.

Pourquoi c’est important

Aujourd’hui, plus de 60 % du trafic web provient de mobiles (source : Statista). Si votre site n’est pas responsive, vous perdez plus de la moitié de vos visiteurs potentiels. Pire : vous les frustrez, car ils devront zoomer, scroller horizontalement, cliquer sur de minuscules boutons.

Google a également officialisé le Mobile-First Indexing : l’indexation de votre site se fait désormais sur la version mobile, pas desktop. Un site non-responsive est donc pénalisé en référencement.

Enfin, le responsive facilite la maintenance : vous n’avez qu’une seule base de code à maintenir, pas deux versions distinctes.

Ce que ça change pour vous

Chez Highfive, 100 % de nos sites sont responsive nativement. Ce n’est même plus une option : c’est un standard de qualité, depuis plus de 10 ans !

Concrètement, cela signifie :

• Des grilles flexibles : le contenu se réorganise intelligemment selon l’écran
• Des images adaptatives : taille et résolution ajustées au device (pas de photo 4K chargée sur un smartphone)
• Des points de rupture stratégiques : nous testons sur mobile (320px), tablette (768px), desktop (1024px et +)
• Une navigation optimisée : menu hamburger sur mobile, menu horizontal sur desktop.

Le responsive n’est plus un bonus : c’est la base.

MWD – Mobile Web Design

Ce que c’est vraiment

Le MWD (Mobile Web Design) pousse le responsive un cran plus loin : il consiste à concevoir votre site en pensant mobile d’abord (mobile-first), puis à adapter pour les écrans plus grands (desktop).

C’est l’inverse de l’approche traditionnelle où nous concevions pour desktop, puis on « adaptait » pour mobile. Ici, on part du plus petit écran (smartphone), on identifie l’essentiel, on épure, on simplifie. Ensuite, on ajoute des éléments pour les écrans plus larges.

Cette philosophie force à se poser la question : qu’est-ce qui est vraiment important ? Un menu avec 20 entrées ? Un slider géant ? Des sidebars remplies de widgets ? Sur mobile, tout ça ne passe pas. Il faut choisir.

Pourquoi c’est important

Le Mobile-First garantit que l’essentiel est accessible sur le device majoritaire (le smartphone). Trop de sites pensés desktop deviennent illisibles sur mobile : textes minuscules, boutons trop petits, contenus cachés dans des sous-menus.

C’est aussi une approche performante : en partant du mobile, on est forcé d’alléger (moins d’images lourdes, moins de scripts, moins de fonctionnalités superflues). Et ce qui est léger sur mobile reste rapide sur desktop.

Enfin, Google valorise le Mobile-First dans son algorithme. Un site pensé mobile-first a toutes les chances d’être mieux indexé.

Ce que ça change pour vous

Chez Highfive, nous concevons toujours avec le Mobile en tête :

1. Maquette mobile : nous dessinons la version smartphone
2. Hiérarchisation des contenus : qu’est-ce qui doit absolument apparaître en haut de page ?
3. Progressive Enhancement : on enrichit progressivement pour tablette, puis desktop (sidebars, animations, contenus secondaires)
4. Tests sur devices : nous testons sur iPhone, Android, différentes tailles

SVG – Scalable Vector Graphics

Ce que c’est vraiment

Le SVG (Scalable Vector Graphics) est un format d’image vectoriel, c’est-à-dire basé sur des formules mathématiques (lignes, courbes, formes) plutôt que sur des pixels. Contrairement aux formats bitmap (JPG, PNG), un SVG peut être agrandi indéfiniment sans perdre en qualité.

Un fichier SVG est en réalité du code XML : vous pouvez l’ouvrir dans un éditeur de texte et voir les instructions qui dessinent l’image. Cette nature « code » permet de modifier les couleurs, tailles, animations directement en CSS ou JavaScript.

Les SVG sont idéaux pour : logos, icônes, illustrations, graphiques, schémas techniques, animations simples.

Pourquoi c’est important

Les écrans modernes ont des résolutions variées : Retina (2x), 4K (4x)… Un logo PNG à 100px de large peut paraître flou sur un écran Retina. Un SVG, lui, reste net à toutes les tailles et toutes les résolutions.

Les SVG sont aussi ultra-légers : un logo complexe pèse souvent moins de 5 Ko en SVG, contre 50 Ko en PNG haute résolution. C’est crucial pour les performances web.

Enfin, les SVG sont modifiables en CSS : vous pouvez changer la couleur d’une icône au survol, animer un graphique, adapter un logo au thème clair/sombre, le tout sans recharger d’image.

Ce que ça change pour vous

Chez Highfive, nous utilisons systématiquement le SVG pour :

• Les logos : nets sur tous les écrans, poids minimal, modifiables en CSS
• Les icônes : bibliothèques d’icônes (Font Awesome, Feather Icons) sont en SVG
• Les illustrations : graphiques, schémas, infographies interactives.

Le SVG, c’est la légèreté et la qualité.

RGB / CMJN – Red Green Blue / Cyan Magenta Jaune Noir

Ce que c’est vraiment

RGB (Red Green Blue) et CMJN (Cyan Magenta Jaune Noir, ou CMYK en anglais) sont deux espaces colorimétriques, c’est-à-dire deux façons de représenter les couleurs.

• RGB est un mode additif (on ajoute de la lumière) : utilisé pour les écrans (ordinateurs, smartphones, TV). On combine du rouge, du vert et du bleu pour obtenir toutes les couleurs. Noir = absence de lumière (0,0,0). Blanc = lumière maximale (255,255,255).
• CMJN est un mode soustractif (on retire de la lumière) : utilisé pour l’impression (imprimantes, affiches, magazines). On combine du cyan, du magenta, du jaune et du noir pour obtenir les couleurs. Blanc = absence d’encre (papier blanc). Noir = toutes les encres.

Un fichier destiné au web doit être en RGB. Un fichier destiné à l’impression doit être en CMJN.

Pourquoi c’est important

Si vous utilisez un fichier CMJN sur le web, les couleurs peuvent apparaître ternes ou délavées dans certains navigateurs. Inversement, si vous envoyez un fichier RGB à l’imprimeur, les couleurs imprimées seront différentes de ce que vous voyez à l’écran (souvent plus sombres).

Exemple classique : vous créez une charte graphique avec un bleu RGB vibrant (#0066FF). Vous l’envoyez à l’imprimeur sans conversion CMJN. Le bleu imprimé est plus terne, plus violet. Déception.

Respecter l’espace colorimétrique approprié garantit une cohérence visuelle entre écran et print.

Ce que ça change pour vous

Chez Highfive, nous gérons cette problématique pour vous :

• Tous les visuels web sont livrés en RGB (même si votre logo nous est fourni en CMJN)
• Nous fournissons les deux versions de votre charte graphique : RGB pour le web, CMJN pour l’impression
• Nous testons les couleurs sur différents écrans (certains écrans affichent les couleurs différemment)

Concrètement :

• Si vous nous fournissez un logo en CMJN, nous le convertissons en RGB pour le web
• Si vous avez besoin de supports print (cartes de visite, flyers), nous convertissons en CMJN avec profil ICC adapté
• Nous vous recommandons des couleurs « web-safe » et « print-safe » pour éviter les déceptions

RGB pour le web, CMJN pour l’impression : une règle simple qui évite bien des déconvenues.

PNG / JPG / WebP – Formats d’Images Web

Ce que c’est vraiment

PNG, JPG et WebP sont trois formats d’images couramment utilisés sur le web, chacun avec ses forces et faiblesses :

• JPG (JPEG) : format compressé avec perte, idéal pour les photos. Poids léger, mais perd en qualité à chaque compression. Pas de transparence.
• PNG : format compressé sans perte, idéal pour les graphiques, logos, icônes. Supporte la transparence (canal alpha). Plus lourd que JPG.
• WebP : format moderne développé par Google, combine le meilleur des deux : compression efficace (jusqu’à 30 % plus léger que JPG) + support de la transparence + support des animations (comme les GIF). Supporté par tous les navigateurs modernes.

Le choix du format impacte directement les performances : une photo 2000px en PNG peut peser 2 Mo, la même en JPG 200 Ko, et en WebP 150 Ko.

Pourquoi c’est important

Le poids des images représente souvent 50 à 70 % du poids total d’une page web. Optimiser les formats, c’est réduire les temps de chargement, améliorer les Core Web Vitals (LCP), économiser de la bande passante mobile.

Un site qui sert des PNG de 2 Mo sur la page d’accueil sera lent, pénalisé en SEO, et frustrant sur mobile. Un site qui sert des WebP optimisés chargera en une fraction de seconde.

Le WebP, en particulier, est devenu le standard moderne : il combine qualité et légèreté, avec un support navigateur désormais universel (98 % des utilisateurs).

Ce que ça change pour vous

Chez Highfive, nous optimisons systématiquement tous les visuels :

1. Choix du bon format :
   • Photos → JPG ou WebP
   • Logos/icônes → SVG (vectoriel) ou PNG (si bitmap nécessaire)
   • Illustrations avec transparence → PNG ou WebP
2. Compression agressive :
   • JPG : qualité 80-85 % (au-delà, le gain visuel est imperceptible mais le poids explose)
   • PNG : optimisation
   • WebP : compression
3. Responsive images :
   • Nous servons différentes tailles selon l’écran (pas de photo 2000px sur un mobile 375px)
   • Attribut srcset pour servir 1x, 2x (Retina), 3x
4. Lazy loading :
   • Les images hors écran ne chargent qu’au scroll (attribut loading="lazy")

WebP + compression + responsive + lazy loading = performances maximales.