Ma méthodologie UI.

Il faut bien différencier l’UI et l’UX.

• L’UX correspond à toute la réflexion en amont : comprendre le besoin des utilisateurs (et donc les problématiques auxquelles ils font face), et y répondre. (Très résumé, je ne m’y connais pas suffisamment en UX pour pouvoir en dire plus.)
• L’UI correspond à tout ce qui est visuel. Il s’agit de la typographie sélectionnée (serif, sans serif, avec ou sans ligatures…), des couleurs (souvent relatives à l’entreprise), du positionnement, des espaces (entre les éléments, ou même la gestion du container).

Quand je discute avec des “UI/UX” (les deux sont trop souvent associés alors qu’il s’agit de deux métiers très distincts), j’ai souvent le sentiment qu’ils ne comprennent pas réellement ce qu’est un UI.

Un UI n’est pas “juste” un graphiste qui met quelques couleurs, choisit une typographie au pif (“parce qu’elle est jolie et qu’elle rend bien”) et c’est tout. Il y a toute une phase d’inspirations, de compréhension de la marque*, de calculs… Rien n’est fait au hasard.

*Je ne parlerai pas de cas clients ici puisque je n’en ai jamais traité de “réels”.

La Grille

On ne commence jamais un Design en ouvrant un plan de travail au hasard et en disposant les éléments à l’aveugle dessus.

Exemple de grille pour un wireframe.

On utilise l’une des tailles les plus communes (pour ma part, du 1440x900 pour du desktop), à laquelle on ajoute une grille ou des colonnes (les deux appellations sont correctes). Toujours pour du desktop, on recommande une utilisation de 12 colonnes (il s’agit du modèle de Bootstrap, un framework CSS souvent utilisé par les développeurs). De la même façon, rien n’est laissé au hasard : on préconise l’utilisation d‘un container (qui “contiendra” le contenu) 1140px (toujours pour Bootstrap), ce qui sous-entend des marges de 150px de chaque côté (en gros, le container prendra 79.16% de la largeur totale de l’écran).

Pour la largeur des gouttières, on utilise la taille par défaut de notre font (18px pour moi) multipliée à l’interlignage (1.5 pour moi). On obtient 27. Il faut que la valeur obtenue soit divisible par 3, 4 ou 5. Pour 27, c’est tout bon ! La largeur des colonnes s’adaptera automatiquement aux autres valeurs entrées.

Nous avons donc 12 colonnes (en desktop), avec des gouttières larges de 27px et un container avec des marges de 150px à gauche et à droite.

La Web Typograpghy

Je vous invite tout d’abord à découvrir Montrer Démontrer, mon projet de deuxième année en Design Web et Mobile (desktop only malheureusement, il mériterait d’être refait en responsive) pour comprendre les bases, que je vais reprendre ci-dessous.

La Web Typography est primordiale : elle permet que le contenu soit lisible et accessible… Et dans un site web, c’est souvent l’information cruciale. Elle concerne :

• L’interlignage : un interlignage trop bas rapprochera les phrases les unes des autres et le paragraphe deviendra illisible. Il se calcule en pourcentage ou de 1 à 2 (avec décimales). Par exemple : 1.5 correspondra à un interlignage de 150%.
• Le nombre de caractères par ligne : c’est un fait souvent ignoré, mais la fatigue oculaire est souvent générée par des lignes trop longues. En général, on préconise entre 60 et 80 caractères par ligne afin que le “saut de l’œil” se fasse plus facilement. Pour ma part, j’utilise https://www.compteurdelettres.com/ qui fonctionne très bien.
• La font : la typographie utilisée. Il est de notoriété publique que les typographies avec serif (comme ici) sont plus lisibles que les typographies sans serif. Pour autant, je vois très souvent des designs (même à l’attention de personnes en situation de handicap visuel) avec des typographies sans serif.
• La couleur de paragraphe : il s’agit de la combinaison de tout ce qui a été mentionné au-dessus. Si l’interlignage est trop élevé, la couleur de paragraphe sera un gris clair moins lisible. La couleur de paragraphe s’obtient en plissant les yeux.

Il conviendra d’éviter l’utilisation abusive des fonts uniquement en majuscules puisque l’œil ne parviendra pas à faire ses saccades et à se fixer. Les lettres ne ressortent pas assez lorsqu’elles sont uniquement en majuscule.

De même, on évitera de centrer un texte de plus de 3 lignes puisque ça favorise la fatigue oculaire.

J’utilise également des rapports de proportion qui me permettent de calculer la hiérarchie entre mes paragraphes et mes différents titres.

Les rapports de proportion.

Ici, en utilisant le Perfect Fourth (celui que j’utilise depuis 3 ans maintenant…), si la taille de mes paragraphes est à 16px alors je multiplie par 1.333, ce qui me donne la possibilité pour mon premier titre d’être à 21,33px. En général, je passe un à deux rapports à chaque fois. (Je commence à 18px*1.333 = 24*1.333 = 32 * 1.333 = 43. Mon titre sera de 43px.)

Mon article est déjà bien long, je m’arrêterai donc ici pour la Web Typography puisque ce sont vraiment les notions les plus élémentaires.

Les couleurs

Je ne m’épancherai pas sur ce sujet, puisque j’ignore ce qu’il convient de faire dans un cas réel (en suivant une charte graphique).

Néanmoins, il convient de faire extrêmement attention à l’accessibilité. Mettre un vert pomme en background d’un bouton avec un texte blanc sera illisible, et d’autant plus pour les personnes souffrant un handicap visuel. J’utilise le site https://colorable.jxnblk.com/ qui m’aiguille pour définir si le contraste est suffisamment élevé.

Cela dit, cela vaut pour les boutons et le texte, mais rien n’empêche de mettre des illustrations, des formes ou que sais-je qui ne répondent pas aux exigences du contraste puisque ce sont des éléments secondaires.

Que reste-t-il à faire dans ce cas ?

Dans la plupart des cas, je m’arrête-là. Le plus gros étant défini, je place mon contenu et mes images (photos ou illustrations) dans mes colonnes (on ne place jamais de contenu dans les gouttières).

Pour donner du rythme, il est nécessaire de changer la disposition : ne pas toujours mettre son image à gauche et son texte à droite. Par ailleurs, le fait de mettre une image accolée à chaque paragraphe n’est pas non plus obligatoire. On essaie de mettre des phrases standout, c’est-à-dire des phrases qui ressortent. On peut utiliser des changements de graisse typographique (comme le bold ou l’italique ici) ou simplement faire ressortir une phrase importante (l’éloigner du reste du contenu, augmenter sa taille typographique, sa couleur…).

Un travail UI que j’ai réalisé en respectant les règles édictées au-dessus. L’accessibilité pourrait néanmoins être améliorée.

Nota Bene : Je ne suis pas UI Designer, je ne suis pas UX Designer, je recherche actuellement une alternance pour pouvoir me spécialiser dans le domaine. C’est donc la parole d’une néophyte (mais ayant déjà expérimenté ce qu’elle raconte) que vous lisez ici.