Le guide de conception ultime de l'interface utilisateur

Contenu

• 01. Choisissez votre typographie
• 02. Choisissez la bonne palette
• 03. Liens et boutons de style
• 04. Créez vos composants
• 05. Documenter et collaborer

Qu'est-ce que la conception de l'interface utilisateur? Une meilleure question serait: qu'est-ce qui se passe réellement dans la conception d'une interface utilisateur? Esthétique? Convivialité? Accessibilité? Tous? Comment tous ces facteurs s'unissent-ils pour permettre une expérience utilisateur optimale et lesquels doivent venir en premier?

L'accessibilité doit toujours venir en premier, jetant les bases d'une convivialité optimale (l'utilisation d'un constructeur de site Web de premier plan vous aidera ici). Et puis, lorsqu'une interface utilisateur est à la fois accessible et utilisable, elle devrait déjà paraître plutôt décente en termes d'esthétique (les outils de conception d'interface utilisateur vous aideront ici). Ensuite, pour vous assurer que votre conception fonctionne à tous les niveaux, vous devrez la tester minutieusement, ce que vous pouvez faire avec notre sélection des meilleurs outils de test utilisateur. Examinons de plus près les éléments fondamentaux de la plupart des conceptions et ce qui peut être fait pour assurer la cohérence visuelle.

01. Choisissez votre typographie

Une bonne typographie (comme de nombreux aspects du design) se résume à l'accessibilité. La conception visuelle ajoute certainement à l'expérience globale de l'utilisateur, mais en fin de compte, les utilisateurs interagissent avec l'interface utilisateur et ne la considèrent pas comme de l'art. Les lettres lisibles donnent de la clarté et les mots lisibles aident les utilisateurs à digérer efficacement le contenu. Les deux sont plus importants que toute esthétique visuelle.

Cependant, une typographie bien conçue peut toujours être esthétiquement satisfaisante. Helvetica noir sur blanc (ou une police similaire) peut être une chose de beauté après seulement quelques améliorations typographiques simples. Par améliorations, nous entendons modifier la taille de la police, la hauteur de la ligne, l'espacement des lettres, etc. - pas la police ou la couleur du texte.

Une typographie «belle» est en fait moche quand elle est illisible car la frustration l'emporte toujours sur l'esthétique. Un grand design est équilibré et harmonieux.

Comme de nombreux aspects de la conception de l'interface utilisateur, affiner les visuels pour équilibrer l'accessibilité et l'esthétique n'est pas le défi. Le défi est de maintenir la cohérence tout au long de la conception. La cohérence établit une hiérarchie claire entre les éléments d'importance variable, ce qui aide à son tour les utilisateurs à comprendre une interface utilisateur plus rapidement et même à digérer le contenu plus efficacement.

En ce qui concerne la lisibilité et la lisibilité, la taille de police minimale acceptable telle que définie par les directives d'accessibilité du contenu Web WCAG 2.0 est de 18 pt (ou 14 pt gras). La meilleure taille de police à utiliser dépend en grande partie de la police elle-même, mais il est important de garder à l'esprit la hiérarchie visuelle et la façon dont cette taille de base se distingue des résumés et des en-têtes (c.-à-d. h1>, h2>, h3>).

Avec l'outil de conception d'interface utilisateur de votre choix (nous utiliserons InVision Studio), créez une série de calques de texte (T), puis ajustez toutes les tailles pour les mettre en corrélation avec le modèle suivant:

• h1>: 44 px
• h2>: 33 px
• h3>: 22px
• p>: 18px

Avec InVision Studio (et tous les autres outils de conception d'interface utilisateur), cela se fait en ajustant les styles à l'aide du panneau Inspecteur sur le côté droit.

Ensuite, choisissez votre police, mais méfiez-vous car ce que vous remarquerez peut-être avec certaines polices, c'est que 18px p> et 22px h3> n'a pas l'air si différent. Nous avons deux choix: modifier les tailles de police ou envisager une police différente pour les en-têtes. Optez pour ce dernier si vous prévoyez que votre conception sera lourde de texte.

Garde en tête que:

• La conception de l'interface utilisateur visuelle est souvent une approche instinctive
• Rien n'est décidé; tout est sujet à changement

Hauteur de la ligne

La hauteur de ligne optimale garantit que les lignes de texte ont un espacement suffisant entre elles pour atteindre des niveaux de lisibilité décents. Cela est de plus en plus reconnu comme une "norme"; L'outil Lighthouse Audit de Google le suggère même comme une vérification manuelle (ou même un indicateur si le texte contient des liens qui peuvent être trop rapprochés en raison d'une hauteur de ligne sous-optimale).

Encore une fois, le WCAG nous aide avec celui-ci, déclarant que la hauteur des lignes doit être 1,5x la taille de la police. Ainsi, dans votre outil de conception d'interface utilisateur sous «Ligne» (ou similaire), multipliez simplement la taille de la police par - au moins - 1,5. Par exemple, si le corps du texte est de 18px, la hauteur de la ligne serait de 27px (18 * 1.5 - vous pouvez également exécuter l'opération mathématique directement dans l'inspecteur). Encore une fois, soyez conscient - si 1,6x vous convient mieux, utilisez 1,6x. N'oubliez pas que différentes polices produiront des résultats différents.

Il est trop tôt pour penser à utiliser des données réelles dans notre conception mais, à tout le moins, nous devrions toujours utiliser des données quelque peu réalistes (même lorem ipsum). InVision Studio dispose d'une application native de données réelles pour nous aider à voir à quoi pourrait ressembler notre typographie.

Espacement des paragraphes

L’espacement des paragraphes n’est pas un style que nous pouvons déclarer à l’aide de l’inspecteur d’InVision Studio. Au lieu de cela, nous devrons aligner manuellement les calques à l'aide des guides intelligents (⌥). Semblable à la hauteur de la ligne, le multiplicateur magique est de 2x (le double de la taille de la police). Par exemple, si la taille de la police est de 18 px, il doit y avoir au moins un espace de 36 px avant de passer au bloc de texte suivant. L'espacement des lettres doit être d'au moins 0,12.

Cependant, nous n’avons pas à nous en préoccuper tant que nous n’avons pas commencé à créer des composants.

Styles partagés

Si votre outil de conception d'interface utilisateur le prend en charge (InVision Studio ne le fait pas encore), envisagez de transformer ces styles typographiques en «styles partagés» pour les rendre rapidement réutilisables tout en garantissant la cohérence visuelle. Cela se fait généralement via l'inspecteur.

02. Choisissez la bonne palette

La sélection des couleurs parfaites pour votre design va bien au-delà de l'esthétique: elle peut informer toute la hiérarchie de votre site.

En ce qui concerne la conception de l'interface utilisateur, la couleur est généralement l'une des premières choses que nous aimons essayer, mais on nous apprend que plonger directement dans la conception visuelle est une mauvaise chose. C'est certainement vrai, mais en ce qui concerne la cohérence visuelle, la couleur devrait être une préoccupation majeure car elle joue d'autres rôles.

La couleur dans la conception de l'interface utilisateur peut être extrêmement efficace, mais comme certains utilisateurs (beaucoup, en fait) souffrent de divers types de handicaps visuels, ce n'est pas toujours fiable. Cela étant dit, il ne s’agit pas nécessairement de la couleur spécifique utilisée, mais plutôt du type de couleur. Cela peut ne pas être vrai en ce qui concerne la marque, car la couleur est utilisée pour un impact émotionnel à cet égard, mais, dans la conception de l'interface utilisateur, la couleur est également utilisée pour communiquer l'intention, la signification et, bien sûr, la hiérarchie visuelle.

01. Rigide
Le plugin Stark est compatible avec Sketch et Adobe XD et vous aide à vérifier le contraste des couleurs et à simuler le daltonisme directement à partir de la toile. Support pour Figma et InVision Studio très prochainement.
02.Couleurs
Colors est un ensemble de 90 combinaisons de couleurs qui ont la quantité appropriée de contraste de couleur afin de satisfaire les directives WCAG 2.0 - certaines d'entre elles parviennent même à répondre à la norme AAA.
03. Projet A11y
Le projet A11y est une plaque tournante massive pour tout ce qui concerne l'accessibilité. Il comprend des ressources, des outils, des astuces, des tutoriels et est créé par le fabricant du plugin Stark et reçoit un financement d'InVision.

Les trois types de couleurs

Les couleurs ont un sens, il est donc important de ne pas en avoir trop. Trop de significations entraînent plus de choses que l'utilisateur doit comprendre et retenir - sans parler de plus de combinaisons de couleurs dont nous devons nous soucier. De manière générale, ce serait le format recommandé:

• Une couleur d'appel à l'action (également la couleur principale de la marque)
• Une couleur sombre neutre (meilleure pour les éléments de l'interface utilisateur ou le mode sombre)
• Pour tout ce qui précède, une variation légèrement plus claire et plus foncée

Cela permet ce qui suit:

• Le mode sombre sera facilement réalisable
• Notre couleur CTA ne sera jamais en conflit avec d'autres couleurs
• Dans tous les scénarios, nous serons en mesure de souligner et de désaccentuer

Configurez votre palette

Avec l'outil de conception d'interface utilisateur de votre choix, créez un plan de travail assez grand (appuyez sur A) pour chaque couleur (nommé «Marque», «Neutre / Clair» et «Neutre / Foncé»). Ensuite, dans chaque plan de travail, créez des rectangles plus petits supplémentaires affichant les variations les plus sombres et les plus claires de la couleur ainsi que les autres couleurs elles-mêmes.

Nous considérerions un peu plus clair et plus foncé que 10% de blanc supplémentaire et 10% de noir supplémentaire respectivement. Lorsque vous avez terminé, affichez une copie des styles typographiques sur chaque plan de travail. La couleur de ces calques de texte doit être une lumière neutre, sauf sur le plan de travail clair neutre où elles doivent être neutres et foncées.

Contraste

Ensuite, nous devrons vérifier nos couleurs pour un contraste de couleur optimal. Il existe une variété d'outils qui peuvent le faire, par exemple le plugin Stark pour Sketch et Adobe XD ou Contrast pour macOS - cependant, une solution en ligne telle que Contrast Checker ou Color Contrast Checker fera très bien l'affaire.

Vérifiez le contraste des couleurs pour chaque combinaison et ajustez les couleurs en conséquence. Si vous n'êtes pas sûr des couleurs à utiliser, essayez d'utiliser les recommandations de Color Safe.

03. Liens et boutons de style

Taille

Les boutons et les liens, tout comme la typographie, devraient avoir quelques variations. Après tout, toutes les actions n'ont pas le même niveau d'importance et, comme nous l'avons vu précédemment, la couleur est une méthode de communication peu fiable, elle ne peut donc pas être la principale méthode pour influencer la hiérarchie visuelle. Nous devons également jouer avec la taille.

Un test d'affordance visuelle est un test d'utilisabilité utilisé pour déterminer si les cibles tactiles semblent cliquables. Synchronisez la conception de Studio vers Freehand (⌘⇧F), envoyez l'URL résultante aux testeurs et demandez-leur d'encercler les éléments qu'ils jugent cliquables.

Les utilisateurs non-InVision Studio peuvent également utiliser Freehand, mais les utilisateurs d'InVision Studio peuvent lancer leurs conceptions dans Freehand de manière transparente à partir d'InVision Studio, qui est le moyen le plus rapide et le plus efficace d'obtenir des commentaires visuels des utilisateurs.

En règle générale, nous recommandons que le texte du bouton soit déclaré comme 18px (identique au corps du texte) mais que les boutons eux-mêmes aient trois variations de taille:

• Normal: 44 px de hauteur (coins arrondis: 5 px)
• Grande: 54 px de hauteur (coins arrondis: 10 px)
• Extra large: 64px de hauteur (coins arrondis: 15px)

Cela nous permet de faire en sorte que certains boutons semblent plus importants sans dépendre de la couleur et également d'imbriquer des boutons (par exemple, utilisez un bouton dans un champ de formulaire d'aspect minimal).

Profondeur

Que la cible du robinet soit un bouton ou un champ de formulaire, les ombres doivent être utilisées pour augmenter la profondeur et donc suggérer une interactivité. Un style d'ombre unique pour toutes les variantes de boutons et de champs de formulaire convient.

L'interactivité

Chaque type de bouton a besoin d'une variation pour indiquer son état de survol. Cela clarifie à l'utilisateur que ce qu'il a tenté de faire est tout à fait acceptable et garantit qu'il continue sans délai.

C'est en fait l'un des aspects les plus complexes du maintien de la cohérence visuelle, car la couleur est souvent le style préféré à changer lorsqu'il s'agit de créer un état. Heureusement, ces changements d’état peuvent être relativement subtils, il est donc très bien de changer la couleur en une variation légèrement plus claire ou plus foncée - c’est à cela qu’ils sont destinés. Cela s'applique également aux liens.

Décider contre cela nous amènera à utiliser une couleur qui a déjà une signification significative, ce qui entraînera la confusion des utilisateurs ou décidera de proposer une autre couleur. Décider d'utiliser une couleur secondaire est tout à fait acceptable, mais elle doit être enregistrée pour les visuels marketing plutôt que pour les éléments de l'interface utilisateur. Moins est plus (et plus facile).

N'oubliez pas de répéter cette étape pour chaque plan de travail. N'incluez pas les boutons d'incitation à l'action de la marque sur le plan de travail de la marque - plus tard, nous couvrirons ce qui se passe lorsque certaines combinaisons ne fonctionnent pas.

04. Créez vos composants

Les composants sont un gain de temps considérable et tous les outils de conception d'interface utilisateur offrent cette fonctionnalité (par exemple, dans Sketch, ils sont appelés symboles). Dans Studio, nous pouvons créer des composants en sélectionnant toutes les couches qui devraient constituer le composant et en utilisant le ⌘K raccourci.

Utilisation de composants

Les wireframes sont très utiles, non seulement pour concevoir des interfaces utilisateur à haute convivialité, mais également pour découvrir ce dont notre interface utilisateur aura besoin à long terme. C'est un peu comme la pérennité.

Cela ne signifie pas que nous devons concevoir de nombreux composants ou être prêts pour tout scénario possible, mais cela signifie que nous devons adopter une attitude «Et si?».

Par exemple, si notre wireframe appelle un composant 3x1 mais que nous savons que le contenu n'est pas gravé dans le marbre, une petite réflexion pourrait nous amener à nous demander: "Et si ces composants finissaient par être 4x1?". La règle de base est la suivante: concevoir uniquement pour les besoins des utilisateurs qui existent déjà, mais essayer de rendre les solutions relativement flexibles. Sinon, nous nous retrouverons avec une «dette de conception» très désordonnée plus tard.

Nous pouvons maintenant réutiliser ce composant en le faisant glisser sur le canevas depuis Bibliothèques> Document sur le côté gauche, mais gardez à l'esprit que ce flux de travail peut différer en fonction de votre outil d'interface utilisateur.

Cette méthode de création de guides de style (et éventuellement de création de la conception elle-même) fonctionne particulièrement bien avec les mises en page modulaires / basées sur des cartes, bien que les «zones communes» telles que les en-têtes, les pieds de page et les navigations soient également d’excellents candidats pour un composant.

Tout comme nous l’avons fait avec nos styles typographiques, nos couleurs et nos boutons, nous devons nous rappeler d’organiser soigneusement nos composants.

Utiliser nos règles

Plus tôt, nous avons fait une remarque sur le fait de ne pas utiliser de boutons CTA de marque en plus de la couleur de la marque, car les boutons CTA de marque doivent évidemment se démarquer parmi tout le reste. Alors, comment pouvons-nous créer un composant de marque tout en étant capable d'utiliser un bouton CTA de marque? Après tout, si nous utilisons des boutons foncés neutres pour, disons, des boutons de navigation ou simplement des boutons moins importants, ce ne serait tout simplement pas une option, n'est-ce pas?

Droite. Ce serait donc une opportunité idéale pour créer un composant - en particulier, une combinaison titre + texte + bouton. Remarquez comment j'ai créé une toile de fond en forme de "carte" de lumière neutre pour activer l'utilisation du bouton de marque. De même, le champ de forme de lumière neutre (les champs de formulaire sont généralement blancs en raison du modèle mental historiquement synonyme de formulaires papier) n'a pas l'air étonnant sur le fond clair neutre, ils ne peuvent donc être utilisés que sur le fond sombre neutre - soit directement, soit à l'intérieur. un composant sombre neutre. C'est ainsi que nous rendons notre conception flexible tout en obéissant à nos règles et en maintenant la cohérence.

Test de stress

Idéalement, le moyen le plus rapide et le plus efficace d'assurer la robustesse de notre conception est de le tester. Mettre un design à l'épreuve, c'est être cruel. Disons que nous avons une navigation avec un nombre X d'éléments de navigation, car c'était la condition requise; afin de vraiment garantir la flexibilité, essayez de modifier ces exigences en ajoutant plus d'éléments de navigation ou, pour vraiment jeter une clé dans les travaux, essayez également d'ajouter un élément de navigation avec une hiérarchie visuelle plus élevée que les autres. Nos règles de taille, de typographie et de couleur permettent-elles quelque chose comme ça? Ou pour offrir une convivialité optimale, avons-nous besoin d'une autre règle?

Gardez à l’esprit qu’il existe une différence entre l’ajout de règles et le contournement des règles. Plus de cas extrêmes signifie moins de cohérence, donc la plupart du temps, il est préférable, pour des raisons de convivialité, de simplement repenser le composant.

05. Documenter et collaborer

Comment rendre nos fichiers de conception plus faciles à utiliser pour nous-mêmes et pour tout autre concepteur qui pourrait utiliser notre fichier de conception? Eh bien, il est important de les conserver en toute sécurité dans un stockage cloud partagé et fiable, comme vous le découvrirez.

Couleurs

La première étape consiste à enregistrer toutes les couleurs dans le nuancier "Couleurs du document" si nous ne l’avons pas déjà fait. Cela les rendra plus faciles d’accès lorsque nous aurons besoin de les appliquer dans notre conception.Pour ce faire, ouvrez le widget de sélection de couleurs dans l’inspecteur, choisissez «Couleurs du document» dans la liste déroulante, puis cliquez sur l’icône + pour ajouter la couleur à l’échantillon. Cela fonctionne de la même manière dans la plupart des outils d'interface utilisateur.

Bibliothèques partagées

Ensuite, nous devons convertir notre document - complet avec les styles typographiques, les couleurs, les boutons, les zones communes et les composants de base - en une bibliothèque partagée.

Cela signifie essentiellement que chaque élément doit être un composant, même s'il ne se compose que d'une seule couche. Cliquez sur le bouton + ‌ dans la barre latérale gauche des bibliothèques, puis importez ce même document dans un nouveau document. C’est vrai: notre document est désormais une bibliothèque et est prêt à être utilisé pour concevoir des interfaces utilisateur avec une cohérence garantie.

InVision Studio est quelque peu limité dans le sens où il ne se synchronise pas encore avec l'outil officiel Design System Manager d'InVision, mais il est assez facile d'héberger la bibliothèque dans Dropbox pour que d'autres concepteurs puissent l'utiliser et la mettre à jour au fil du temps. Lorsqu'un changement est effectué (localement ou à distance), chaque fichier Studio qui utilise la bibliothèque (encore une fois, localement ou à distance) vous demandera si vous souhaitez mettre à jour les couleurs et les composants. C'est ainsi que les bibliothèques de conception sont gérées dans les équipes.

Lorsqu'il s'agit de concevoir des interfaces utilisateur visuellement cohérentes, réutilisez tout. Créez des boutons, puis utilisez des boutons pour créer des composants de bouton, puis utilisez
des composants de bouton pour créer d'autres composants tels que des alertes et des boîtes de dialogue.

Ne créez simplement pas de composants dont vous n'avez pas besoin. N'oubliez pas que la construction d'une bibliothèque est un effort collaboratif permanent. Il n'est pas nécessaire de le terminer en une seule fois, de le compléter seul ou de le terminer jamais. Il n'a qu'à véhiculer une langue.

Conception à grande échelle

Au fur et à mesure qu'une conception se développe, sa gestion devient plus difficile. Nous souhaitons peut-être apporter divers ajustements pour qu'il reste efficace et maintenable, d'autant plus que le DSM d'InVision ne fonctionne pas encore avec Studio.

Par exemple, nous pourrions vouloir utiliser des calques de texte pour annoter notre bibliothèque afin d'expliquer les cas d'utilisation de divers éléments. Pour les styles typographiques, nous pourrions même éditer le texte pour qu'il soit plus descriptif (par exemple "h1> / 1.3 / 44px"). Cela dit que h1>s doit être de 44 px et avoir une hauteur de ligne de 1,3.

Transfert de conception

Les outils de transfert de conception affichent les différents styles utilisés par chaque élément de la conception afin que les développeurs puissent créer l'application ou le site Web. Ces outils incluent une vue d’ensemble des styles et également une copie de l’échantillon «couleurs du document». Les développeurs peuvent même copier ces styles sous forme de code, ce qui est excellent si vous avez décidé de créer une documentation de conception écrite et que vous souhaitez inclure des représentations d'extraits de code des composants.

Si vous êtes préoccupé par le dépannage et la gestion d'un site Web, vous assurer que vous disposez du bon service d'hébergement Web vous aidera, mais pour votre système de conception, l'outil de transfert de conception d'InVision, Inspect, est la chose à utiliser. Pour l'utiliser, nous cliquons sur le bouton / l'icône "Publier sur InVision" dans InVision Studio, ouvrons l'URL résultante, puis tapotons pour passer en mode Inspecter. C’est vraiment pratique.

Ce contenu est apparu à l'origine dans le magazine net.