La cohérence dans la conception de l'interface utilisateur est un principe de la vieille école et quelque peu oubliée dans certains des conceptions Web et d'applications actuelles. 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 casser complètement les interactions standard matérielles avec leurs propres modèles d'interface uniques. Bien que rompre 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, briser la cohérence de vos propres applications peut l'être.
Trois étapes pour une conception d'interface utilisateur cohérente
Il existe essentiellement trois types de cohérence à prendre en compte 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 design
Pour les besoins de cet article, je voudrais me concentrer davantage sur le troisième aspect: conserver 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 aille de votre page d'accueil à une sous-page et voit un style différent ou même des interactions très différentes. Ce genre de chose peut surprendre les utilisateurs ou même, dans certains cas, les effrayer. La cohérence n’est pas seulement un gros problème pour la convivialité globale du site, elle peut également augmenter considérablement la conversion.
Structure cohérente et interactions
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 affecteront l'expérience utilisateur globale. Cependant, tout comme la conception et la création de plans est important lors de la construction d'une maison ou d'un bâtiment, il est également important de créer une interface utilisateur cohérente et utilisable. Avant de commencer à écrire du code, vous devez réfléchir et planifier à l’avance.
- 1. Déterminez comment placer systématiquement des éléments sur votre site ou votre application.
- 2. Pensez 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 jeu d'icônes qui les couvre toutes.
Le placement des éléments est un moyen énorme de réduire les surprises chez 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 endroits tout au long du 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 leur contenu de page en page. 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 d'importation globaux tels que des formulaires de recherche. Une chose importante à garder constamment placé est les liens ou les boutons de connexion et de configuration utilisateur.
Considérer 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? Des modaux? Des accordéons? Barres latérales? Planifier les modèles de conception à l'avance ne vous aidera pas seulement à développer et à concevoir votre application plus rapidement, mais vous devrez également choisir les modèles de conception dont vous aurez besoin pour déterminer votre contenu à l'avance, ce qui vous permettra également de gagner beaucoup de temps.
Cela résoudra également les problèmes et répondra aux questions à l'avance. Ainsi, lorsque vous arriverez à une section ou à une page de votre site qui nécessite une décision d'interface utilisateur, vous l'avez déjà faite et vous ne serez pas surpris en train de créer un méli-mélo de modèles de conception. tout au long de votre site.
Pensez aussi à vos formulaires avant la main. Planifiez les éléments de formulaire dont vous aurez besoin et déterminez ceux dont vous n’avez pas besoin ou que vous pouvez remplacer. Les éléments de formulaire peuvent être effrayants, voire difficiles, pour les utilisateurs qui souhaitent naviguer de toute façon. Si vous pouvez éliminer ou échanger des entrées qui peuvent être des obstacles, faites-le.
"Si vous pouvez éliminer ou échanger des entrées qui peuvent être des pierres d'achoppement, faites-le."C'est également un excellent moyen de soustraire la prise de décision du processus de développement. Garder les formes cohérentes dans le style, la structure et les interactions peut parfois faire baisser le taux de conversion.
Encore une fois, planifiez la tête. Planifiez les icônes dont vous aurez besoin à l’avance. Un moyen très rapide de bousiller votre cohérence est d’être au milieu du développement de votre application lorsque vous découvrez que vous aurez besoin d’icônes d’impression, puis de vous rendre compte que vous ne pouvez pas vous rappeler où vous avez obtenu vos icônes ni même si vous le pouvez. Trouvez 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 seront capables de les reconnaître rapidement. Toutefois, si vous utilisez un jeu d'icônes en patchwork, vous risquez de dérouter votre utilisateur, voire de le rendre difficile pour lui de dire ce que certaines icônes représentent.
Style cohérent
Le style et la conception de chaque élément de l'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 jeu d'icônes cohérent, il est important que votre application présente une cohérence de conception globale. Vous pensez peut-être que certains boutons sont sympas, même s'ils ne correspondent pas du tout à la conception ou aux couleurs du site, mais cela confondra votre utilisateur et lui donnera une apparence laide.
Lors de la conception d'un kit d'interface utilisateur, il convient de garder quelques éléments à l'esprit pour créer de la cohérence:
- 1. Schéma de couleur
- 2. Style
- 3. Les frontières
- 4. Type et polices
- 5. Taille
- 6. Images de fond
- 7. Effets
Couleurs
Comme je l'ai dit plus tôt, veillez à ce que la couleur de votre interface utilisateur corresponde à l'ensemble des couleurs de votre site. Même lorsque vous concevez des actions pour lesquelles vous souhaitez que les boutons se démarquent et soient remarqués, veillez à ne pas faire de votre appel à l'action un compliment déplaisant et malsain dans votre palette de couleurs.Pour vous aider, utilisez des outils tels que Kuler ou ColorSchemer afin de vous aider à choisir des couleurs qui vont bien ensemble.
Lorsque je parle de garder votre style cohérent, je parle de ne pas utiliser un bouton de dégradé fou avec des ombres portées et du biseau si le reste de la conception du site est plat et ne comporte 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 des éléments de votre 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 bordures de boutons différents, ce qui peut prêter à confusion. Conservez 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 de manière cohérente. Cela ne signifie pas que vous devez utiliser 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 très importante, en particulier lorsqu'il s'agit d'éléments de formulaire. Conservez les en-têtes de manière cohérente et n'utilisez pas de nombreuses polices, même si vous les aimez toutes; vous pouvez les enregistrer pour d'autres projets. Les entrées et les boutons doivent avoir des styles de police qui se 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 les titres des pages doivent rester cohérents pour que votre utilisateur sache que ces lignes de texte correspondent en fait aux en-têtes et aux titres. La 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 ces fichiers 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 de fond. Cela n’arrive plus beaucoup de nos jours, mais c’est quand même une bonne idée. Évitez de changer vos images d’arrière-plan de la vue page à la page vue. Si vous le faites, essayez de rendre l'image accessible les uns aux autres d'une manière ou d'une autre afin que les pages ne perdent pas en cohérence. Changer l’image d’arrière-plan, en particulier les grandes images, peut rendre le site disjoint et inciter l’utilisateur à se sentir comme s’il a même quitté votre site complètement. Essayez donc vraiment d’éviter cette tentation.
Effets
Les effets, et plus particulièrement les effets d'éclairage, peuvent rendre ce qui semble être une excellente conception de site sans aucun sens pour l'utilisateur. Par exemple, si vous utilisez une surbrillance sur le bouton qui donne l'impression qu'une lumière brille dessus, utilisez le même effet d'éclairage que le texte biseauté dans les boutons ou les entrées de texte biseauté.
Honnêtement, ce n’est vraiment pas une énorme affaire avec l’utilisateur, mais les téléspectateurs difficiles peuvent remarquer l’incohérence de vos effets et se laisser distraire de faire ce qu’ils sont censés faire avec votre application ou votre site.
Ne soyez pas ennuyeux
Concevoir de manière cohérente peut parfois sembler banal, voire ennuyeux, et vous voudrez peut-être simplement ajouter quelque chose dans votre conception afin de créer une surprise pour l'utilisateur, et c'est vraiment génial.
Il est bon de garder les utilisateurs sur leurs gardes, mais ne secouez pas les choses au point de ne pas être découragés ou confus au point de partir et d’aller ailleurs. Un peu de cohérence peut aller très loin.