Les 3 C des interfaces utilisateur: couleur, contraste et contenu

Il y a un vieux modèle d'entreprise qui fait vivre de nombreux stratèges: les 3 C. C'est un rappel de se concentrer sur l' entreprise, les clients et les concurrents . De nombreuses petites entreprises et sites Web utilisent également ce modèle. Mais pour les designers, les trois C sont un peu différents.

Lors de la création d'interfaces utilisateur, vous devez vous concentrer sur la couleur, le contraste et le contenu. Ces trois éléments sont à la base d'une bonne conception. Mais chacun est un peu plus complexe qu'il n'y paraît à première vue. Voici comment penser et intégrer les trois C des interfaces utilisateur dans vos projets de conception.

Explorez les ressources de conception

Couleur

La couleur est l'un des éléments visuels les plus évidents pour la plupart des utilisateurs. Les concepteurs et les non-concepteurs peuvent parler de la couleur et savoir si une certaine teinte ou palette leur plaît.

La couleur peut créer des connexions émotionnelles distinctes complètement sans aucun autre effet. Vous pouvez remettre un échantillon ou une puce de couleur à presque n'importe qui et obtenir une réaction sur la couleur visible. C'est également un élément de conception amusant dans la mesure où les préférences personnelles et de conception ont tendance à changer au fil du temps presque universellement.

La couleur peut faire ou défaire un design pour de nombreuses raisons, mais principalement elle fait tellement de choses et fournit tant de repères visuels à l'utilisateur simultanément que vous ne pouvez pas l'ignorer.

Impacts des couleurs:

• Facilité d'utilisation et lisibilité
• Reconnaissance et notoriété de la marque
• Où les utilisateurs regardent et interagissent
• Organisation et flux d'utilisateurs
• Succès global de la conception

Utilisez la couleur pour créer:

• Une navigation claire et compréhensible
• Interactions intuitives
• Une humeur pour le projet
• Créez des appels à l'action forts ou des éléments utilisables
• Établir une idée de ce qu'est le design, comme la réalité contre la fantaisie

Tout cela peut sembler une tâche difficile pour quelque chose d'aussi simple qu'un mélange de rouge, vert et bleu.

Alors, par où commencer? On peut dire que les variables les plus importantes en matière de couleur sont la création d'une palette attrayante pour les utilisateurs et qui parle de la conception (comme la marque et l'humeur). Par exemple, un site Web pour Coca-Cola qui utilise le bleu comme couleur dominante plutôt que le rouge serait choquant pour les utilisateurs.

Une palette de couleurs unies est ancrée dans les principes de la théorie des couleurs.

Une palette de couleurs unies est ancrée dans les principes de la théorie des couleurs. Vous n'avez pas besoin de plus de quelques couleurs pour le faire fonctionner. Deux à trois couleurs et une bonne bibliothèque de variations plus claires et plus sombres suffisent. Mockplus recommande la règle 6: 3: 1: choisissez trois couleurs pour une palette, y compris une couleur dominante qui est utilisée 60% du temps, une couleur secondaire qui est utilisée 30% du temps et une couleur d'accent qui peut être dans le reste 10 pour cent de la conception. La règle est ancrée dans le nombre d'or, pilier de la théorie du design et peut être un excellent point de départ.

Voici une autre règle pour créer des palettes de couleurs dans les interfaces utilisateur: commencez par le noir et blanc. Si le design est utilisable sans couleur, il fonctionnera probablement une fois la couleur ajoutée. Le contour noir et blanc vous donne également une bonne idée de la façon de choisir des couleurs avec suffisamment de contraste (le deuxième C) pour améliorer la convivialité.

Contraste

Le contraste crée une distinction entre les éléments. Il aide à créer une hiérarchie visuelle, une capacité de numérisation et contribue à la facilité de compréhension rapide d'un élément. Les éléments à fort contraste permettent à l'utilisateur de regarder facilement d'une chose à l'autre, créant un motif visuel naturel et un flux utilisateur.

La raison pour laquelle le contraste est si important pour la conception de l'interface utilisateur est qu'il fait partie de tout ce que vous faites. La façon dont vous créez le contraste varie en fonction du type d'élément d'effet visuel impliqué.

