6 principes de conception UX que chaque designer devrait connaître
Qu’est-ce qui fait qu’un design est un bon design ? 🤔
Est-ce le nom du designer attaché à un projet ? Est-ce les innombrables heures de travail consacrées à la conception d’un site Web ? Le « bon design » peut-il être quantifié ?
Une bonne conception révèle une maîtrise des bases et est informée par des normes de conception établies – des principes de conception. Un bon design c’est bien UX conception.
Les principes de conception définissent comment utiliser les éléments de conception sur une page pour communiquer des messages ou évoquer des sentiments. Des éléments placés au hasard ou une mise en page aléatoire sur une page ne sont pas synonymes d’un bon design. En fait, nous dirions que ce n’est pas parce qu’une composition « a l’air bien » qu’elle est un bon design. Une bonne conception UX commence par une recherche UX et un objectif fort et est exécutée en fonction de vos connaissances en conception.
Lisez notre guide des principes de conception UX complet avec des exemples de principes de conception UX.
Table des matières
Éléments de conception vs principes
Un mot rapide sur les éléments et principes de conception.
Les éléments de conception et les principes sont des termes complémentaires.
Les éléments de conception sont des pièces individuelles qui composent une conception, comme les formes, les lignes, la texture et l’espace blanc. Par exemple, un bouton d’achat rectangulaire rouge est un élément visuel utilisant une forme et une couleur.
D’autre part, un principe de conception est une ligne directrice pour l’utilisation d’un élément pour créer une mise en page, optimiser la composition d’une page et maximiser l’expérience utilisateur globale.
Éléments de conception = Quoi
Principes de conception = Pourquoi
Vous avez besoin des deux pour créer un bon design. Place à l’événement principal.
(Retour au sommet.)
6 principes de conception UX pour les concepteurs
Le domaine du design est un mastodonte, et il y a beaucoup principes de conception! Pensez-y : il y a le design visuel, le design UI/UX, le design graphique, le design de jeux vidéo, le design de mode… la liste ne cesse de s’allonger, tout comme les principes de design. L’encyclopédie incontournable du designer, Principes universels de conception, compte au moins 125 principes de conception. 😲
Cela signifie-t-il que vous devriez apprendre les 100+ principes ? Peut être. Peut être pas. Selon Principes universels de conception, les concepteurs doivent utiliser des principes de conception pour améliorer la convivialité en minimisant la charge cognitive et le temps de prise de décision des utilisateurs. Si vous avez besoin des 125 principes pour faire le travail, nous vous saluons. Plus vous apprenez et plus vous pratiquez, meilleur est le concepteur UX.
Pendant que vous réfléchissez à cette grande entreprise, prenez note de notre feuille de triche sur les principes de conception remplie des six principes de base que vous utiliserez le plus souvent.
(Retour au sommet.)
Hiérarchie
La hiérarchie apparaît beaucoup dans la conception UX, car elle crée un ordre d’importance visuelle.
« Augmenter la visibilité des relations hiérarchiques au sein d’un système est l’un des moyens les plus efficaces d’accroître les connaissances sur le système. » ~ Principes universels de conception
Les concepteurs peuvent établir une hiérarchie avec des photos, des éléments graphiques et du texte. En règle générale, les éléments importants ou les éléments sur lesquels vous souhaitez attirer le plus d’attention sont placés bien en évidence en haut ou près du haut de la conception.
Restez à l’écoute pour quelques exemples de principes de conception UX à la fin de l’article qui utilisent la police et les graphiques pour créer une hiérarchie.
Accent
L’emphase, en tant que principe de conception, travaille main dans la main avec la hiérarchie pour mettre en évidence les informations dans une conception. Le but de l’emphase est d’attirer l’attention du spectateur sur un élément de design particulier. Cela peut s’appliquer, entre autres, à un bouton, un lien, une image ou tout autre élément de contenu. Les grands designers mettent l’accent sur les éléments d’une page pour influencer le parcours d’un utilisateur et soutenir l’expérience utilisateur globale.
Équilibre
Le principe d’équilibre dicte que les éléments visuels sont répartis uniformément, de haut en bas ou de gauche à droite, tout au long d’une conception. Des éléments distincts ont un poids visuel, donc l’équilibre crée une impression de structure. D’un autre côté, vous remarquerez que des plans déséquilibrés semblent jetés ensemble.
Proximité
La proximité est un principe de conception également appelé principe de Gestalt de la perception. La base de la proximité est que les éléments regroupés peuvent être perçus comme liés et vice versa. « Le regroupement résultant de la proximité réduit la complexité des conceptions et renforce la parenté des éléments. À l’inverse, un manque de proximité entraîne la perception de plusieurs morceaux disparates et renforce les différences entre les éléments », selon Principes universels de conception.
Contraste et similarité
Le contraste et la similitude sont les deux faces d’une même médaille. Le contraste est une différence distincte entre deux ou plusieurs éléments. Le contraste améliore également la lisibilité et la lisibilité du texte. Comparativement, la similarité assure la cohérence, créant des modèles visuels que les téléspectateurs peuvent utiliser pour prédire le contenu.
Proportion
Le principe de proportion fait référence à la taille d’un élément par rapport à un autre. La taille des éléments par rapport aux autres éléments aide les concepteurs à créer des points focaux et à attirer l’attention de l’utilisateur sur les éléments qui l’intéressent. Cependant, si les éléments d’une page partagent la même proportion, cela signifierait des niveaux d’importance égaux.
La hiérarchie, l’emphase, l’équilibre, la proximité, la similitude et le contraste, ainsi que la proportion travaillent ensemble pour créer une conception UX complète. La proportion et l’emphase aident à établir la hiérarchie, tandis que les groupes de proximité aiment les sujets ensemble pour l’organisation. La similarité et le contraste communiquent davantage sur la façon dont les éléments sont liés les uns aux autres.
(Retour au sommet.)
Exemples de principes de conception UX
Mettez votre cap sur la conception et examinons les conceptions Web du point de vue d’un concepteur pour mieux comprendre l’impact d’éléments et de principes spécifiques sur l’expérience utilisateur.
Pomme
Apple établit la norme en matière de conception UX.
La plupart des gens reconnaîtront Apple. Vous lisez peut-être même cet article sur un appareil Apple ! Mais regardons la page d’accueil d’Apple du point de vue d’un designer.
Le texte d’en-tête « iPhone 14 Pro » figure en bonne place en haut de la page. La police est beaucoup plus grande que « Pro. Au-delà. » ainsi que deux boutons, créant une hiérarchie claire d’importance. Le concepteur de la page Web voulait probablement que le spectateur sache d’abord et avant tout que l’iPhone était important ou digne de son attention (d’autant plus qu’il s’agit du seul produit affiché bien en évidence dans le cadre).
Apple a également redimensionné la taille de l’iPhone 14 Pro et l’a placé au premier plan pour mettre en valeur le nouveau produit. Le contraste saisissant entre le fond noir et le dispositif violet concentre également l’attention sur le texte et l’image.
Mou
Slack utilise des couleurs et des graphiques audacieux pour obtenir une esthétique visuelle et une convivialité.
Nous ne nous attarderons pas sur cette explication. 😂
En commençant par le haut de la page d’accueil de Slack, les concepteurs ont utilisé une police beaucoup plus grande pour créer une hiérarchie et souligner le message : « Un excellent travail d’équipe commence par un QG numérique ». C’est audacieux, percutant et signale au spectateur de « commencer ici ». De plus, « digital HQ » est mis en évidence dans une police de couleur différente. Après une exploration plus approfondie, le spectateur peut supposer que les concepteurs ont établi des parallèles entre le « QG numérique » et « Slack », en déduisant que Slack est une plateforme de réunion en ligne.
Les images ci-jointes sont justifiées à droite. Le texte en gras conduit les téléspectateurs de gauche à droite vers une illustration du QG numérique susmentionné.
Moyen
Simple mais efficace, Medium allie un design saisissant et une facilité d’utilisation.
Medium utilise magistralement le contraste pour diriger l’attention de l’utilisateur.
La moitié supérieure de la page est un fond jaune vif, et affiché bien en évidence sur le côté gauche (les lecteurs anglais lisent de gauche à droite !) est le simple slogan du site « Restez curieux ». En dessous se trouve un bouton d’appel à l’action – « Commencer à lire ». La hiérarchie, la mise en page et l’invite d’action expliquent exactement à quoi un utilisateur peut s’attendre sur le site.
Et, bien qu’il ne s’agisse pas techniquement d’un espace « blanc », les concepteurs ont utilisé l’espace négatif dans la moitié supérieure de la page pour attirer l’attention sur l’invite. Les Ms assortis sur le côté droit équilibrent la page.
L’épicéa
Améliorez votre conception avec cet exemple de principe de conception UX.
The Spruce est un média de style de vie populaire. Comment savons-nous cela? *Nettoie l’historique du navigateur* La hiérarchie du site nous donne quelques indices.
L’article de blog présenté « 12 tendances de salon à surveiller en 2023 » est proportionnellement l’élément le plus important de la page. La police du titre et l’image dominent les autres éléments de la page. Ensuite, le site répertorie ses statistiques : « 385 millions de lecteurs annuels », « 1 700+ produits testés », « 19 000+ photos originales » et « 2 000 projets pratiques ». Ces statistiques renforcent l’autorité de l’industrie et la confiance du public.
Bonnes lectures
Goodreads n’est pas seulement une ressource pour les recommandations de livres. Le site Web est un trésor d’idées de conception.
Le site Web de Goodreads est une mine d’informations pour les lecteurs et les concepteurs, mais pour l’instant, nous allons nous concentrer sur la façon dont la plate-forme prend en charge l’expérience utilisateur. Les concepteurs de Goodreads ont stratégiquement utilisé l’espace blanc, le contraste et la proportion pour attirer l’attention du lecteur sur son défi de lecture.
Comparativement, le contenu suivant utilise une police plus petite et n’est pas agrémenté de graphiques.
Qu’est-ce qui fait un bon design ? De grands designers empathiques, une solide compréhension du processus de conception UX et des principes de conception de base. Si vous êtes prêt à devenir un grand designer et à vous lancer dans la technologie, inscrivez-vous au Camp Skillcrush, un camp de codage gratuit. Rejoignez notre cours de base gratuit dès aujourd’hui et commencez votre parcours d’apprentissage avec Skillcrush, l’école de codage et de design en ligne avec un ❤️.
(Retour au sommet.)