Il existe un ancien modèle d'entreprise que de nombreux stratèges en affaires ont adopté - les 3 C. C'est un rappel pour se concentrer sur le entreprise, les clients et les concurrents. De nombreuses petites entreprises et sites Web utilisent également ce modèle. Mais pour les concepteurs, 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'un bon design. Mais chacun est un peu plus complexe qu'il n'y paraît de la surface. Voici comment penser et intégrer les trois C des interfaces utilisateur dans vos projets 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 discuter de la couleur et déterminer si une teinte ou une palette leur plaît.
La couleur peut créer des liens émotionnels distincts, à elle seule, sans autres effets. Vous pouvez remettre un échantillon de couleur ou une puce à presque n'importe qui et obtenir une réaction à propos de la couleur visible. C'est également un élément de design amusant en ce sens que les préférences personnelles et de design ont tendance à évoluer avec le temps presque universellement.
La couleur peut faire ou défaire un dessin pour de nombreuses raisons, mais elle fait surtout beaucoup de choses et fournit tellement de repères visuels à l'utilisateur simultanément que vous ne pouvez pas l'ignorer.
Impacts de couleur:
- Facilité d'utilisation et lisibilité
- Reconnaissance de la marque
- Où les utilisateurs regardent et interagissent
- Organisation et flux d'utilisateurs
- Succès général du design
Utilisez la couleur pour créer:
- Navigation claire et compréhensible
- Interactions intuitives
- Une humeur pour le projet
- Créer des appels forts à l'action ou des éléments utilisables
- Établissez un sens de la conception, telle que réalité versus fantaisie
Cela peut sembler une tâche difficile pour quelque chose d'aussi simple qu'un mélange de rouge, de vert et de bleu.
Alors, par où partez-vous? On peut soutenir que les variables les plus importantes en matière de couleur sont la création d’une palette attrayante pour les utilisateurs et expliquant en quoi consiste la conception (comme la marque et l’ambiance). Par exemple, un site Web pour Coca-Cola utilisant le bleu comme couleur dominante plutôt que le rouge serait choquant pour les utilisateurs.
Une palette de couleurs unie est ancrée dans les principes de la théorie des couleurs.Une palette de couleurs unie est ancrée dans les principes de la théorie des couleurs. Vous n'avez pas besoin de plus de deux couleurs pour que cela fonctionne. 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 utilisée 60% du temps, une couleur secondaire utilisée 30% du temps et une couleur d'accent pouvant être utilisée dans les couleurs restantes. 10 pour cent de la conception. La règle est ancrée dans le nombre d'or, un pilier de la théorie du design, et peut constituer un excellent point de départ.
Voici une autre règle pour la création de palettes de couleurs dans les interfaces utilisateur: commencez par le noir et le blanc. Si le dessin est utilisable sans couleur, cela fonctionnera probablement une fois la couleur ajoutée. Le contour noir et blanc vous donne également une bonne idée de la manière de sélectionner des couleurs suffisamment contrastées (le second C) pour en améliorer la convivialité.
Contraste
Le contraste crée une distinction entre les éléments. Il aide à créer une hiérarchie visuelle, facilite la numérisation et contribue à la facilité de compréhension de quelque chose rapidement. Les éléments à fort contraste permettent à l'utilisateur de regarder facilement d'une chose à l'autre, en créant un motif visuel naturel et un flux d'utilisateur.
La raison pour laquelle le contraste est si important dans la conception de l'interface utilisateur est que cela fait partie de tout ce que vous faites. La manière 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
Le contraste est l’un des éléments clés des directives d’accessibilité, car il permet aux utilisateurs de distinguer un élément d’un autre dans la conception. Le projet A11Y, qui vise à faciliter l'accessibilité du Web, a cette recommandation: commencez par le contraste des couleurs en utilisant des couleurs provenant 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 les autres éléments. Choisissez des polices de caractères de différentes familles ou utilisez des tailles radicalement différentes pour aider les utilisateurs à lire rapidement les mots.
En bref, l’idée derrière le contraste est que les contraires s’attirent.Utilisez des signes, des flèches ou des images animés d'un mouvement pour forcer l'utilisateur à regarder dans une certaine direction, puis inversez le repère directionnel pour obtenir encore plus de contraste.
La différence entre espace étroit et espace ouvert crée beaucoup de contraste. Si vous voulez vous assurer que votre texte est facile à lire et à lire, accordez-lui un peu plus d'espace pour attirer l'attention.
En bref, l’idée derrière le contraste est que les contraires s’attirent. Des éléments apparemment différents peuvent en réalité fonctionner ensemble, de sorte qu'ils sont faciles à voir en un coup d'œil.
Pour savoir si le contraste fonctionne comme vous le souhaitez, réfléchissez à quelques facteurs lorsque vous regardez les éléments à l'écran:
- Lisibilité: tous les mots et toutes les images sont-ils faciles à voir et à lire?
- Clarté: Est-il facile de distinguer un élément d’un autre?
- Accessibilité: fonctionne-t-il pour le plus grand nombre de personnes possible?
- Environnement: Les utilisateurs peuvent-ils voir et comprendre la conception dans les endroits où elle sera utilisée?
Contenu
Le dernier des trois C est contenu. La conception de l’interface utilisateur ne peut être que la qualité des informations qu’elle contient. Le contenu comprend tout, des images au texte en passant par les illustrations et des icônes aux logos et marques. Le contenu comprend également la vidéo et chaque copie de la messagerie intégrale ou narrative aux articles de blog, en passant par de minuscules copies.
Il ne suffit pas d'avoir du contenu. Vous devez avoir un contenu stellaire.Tous ces éléments sont réunis pour raconter ce qui rend votre conception et votre interface utilisateur uniques. Pourquoi les utilisateurs devraient-ils vous donner leur temps plutôt que de faire autre chose?
Et 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 concurrence pour attirer l'attention des utilisateurs.
Cela peut être un défi de taille, mais la plupart des concepteurs peuvent créer ce contenu en restant fidèles à eux-mêmes, à leur marque et à leurs messages. Tenez-vous en à ce que vous êtes et à ce que vous savez. Les utilisateurs verront cette authenticité et, espérons-le, en apprécieront le temps passé avec votre conception.
Conclusion
Maintenant que vous êtes armé des trois anciens C - entreprise, clients et concurrents - et des trois C - conception de l’interface utilisateur - couleur, contraste et contenu - vous disposez des outils et des connaissances nécessaires pour créer un projet de conception hors du commun. bien. (Ou du moins très utilisable.)
En intégrant ces deux stratégies à des projets de conception, vous êtes obligé de réfléchir à la manière de créer quelque chose qui bénéficiera 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.