Vous pouvez établir un contraste avec:

• Couleur
• Taille
• Direction
• Espace
• Forme

Un élément clé des directives d'accessibilité est le contraste, car il garantit que les utilisateurs peuvent discerner un élément d'un autre dans la conception. Le projet A11Y, qui vise à faciliter l'accessibilité du Web, a cette recommandation: commencer par le contraste des couleurs en utilisant des couleurs de différents segments de la roue chromatique ou des couleurs contrastées. N'oubliez pas que les couleurs complémentaires - opposées sur la roue chromatique - offrent un contraste maximal.

Le même concept s'applique également à la création de contraste entre d'autres éléments. Choisissez des polices de caractères de différentes familles ou utilisez des tailles considérablement différentes pour aider les utilisateurs à lire les mots rapidement.

En bref, l'idée derrière le contraste est que les contraires s'attirent.

Utilisez des signes directionnels, des flèches ou des images animées pour forcer l'utilisateur à regarder dans une certaine direction, puis inversez le repère directionnel pour encore plus de contraste.

La différence entre un espace restreint et un espace ouvert crée beaucoup de contraste. Si vous voulez vous assurer que votre texte est facile à voir et à lire, donnez-lui un peu plus d'espace pour attirer l'attention sur lui.

En bref, l'idée derrière le contraste est que les contraires s'attirent. Des éléments apparemment différents peuvent réellement fonctionner ensemble, de sorte que les deux sont faciles à voir en un coup d'œil.

Pour savoir si le contraste fonctionne comme vous le souhaitez, pensez à quelques facteurs lorsque vous regardez les éléments à l'écran:

• Lisibilité: tous les mots et images sont-ils faciles à voir et à lire?
• Clarté: est-il facile de distinguer un élément d'un autre?
• Accessibilité: cela fonctionne-t-il pour autant de personnes que possible?
• Environnement: les utilisateurs peuvent-ils voir et comprendre le design aux endroits où il sera utilisé?

Contenu

Le dernier des trois C est contenu. La conception de l'interface utilisateur ne peut être aussi bonne que les informations qu'elle contient. Le contenu comprend tout, des images au texte en passant par les illustrations et les icônes, les logos et les marques. Le contenu comprend également la vidéo et chaque bit de copie de la messagerie complète ou narrative aux articles de blog en passant par de minuscules morceaux de micro-copie.

Avoir du contenu ne suffit pas. Vous devez avoir un contenu stellaire.

Tous ces éléments sont réunis pour raconter l'histoire de ce qui rend votre conception et votre interface utilisateur spéciales. Pourquoi les utilisateurs devraient-ils vous donner leur temps plutôt que de faire autre chose?

Et le simple fait d'avoir du contenu ne suffit pas. Vous devez avoir un contenu stellaire. Contenu haute résolution. Contenu de grande valeur. Votre contenu doit être meilleur / plus grand / plus spécial qu'un contenu similaire en compétition pour l'attention des utilisateurs.

Cela peut être une tâche difficile, mais la plupart des concepteurs peuvent créer ce contenu en étant fidèles à eux-mêmes, à leur marque et à leur messagerie. Restez fidèle à ce que vous êtes et à ce que vous savez. Les utilisateurs verront cette authenticité et, espérons-le, la valoriseront en passant du temps avec votre conception.

Conclusion

Maintenant que vous êtes armé des trois anciens C de l'entreprise - entreprise, clients et concurrents - et des trois C de la conception de l'interface utilisateur - couleur, contraste et contenu - vous avez les outils et les connaissances nécessaires pour créer un projet de conception hors de ce monde. bien. (Ou au moins hautement utilisable.)

En intégrant les deux stratégies dans des projets de conception, vous êtes obligé de réfléchir à la façon de créer quelque chose qui profitera au propriétaire du site Web et à l'utilisateur. Vous créez non seulement pour que le design soit beau, mais aussi pour qu'il soit fonctionnel.

Remarque: Tous les exemples de cet article proviennent de la galerie Design Shack. Assurez-vous de regarder autour de vous; c'est plein de travail et d'inspiration.