On aimerait tous que lorsque nos prospects voient un de nos supports de communication, ils s’exclament « ah, c’est l’entreprise X ! » avec un sourire aux lèvres.
C’est ce que font Apple, Coca Cola, McDonald’s et bien d’autres.
Quel est le secret de ces marques pour rendre leur univers de marque reconnaissable et inoubliable ? Et surtout, comment est-ce que vous aussi pouvez le mettre en pratique.
La réponse est simple : créez votre charte graphique.
On vous montre ça tout de suite.
Qu’est-ce qu’une charte graphique ?
Loin d’être une lubie coûteuse des studios de création graphique, la charte graphique est un document indispensable à toute marque.
C’est le cahier des charges qui forge l’identité visuelle forte qui vous permet de vous différencier visuellement de la concurrence.
Tous les éléments graphiques utilisés par votre entreprise doivent s’aligner avec ce précieux cahier des charges pour designer.
Voici les éléments que l’on retrouve dans une charte graphique :
Le logo ;
La palette de couleurs à utiliser ;
Les icônes :
Le ton et la voix de votre marque ;
Les polices d’écriture/typographies à utiliser ;
Un guide pour choisir les illustrations et autres images à utiliser.
Créer une charte graphique présente 3 gros avantages :
Construire une marque forte et reconnaissable partout et par tous ;
Fédérer une communauté autour de la marque ;
Se différencier de la concurrence.
Voyons les plus en détails tout de suite.
Construire une marque forte et reconnaissable partout
Est-ce que vous connaissez quelqu’un qui s’est acheté une Mercedes ?
Oui ?
Faites un petit test : demandez-lui pourquoi il l’a fait.
Après tout, il y a des dizaines d’autres marques plus fiables, avec de meilleures finitions et de meilleures performances.
Pourtant, votre connaissance a jeté son dévolu sur la firme allemande.
La raison : c’est parce que Mercedes ce n’est pas que des véhicules, c’est avant tout une communauté, un style de vie (et un signe d’appartenance à un groupe).
Si Mercedes a pu le faire, c’est en partie grâce à sa charte graphique.
Sa charte graphique, qui se ressent sur tous ses produits et supports de com, en fait une marque reconnaissable.
Et c’est exactement la même chose que votre charte graphique fera pour vous : vous offrir une image de marque forte et séduisante aux yeux de votre clientèle.
Fédérer une communauté autour de la marque
Toute votre charte graphique tournera autour de vos clients, de vos valeurs et des émotions que vous voulez éveiller chez vos fans.
En gros, vous jouerez beaucoup sur les informations inconsciemment perçues par vos prospects.
Par exemple, vous voulez renvoyer un sentiment de confiance et de professionnalisme ? Optez pour une nuance de bleu en couleur primaire et un logo carré ou arrondi.
Logo de PayPalLogo du crédit lyonnais
Logo de la Deutsche BankLogo citibank
À l’inverse, vous tenez un fast-food et voulez susciter de l’enthousiasme et de l’appétit ? Mettez du rouge, de l’orange et du jaune partout.
Logos enseignes de fastfoodIntérieur d’un fastfood
Toutes ses informations vont influencer les attentes des prospects envers votre service.
Ils s’attendront à vivre une certaine expérience. Et si vous leur fournissez l’expérience utilisateur qu’ils attendent (voire plus), bingo : vous avez des fans.
Différenciez-vous de vos concurrents
En un clic sur son smartphone, votre potentiel client a le choix entre des milliers de prestataires.
Dont vous.
Comment faire pour qu’ils vous choisissent vous, et pas un de vos concurrents ?
Créez une identité visuelle et une image de marque fortes et qui vous différencient du reste de votre marché.
Voici un exemple de charte graphique réussi : Slack
Brand Guidelines Slack
On ne présente plus Slack.
L’application de communication collaborative et de gestion de projet ultra-prisée par les entreprises de toutes tailles.
Mais une autre raison qui fait que Slack sert de référence chez les designers, c’est sa charte graphique.
En 50 pages et 3 sections, ce document détaille toute l’identité visuelle de la marque aux créatifs du monde entier.
Prêtez attention aux sections, elles peuvent vous inspirer pour créer votre propre brandbook :
Section 1 : Définition de la marque
Section 2 : Éléments du design
Section 3 : Gouvernance
Sommaire du brand Guidelines Slack
Allez, sans plus tarder, voyons comment créer votre propre charte graphique en 10 étapes.
Comment créer une charte graphique en 10 étapes top chrono
Avant de vous ruer sur Figma ou sur la suite Adobe, sortez votre bloc-note. Voici les 10 étapes à suivre pour donner vie à votre propre charte graphique.
1 – Définir son marché et sa niche
Avant de penser logo, images, couleurs et autres, commencez par analyser votre marché.
Quels services/produits vendez-vous ?
Quels segments de clientèle allez-vous viser ?
Quelle niche ciblez-vous ?
Sera-t-elle suffisante pour vous permettre de faire un chiffre d’affaires et des marges suffisantes ?
Quelles sont les valeurs qui comptent le plus aux yeux de vos futurs clients ?
Quelles sont les attentes dans votre secteur d’activité ?
Et quelles sont les pratiques de communication les plus utilisées dans ce secteur ?
Toutes ces questions vont vous permettre d’ajuster votre communication digitale et print pour mieux faire résonner votre marque avec vos clients.
En plus de vous différencier des autres entreprises déjà présentes s’il y en a.
2 – Définir vos buyer personas
Maintenant que vous avez déterminé la niche à cibler, il est temps de définir vos buyer personas.
Concrètement, ce sont les personnes qui vont acheter vos produits/services.
Voici les informations typiques d’un buyer persona :
les données démographiques (genre, ville, niveau d’études, distribution d’âge, profession, CSP, revenus, etc.) ;
les données comportementales (réseaux sociaux favoris, canaux de communication préférés, centres d’intérêts…)
ses besoins et attentes (qu’est-ce qui frustre vos prospects ? Quelles sont leurs motivations ? Leurs alternatives ? Leurs moments de vérité ?…)
leurs valeurs ( quelles sont les valeurs qu’ils recherchent chez une marque ?).
Remarquez bien : « Leurs valeurs » est en gras.
Car faire ressortir des valeurs dans votre identité visuelle et dans toute votre communication est l’une des missions principales de votre charte graphique.
3 – Analyser vos concurrents
Ici, il ne s’agit pas de rentrer dans une analyse technique des processus de vos concurrents.
Non.
Seulement leur communication. Voici les éléments auxquels vous devez prêter attention :
leurs positionnements marketing ;
les tons et les voix employés dans leurs éléments de communication (Google Ads, publicités, Facebook, vidéo promotionnelle, contenus web…) ;
leurs forces et faiblesses (faites une analyse SWOT de vos compétiteurs).
Pourquoi c’est important ?
Pour deux raisons :
d’un, vous saurez ce à quoi vos prospects sont habitués, ce qu’ils aiment et ce qu’ils détestent ;
ensuite, vous trouverez probablement un axe de différenciation encore inexploité ou sous-exploité.
Une fois que vous avez ça, il est temps de passer à la dernière étape de l’analyse : définir le cœur de votre brand.
4- Définir le cœur de votre marque
Maintenant, c’est l’heure de définir le cœur de votre marque.
Voici les 3 questions auxquelles vous allez devoir répondre :
qui sont vos clients ? (vos buyers personas) ;
quelles seront les valeurs phares de votre marque ? (au trop 3) ;
quelles émotions voulez-vous créer chez vos utilisateurs ?
C’est bon ? Maintenant, sortez vos crayons et passons enfin à une étape plus artistique.
5- La création du logo
De tous les éléments graphiques de votre identité visuelle, le logo est le plus important.
Et de loin.
Un bon logo coche obligatoirement les 4 cases suivantes :
Il va à l’essentiel tout en étant simple, reconnaissable et facile à imprimer ;
Il est intemporel et traverse les décennies sans devenir « has-been » ;
Fonctionne parfaitement sur les différents supports de communications physiques et numériques ;
Enfin, il transmet les valeurs et l’identité de votre marque d’un regard.
Oui, dis comme ça, ça fait beaucoup.
Mais il suffit que vous ratiez une seule de ces cases pour que votre logo vous crée un bad-buzz.
En voici un parfait exemple (essayez de deviner ce que cette structure vend).
Logo de mama’s baking
Vous avez trouvé ?
Il s’agit de recettes de cuisine. Les internautes avec des esprits plus pervers y ont vu autre chose😏…
On peut faire pire. Parfois, de bonnes intentions donnent naissance à des logos justes horribles.
Logo de Arlington Pediatric Center
Bon, heureusement depuis, ils ont refait un nouveau logo plus classique.
Nouvelle page d’Arlington Pediatric Center
N’empêche, lorsque vous tapez le nom du cabinet sur votre moteur de recherche… jugez les résultats vous-même.
Recherche google sur Arlington Pediatric Center
Allez, et un dernier pour la route.
Logo proposé pour l’Institut des Sciences Orientales de l’Université de Santa Catarina
6 – Définir les couleurs
Les couleurs transmettent des émotions et des symboles à notre inconscient.
Alors pour être certain de créer la bonne émotion (celle qui guide vers l’achat), choisissez les couleurs adaptées.
Précisez spécifiquement les nuances qui vous plaisent grâce à leurs codes RVB, HEX, CMJN et Pantone. Pourquoi spécifier leurs codes ? Car ça vous assurera d’avoir exactement les mêmes nuances sur papier que lors de vos campagnes numériques.
Palette de couleurs autorisées pour les logos de PayPal
Pour vous faire une idée de l’importance du choix des couleurs dans vos compositions graphiques, voici les significations de quelques couleurs populaires.
Le bleu
Synonyme de confiance, de sécurité, de fraîcheur, de professionnalisme et de royauté, le bleu est utilisé par :
les entreprises de nettoyage ;
les banques et les institutions financières ;
certaines organisations mondiales comme l’ONU, le FMI, la Banque Asiatique de Développement,etc. ;
le secteur du tourisme et du transport ;
les entreprises de perte de poids.
Surpris par le dernier ? Vous ne devriez pas. Le bleu est un coupe-faim notoire, raison pour laquelle les fast-foods et les marques alimentaires l’utilisent très peu.
Le rouge
Le rouge symbolise l’appétit, l’amour, la passion et l’excitation dans la plupart des pays.
Toutes les industries peuvent s’en servir, car à bonnes doses, le rouge nous pousse à l’action.
Par contre, si vous l’utilisez, faites attention au contexte dans lequel vous l’utilisez.
Parce que oui, le rouge peut aussi renvoyer à des concepts auxquels vous ne voulez peut-être pas être associé·e :
Le communisme ;
Les révolutions contre la tyrannie ;
Les idées de gauche ;
La mort dans certains pays d’Afrique (en référence au sang versé) ;
La chance en Asie.
Dernière couleur : le jaune.
Le jaune
Le jaune a ceci de particulier que c’est la couleur que l’œil humain traite la plus rapidement (source).
Ainsi, le jaune renvoie à la joie, à l’optimisme, à l’appétit et à la créativité.
Malheureusement, on ne peut pas vous faire un topo complet sur la psychologie des couleurs. Alors si vous voulez en savoir plus sur toutes les couleurs, faites un tour sur cet article d’Adobe.
7 – Choisir les polices de caractères
Avec ou sans empattement (sans serif en anglais) ?
Police plutôt féminine ? Masculine ? Enfantine ? Professionnelle ? Sérieuse ? New age ? Vintage ?
Vous l’avez compris, la typographie que vous choisissez va fortement impacter l’émotion ressentie par vos utilisateurs.
Alors pas question de la négliger.
Imaginez un seul instant si le logo de société générale utilisait la typologie arrondie et joyeuse de McDonald’s… vous leur feriez encore confiance ?
Voici les critères pour choisir vos polices de caractères :
toujours prendre une police lisible ;
toutes vos polices doivent s’harmoniser entre elles ;
assurez-vous que la police que vous choisissez comporte tous les caractères de l’alphabet de vos clients (certaines polices ne comportent pas de « é » ou de « ç » par exemple) ;
vérifiez que le rendu final de la police correspond à ce que vous allez en faire (allez-vous utiliser cette typo sur le web ou en print ?) ;
enfin, jetez toujours un œil sur les droits de la police : certaines ont des licences payantes ; d’autres sont gratuites jusqu’à un certain nombre d’impressions, etc.
Pour trouver des polices originales, faites un tour sur Google Font. Chaque jour, des milliers de créateurs ajoutent de nouvelles typographies, alors foncez.
Enfin, dernier conseil : jamais plus de 3 polices ( 1 pour les titres, 1 pour le corps du texte et 1 autre facultative pour mettre en valeur les citations).
Sinon, vous obtiendrez ça :
Image avec plusieurs typos différentes
Illisible, n’est-ce pas ?
Alors n’infligez pas ça à vos lecteurs.
8 – Définir une hiérarchie visuelle
La hiérarchie visuelle désigne la mise en pages des éléments sur tous vos différents supports de communication.
C’est grâce à ça que vous pouvez mettre en valeur des éléments de manière visuelle sans indiquer au lecteur « regarde ici, c’est important ! ».
Et c’est aussi quelque chose que vous pouvez rater si vous ne faites pas attention. Un exemple valant 1000 mots…
Affiche avec une mauvaise mise en page
Qu’est-ce qu’ils recherchent ? Un « apprentice » ou un « Rent Ice Ships » ou un App rent ice » ?
Réponse : ils cherchent un apprenti pour se charger de l’impression et du design graphique (et en ont visiblement besoin).
9 – un guideline pour choisir les photographies d’illustration
Photo d’homme sans pieds
Bon, soyons honnête : vous voyez cette photo sur une maquette de création de votre site e-commerce, vous allez vite faire une remarque à votre graphiste.
(Il lui manque des pieds, ce qui est gênant, à part si vous visez le métavers de Facebook).
Par contre, certaines photos d’illustration peuvent être réussies sans pour autant correspondre à l’image de marque que vous voulez renvoyer. De plus, à chaque fois qu’un internaute voit une image sur vos plateformes, il doit reconnaître un fil conducteur.
Voici quelques images de PayPal.
3 affiches publicitaires de PayPal
Vous voyez le fil conducteur ? Il y a toujours un élément en bleu qui se détache du reste, sans pour autant être un logo.
À force d’être exposé à ces images, l’esprit de sa clientèle fait un raccourci bleu=PayPal.
Et pour être certain que ce schéma soit présent dans toutes les photos d’illustration, PayPal le mentionne clairement dans son brand book :
Règles de choix des photos d’illustration chez PayPal
En français, ça donne ceci :
« Un accent de bleu sur un fond désaturé ajoute une qualité unique à nos photographies et communique que le PayPal fait partie de la vie de tous les jours. Lorsque vous décidez de ce que vous allez « bleuir » dans vos images, le bleu du ciel et le bleu de l’eau ne comptent pas comme « touche de bleu ». Vous pouvez choisir quelque chose de petit, comme une boucle d’oreille ou une chaussure, ou quelque chose de grand, comme un chapeau ou un vélo. C’est à vous de choisir. »
Pratiquement toutes les entreprises ont une section dédiée aux recommandations des photos d’illustration. Même la SNCF en a.
Guideline pour le choix des photos dans le brand book de la SNCF
Ici, il s’agit de montrer comment utiliser la forme de la « motrice » et la mettre en avant sur les photos (en plus d’indiquer clairement le type de photographies acceptées).
Maintenant, passons à la dernière partie.
10 – Définir des règles d’utilisation pour lutter contre les débordements créatifs
Les règles d’utilisation sont vos garde-fous face à des designers beaucoup trop créatifs.
En effet, ce n’est pas rare qu’un graphiste essayant un nouveau concept, se retrouve totalement hors de l’image de marque.
C’est pour cette raison que vous avez tout intérêt à rajouter des contraintes et des règles inviolables.
En voici quelques-unes :
Éviter de mettre des textes sur des arrière-plans de certaines couleurs ;
Ne pas étirer le logo ni le recadrer ;
Ne pas modifier les couleurs du logo ;
Ne pas associer certaines couleurs ensemble.
Dans son brandbook, Slack dédie toute une section à ce qu’il ne faut surtout pas faire à son précieux logo.
Déformations interdites du logo de Slack
Ça y est !
Vous avez toutes les clés en main pour créer une charte graphique ou superviser celle fournie par votre chef de projet informatique.
…
Mais on a un dernier cadeau pour vous.
3 bons conseils pour créer une mauvaise charte graphique
Bon, nous nous doutons que vous voulez créer une identité visuelle reconnaissable et qui vous démarque de la concurrence.
Et c’est ce que nous vous avons montré jusqu’ici.
Mais on peut aller encore plus loin en vous montrant 3 choses à ne surtout pas faire lorsque vous créez votre charte.
Let’s go.
1 – Créer une charte qui ressemble trop à celle d’une autre entreprise
Adagio Access est une entreprise spécialisée dans l’hôtellerie et la location de résidence en Europe pour voyageurs aux budgets serrés.
De son côté, Direct energie (aujourd’hui Total Energies Électricité et Gaz France) est, ou était, un fournisseur d’énergie alternatif.
Et là, vous êtes sûrement en train de vous demander quel est le rapport entre les deux. Leurs logos !
Jugez par vous-même.
Logo de Direct EnergieLogo de Adagio Access
Même cercle rond et jaune, polices presque identiques… pourtant ce sont deux entreprises de deux secteurs d’activité différents.
Et c’est cette spécificité qui a fait que les deux ne sont pas lancés dans une guerre juridique sur fonds de propriété intellectuelle. Et elles ne sont pas les seuls dans ce cas.
Logo de Pepsi à gauche vs celui de Korean air à droite
(logo de pepsi à gauche, celui de Korean Air à droite)
Par contre, lorsque les deux entreprises sont dans le même secteur d’activité, bonjour la confusion chez les clients (et les aller-retours aux tribunaux). C’est ce qui est arrivé entre Starbuck et Starpreya, deux coffee-shop en Corée du Sud.
Logo de starbuck à gauche vs celui de StarPreya à droite
Alors conseil d’ami : assurez-vous d’avoir une identité visuelle très différente de celles de vos concurrents.
Enfin, ce conseil n’est pas valable si vous assumez pleinement de plagier une autre marque. Ainsi, depuis le début des sanctions contre la Russie et le retrait des entreprises occidentales, de nouvelles marques sont apparues.
Magasin Stars Coffee en RussiePlagiat de McDonald’s en RussieLogo de Swed House, un IKEA russe
Le moins que l’on puisse dire, c’est que le plagiat est très clairement assumé.
2 – Ignorer les opinions de vos clients
GAP est une chaîne de vêtements fondée en 1969 et qui a la particularité d’être populaire chez les personnes de tout âge.
En 2010, modernité et reprise post-crise des subprimes obligeaient, GAP a décidé de changer son logo emblématique pour un plus… minimaliste (c’était la tendance graphique à l’époque).
Ce qui nous a donné un cas d’école d’un des pires fails de rebranding, le GapGate. Ça :
2 logos de Gap
(l’ancien logo utilisé depuis 1990 est à gauche, le nouveau est à droite).
Pourquoi est-ce que les fans l’ont mal reçu ? Pour plusieurs raisons :
il manque cruellement d’originalité ;
le changement de logo signale une nouvelle orientation aux clients, alors que là, rien n’a changé pour eux ;
à cause des ventes décevantes de l’année 2010 (10 % de moins qu’avant), les fans ont pris ce rebranding comme un mouvement de panique.
Ron Johnson’s, le talentueux esprit derrière les génialissimes Apple Store, est porté à la tête de JC Penney.
L’espoir et la hype autour de la marque sont immenses.
Johnson’s va appliquer toutes les recettes qui ont fait son succès chez Apple… en opérant un rebranding de la marque :
Exit le nom « JC Penney’s », désormais, ce sera juste « JCP » pour faire moderne et chic (pour une enseigne spécialisée dans le low-cost et les prix justes🤔);
Le logo aussi passe à la trappe, il devient carré ;
Les magasins aussi sont totalement reconfigurés (il y avait même un bar comme ceux des Apple Store) ;
le système des prix a été au mieux remplacé, au pire complexifié, et les remises de prix ont été supprimées.
Sur le papier, cette nouvelle identité de marque devait doper les ventes. Sauf que c’est le contraire qui s’est produit.
En 17 mois, l’entreprise a perdu 552 millions de dollars.
Surprenant venant d’un ex d’Apple. Il a réussi à créer de la confusion chez les consommateurs d’une marque vieille de plus d’un siècle.
Et quelle meilleure illustration que ses 3 changements de logos en 17 mois ?
Evolution du logo de JCP
Bien sûr, à chaque fois que la marque « évoluait », toute son identité de marque faisait de même.
En 2012, changement de CEO et retour au bon vieux logo de JCPenney (celui de 2010 sur l’image).
Moral de l’histoire : ne modifiez pas votre charte graphique et vos éléments de communication trop souvent, au risque de semer la confusion chez vos fans.
Si je vous dis IBM, Netflix, Dropbox ou encore X, à quoi est-ce que vous pensez ?
Aux gigantesques quantités de data que ces géants amassent ? Peut-être.
Aux myriades de plateformes qu’ils utilisent pour les collecter ? Peut-être.
Tous ces géants ont un point en commun : ils utilisent tous le même serveur web, Nginx ( à prononcer “Engine X”).
Et ils ne sont pas les seuls. Selon W3techs.com, 34.1 % des sites web s’appuient sur Nginx pour gérer leurs requêtes ou servir d’API.
Alors, naturellement, nous nous sommes demandés qu’est-ce qui se cache derrière ce succès fou ?
D’autant qu’à la base, Nginx n’est qu’un petit moteur développé par un ingénieur russe en solo dans son coin.
À quoi est-ce qu’il sert ? Comment est-ce qu’il fonctionne ? Pourquoi est-ce que les créateurs de sites web le préfèrent à Apache ? Et enfin, est-ce que vous devez vous aussi l’utiliser ?
On vous dévoile tout dans cet article.
Bonne lecture 😊
Les origines de Nginx : un problème à 10 000 connexions
Tout comme l’intelligence artificielle a chamboulé notre quotidien en 2023, l’arrivée de Nginx sur le marché a été un vrai game-changer.
Pour comprendre pourquoi, remontons l’histoire de Nginx.
Son histoire commence 20 ans après le début d’internet. Plus précisément vers sa démocratisation dans les années 90.
À cette époque, de plus en plus de personnes arpentent les routes du web grâce à leurs navigateurs web.
Sauf qu’il y a eu imprévu : la capacité des serveurs à router les requêtes entrantes ne suivaient pas la cadence.
Dès que 10 000 connexions simultanées arrivaient sur un seul serveur, ça entraînait un bug.
Toutes les compagnies ont donc cherché à améliorer leurs hardwares… sans succès.
Et la raison de leurs échecs à surmonter ce problème a été mise en évidence en 1999 dans l’article « The C10K Problem » de Dan Kegel.
Dans cet article, l’ingénieur démontre que le hardware n’est pas la raison principale qui empêche les sites web de gérer 10 000 visiteurs en même temps.
La cause vient plus tôt du mauvais usage des ressources des serveurs par les systèmes d’exploitation.
3 ans plus tard, en 2002, en plein cœur de la Russie, la société éditrice du moteur de recherche Rambler – un des sites web les plus fréquentés de Russie avec 64.19 M de visiteurs en novembre 2023 – embauche un développeur.
Sa mission est simple : aider le site à gérer l’afflux massif d’internautes russes pour faire face à la popularité croissante du service.
Et Igor n’y va pas par 4 chemins. Après deux ans d’efforts acharnés, il crée un logiciel open-source pour gérer le trafic de Rambler : Nginx.
Son logiciel n’a qu’un objectif : offrir le maximum de performance,de stabilité et optimiser les performances à l’échelle.
Au moment où nous écrivons cet article, nous sommes le 27 décembre 2023.
Et lorsqu’on regarde les statistiques, c’est sans appel : NGINX est LE logiciel de serveur web le plus utilisé.
Pourcentage d’utilisation des différents serveurs web au monde en décembre 2023
Même des logiciels sous licence appartenant aux GAFAM comme Microsoft-IIS n’arrivent pas à le concurrencer.
Maintenant, rentrons plus en détails dans ce qu’est vraiment NGINX.
Qu’est-ce que NGINX et comment est-ce qu’il fonctionne ?
Nginx est un logiciel type serveur web open-source dont les maîtres mots sont performance, utilisation la plus efficace possible des ressources des serveurs et rapidité.
Nginx est conçu pour utiliser très peu de mémoire et maximiser la simultanéité. Et cette souplesse plaît énormément aux équipes de développement web et mobiles qui l’utilisent aussi comme :
Proxy inverse ;
Cache HTTP ;
Équilibreur de charge, etc.
La particularité de Nginx vient de son mode de fonctionnement.
Ainsi, contrairement à la plupart des autres serveurs du marché qui sont multi-processus – un visiteur = un nouveau processus – Nginx est mono-processus.
Tout le trafic est géré dans un seul processus qui utilise une architecture maître-esclave. De plus, l’outil open-source repose aussi sur une approche asynchrone et évènementielle.
Cette conception logicielle atypique lui permet d’exécuter plusieurs requêtes simultanément sans craindre l’interblocage des processus (ou deadlock).
En effet, un deadlock ne se produit que si plusieurs processus concurrents souhaitent accéder à la même ressource non-partageable en même temps. En attendant d’y accéder, chacun conserve un accès exclusif à une ressource convoitée par un autre processus.
Raison pour laquelle Nginx est plébiscité par les développeurs lors de la conception d’une plateforme digitale validant ces conditions :
la plateforme web ou l’app mobile reçoit énormément de requêtes HTTPS entrantes ;
des contenus statiques doivent être massivement distribués ;
le nombre de requêtes simultanées attendues est élevé.
Autre cas d’usage de Nginx : il peut servir d’API entre vos différents micro-services.
Pour terminer, voici quelques caractéristiques notables de Nginx :
Proxy inversé avec mise en cache ;
IPv ;
Équilibrage de charge ;
TLS/SSI avec SNI.
Tout ceci grâce à l’architecture maître-esclave. Et justement, parlons-en de cette architecture.
Comment fonctionne l’architecture de NGINX ?
Comme dit plus haut, Nginx repose sur une architecture maître-esclave asynchrone et sur des modèles événementiels non-bloquants.
Concrètement, voici comment une instance de Nginx fonctionne :
les travailleurs acceptent de nouvelles requêtes HTTP/HTTPS entrantes à partir d’un socket partagé.
À l’intérieur de chaque travailleur, une boucle est effectuée, permettant à chacun de traiter des milliers de requêtes sans bloquer les autres ;
les processus maîtres coordonnent l’exécution des tâches des travailleurs en créant et en gérant des sockets.
De plus, pour diminuer les temps d’accès aux fichiers, les chargeurs de cache des proxys ajoutent les données dans la mémoire tampon du moteur. Ainsi, même si le navigateur client est lent, son maigre débit ne va pas ralentir le proxy.
Ce fonctionnement présente 2 différences majeures avec le second serveur web le plus utilisé Apache :
Nginx a une architecture mono-thread alors qu’Apache a une architecture multi-processus. De plus, la version mono-thread d’Apache, Apache Tomcat, ne peut gérer qu’une seule connexion ;
Son fonctionnement fait qu’il est plus rapide qu’Apache pour distribuer des contenus statiques. Par contre, ça l’empêche aussi de prendre en charge nativement les contenus dynamiques. Par conséquent, les développeurs d’applications utilisant Nginx sont forcés d’utiliser un service tiers pour cela. Ce qui n’est pas le cas d’Apache.
5 bonnes raisons d’adopter Nginx
S’il vous fallait 5 raisons d’utiliser Nginx, les voici :
réduire le temps de chargement de vos sites web et éviter les problèmes de latence ;
la possibilité de faire des mises à jour à la volée sans avoir à interrompre vos services ;
sa capacité à servir de proxy inverse et à dispatcher le trafic entre plusieurs serveurs et clients de manière fluide via des algorithmes de routage intelligents ;
le fait d’avoir peu de composants à gérer ;
l’augmentation de la vitesse globale de vos services.
Maintenant, voyons pourquoi les hébergeurs web l’adorent.
Pourquoi les hébergeurs adorent NGINX (3+1 raison)
Vous vous souvenez lorsque nous avons des graphes plus haut ?
Ceux montrant la moyenne des parts de marché de Nginx dans les sites web ?
En réalité, ils cachent une grande disparité.
Jugez de vous-même via ce graphique fourni par w3Techs.com :
Répartition des serveurs web entre Nginx et Apache selon leur trafic le 27 décembre 2023
Vous avez remarqué la différence entre les deux serveurs ?
…
Réponse : Nginx est de plus en plus utilisé à mesure que le trafic des sites web pris en compte est élevé.
Pour le top 1.000.000 des plateformes les plus visitées, Nginx représente 31.9% des parts de marché, contre 22.8 % pour Apache web server.
Dès qu’on atteint le top 100.000 des plateformes les plus visitées, Nginx croît jusqu’à atteindre 32 % alors qu’Apache recule à 17.6 %.
Et ainsi de suite.
Si les applications web à fort trafic comme Netflix ou le CMS WordPress, les hébergeurs comme OVH et des gestionnaires de CDN, misent sur Nginx, c’est pour 4 raisons :
les performances hors normes à l’échelle offertes par l’outil ;
la réduction de la vulnérabilité aux attaques par force brute (DDoS) grâce à des fonctions telles que le filtrage des requêtes, le blocage des adresses IP et le contrôle des accès ;
la mise en cache rapide et simple ;
la scalabilité et la tolérance aux fautes : concrètement, vous pouvez ajouter ou retirer un micro-service sans affecter l’expérience utilisateur ;
le support natif pour les requêtes HTTPS, qui permettent de sécuriser les échanges clients-serveurs via le cryptage SSL/TLS ;
la prise en charge avec la plupart des web app ;
une vaste communauté et des millions de tutoriels.
Enfin, le cœur même de Nginx reste sa capacité à gérer plusieurs connexions entrantes en utilisant le moins de mémoire possible. Et là-dessus, les statistiques issues des essais sur les benchmarks ne mentent pas.
3 Manières d’utiliser NGINX pour augmenter les performances de votre site web et sa sécurité ?
Ok.
Si vos serveurs utilisent Nginx, il y a quelques petites astuces que vous pouvez facilement mettre en place pour booster leurs performances.
Et justement, en voici 3.
1 – Autorisez la compression Gzip
Pour comprendre à quel point la compression Gzip peut réduire la consommation de votre bande passante, revenons aux codes informatiques.
En effet, chaque page web générée par vos serveurs est constituée d’au moins 3 fichiers textes :
un fichier HTML (.html) décrivant le contenu de la page
un fichier CSS (.css) qui se charge de décrire la mise en page de… la page web
enfin, un fichier JavaScript (.js) qui va rajouter des animations et rendre la page un peu plus interactive
Voici un exemple de page HTML :
<!DOCTYPE html><html><head> <title>Exemple de code HTML</title></head><body> <h1>Bonjour, monde !</h1></body></html>
Il est parfaitement indenté. Lisible. Espacé. Et les différents éléments sont bien indentés.
Tout ceci n’a pour seul but que de rendre le code compréhensible par les développeurs. Mais le navigateur lui n’en a strictement pas besoin.
En réalité, il le comprendrait tout autant s’il n’y avait pas d’espace et si tout le code était placé sur une seule ligne.
On parle alors de minification.
L’intérêt de cette manœuvre : réduire le poids des fichiers textes.
Nginx va plus loin avec la compression Gzip. Ici, une fenêtre de 32 000 caractères est scannée par l’algorithme « Deflate » de Gzip et repère tous les caractères redondants dans le fichier.
Fonctionnement de l’algorithme Deflate
Ensuite, il parcourt tout le fichier et remplace lesdits caractères par une référence vers le premier caractère rencontré.
Oui, c’est un peu technique, mais le résultat en vaut largement la peine : vous pouvez faire baisser le poids de vos fichiers de 70 %.
Et ça marche aussi sur des données non-textuelles.
D’ailleurs, les outils de tests de vitesses priorisent les sites ayant activé la compression Gzip. Google les positionne même plus haut dans ses classements SEO.
Pour activer la compression Gzip, connectez-vous à votre logiciel serveur ftp avec les droits administrateurs.
Allez dans le sous-répertoire /etc/nginx/nginx.conf en tapant la commande cd/etc/nginx.
Si vous n’avez pas la configuration par défaut, tapez sudo find / -name nginx.conf dans le terminal.
Une fois à l’intérieur du fichier de configuration nginx.conf, entrez les commandes suivantes :
Le protocole HTTP – ou HyperText Transfer Protocol – est le protocole client-serveur qui vous permet d’afficher vos pages web.
À noter que désormais, c’est sa variante sécurisée, HTTPS qui est recommandée. Si vous ne la mettez pas en place, les moteurs de recherche vont afficher une page d’avertissement menaçante à tous vos visiteurs.
Autant dire que votre trafic et vos conversions vont en pâtir.
Depuis peu, la version HTTP/2 est disponible. Plus sécurisée et plus performante, elle vous permet d’obtenir de meilleures performances en quelques lignes.
Pour l’activer, voici ce que vous devez faire :
vérifiez que la version Nginx installée sur votre système d’exploitation est compatible ;
activez l’encodage SSL/TLS sur votre site web ;
redémarrez Nginx ;
Voyons ça plus en détail.
1 – Vérifiez votre version de Nginx
Si votre version de Nginx est inférieure à la version 1.9.5, vous devrez d’abord faire une mise à jour de celle-ci.
Pour connaître la version Nginx de votre système, tapez la commande suivante :
Nginx -v
Vous êtes à la version 1.9.5 ou plus ? Félicitations, vous pouvez activer HTTP/2.
2 – Autorisez l’encodage SSL/TLS
Contrairement à HTTP/1 qui ne nécessitait pas de chiffrement SSL/TLS, HTTP/2 l’exige. Son objectif étant de sécuriser au maximum les transactions entre vos serveurs web et les navigateurs de vos lecteurs.
Et pour l’activer, vous aurez besoin d’un certificat SSL. Pas de panique, vous pouvez en obtenir un gratuitement via Google Domains.
Une fois que vous en avez un, saisissez juste ces lignes de codes dans votre fichier de configuration Nginx :
server {
listen 443 ssl http2;
server_name “votre nom de domaine” ;
ssl_certificate /path/to/ssl/certificate;
ssl_certificate_key /path/to/ssl/private/key;
...
}
Quelques explications :
ssl_certificate fait référence au chemin vers votre certificat SSL/TLS ;
ssl_certificate_key fait de même, mais pour votre clé privée.
Enfin, il est l’heure de vérifier si ça a fonctionné.
3 – Testez votre nouvelle configuration et redémarrer Nginx
Pour tester votre configuration et être sûr que tout fonctionne à merveille, exécuter la commande suivante :
Nginx -t
Si tout est bien paramétré, vous verrez un message vous affichant que tout va bien.
Ensuite, redémarrez Nginx pour rendre vos changements définitifs grâce à la commande :
Sudo service nginx restart.
3 – Désactivez les protocoles SSL/TLS dépréciés
Toutes les versions de chiffrement TLS ne se valent pas.
Ainsi, TLS 1.0 et 1.1 sont des versions obsolètes et vulnérables aux attaques de types BEAST, POODLE et CRIME SSL.
Raison pour laquelle la plupart des navigateurs ne les prennent plus en charge.
Heureusement, c’est une modification assez facile à faire.
Ouvrez une fois de plus votre fichier de configuration Nginx et saisissez la commande suivante :
ssl_protocols TLSv1.2 TLSv1.3;
Notre mot de la fin
Ça y est !
Vous savez tout ce qu’il y a à savoir sur Nginx.
Maintenant, vous vous demandez sûrement si vous devez utiliser Nginx ou pas. Est-ce que ce serveur est adapté à votre projet numérique ?
…
Heureusement, on peut vous aider à répondre à cette question.
C’est le nombre d’internautes qui ne reviendront plus jamais sur votre plateforme après y avoir vécu une expérience utilisateur catastrophique (source).
En plus de l’esthétique de vos interfaces, le ressenti utilisateur se base largement sur la qualité de l’expérience utilisateur proposée. Parfois bien plus que sur le fait de répondre ou non aux besoins des utilisateurs.
Alors pas question de la négliger. Et pour proposer une UX UI agréable et unique, vous allez devoir maximiser les points suivants :
l’esthétique de vos éléments graphiques et de vos illustrations ;
la lisibilité de vos contenus via une mise en page soignée ;
Mais heureusement, il existe des astuces que vous pouvez utiliser pour booster vos taux de conversion et améliorer votre parcours-client. Des « cheats codes » connus par tous les passionnés de graphisme, de web-design et de conception d’interfaces : les lois de l’UX design.
Il existe des centaines de règles de design. Parmi elles, nous en avons sélectionné 32 que vous pouvez appliquer dès maintenant pour offrir une meilleure expérience utilisateur.
Let’s go !
Sommaire
Pourquoi négliger l’UX design de vos applications va conduire votre entreprise à la faillite ? (5 raisons + statistiques)
Les 5 Règles de base
1 – l’affordance
2 – Créer un chemin de navigation intuitif
3 – Miser sur la simplicité
4 – la règle des 3 clics
5 – la règle des 5 secondes
Les 10 règles de Raina Van Cleave et Nick Finck
1 – Comprendre l’utilisateur
2 – L’utilisateur a raison
3 – la forme découle du fond
4 – Évitez les solutions déjà faites
5 – innover
6 – Le contenu prime
7 – L’interface doit être accessible à tous
8 – Ne pas créer sans imaginer
9 – Comprendre les objectifs
10 – Savoir apprendre de ses erreurs
Les 17 lois de la conception d’une expérience utilisateur
Les 5 lois de la Gestalt
1 – la loi de Prägnanz
2 – la loi de la proximité
3 – la loi de similarité
4 – la loi de clôture
5 – La loi de la symétrie
5 lois de l’UX design qui exploitent les biais cognitifs
1 – L’effet Zeigarnik
2 – La loi Von Restorff
3 – La loi de Serial Position Effect
4 – la loi Peak-end
5 – l’effet IKEA, ou le biais de justification de l’effort
7 lois pour capter l’attention de vos utilisateurs et jouer sur la perception des mouvements
1 – La loi de Tesler
2 – La loi de Hick
3 – La loi de Miller
4 – La loi de Parkinson
5 – La loi de Fitts
6 – La loi de Jakob
7 – Le rasoir d’Occam
Conclusion
Pourquoi négliger l’UX design de vos applications va conduire votre entreprise à la faillite ? (5 raisons + statistiques)
Si vous êtes ici, c’est que vous savez que vos ventes dépendent grandement de la qualité de votre parcours utilisateur.
Pas du point de vue business, mais du point de vue centré sur l’utilisateur. Peu importe à quel point votre produit est génial, s’il est pénible à utiliser, vous ferez faillite.
Doutez-vous ?
Voici 5 statistiques qui convaincront même les décisionnaires les plus récalcitrants de vous allouer un budget pour l’amélioration du design de votre plateforme :
38 % des internautes cesseront d’interagir avec votre plateforme si son contenu ou sa mise en page est raté ;
Vous pouvez booster vos taux de conversion de 400 % ;
88 % des internautes ne reviendront plus jamais sur votre plateforme après une mauvaise expérience ;
75 % des consommateurs jugent la crédibilité d’un site web en se basant uniquement sur son esthétique ;
13 % de vos clients mécontents vont raconter leurs mésaventures sur votre plateforme à au moins 15 personnes.
Cerise sur le gâteau : l’UX design à un ROI de 10.000 % !
Allez, voyons maintenant comment atteindre ce retour sur investissement astronomique grâce aux règles de design.
Les 5 Règles de base
Que vous soyez un professionnel de l’UX ou non, certaines erreurs de conception sont si flagrantes qu’elles sautent aux yeux de tous. Et dans « tous », il y a bien sûr vos clients.
Voici cinq règles de base de l’UX design à maîtriser absolument.
5 règles de base pour réussir son UX design
1 – l’affordance
Même si ce mot peut sembler très technique, il n’en est rien : l’affordance désigne simplement la capacité d’une interface à faire comprendre subtilement aux utilisateurs ce qu’ils peuvent et ne peuvent pas faire.
Et j’insiste sur le mot « subtilement ».
En effet, dès qu’un utilisateur doit réfléchir pour comprendre les fonctionnalités que vous proposez, il risque de partir.
Raison pour laquelle le choix de l’emplacement, de la couleur, de la forme, la mise en page de vos boutons et icônes doivent être soignés. N’hésitez pas non plus à rajouter un petit texte explicatif qui apparaît en survolant l’icône.
2 – Créer un chemin de navigation intuitif
À ce stade, votre prospect sait ce que vous attendez de lui.
Il va maintenant commencer à se balader sur votre application, à parcourir les différents onglets et à cliquer sur les boutons.
C’est à ce moment que l’intuitivité de la navigation entre en jeu : votre utilisateur doit pouvoir comprendre intuitivement comment se déplacer entre vos interfaces et consommer votre contenu.
3 – Miser sur la simplicité
On reparlera de la simplicité plus bas.
Pour l’heure, retenez simplement qu’il faut à tout prix éviter les éléments superflus et inutilement complexes.
Dans la même veine, privilégiez autant que possible la création d’interfaces claires, cohérentes avec des couleurs, polices et contrastes adaptés.
C’est pour cette raison que le minimalisme fait fureur dans le webdesign depuis tant de décennies : moins, c’est plus.
4 – la règle des 3 clics
Cette règle tient autant de l’architecture de l’information que de l’UX design.
Elle stipule ceci : tout contenu doit toujours être à au plus trois clics de votre page d’accueil. Sinon, l’internaute risque de se sentir frustré et ira chercher le contenu qui l’intéresse ailleurs.
C’est pour cette raison que beaucoup de sites d’e-commerces segmentent leurs contenus en catégories et sous-catégories. Ça permet aux fiches produits d’être toujours à trois clics maximum de la page d’accueil.
5 – la règle des 5 secondes
Selon une étude de Microsoft, l’Homo sapiens connecté est capable de se concentrer sur un site web pendant huit secondes maximum.
D’où cette règle : vos visiteurs doivent être capables de comprendre le but et l’intérêt de vos plateformes en cinq secondes max. Passé ce délai, l’internaute va simplement aller ailleurs.
Les 10 règles de Raina Van Cleave et Nick Finck
10 principes de l’UX design de Raina Van Cleave et Nick Finck
Maintenant que vous avez des notions de base en UX design, passons maintenant à des principes plus élaborés : ceux du SXSW interactive 2010.
Si vous n’êtes pas de l’industrie créative, SXSW ne vous dit probablement rien.
Le South by Southwest est l’un des plus grands rassemblements de créatifs au monde. Musiciens, cinéphiles et créatifs s’y donnent rendez-vous chaque année depuis 1987.
L’édition 2010 a marqué un tournant majeur dans l’industrie de l’UX design et du Customer eXperience (CX).
La cause : Nick Finck et Raina Van Cleave, deux designers de renommée mondiale, ont énoncé 10 principes à suivre pour créer une expérience utilisateur réussie. Depuis, ces principes sont devenus des mantras pour les ux designers et autres concepteurs de produits.
Les voici :
Comprendre l’utilisateur ;
L’utilisateur a raison ;
La forme découle du fond ;
Éviter autant que possible les solutions déjà faites ;
Innover ;
Le contenu prime ;
L’interface doit être accessible à tous ;
Ne pas créer sans imaginer ;
Comprendre les objectifs ;
Savoir apprendre de ses erreurs.
Voyons-les plus en détail tout de suite.
1 – Comprendre l’utilisateur
Pour qui est-ce que vous voulez créer votre application mobile ?
À cette question, toutes les équipes marketing et celles chargées du développement d’applications répondent (presque) toujours : pour leurs clients.
Mais QUI sont ces clients ? Est-ce que c’est l’utilisateur final ? Le N+1 du développeur web ? La société qui finance pour la création de l’application ?
Ce n’est aucun d’entre eux.
Vos vrais clients sont les utilisateurs finaux. S’ils n’adoptent pas vos produits digitaux, vous aurez beau déployer des prouesses techniques, votre application fera un flop sur les app stores.
Et c’est justement le but de ce principe : toujours chercher à comprendre le client final et concevoir une expérience utilisateur centrée sur l’utilisateur.
Concrètement, cela se traduit par deux éléments :
adoptez une démarche centrée utilisateur durant la phase de conception ;
acceptez de remettre en cause votre vision pour créer un produit qui saura satisfaire vos utilisateurs finaux.
Alors comment mettre ce principe en pratique ? Voici 2 choses que vous pouvez faire dès à présent pour y arriver :
basez vos créations sur des données récoltées auprès de clients réels. Si vous n’en avez pas, alors optez plutôt pour des personas (lisez cet article de Sales Odyssey pour apprendre à créer vos personas marketing) ;
Rien n’est plus énervant que lorsque vous reportez un bug à une équipe technique et celle-ci la minimise ou la nie.
Nier ou minimiser une erreur est quelque chose de naturel pour beaucoup d’agences de développement web.
Elles ont passé beaucoup d’heures à créer ce chef-d’œuvre de code informatique. Alors, à chaque fois qu’un client signale un bug ou une erreur de mise en page, certaines personnes peuvent se sentir personnellement visées.
Elles ont l’impression que le client remet en doute leurs compétences, ce qui n’est pas vrai. Même les produits des GAFAM ont leurs lots de pannes logicielles.
Si vous faites partie de ces personnes, ce principe est fait pour vous : l’utilisateur a toujours raison.
Même si votre égo en prend un coup, c’est plus rassurant pour vos clients de savoir qu’ils peuvent compter sur vous en cas de pépins. Plutôt qu’à l’inverse, en cas de bug, ils soient livrés à eux-mêmes.
3 – la forme découle du fond
Ce principe pourrait être reformulé comme suit : l’UI design est là pour mettre en valeur le contenu de la plateforme numérique, pas l’inverse.
Clairement, il vous invite à tempérer votre fibre artistique lorsque vous créez les graphismes de vos pages.
Les graphismes et autres éléments visuels sont là pour souligner le contenu de votre application. Ils ne sont pas là pour impressionner vos clients ou montrer votre talent.
Il s’agit de modèles de sites web et d’applications mobiles qui fleurissent sur le web. Leur promesse est simple : vous n’avez qu’à copier-coller vos contenus dans les cases prévues, et pouf votre plateforme est prête.
Certains d’entre eux ont fait leur preuve dans des sociétés valorisées à plusieurs millions de dollars. Alors, vous n’avez plus qu’à les recopier pour que ça fonctionne aussi pour vous, n’est-ce pas ?
Ne faites surtout pas ça.
En effet, peu importe à quel point votre business model est similaire à celui d’une autre entreprise, vous avez vos particularités.
Et même si des modèles et bouts de code prêts à l’emploi pullulent, prenez toujours le temps de concevoir vos propres solutions logicielles.
Rien ne vous empêche d’utiliser des templates, mais personnalisez-les en détails pour qu’ils correspondent aux besoins spécifiques de ce projet.
5 – innover
L’innovation.
Si vous êtes une startup ou que vous devez lutter face à des mastodontes, ce point est fait pour vous.
Innover rien que dans son UX peut vous fournir un avantage décisif, comme le prouve le cas de la plateforme Medium.
Si vous voulez en apprendre davantage sur ce point, lisez notre article consacré aux 10 commandements du webdesign par Dieter Ram. Vous y verrez comment, rien que par l’UI et l’UX design de vos produits, vous pouvez devenir leader de votre segment de marché.
6 – Le contenu prime
Les exemples de refontes visuelles de plateformes qui ont rendu leurs contenus et leurs services moins accessibles, voire inutilisables, sont légion.
Très souvent, ça partait de bonnes intentions.
Yahoo! avait décidé d’offrir une surprise à ses abonnés pour son 16ᵉ anniversaire en 2013 : une nouvelle interface plus moderne.
Sauf que, vous vous en doutez, si nous en parlons, c’est parce que la surprise est très mal passée auprès du public. En effet, les utilisateurs du service email de la boite ont vite commencé à remarquer un lot de bugs technique et UI :
ils ne pouvaient plus voir les différents fichiers tant qu’ils n’avaient pas quitté leur boîte de réception ;
les nouveaux mails n’étaient plus en gras ;
le bouton de suppression était dangereusement placé à côté du nom du destinataire ;
le bouton de sauvegarde des brouillons des mails avait été remplacé par un bouton « X » incompréhensible, etc.
Bref, c’était un désastre.
En tentant de moderniser ses interfaces, Yahoo! a négligé l’accessibilité de son contenu et sacrifier l’ergonomie de son service.
Yahoo! n’est pas la seule entreprise technologique à s’être tirée une balle dans le pied à cause d’une refonte.
YouTube a aussi commis cette bourde en 2017. Là aussi, la principale frustration des utilisateurs était la disparition et la difficulté d’accéder à certains contenus – dont le compteur de vues et le bouton dislike.
Alors, quelle leçon tirer de ces deux fails ? Réponse : le contenu prime toujours sur l’interface.
Ainsi, lorsque vous modifiez l’une de vos interfaces, assurez-vous que toutes les informations restent toujours autant lisibles et accessibles.
7 – L’interface doit être accessible à tous
Tous vos clients doivent pouvoir utiliser votre application. Et pour y arriver, vous allez vous assurer qu’il n’y ait pas de problèmes de compatibilité :
avec les différents périphériques : ordinateurs, tablettes, smartphones, montres connectées, etc ;
avec les différents navigateurs : Google Chrome, Microsoft Edge, Firefox, Safari, Opera, etc ;
Enfin, avec les différents formats et résolution d’écran.
Côté humain, ce principe de l’UX vous pousse aussi à prendre en compte les personnes qui souffrent d’un ou plusieurs handicaps.
8 – Ne pas créer sans imaginer
Au fond de vous, brûle une passion créatrice que vous voulez laisser s’exprimer directement sur votre toile Photoshop ou Figma.
Ne faites pas ça.
Avant même d’ouvrir votre Figma ou votre logiciel de maquettage préféré, posez-vous et réfléchissez profondément sur votre projet. Grâce à cela, vous allez pouvoir être certain que vos créations seront réellement alignées avec votre projet.
9 – Comprendre les objectifs
Votre application a un objectif. Et c’est votre devoir en tant qu’UX designer de créer une expérience utilisateur qui vous aidera vous, ainsi que vos utilisateurs, à l’atteindre.
Raison pour laquelle ce principe vous invite à chercher à comprendre le projet sur lequel vous travaillez en profondeur.
N’hésitez pas à poser des questions sur le modèle économique, les personas, la plus-value, l’argument différenciateur et tout ce qui tourne de près ou de loin autour du projet de création d’application.
10 – Savoir apprendre de ses erreurs
Hélas, il est impossible de concevoir des interfaces et un parcours clients qui font mouche dès le premier coup.
Il y aura toujours quelque chose à perfectionner pour améliorer les performances de l’app ou une autre métrique de votre tableau de bord.
Ce qui nous amène à ce principe : apprenez à bien apprendre de vos erreurs.
Pourquoi précisons-nous bien ? Parce qu’il n’est pas rare que les développeurs d’une app se basent uniquement sur le nombre de souscriptions pour déterminer si leur dernière mise à jour est réussie.
Sauf que cela ne suffit pas.
Est-ce que le nombre d’utilisateurs à varier à cause de l’effet de réseau ou d’un événement extérieur ?
Est-ce qu’il suit juste sa courbe de croissance normale ?
S’il a baissé, quelle est la cause de cette baisse ?
Sans un tableau de bord précis et des KPI pertinents, vous serez incapable de répondre à ces questions. Et donc, vous ne pourrez pas non plus savoir quels points sont à améliorer ou à revoir au sein de votre UX.
Notre conseil : créez un MVP et procédez via la méthode Lean Startup. Si vous ne connaissez pas ces deux mots, voici le livre d’Erick Ries qui en parle.
Les 17 lois de la conception d’une expérience utilisateur
Jusqu’à présent, nous avons couvert les concepts de base de l’UX design.
Maintenant, place à ceux qui sont plus avancés dans la technique. Nous les avons regroupés en trois grandes catégories :
les 5 lois de la Gestalt ;
6 lois de l’UX design dédiées aux biais cognitifs ;
7 lois pour capter l’attention des utilisateurs en jouant sur leur perception du mouvement.
Sans plus tarder, entrons dans le vif du sujet.
Les 5 lois de la Gestalt
Née en Allemagne au 20e siècle, la gestalt ou psychologie de la forme, est une théorie psychologique qui s’intéresse à la manière dont nous percevons les formes.
5 lois de la Gestalt
Son principe est simple : nous percevons davantage les formes dans leur ensemble plutôt que comme la juxtaposition ou l’addition de formes plus simples.
C’est un avantage plutôt pratique pour la conception des expériences utilisateur. En effet, notre cerveau va chercher à attribuer un sens à des représentations visuelles qui n’en ont pas.
Image montrant un ensemble de points
En France, Carrefour est l’exemple le plus connu d’utilisation du gestaltisme dans sa charte graphique, comme en témoigne son logo.
logo de carrefour
En regardant ce logo, le « C » de la marque vous saute aux yeux, n’est-ce pas ?
Pourtant, regardez-le en détails et quelque chose va vous sauter aux yeux : il n’y a aucun « C » dans ce logo.
C’est cette théorie, couplée au minimalisme, qui explique le fait que beaucoup de logos de grandes marques éliminent le plus de détails possibles. Comme en témoignent les logos d’Apple et de McDonald.
évolution du logo d’AppleEvolution du logo de MacDonald depuis les années 30
Bon, maintenant que vous êtes curieux·se d’en apprendre plus, voyons comment utiliser la gestalt dans votre UX design.
1 – la loi de Prägnanz
Si vous n’arrivez pas à prononcer Prägnanz, dites simplement la loi de la simplicité.
Cette loi stipule que les utilisateurs perçoivent et interprètent les formes complexes comme des formes plus simples parce qu’elles nécessitent moins de charge mentale.
Vous souvenez-vous des logos plus haut ? C’est ce principe qu’ils appliquent.
Voici comment l’utiliser dans votre conception centrée sur l’utilisateur :
évitez de créer des formes complexes dans vos interfaces, les utilisateurs ne se souviendront pas des détails (et ça vous prendra un temps monstrueux) ;
allégez vos éléments graphiques de tous les détails graphiques superflus, moins, c’est plus ;
créez des mises en page qui utilisent des schémas connus par les clients de votre niche.
S’il faut résumer cette loi en une phrase : créez des interfaces claires, simples, précises et que vos utilisateurs pourront rapidement et intuitivement comprendre.
2 – la loi de la proximité
Est-ce que vous avez déjà remarqué que les interfaces des logiciels sont toutes segmentées en blocs ?
Et que chacun de ces blocs contient un type d’information précis (boutons, icônes, contenus, etc.) ?
La raison vient de la loi de la proximité. Voici ce qu’elle stipule : le cerveau regroupe ensemble les objets qui sont proches.
Facebook est l’un des meilleurs exemples d’utilisation de ce principe. Admirez sa page d’accueil.
Page d’accueil de Facebook
Tous les éléments ayant à peu près le même sens sont regroupés en blocs.
Vous aussi, vous pouvez utiliser ce principe de deux façons :
en créant des espaces vides entre les éléments qui ne sont pas liées, vos utilisateurs comprendront rapidement qu’il s’agit de deux types d’information distincts ;
À l’inverse, pour montrer que des éléments ou des contenus ont presque les mêmes fonctionnalités, regroupez-les.
Maintenant, passons à la loi suivante.
3 – la loi de similarité
loi de similarité Gestaltisme
« Qui se ressemble, s’assemble ». Cet adage décrit parfaitement cette loi.
En effet, le cerveau a tendance à regrouper ensemble les éléments visuels qui ont la même forme, couleur, taille ou orientation. Elle est très utile pour présenter visuellement l’architecture de vos contenus.
Vous utilisez constamment cette loi de la gestalt lorsque vous surfez sur le web et cherchez des liens hypertextes.
Capture d’écran de l’article de l’article de Poyesis sur les 10 commandements d’un bon design de Dieter Ram
Avez-vous réussi à trouver les quatre liens hypertextes de cet article sur le webdesign ?
Pour l’utiliser, rien de plus simple : donnez toujours la même couleur et éventuellement la même forme aux éléments visuels de votre IHM partageant la même fonctionnalité.
4 – la loi de clôture
Logo d’IBM
À coup sûr, vous avez reconnu le logo d’IBM.
D’ailleurs, vous lisez distinctement « I » « B » « M ». Sauf qu’aucune de ces lettres n’est écrite.
Votre cerveau a reconstitué l’information manquante et à compléter ces lettres : c’est le principe de la loi de clôture.
Face à une forme incomplète, le cerveau humain va imaginer les parties manquantes pour créer une forme entière.
Raison pour laquelle vous arrivez à voir un panda sur le logo de l’association WWF.
Logo de la WWF
Ou encore un chien se déplaçant alors que ce n’est qu’un amas de points qui bougent.
source : Gizmodo
Alors comment utiliser la loi de la clôture dans votre UX design ? Voici quelques pistes :
en créant des animations stylisées comme celle plus haut.
en créant des boutons et icônes stylisées ;
suscitez la curiosité de l’utilisateur en ne lui montrant qu’une partie d’un contenu.
Interface mobile de Lucid. Source : https://www.nngroup.com/articles/principle-closure/
Par contre, attention à ne pas retirer trop de détails, sinon l’utilisateur ne parviendra pas à reconstituer l’information.
5 – La loi de la symétrie
Voici ce qu’elle dit : « le cerveau humain tend à percevoir les formes symétriques comme des unités cohérentes et stables ».
Vous pouvez en servir pour créer une expérience utilisateur harmonieuse et intuitive comme le fait Apple Music.
Interface de Apple Music
Ou encore pour donner à vos interfaces IHM un aspect plus professionnel et renforcer la crédibilité de votre entreprise. Société Générale est un bon exemple d’usage de la symétrie à cet usage.
Page d’accueil de Société Générale France
Vous pouvez aussi utiliser la symétrie pour créer une identité visuelle inoubliable comme le fait city-dog.uk.
5 lois de l’UX design qui exploitent les biais cognitifs
5 lois de l’UX qui jouent sur les biais cognitifs des utilisateurs
Lorsque nous sommes face à une grande quantité d’information et que nous devons faire des choix, notre cerveau a tendance à prendre des raccourcis : les biais cognitifs.
Et bonne nouvelle, vous pouvez les utiliser pour offrir une expérience utilisateur immersive à vos clients grâce à 5 lois :
l’effet Zeigarnik ;
la loi Von Restorff ;
la loi Peak-End ;
l’effet IKEA ;
la loi de Serial Position Effect.
Voyons-les en détail tout de suite.
1 – L’effet Zeigarnik
Meme de Sheldon Cooper montrant l’effet Zeigarnik
L’effet Zeigarnik désigne notre faculté à mieux nous souvenir des tâches en cours plutôt que des tâches finies.
C’est ce qui explique le fait que vous arrivez toujours à vous souvenir des tâches non-terminées de votre to-do list plutôt que celles que vous avez faites.
Ou encore que vous regardiez des séries Netflix pendant des heures, tout ça parce qu’à la fin de chaque épisode, la plateforme vous fait comprendre que ce n’est pas fini.
Alors, comment l’utiliser pour concevoir votre expérience utilisateur ? Voici quelques réponses :
incitez vos utilisateurs à vouloir aller plus loin en leur teasant la prochaine étape via un cliffhanger (comme Netflix). Si vous présentez beaucoup de contenus textuels, essayez de mettre les « … » à la fin de certains blocs de texte ;
page d’accueil du site web-marketing
donnez la possibilité à vos lecteurs de consommer une partie de vos contenus, puis coupez-les brutalement. C’est ce que font les médias en ligne pour vous inciter à payer un abonnement ;
Capture d’écran d’un article de Le Monde
demandez à l’internaute de créer son profil et montrez-lui sa progression via une barre de tâche. Même si ce n’est pas nécessaire à l’usage de votre application, l’effet Zeigarnik le poussera à compléter l’action ;
montrez les étapes manquantes pour réaliser une action (cf. les steppers des sites e-commerces).
Attention quand même, l’effet Zeigarnik à ses limites : si l’utilisateur juge que vos demandes gâchent son expérience, il va tout simplement aller sur une autre plateforme.
2 – La loi Von Restorff
Campagne de publicité de la WWF utilisant l’effet Von Restorff
Aussi appelé loi de l’isolation, elle stipule ceci : « lorsqu’il y a plusieurs objectifs, l’utilisateur va automatiquement être attiré par celui qui diffère des autres et va le garder en mémoire ».
Ok, ça a l’air assez théorique, alors on va prendre un exemple.
Regardez l’image suivante. Quel cercle est le plus facile à mémoriser ?
La couleur n’est pas la seule caractéristique visuelle que vous pouvez utiliser pour mettre en valeur un de vos items. Vous pouvez aussi utiliser :
la forme ;
le formatage du texte : gras, italique, surligné, souligné, barré, etc ;
les espaces entre les éléments ;
la taille, etc.
Un autre exemple d’utilisation de l’effet Von Restorff qui est bien connu, ce sont les publicités types pop-ups.
Pop-ups
Oui, nous savons que vous les détestez et que juste à les voir, vos poils se hérissent. Pourtant, ce sont des bijoux d’utilisation de l’effet Von Restorff.
Et voici pourquoi :
ils mettent en valeur leurs contenus en misant sur des couleurs criardes et des animations qui attirent le regard ;
ils sont volumineux et se placent dans des endroits stratégiques de notre champ de vision ;
certains pop-ups arborent un gros call to action avec des couleurs fortement contrastées.
Vous aurez beau faire tous les efforts du monde pour les ignorer pendant votre navigation, vous ne pouvez pas.
Alors, comment utiliser l’effet Von Restorff pour parfaire votre UX/UI design ? Voici 8 astuces que vous pouvez utiliser :
rendez les informations importantes (ou l’action que vous voulez que l’utilisateur fasse) visuellement distinctes des autres ;
utilisez les techniques de mise en valeur des éléments avec parcimonie pour que l’utilisateur ne soit pas distrait ;
créez des icônes colorées ;
créez une hiérarchie entre vos contenus en misant sur la typographie et la couleur des textes ;
utilisez des animations subtiles pour attirer l’attention ;
si vos interfaces Homme-machine comportent beaucoup de textes, utilisez des infographies pour mettre en valeur les informations pertinentes ;
n’hésitez pas à rajouter une information visuelle sur l’élément le plus important ;
ne rendez pas distinguables les boutons permettant de réaliser les actions que vous ne voulez pas que l’utilisateur réalise ;
Pour vous inspirer, n’hésitez pas à admirer la conception graphique du site web Canva.
Rien qu’avec les couleurs, Canva met en valeur les actions les plus intéressantesles offres payantes de Canva attirent immédiatement l’œil
Cerise sur le gâteau : l’effet Von Restorff ne s’applique pas qu’aux visuels.
Vous pouvez aussi l’utiliser sous la forme de textes comme le fait Airbnb en vous proposant des maisons troglodytes et des tiny houses.
3 – La loi de Serial Position Effect
Si vous ne devez retenir qu’une loi, c’est celle-ci : les humains ont tendance à mieux se souvenir du premier et du dernier élément d’une liste. On peut scinder cette loi en deux :
l’effet de primauté ;
l’effet de récence.
Le premier dit ceci : le premier élément d’une liste à toujours plus d’importance que le reste à nos yeux. En effet, c’est lui qui donne le ton du reste du contenu, par conséquent, on s’y attarde plus.
Le second stipule que l’on a mieux tendance à se souvenir du dernier élément que l’on a vu parmi une foule d’éléments.
C’est à cause de cette loi psychologique que nous mettons autant d’efforts pour faire une bonne première impression à autrui. Et que les restaurants mettent toujours les plats à la carte – souvent les plus rentables — en premier.
Les UX designers utilisent abondamment ce principe. Voici comment vous pouvez faire de même :
mettez toutes les caractéristiques négatives ou à faible valeur de vos produits en milieu de page, jamais au début ni à la fin ;
placez vos CTA au début et à la fin de la page ;
utilisez les mêmes boutons à la même place sur toutes vos pages ;
créez les menus les plus courts possibles – pas plus de 3 ou 5 items – ou utilisez un menu hamburger.
Adobe utilise parfaitement ce principe pour vendre son offre Adobe Creative Cloud.
les CTA les plus importants sont placés à la fin du menu et à la fin de la page
Dropbox, le géant de l’hébergement de fichiers en ligne, fait de même sur sa homepage.
Page d’accueil de Dropbox, le CTA étant placé au début de la page dans le menu et à la fin
Le bouton “commencer” est placé à la fin du menu et à la fin du contenu. Et que trouve-t-on à la fin de la page ?
Bas de la homepage de Dropbox se terminant par un appel à l’action
Un gros bouton qui vous redirige vers la page des forfaits.
4 – la loi Peak-end
Vous êtes vous déjà demandé comment est-ce que les gens jugent leurs expériences ?
…
Ils le font en se basant grandement sur le pic et la fin plutôt que sur la moyenne de tous les moments qu’ils ont vécus.
C’est ce que vous faites lorsque vous racontez vos vacances. Vous parlez beaucoup des moments les plus intenses et de la fin. Les longues heures de planification sont rarement évoquées.
En tant qu’UX designer ou gestionnaire de produits, vous pouvez jouer sur ce principe pour améliorer la satisfaction des utilisateurs.
Premièrement, identifiez les pics. Les pics correspondent à ces moments où vos clients se demandent comment est-ce qu’ils ont fait pour vivre sans votre produit.
Ensuite, gamifiez-le pour le rendre mémorable. À ce jeu-là, Mailchimp et l’animation du singe qui transpire à grosse goutte lorsque vous lancez votre campagne e-mail est imbattable.
Animation du singe qui transpire à grosse goutte lors de l’envoi d’un email sur Mailchimp
Ensuite, soignez la fin de votre user journey. Assurez-vous que l’utilisateur soit satisfait et souvenez-vous que les gens se souviennent plus facilement des mauvaises expériences.
Libre à vous de faire parler votre créativité. IKEA est devenue une référence de l’UX design… en proposant des crèmes glacées à leurs clients à la sortie du magasin.
Subitement, IKEA ne vend plus des meubles, mais une expérience de shopping.
Et hop, parfaite transition pour la dernière loi.
5 – l’effet IKEA, ou le biais de justification de l’effort
Jusqu’à présent, toutes les lois que nous vous avons montrées vous incitent à réduire les frictions dans votre user journey.
Mais est-ce qu’un peu de difficulté ne ferait pas du bien ?
L’effet IKEA répond oui : les gens tombent aisément amoureux des produits qu’ils ont pris de la peine à concevoir.
From Software, un éditeur de jeux vidéo nippon, l’a bien compris avec sa série Dark Souls. Dans ce jeu, rien n’est fait pour vous faciliter la vie. La mort vous attend à chaque détour de la carte et même les ennemis de bases sont coriaces.
Un véritable ovni dans l’univers du jeux-vidéo qui se tourne de plus en plus vers les jeux tous publics.
Dans DarkSoul, vous allez mourir beaucoup de fois
Pourtant, ça a fait mouche. Les joueurs de tous niveaux ont adoré son gameplay justement parce qu’il est punitif.
Dès l’entrée le jeu vous fait clairement comprendre que vous allez y laisser des larmes. Source : 9gag
C’est exactement ça l’effet IKEA : plus un utilisateur s’investit dans la création d’un produit, plus il en tombe amoureux.
Ce principe tire son nom du magasin IKEA, qui laisse la charge de monter les meubles aux clients. Bien que ce soit difficile et que le résultat soit prévisible, les gens en sont fiers.
Alors comment l’utiliser pour augmenter le taux de rétention de vos app ? Voici quelques pistes :
demandez à l’utilisateur de compléter son profil ;
offrez des possibilités de customisation aux utilisateurs finaux ;
offrez des réductions en guise de « vraies » récompenses à vos clients.
Maintenant, passons aux prochaines lois.
7 lois pour capter l’attention de vos utilisateurs et jouer sur la perception des mouvements
Pour créer une expérience utilisateur réussie et mémorable, vous devez jouer avec l’attention des utilisateurs.
Si vous la sollicitez trop, votre prospect va quitter votre plateforme. À l’inverse, si vous ne réussissez pas à garder son attention durant toute sa navigation, il va s’ennuyer sur votre plateforme et vos ventes vont plonger.
Bref, vous devez manier aussi bien l’attention qu’un maître jedi mani son sabre. Raison pour laquelle nous vous proposons ces 7 lois de l’UX design :
la loi de Tesler ;
la loi de Miller ;
la loi de Parkinson ;
la loi de Jakob ;
la loi de Fitt ;
la loi de Hick ;
le rasoir d’Occam.
Voyons-les en détail.
1 – La loi de Tesler
Aussi appelée la loi de la conservation de la complexité, elle stipule ceci : il existe un degré de complexité en dessous duquel vous ne pourrez jamais réduire un système.
L’exemple direct qui me vient en tête, ce sont les sites de réservations d’hôtel.
À l’heure du minimalisme et de la réduction du nombre de champs de formulaire, les sites de réservation sont des exceptions. Ils vous demanderont toujours au moins quatre champs.
Page d’accueil de Booking.com
Après, complexité ne rime pas avec mauvaise expérience utilisateur.
Comme le démontre le site 16personnalities.com qui vous demande quand-même de répondre à 60 questions pour évaluer votre profil psychologique. Ce qui en fait une parfaite transition pour la loi suivante.
2 – La loi de Hick
Voici ce qu’elle dit : « le temps pris pour faire un choix augmente proportionnellement au nombre d’options disponibles. ».
En effet, plus vous donnez de choix à votre utilisateur, plus il va tenter de comparer ses alternatives. Fatalement, cela va lui demander beaucoup d’efforts et il risque de remettre à plus tard.
Mais bon, vous et moi le savons, plus tard signifie très souvent jamais, ce qui représente un vrai manque à gagner.
Comme si ça ne suffisait pas, s’il y a trop d’options, gardez en tête qu’il peut tout simplement décider de quitter votre plateforme et de ne plus y revenir.
Heureusement, en tant qu’UX designer, vous pouvez limiter l’impact de la loi de Hick en découpant le parcours utilisateur en grandes étapes.
Vous souvenez-vous du site 16personnalities.com dont on parlait plus haut ? Plutôt que de vous mettre face à un questionnaire de 60 cases à cocher, il les segmente par groupe de 6.
Page d’accueil de 16Personalities
Spotify aussi le fait en ne vous proposant que quelques catégories de musique sur sa page d’accueil.
Page d’accueil de Spotify ne vous montrant que quelques catégories de musique
Dès que vous choisissez votre catégorie, les sous-catégories s’affichent et ainsi de suite jusqu’à ce que vous trouviez une mélodie qui vous plaît.
3 – La loi de Miller
Énoncée pour la première fois en 1956, la loi de Miller affirme que nous ne pouvons garder en mémoire que 5 ou 7 éléments. Pas plus.
Vous utilisez constamment ce principe sans vous en rendre compte. Essayez d’énoncer votre numéro de téléphone à haute voix. Vous verrez que vous le découpez instinctivement en groupe de trois chiffres.
Pour revenir au webdesign, c’est cette loi qui explique que les développeurs créent rarement des menus à plus de sept éléments.
L’une des mises en pratique les plus célèbres de la loi de Miller est la refonte graphique du site web de La Redoute. Voici à quoi ressemblait sa page d’accueil en 2009.
Page d’accueil de la Redoute en 2009
Faisons l’impasse sur son esthétique. Attaquons-nous plutôt au nombre de catégories présentées en haut de page.
Page d’accueil de la Redoute en 2009
Il y en a 16 !
Essayez de toutes les lire et de vous en souvenir (sans inclure celles qui sont en début et en fin de liste).
…
Combien de catégories vous reviennent en tête ? Surement moins de la moitié. Heureusement, l’entreprise a depuis fait plusieurs refontes graphiques qui ont corrigé ce problème.
Homepage de La Redoute en 2023 avec un bien meilleur menu
Le nombre de catégories a grandement chuté. Seules sept sont présentées. Les autres étant masqués sous un menu hamburger.
Voici comment vous pouvez l’utiliser sur vos plateformes numériques :
divisez vos contenus en petits morceaux ;
créez une hiérarchie visuelle grâce à des titres et des sous-titres (ça fonctionne aussi avec les catégories et sous-catégories) ;
retirez tous les éléments superflus de vos interfaces ;
évitez les icônes difficiles à comprendre.
Pour finir, vous pouvez aussi vous inspirer de la plateforme de streaming Netflix.
Page d’accueil de Netflix
Malgré son catalogue de films impressionnant, la plateforme n’en affiche que quelques-uns visuellement regroupés en petits groupes.
4 – La loi de Parkinson
Loi de Parkinson (source : Source : https://kanbanzone.com/2020/how-to-use-parkinsons-law-to-get-more-done-in-less-time/)
Toute tâche prolongée est prolongée jusqu’à prendre tout le temps que nous lui allouons.
Si vous vous intéressez à la productivité, cette loi vous est familière. Bonne nouvelle, elle peut aussi être utilisée pour peaufiner l’expérience proposée par votre plateforme.
En effet, plus vous exigerez que vos visiteurs fassent des actions complexes, plus ils prendront de temps. Sauf qu’en tant qu’UX designer, vous savez que plus de temps signifie aussi plus de chance qu’il abandonne et quitte la plateforme.
Concrètement, voici quelques techniques que vous pouvez utiliser pour maximiser ce principe :
proposez le remplissage automatique du maximum de champs possibles sur vos formulaires ;
proposez des méthodes de paiement rapides et intuitives ;
montrez à vos utilisateurs le temps nécessaire pour terminer l’action en cours ;
Pré-remplissez les barres de recherche du moteur de recherche intégré de votre app.
5 – La loi de Fitts
Est-ce que vous avez déjà rêvé de pouvoir prédire les actions des internautes ?
Grâce à la loi de Fitts, vous pouvez essayer. Voici ce qu’elle dit : « Le temps nécessaire à l’acquisition d’une cible est fonction de la distance et de la taille de la cible ». Autrement dit, si vos boutons d’appel à l’action sont petits et éloignés de son doigt, l’utilisateur risque de les rater.
Pour appliquer la loi de Fitts dans votre UX design, suivez ces règles :
créez des boutons suffisamment gros (au moins 44 x 44 pixels CSS) ;
laissez des espaces suffisamment larges entre vos éléments graphiques pour diminuer le taux d’erreur ;
ajoutez des labels explicatifs à vos icônes ;
ajoutez des espaces blancs en plus des padding autour de vos icônes ;
éloignez autant que possible les boutons qui permettent de réaliser des actions que vous ne voulez pas (quitter l’application, retour en arrière, etc.) ;
placez les cibles liées entre elles proches les unes des autres.
Uber applique ce principe avec succès dans toutes ses interfaces.
interface de Uber Charter
Avez-vous remarqué ? Le bouton pour entamer la course remplit tout le bas de l’écran et arbore un bouton d’appel à l’action travaillé. Clairement, c’est le bouton que vous toucherez le plus facilement avec le pouce.
À l’inverse, le bouton pour annuler la course est situé en haut à gauche de l’écran du smartphone. Impossible d’y accéder sans avoir à sortir votre autre main de votre poche. Si vous transportez un colis, vous devrez carrément le déposer pour annuler.
6 – La loi de Jakob
Si vous voulez innover dans le design graphique et dans l’agencement des éléments de vos interfaces, cette loi est faite pour vous.
Voici ce qu’elle dit : le meilleur moyen de créer quelque chose de nouveau est de regarder les références.
Autrement dit : l’ui de votre plateforme doit reprendre certains éléments de vos concurrents sans pour autant être une pâle copie.
La raison est simple, les clients de votre marché utilisent déjà des plateformes de vos concurrents directs ou indirects. Ce qui leur a laissé le temps de se forger des habitudes de navigation.
Alors si vous débarquez avec des interfaces trop révolutionnaires et difficiles à comprendre pour eux… ils vont retourner chez vos concurrents.
C’est pour cette raison que si vous fréquentez régulièrement les sites d’e-commerce, où que vous soyez dans le monde, vous saurez comment vous en servir.
Homepage d’AmazonPage d’accueil de CdiscountHomePage de Taibao (Chine)Page d’accueil de Rakuten Japon
Terminons avec la solution la plus simple pour éviter toute erreur dans la conception de vos produits : le rasoir d’Occam.
Voici ce qu’il dit : les solutions les plus simples sont presque toujours les meilleures.
En termes d’UX designer, on peut la reformuler comme ceci : « parmi tous les choix aboutissant au même résultat qui sont proposés à un utilisateur, il choisira toujours celles qui reposent sur le moins d’hypothèses. ».
Heureusement, ce principe est assez simple à appliquer :
concevez vos interfaces en n’y ajoutant que les éléments nécessaires ;
retirez toutes les informations qui n’apportent pas assez de valeur ;
analysez l’impact des ajouts sur vos interfaces UI et basez-vous sur les données pour décider de le garder ou pas ;
analysez chaque élément et retirez-en autant que possible sans pour autant brider les fonctionnalités phares de votre logiciel.
Clairement, ce principe vous invite à faire preuve de minimaliste dans la conception de vos interfaces. Moins, c’est mieux.
L’une des entreprises qui applique le mieux ce principe, c’est le moteur de recherche Google.
page d’accueil de Google.fr
Aucun élément superflu n’est présent. Vous venez pour faire une recherche et vous trouvez la barre de recherche parfaitement mise en évidence.
A contrario, lorsque vous voulez effectuer une recherche sur Yahoo!, vous risquez d’être distrait dès votre arrivée sur la plateforme.
Page d’accueil de Yahoo!
Sans que vous n’ayez rien demandé, vous tombez sur une bannière publicitaire, un scroll infini de news people et une armada de publicités sponsorisées.
Conclusion
Si vous étiez hanté par l’idée de savoir comment créer une expérience utilisateur immersive et réussie, on espère vous avoir aidé à trouver des réponses.
Mais soyons honnêtes : appliquer toutes ces lois va vous demander beaucoup de temps.
Du temps que vous pouvez allouer au marketing, à l’amélioration de vos produits et autres.
On est d’accord, créer un design innovant, beau et utile pour les interfaces d’une application web ou mobile n’est jamais facile.
Entre l’envie de laisser parler sa créativité, les objectifs commerciaux et la peur de créer un clone d’une plateforme digitale concurrente, les web-designers marchent sur une ligne fine.
Le moindre faux pas et vous avez la garantie que vos interface-utilisateurs vont se faire descendre par les critiques.
Et si vous êtes ici, c’est que vous ne voulez pas que vous ça arrive, n’est-ce pas ?
Rassurez-vous, il existe une cheat code connu de tous les webdesigners, ux designers et autres concepteurs d’interfaces : les 10 commandements de Dieter Ram.
Qui est Dieter Ram ?
Si vous ne le connaissez pas, sachez que c’est l’une des figures les plus marquantes du design industriel du 20ᵉ siècle.
Né en 1932 en Allemagne, il a créé plus de 500 designs innovants pour la marque allemande d’électroménager Braun et l’anglaise Vitsoe. Beaucoup de ses créations reposent aujourd’hui dans les musées et inspirent carrément les produits d’Apple.
Produits Braun (Dieter Ram) vs Produit Apple (Jonathan Ive)
Voyez-vous même à quel point certains des produits du designer en chef d’Apple, Jonathan Ive, ressemblent à ceux de Ram.
Mais revenons à ce qui nous intéresse : les 10 commandements de Dieter Ram. Même s’ils ont été écrits dans les années 70, ils n’ont pas pris une ride.
Pour vous faire une idée du monsieur, voici un extrait d’un de ses discours les plus populaires :
« Mesdames et Messieurs, le design est un sujet très populaire aujourd’hui. Ce n’est pas étonnant car, face à la concurrence croissante, le design est souvent le seul élément de différenciation du produit qui soit réellement perceptible par l’acheteur.
Je suis convaincu qu’un design bien pensé est déterminant pour la qualité d’un produit. Un produit mal conçu est non seulement plus laid qu’un produit bien conçu, mais il a aussi moins de valeur et d’utilité. Pire encore, il peut être intrusif.
….
Je suis convaincu que les gens s’intéressent à ce que nous faisons chez Vitsoe car nos produits sont utiles ; je pense qu’ils apprécient également l’esthétique qui en découle. Ces qualités sont le résultat d’une résolution progressive et intelligente des problèmes.
La fonctionnalité doit être au centre d’une bonne conception. Un produit doit être fonctionnel en soi, mais il doit aussi fonctionner dans le cadre d’un système plus large : la maison. Le système d’étagères universelles 606 de Vitsoe doit son succès à sa grande fonctionnalité et à sa capacité à s’adapter à n’importe quel environnement »
Ce discours peut sembler tout droit sorti de la bouche d’un ux designer ou d’un concepteur web lors d’une Keynote sur l’ergonomie ou le responsive design d’une application mobile, et pourtant !
Essayez de deviner de quand ce discours date ?
…
Vous avez dit au début des années 2000 ? Même pas.
Il date de 1976, soit de presque 50 ans. De plus, il ne parlait ni de graphisme d’un projet web, ni de design d’interface, mais plutôt d’appareils électroménagers et de meubles.
L’auriez-vous su si nous ne vous l’avions pas dit ?
Sans plus tarder, attaquons-nous aux 10 principes d’un bon design selon Ram et voyons comment l’appliquer aux interfaces de vos logiciels.
Les 10 principes d’un bon design selon Dieter Ram
Chers concepteurs et conceptrices d’interfaces web, voici les 10 caractéristiques d’un bon design selon le designer allemand Dieter Ram :
Il est innovant ;
Rend le produit utile ;
esthétique ;
compréhensible ;
discret ;
honnête ;
durable ;
ne laisse rien au hasard ;
respecte l’environnement ;
comporte le moins de design possible.
Détaillons-les un peu plus.
1 – Un bon design est innovant
Innover rien que par le design de son produit, le rêve de plus d’un directeur artistique.
Et certains y arrivent.
C’est ce qu’a fait la plateforme de blogging medium. En soi, elle ne propose aucune fonctionnalité supplémentaire par rapport à ses concurrents.
En tant qu’auteur, vous pouvez créer des textes, les publier et les partager.
Vous pouvez aussi le faire sur d’autres plateformes de gestion de contenu et CMS. LinkedIn Pulse, LiveJournal, Webnode ou encore Blogger de Google, etc.
D’ailleurs, certaines d’entre elles vous offrent plus de possibilités de partager vos créations avec votre réseau (coucou LinkedIn).
Alors, pourquoi Medium est autant prisé par les écrivains anglo-saxons ? À cause d’une seule différence : son design d’interaction.
Oui oui, vous avez bien lu. La plateforme de blogging lancée en 2012 fait de l’ombre aux mastodontes comme Facebook ou WordPress uniquement grâce à son design. Voici quelques-uns de ses atouts :
une mise en page léchée, centrée sur l’utilisateur et qui donne à chaque article un style élégant, simpliste et minimaliste qui est diablement efficace pour le storytelling ;
une facilité de publier ses pensées en quelques clics ;
des interactions, elles aussi, simplifiées grâce à un processus de connexion efficace.
Tout ceci contribue à améliorer la qualité de l’expérience utilisateur des producteurs de contenus et autres utilisateurs du site.
Pour en revenir à Dieter Ram, il entend par innovation le fait qu’il est théoriquement impossible d’épuiser les possibilités de design. La cause étant que le développement technologique continuera d’offrir de nouvelles manières de concevoir un produit.
2 – Le design doit rendre le produit utile
Selon Ram, un bon design met l’accent sur l’utilité d’un produit tout en négligeant ce qui pourrait l’affaiblir.
Pour que le design de vos pages fasse mouche, votre consommateur doit le valider selon au moins trois critères :
il doit être parfaitement fonctionnel et ergonomique ;
il doit lui procurer une certaine satisfaction psychologique et le mettre en confiance. C’est par pour cela que les banques adorent se créer une identité visuelle centrée autour d’une nuance de bleu sur leurs sites internet ;
dernier point, vos interfaces doivent être des bijoux d’UX et d’UI.
Rien que le design raté d’une page peut pousser un internaute à détester votre logiciel ou votre application. Le pire étant que si vous lui demandez pourquoi il n’aime pas votre service, il sera incapable de vous répondre.
Bon, en nous relisant, dis comme ceci, ça a l’air assez abstrait, alors voici un exemple de design qui ne valide pas ce principe :
Concept de transaction PayPal par Vladyslav Tyzun
Cette animation est un concept développé par l’UX UI designer Vladyslav Tyzun et disponible sur sa page Dribbble.
Il s’agit d’un concept d’email de réception d’une transaction PayPal.
Est-ce que ce concept est beau ? Oui.
Est-ce qu’il est utile ? Oui.
Est-ce qu’il est fonctionnel ? Non, pas tout à fait.
En effet, si vous chronométrez l’animation, vous verrez qu’elle s’exécute en 3.5 secondes. Pour une transaction, ça peut passer, mais imaginez le vendeur qui doit en voir 1000 par jour.
C’est la partie « artiste » des designers qui s’exprime ici. Mais vous serez surpris de toutes les fois où des développeurs web ont confondu la beauté avec autre chose.
Lorsqu’un internaute ou un mobinaute ouvre votre application, il doit comprendre clairement ce qu’il doit faire.
Hors de question qu’ils suivent un tutoriel pour comprendre comment utiliser votre app. Et si c’est le cas, soyez sûr que votre taux de désinstallation va bondir en flèche sur les magasins d’application.
Encore une fois, même si ça semble basique, plus d’un web-designer ont raté cet exercice. À l’instar de celui qui a conçu les interfaces du site web de l’école d’art de Yale.
Page d’accueil de l’école d’art de Yale
Honnêtement, combien de secondes vous ont-ils fallu pour comprendre l’objectif et l’intérêt du site ? Sans parler des couleurs fortement contrastées.
Bonus : assurez-vous que l’ergonomie de vos interfaces soit irréprochable.
Ce qui nous conduit au point suivant.
5 – Un bon design doit être discret
Le minimalisme.
Que vous soyez designer, développeur, ou de n’importe quels autres métiers du web, vous en avez sans doute déjà entendu parler plusieurs fois.
La raison est simple : c’est un design discret et qui n’attire pas l’œil sur lui-même (ce qui n’est pas le cas de l’exemple plus haut, non ?) ).
En réalité, pour que votre design soit efficace et réussi, votre utilisateur ne doit même pas se rendre compte de son existence. Ni des efforts que vous avez déployés pour arriver à ce résultat.
Tout doit lui sembler naturel, comme une évidence (alors que vous et moi savons que ça ne l’est pas).
6 – Un bon design doit être honnête sur les capacités de votre produit
Il n’y a rien de plus énervant que les interfaces qui tentent de vous manipuler.
Sceptique ? Souvenez-vous de votre réaction à chaque fois que vous tombez sur la page d’un logiciel qui vous promet une période d’essai gratuite. Pour qu’ensuite, dès que vous cliquez sur « télécharger » ou « s’inscrire », il vous redirige vers un paywall ou sur sa page de pricing.
Typiquement, le site web ou l’application qui vous fait ça a été conçu pour vous tromper. Et sans surprise, vous avez tourné vos talons numériques et lui avez claqué la porte.
25 ans avant l’avènement de la bulle des dots.com, Dieter Ram mettait déjà l’accent sur ce point : un design ne doit pas promettre l’impossible aux utilisateurs finaux.
Il avait beau parler de design de mobilier et de machine d’électroménager, ça fait toujours mouche.
7 – Un bon design résiste aux tendances et à la mode
Vous souvenez-vous du skeuomorphisme ? Cette tendance graphique qui consiste à calquer le design ou le logo d’une application sur son équivalent réel ?
Un exemple de Skeuomorphisme poussé à l’extrême par Creative DashScreenshot de l’application « localiser mes amis » d’Apple.
Jusqu’à iOS 6, c’était la grande mode du développement d’applications mobiles. Bon nombre de développeurs iOS et Android tentaient de reproduire la texture des matériaux « physiques » : bois, cuir, marbre, etc.
Ensuite, en 2012, une nouvelle tendance a émergée avec le système d’exploitation Windows 8 : le flat design.
Page de Windows 8.
Exit les détails, les ombres, les contours, les reliefs, les formes non-géométriques. Tout devait être simplifié, carré ou rectangulaire, et surtout aplati.
Deux ans plus tard, changement de cap : le flat design fait place au Material design lancé par Google en 2014.
page d’accueil de Tumblr en material design
Tous les éléments graphiques doivent maintenant avoir un aspect « papier » en plus d’être minimaliste.
Ensuite, il y a eu l’extrême opposé quelques années plus tard : le maximalisme.
Exit la recherche du vide, du « less is more » et des surfaces blanches. La doctrine, c’est « Plus c’est Plus », quitte à piquer les yeux et sacrifier l’esthétique.
Bon, vous voyez où l’on veut en venir : les tendances graphiques changent constamment !
Si vous ancrez toute votre UI design dans l’une d’entre elles, vous risquez d’être catalogué comme has-been en moins de trois ans.
Vous serez alors obligé de sortir la CB pour faire une coûteuse et longue refonte graphique de votre site web et de vos applications mobiles.
Ce qui nous amène une fois de plus à Dieter Ram : concevez des interfaces durables et qui ne suivent aucune mode.
Pour ajouter une couche, et parce que nous parlons de webdesign et de développement d’applications mobiles, ce principe a une contrainte en plus : vos interfaces doivent pouvoir être facilement adapté aux nouveaux périphériques ainsi qu’aux nouvelles dimensions d’écran des mobiles et tablettes.
8 – Un bon design ne laisse rien au hasard
Si vous avez déjà participé à un workshop collaboratif sur Figma avec des professionnels du webdesign, vous avez probablement remarqué un fait intéressant : ils discutent souvent longtemps, avec passion, sur la position du moindre bouton et pop-up.
En effet, le cerveau humain perçoit même des détails infimes. Et parfois, il peut les interpréter de manière négative.
Raison pour laquelle Dieter Ram recommande de ne rien laisser au hasard. Il ajoute même que la précision et le soin du détail montre du respect envers l’utilisateur.
9 – Un bon design est écologique
Avez-vous déjà entendu parler de l’éco-conception et de l’informatique verte ?
Il s’agit d’un courant de pensée qui vise à minimiser les ressources consommées par les sites web — temps de calcul et consommation électrique – lorsqu’un internaute navigue dessus.
Pour l’utilisateur final, un site web éco-conçu a plusieurs avantages :
il est rapide ;
il consomme moins de bande passante ;
il limite la pollution visuelle auquel l’internaute est soumise.
Côté développeur, un site web utilisant du green-code est beaucoup plus facile à maintenir et à faire évoluer. Cerise sur le gâteau : vous pouvez même obtenir des labels écologiques rien qu’en basculant dans l’informatique verte.
10 – Un bon design a aussi peu de design que possible
Clairement, c’est le point qui fait le plus mal au vu des trésors d’inventivité que vous aurez déployés, et pourtant.
L’objectif de votre service est de résoudre un problème de vos consommateurs. Il n’est pas là pour que vous puissiez vous comparer avec d’autres graphistes ni étaler vos prouesses techniques.
Attention toutefois. En lisant ce point, on peut facilement confondre les principes de Dieter Ram avec ceux du minimalisme et son « Less is more », mais il n’en est rien.
Dieter Ram lui-même oppose au minimalisme sa propre doctrine : « Moins, mais avec la meilleure réalisation ».
L’une des différences fondamentales entre les deux étant que Ram préconise de toujours placer l’utilisateur au centre de tout design. Là où le minimalisme se contente de vouloir épurer au maximum.
Un cas flagrant étant le retrait des ports USB des MacBook d’Apple. Oui, c’est du minimalisme, car l’objectif de la manœuvre était de diminuer l’épaisseur des macs.
Par contre, cette manœuvre désavantageait considérablement les utilisateurs qui étaient obligés d’acheter des adaptateurs USB-C vers USB à prix d’or.
Comment être sûr de séduire vos utilisateurs grâce à un design impeccable ?
Ok.
Vous voulez avoir une application esthétiquement irréprochable et parfaitement conçue, n’est-ce pas ?
On a la solution pour vous : faites appel à Poyesis !
Venez discuter avec notre chef de projet informatique afin de voir les possibilités de design de votre app. C’est gratuit et ça ne vous engage à rien, alors pourquoi attendre ? Parlons ensemble de votre projet.
