Maintenir la cohérence dans la conception de votre interface utilisateur

La cohérence dans la conception de l'interface utilisateur est un principe de la vieille école et quelque peu oubliée dans certaines conceptions Web et d'applications d'aujourd'hui. Il semble que les concepteurs choisissent d'omettre la cohérence de leurs interfaces.

Dans le cas de la conception d'applications mobiles, certains concepteurs choisissent de réinventer, de recréer ou même de rompre complètement les interactions standard du matériel avec leurs propres modèles d'interface uniques. Bien que la rupture de la cohérence entre les règles de l'interface utilisateur matérielle et l'expérience de vos applications ne soit pas une mauvaise idée, la rupture de la cohérence de vos propres applications peut l'être.

Conception cohérente de l'interface utilisateur en trois étapes

Il y a essentiellement trois types de cohérence auxquels vous devez penser lors de la conception de vos conceptions d'applications Web et mobiles:

• 1. Restez cohérent avec les directives et les comportements de l'interface utilisateur de l'appareil
• 2. Restez cohérent avec d'autres sites ou applications similaires
• 3. Restez cohérent avec votre propre conception

Aux fins de cet article, je voudrais me concentrer davantage sur le troisième - garder la cohérence dans votre propre interface utilisateur. C'est un gros problème, principalement parce que vous ne voulez pas confondre ou surprendre vos utilisateurs dans votre propre application.

Vous ne voulez pas qu'un utilisateur passe de votre page d'accueil à une sous-page et voit un style différent ou même des interactions utilisateur très différentes. Ce genre de chose peut surprendre les utilisateurs ou même les effrayer dans certains cas. La cohérence n'est pas seulement importante pour la convivialité globale du site, elle peut également augmenter considérablement la conversion.

Structure et interactions cohérentes

C'est la clé pour créer une interface utilisateur cohérente. Parfois, lorsque nous développons, nous oublions comment la structure et l'interaction vont affecter l'expérience globale de l'utilisateur. Mais tout comme la conception et la création de plans sont importantes lors de la construction d'une maison ou d'un bâtiment, elles sont également importantes pour la création d'une interface utilisateur cohérente et utilisable. Il y a quelques choses à penser et à planifier avant de commencer à écrire du code.

• 1. Réfléchissez à la manière de placer systématiquement des éléments sur votre site ou votre application.
• 2. Réfléchissez aux modèles d'interface utilisateur que vous utiliserez.
• 3. Planifiez les éléments d'entrée dont vous aurez besoin.
• 4. Déterminez les icônes dont vous aurez besoin et choisissez ou concevez un bon ensemble d'icônes qui les couvre toutes.

Le placement des éléments est un énorme moyen de réduire la surprise de l'utilisateur et de créer des attentes cohérentes et fiables. Gardez vos navigations au même endroit, rien n'irrite un utilisateur plus rapidement que le déplacement ou la disparition d'éléments de navigation. Conservez également les logos et autres éléments de marque aux mêmes emplacements sur le site.

"Rien n'irrite un utilisateur plus rapidement que le déplacement ou la disparition d'éléments de navigation"

Si vous utilisez une barre latérale, ne secouez pas trop la barre latérale en modifiant ce qui s'y trouve d'une page à l'autre. Certains de ces éléments peuvent être pertinents pour le contenu de la page, mais évitez de supprimer ou même de déplacer des éléments globaux d'importation tels que les formulaires de recherche. Les liens ou boutons de connexion et de paramétrage utilisateur sont une chose importante à conserver de manière cohérente.

Considérez les modèles d'interface utilisateur

Planifiez à l'avance et réfléchissez aux modèles d'interface utilisateur dont vous aurez besoin. Allez-vous avoir besoin d'une galerie? Modaux? Accordéons? Barres latérales? La planification des modèles de conception à l'avance vous aidera non seulement à développer et à concevoir votre application plus rapidement, mais à réfléchir aux modèles de conception dont vous aurez besoin vous aidera également à comprendre votre contenu à l'avance, ce qui peut également vous faire gagner beaucoup de temps.

Cela résoudra également les problèmes et répondra aux questions à l'avance, de cette façon lorsque vous accédez à une section ou une page de votre site qui nécessite une décision d'interface utilisateur, vous l'avez déjà fait et vous ne serez pas pris en train de créer un méli-mélo de modèles de conception sur votre site.

Pensez également à vos formulaires à l'avance. Planifiez les éléments de formulaire dont vous aurez besoin et déterminez les éléments dont vous n'aurez pas besoin ou que vous pourriez remplacer. Les éléments de formulaire peuvent être effrayants ou même difficiles à naviguer pour les utilisateurs, donc si vous pouvez éliminer ou échanger certaines entrées qui peuvent être des pierres d'achoppement, faites-le.

"Si vous pouvez éliminer ou échanger certaines entrées qui peuvent être des pierres d'achoppement, faites-le."

C'est aussi un excellent moyen de retirer la prise de décision du processus de développement. Garder les formulaires cohérents dans le style, la structure et l'interaction peut parfois faire ou défaire un taux de conversion.

Encore une fois, planifiez la tête. Planifiez à l'avance les icônes dont vous aurez besoin. Un moyen super rapide de bousiller votre cohérence consiste à être à mi-chemin du développement de votre application lorsque vous découvrez que vous aurez besoin d'icônes d'impression, puis réalisez que vous ne vous souvenez pas d'où vous avez obtenu vos icônes ou même si vous le pouvez trouver une icône d'impression qui correspond au reste de vos icônes.

