Design d’un site web — ce qui se décide ici, avant la moindre ligne de code

Le design est souvent traité comme la couche qui arrive en dernier et qui concerne l’apparence. C’est le malentendu le plus coûteux de tout le projet, car c’est à cette étape que se prennent les décisions que le code ne peut plus défaire à bas prix — et elles ressemblent à des décisions de couleur.

Cette rubrique n’est pas un guide d’esthétique. C’est un aiguillage : deux textes, un par question avec laquelle les entreprises arrivent réellement.

Ce que cette rubrique tranche

Trois choses, et aucune n’est affaire de goût.

Ce qui est visible, et dans quel ordre. Quel élément vient en premier, ce qu’on peut omettre, où s’arrête le premier écran. Ce sont des décisions commerciales prises par des moyens graphiques, et non l’inverse.

Ce qui n’y sera pas. La partie la plus inconfortable du design et la moins souvent nommée : tout ne tient pas, donc quelqu’un doit choisir. Si le concepteur ne choisit pas avec vous, le hasard choisira.

Ce que vous pourrez modifier vous-même. Un bloc conçu pour être modifiable et un bloc conçu « en dur » sont identiques sur une image, et diffèrent en coût pendant des années.

Le plus simple est un exemple qui revient régulièrement chez nous. Une entreprise demande de « remonter le formulaire, parce que les clients ne le voient pas ». Sur un croquis, c’est un rectangle déplacé vers le haut. Sur un site en ligne, la même demande signifie reconstruire un composant, modifier des champs dans le système de gestion de contenu, ajuster les requêtes de données, refondre des styles et vérifier que rien à côté ne s’est effondré. La demande est identique dans les deux cas. Seule la facture change.

Il vaut la peine de poser tout de suite la limite avec les rubriques voisines, car dans la plupart des propositions ces trois choses arrivent collées. Quand chaque étape a lieu et ce qu’il faut avoir livré à ce moment-là relève de la rubrique consacrée au processus. Sur quoi tout cela reposera — le système et la plateforme — relève de la rubrique technologies. Ici se trouve uniquement comment le site doit être construit, du côté de la mise en page et du comportement.

Deux questions, deux textes

Il suffit de reconnaître votre propre situation.

On vous a montré une maquette et vous ne savez pas quoi y juger. Vous recevez un fichier, vous devez l’approuver, et le seul outil qui vient à l’esprit est « ça me plaît » ou « ça ne me plaît pas ». Le texte propose mieux : six principes issus d’une norme internationale traduits en risque et en coût, dix heuristiques d’utilisabilité transformées en liste de contrôle pour celui qui paie, et la chaîne de citations derrière les « 9 400 % de retour sur investissement en UX » suivie jusqu’au bout — avec la réponse sur son origine réelle : UX et UI — ce que c’est et comment le juger.

Le site s’affiche mal ou se comporte mal sur un téléphone. Avant de commander une refonte, il vaut la peine de vérifier la part réelle de votre trafic mobile — car le chiffre le plus répété dans ce domaine ne vaut pas pour tous les marchés, et sur certains il pointe dans le mauvais sens. Le texte donne la mesure pour six marchés, montre pourquoi « trois points de rupture couvrent 95 % des appareils » est faux, et vous donne trois tests à faire vous-même : responsive design — quelle part du trafic vient vraiment des téléphones.

Et si les deux questions sont les vôtres ? Commencez par la seconde. La raison est pratique : les tests avec un téléphone prennent un quart d’heure et donnent des résultats nets, tandis que juger une maquette demande une heure au calme et se fait mieux en sachant déjà ce qui ne fonctionne pas sur le site actuel. De plus, les données de trafic peuvent changer la priorité de tout le projet — si la majorité de votre public est devant un ordinateur alors que le prestataire propose une conception « mobile first », vous avez un sujet de discussion avant toute signature.

Et si vous n’avez encore aucun site ? Alors cette rubrique arrive trop tôt. Commencez par le brief — sans réponses sur l’objectif et le public, toute maquette restera une supposition, si belle soit-elle.

Trois choses qui se décident plus tôt qu’on ne le croit

C’est le seul passage de fond que cette page conserve, parce qu’il concerne les deux textes à la fois et qu’il met de l’ordre dans la discussion avec le prestataire.

Le croquis décide de la mise en page : l’ordre des sections, le nombre d’étapes avant une action, ce qui compte le plus. Une correction y coûte un quart d’heure. La même correction dans du code terminé coûte chez nous environ trente fois plus, et nous détaillons ce calcul dans le texte sur les wireframes.

La maquette graphique décide de la couche visuelle et — plus important — du système : obtient-on un ensemble cohérent de composants, ou cinq images indépendantes ? Le premier s’étend sans concepteur ; le second en réclame un à chaque nouvelle page.

Le code ne décide plus que de ce que personne n’a tranché avant. Et c’est le pire endroit possible pour une telle décision, car elle est alors prise par un développeur, sur la base de ce qui lui paraît sensé.

Conclusion pratique : plus vous posez de questions tant qu’il n’y a que des rectangles gris, moins vous payez les réponses.

Ce qui n’est pas dans cette rubrique

Quatre sujets ont des airs de « design » et se décident ailleurs.

L’ordre des travaux et les délais. Ce qui se passe après quoi, combien de temps cela dure et ce qui dévore ce temps — la rubrique consacrée au processus.

La conversion. Ce sujet est sorti d’ici, et il vaut la peine de dire pourquoi : le design influence la conversion, mais le texte, la vitesse, l’offre et la qualité du trafic aussi. Le garder dans la rubrique design revenait à affirmer qu’il appartient à un seul ingrédient. Il se trouve maintenant dans la rubrique marketing, avec notre propre entonnoir et la raison pour laquelle les études de cas des autres ne se transposent pas.

L’accessibilité et les WCAG. Un domaine distinct, avec ses propres obligations légales, et non un sous-chapitre du design, qui a son propre texte.

Ce que cela coûte. Ce que vous payez dans le cadre d’une prestation de design est décrit dans les deux textes. La facture complète de la mise en œuvre se trouve dans la rubrique consacrée aux coûts.

Commencez par trois tests, pas par la lecture

Si vous avez déjà un site, un quart d’heure avec un téléphone en main vous en dira plus que les deux textes lus de bout en bout. Les trois tests sont décrits dans le texte sur la version mobile, et nous les avons d’abord passés sur nous-mêmes.

La zone du pouce — le bouton le plus important est-il pressable d’une seule main, sans changer la prise ?

Les tableaux et les contenus larges — est-ce le tableau qui défile, ou toute la page qui part sur le côté ?

L’agrandissement — peut-on zoomer à deux doigts, ou quelqu’un l’a-t-il bloqué « pour que la mise en page ne se casse pas » ?

Chaque résultat négatif est un point concret à soulever avec le prestataire, au lieu d’une impression que « quelque chose ne va pas ».