Webdesign : 10 commandements d’un bon design par Dieter Ram

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.

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 »

Si vous voulez lire son discours complet, voici une retranscription complète en anglais.

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 :

1. Il est innovant ;
2. Rend le produit utile ;
3. esthétique ;
4. compréhensible ;
5. discret ;
6. honnête ;
7. durable ;
8. ne laisse rien au hasard ;
9. respecte l’environnement ;
10. 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 :

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.

Alors, comment réussir à créer un design utile ? Pour cela, vous devez d’abord définir le cahier des charges de votre future application.

3 – Un bon design est beau

Ok, ça a l’air basique.

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.

En voici un top 10 qui va vous piquer les yeux.

Par conséquent, quelles que soient vos contraintes, faites toujours un site élégant.

Et pour être sûr de ne pas faire de faux-pas, il existe un secret connu de tous les développeurs et webdesigner : les interfaces minimalistes.

D’ailleurs, voici un guide complet sur la création d’interfaces et de pages web minimalistes. En le lisant, vous apprendrez comment maîtriser et appliquer le « Less is more » sans créer des océans de vides dans vos design web.

4- Un bon design rend le produit compréhensible

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.

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 ?

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.

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.

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.

Si vous souhaitez en apprendre plus sur le green code, lisez notre article sur le sujet.

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.