Ce n'est même pas vraiment un problème de style, mais un problème interactif. Les utilisateurs s'habitueront à l'apparence de certaines icônes et pourront les reconnaître rapidement. Mais si vous utilisez un ensemble d'icônes en patchwork, vous confondrez votre utilisateur ou même lui compliquerez la tâche de dire ce que représentent certaines icônes.

Style cohérent

Le style et la conception de chaque élément d'interface utilisateur sont importants et le maintien de la cohérence entre eux est également important pour l'utilisateur. Tout comme il est important d'avoir un ensemble d'icônes cohérent, il est important que votre application ait une cohérence de conception globale. Vous pouvez penser que certains boutons sont sympas même s'ils ne se rapprochent pas de la conception globale ou de la palette de couleurs du site, mais cela ne fera que confondre votre utilisateur et sembler laid.

Lors de la conception d'un kit d'interface utilisateur, il y a quelques éléments à garder à l'esprit afin de créer de la cohérence:

• 1. Jeu de couleurs
• 2. Style
• 3. Frontières
• 4. Type et polices
• 5. Taille
• 6. Images d'arrière-plan
• 7. Effets

Couleurs

Comme je l'ai dit plus tôt, gardez la couleur de votre interface utilisateur cohérente avec le schéma de couleurs global de votre site. Même lorsque vous concevez un appel à des actions où vous voulez que les boutons se démarquent et soient remarqués, veillez à ne pas faire de votre appel à l'action un compliment laid à votre schéma de couleurs. Pour vous aider, utilisez des outils comme Kuler ou ColorSchemer pour vous aider à sélectionner des couleurs qui vont bien ensemble.

Quand je parle de garder votre style cohérent, je parle de ne pas utiliser de bouton de dégradé fou avec des ombres et biseau si le reste de la conception du site est plat et n'a pas d'ombre ou de dégradé. En plus de rester cohérent avec la conception globale du site, restez cohérent avec le style de vos éléments d'interface utilisateur. Si vous utilisez une couleur ou un style de police particulier sur vos étiquettes d'entrée, respectez-le et utilisez-le sur toutes les étiquettes.

Les frontières

Ahh, les frontières. Trop souvent, je vois des sites qui utilisent trois ou quatre épaisseurs ou rayons de bordure de bouton différents, ce qui peut vraiment prêter à confusion. Gardez toutes vos bordures sur les boutons, les entrées, les sélections, les galeries, les images et tous les autres éléments de l'interface utilisateur cohérents les uns avec les autres. Cela ne signifie pas que vous devez utiliser sur le rayon de la bordure, vous pouvez le mélanger en ayant quelques valeurs ou même utiliser un style de manière cohérente sur chaque élément.

Type et polices

L'utilisation du même type et des mêmes polices dans vos éléments est une chose assez importante, surtout lorsque vous traitez avec des éléments de formulaire. Gardez les en-têtes cohérents et n'utilisez pas de nombreuses polices même si vous les aimeriez tous - vous pouvez les enregistrer pour d'autres projets. Les entrées et les boutons doivent avoir des styles de police qui correspondent ou se complètent afin que les formulaires soient facilement lisibles et prévisibles.

Taille

La taille des polices et des autres éléments doit être cohérente ou complémentaire. Les en-têtes et le titre des pages doivent tous rester cohérents afin que votre utilisateur sache que ces lignes de texte correspondent en fait aux en-têtes et aux titres. Une taille cohérente s'applique également à tout élément d'interface utilisateur provenant de régions de contenu, de liens, d'éléments de navigation ou de barres latérales. Évitez de modifier radicalement la taille de celles-ci entre les pages vues afin que l'utilisateur puisse les reconnaître immédiatement lors du chargement de la page.

Images de fond

Essayez de ne pas trop modifier vos images d'arrière-plan. Cela ne se produit pas beaucoup ces jours-ci comme c'était le cas auparavant, mais c'est toujours une bonne idée d'éviter de changer vos images d'arrière-plan du mode page en mode page. Si vous le faites, essayez de rendre l'image liée les unes aux autres afin que les pages ne perdent pas leur cohérence. Changer l'image d'arrière-plan, en particulier les grandes, peut rendre le site décousu et donner à l'utilisateur l'impression de vous avoir même laissé complètement le site, alors essayez vraiment d'éviter cette tentation.

Effets

Les effets, surtout les effets d'éclairage, peuvent rendre ce qui semble être une excellente conception de site inutile pour l'utilisateur. Par exemple, si vous utilisez un surlignage sur le bouton qui ressemble à une lumière qui brille dessus, utilisez le même effet d'éclairage sur le texte biseauté dans les boutons ou les entrées de texte biseauté.

Honnêtement, ce n'est vraiment pas un gros problème avec l'utilisateur, mais pour le spectateur pointilleux, il peut remarquer l'incohérence de vos effets et être distrait de faire ce qu'il est censé faire avec votre application ou votre site.

Ne soyez pas ennuyeux

Concevoir pour la cohérence peut sembler banal ou même ennuyeux parfois et vous pouvez simplement vouloir jeter quelque chose dans votre conception pour surprendre l'utilisateur, et c'est vraiment génial.

Il est bon de garder les utilisateurs sur leurs gardes, jsut ne fait pas tellement bouger les choses qu'ils sont tellement découragés ou confus qu'ils partent et vont ailleurs. Un peu de cohérence peut aller très loin.