10 règles de bonne conception Interface utilisateur à suivre pour chaque projet de conception web
Les jours où GeoCities a un code HTML fixe sont révolus. Les sites Web et les applications d’aujourd’hui sont dynamiques et interactifs. En tant que concepteurs, notre travail est de s’assurer que leur interface avec notre conception d’interface utilisateur Web est aussi proche que possible de l’idéal. Heureusement, il existe des règles presque universelles qui peuvent aider. Nous mettons en commun les principes de conception que nous considérons comme les meilleurs afin que vous puissiez améliorer tous vos futurs projets de conception web. Chaque projet de conception web doit suivre 10 bonnes règles de conception de l’interface utilisateur
Abonnez – vous à notre chaîne YouTube 1. Rendre tout ce dont l’utilisateur a besoin facilement accessible
Un autre exemple est l’option aide \/ soutien \/ contact. Lors de la conception de l’interface utilisateur, qu’il s’agisse d’une application mobile, d’une application Web, d’un site WordPress ou de toute autre application, l’utilisateur doit trouver le bouton aide (ou le bouton contact support). Ils finiront par vous contacter. C’est pourquoi vous devez toujours vous assurer que vous mettez le pouls
Assurez – vous que vous voulez que vos utilisateurs sachent quoi faire à tout moment. En un sens, cela affecte également la conception de l’expérience utilisateur parce qu’elle réduit la frustration de l’utilisateur, augmente la loyauté et réduit la fréquence de rebond. La clarté est la raison pour laquelle la conception minimaliste (et en partie barbare) du Web est si populaire. Les gens ne sont pas confus par le but d’un site Web ou d’une page parce qu’il y a (ou presque) confusion. Vous souhaitez offrir l’expérience opposée à celle de la voiture de Ling.
Une façon claire est de passer d’une étape à l’autre sur différentes pages. Au lieu d’utiliser la procédure de caisse, faites défiler la page vers le bas ou incluez – la dans une seule section ou boîte: demandez à l’utilisateur de naviguer de la page produit à la page panier, puis à la page paiement, puis à la page sélection de paiement, puis à la page commande pour la page confirmation. (c’est ce qu’Amazon fait, comme le montre l’image ci – dessous). Ils sauront exactement où ils se trouvent dans le processus et élimineront toute ambiguïté. Cela est particulièrement important pour les utilisateurs mobiles en raison de l’espace d’écran limité.
4. Donner des commentaires la dernière chose que les utilisateurs veulent voir est de ne pas comprendre ce qui se passe. Si vous appuyez sur un bouton, indiquez que le bouton a été enfoncé. Il y a plusieurs façons de le faire. Vous pouvez animer le bouton pour qu’il apparaisse submergé dans la page. Les icônes de chargement, comme la roue raid Mac OS, peuvent fournir des commentaires, « Nous traitons votre demande », sans avoir à le dire. Si vous autorisez les utilisateurs à télécharger des fichiers, tels que DropBox ou Google Drive, indiquez le temps restant. Fournir une fenêtre contextuelle ou un mode pour leur dire que leurs actions ont été couronnées de succès peut réduire la frustration et la confusion. En fait, chaque fois qu’un utilisateur effectue une action dans votre interface, il suffit d’une petite confirmation
Ou vous pouvez faire la distinction entre une bonne et une mauvaise expérience. 5. Utiliser l’identification plutôt que la mémoire Contrairement à une bonne capacité de test, vous voulez que vos utilisateurs reconnaissent tout ce qui se trouve sur votre site. Ils ne devraient pas y penser et se souvenir de l’information. Plus important encore, vous Optimisez votre interface pour que chaque section soit intuitive et puisse être déplacée d’un point à l’autre. Ceci peut être fait à l’aide des icônes reconnaissables ci – dessus. Une icône spécifique qui identifie une chose particulière.
Vous pouvez également utiliser des visites virtuelles pour guider les utilisateurs à travers le processus, même si ce n’est pas la première fois. Une fois le premier mode apparu, ils ont pris conscience du processus sans avoir à se soucier de se souvenir exactement comment effectuer ces actions. Vous pouvez également rappeler aux utilisateurs ce qu’ils font sur votre site Web en plaçant des messages appropriés. Nous l’avons créé dans Divi avec un simple pointeur de souris: même si quelqu’un ne se souvient pas du rôle de l’icône, nous l’avons guidé à comprendre ses fonctions. Après cela, ils devraient identifier l’icône. Ou au moins des conseils d’outils s’ils passent à nouveau avec la souris. Même un vol stationnaire pour obtenir des informations.
6. Choisissez d’abord le mode d’interaction des gens Crédit photo John picklap, avec la permission de Marie – claire. Com Tu sais ce qui est le pire? Ouvrez la porte et tirez. Surtout si vous ne faites qu’établir un précédent. Le concepteur de cet immeuble a rendu l’interface utilisateur incohérente, donc vous ne savez pas quoi faire. Appuyez sur un bouton qui ressemble à un bouton, mais ce n’est pas le cas, mais attendez une réponse de toute façon. Eh bien, c’est parce que ces concepteurs n’ont pas réfléchi à la façon dont leurs utilisateurs interagiraient avec leurs produits. Donc, lors de la conception de l’interface,
Haut de la page. Si vous décidez d’inclure un champ de recherche unique au bas de la barre latérale, au pied de page ou sous le texte d’un billet de blog, les gens ne sauront pas où chercher. Même si vous l’identifiez à l’aide d’une icône de loupe standard. Il n’y a rien de mal à penser en dehors des cadres et à chercher de nouveaux dessins innovants, mais cela ne signifie pas que les dessins sont difficiles à utiliser. 8. Questions de base Non, nous ne disons pas que la terre, le vent, l’eau ou le feu sont les leaders d’autres choses. Nous voulons dire que les éléments d’une page doivent avoir une hiérarchie claire qui tient compte à la fois de l’utilité et de la façon dont l’utilisateur voit la page. Fondamentalement, vous voulez vous assurer que les fonctions les plus importantes sont en haut de chaque page. De plus, cette hiérarchie peut guider l’utilisateur vers l’avant organiquement sur la page et l’amener à compléter votre service. Les grands éléments dont la taille diminue au fur et à mesure qu’ils se déplacent dans le processus représentent l’importance et l’ordre. Il en va de même pour la couleur et le contraste. L’utilisation de l’espace blanc est également importante, car le désordre peut entraver les progrès des utilisateurs et détourner l’attention de l’utilisation de la page. Des lignes concises, un espace suffisant et des éléments bien définis donnent une indication intuitive de la façon dont l’utilisateur se déplace sur l’interface utilisateur sans documentation ni commentaires. Une bonne règle empirique est que vous voulez que les choses circulent de gauche à droite et de haut en bas. 9. Gardez ce formulaire de contact simple à consulter: Regardez ça: Les deux sont les coordonnées pour présenter une demande. L’un n’est pas un problème de remplissage, l’autre est plus douloureux. En plus d’être un module gouvernemental, les modules inférieurs ne sont pas conçus pour les utilisateurs, mais pour les administrateurs. Ce n’est pas ton boulot. Votre travail est de faire les choses
Aussi simple que possible pour l’utilisateur. Une des meilleures façons de le faire est d’éliminer tout ce qui est absolument inutile. 10. Gardez vos utilisateurs libres et contrôlés ce que nous ne voulons pas toucher, et c’est aussi la dernière chose que vous voulez utiliser l’interface utilisateur, c’est contrôler les utilisateurs. Ou qu’ils se sentent limités par votre conception. Vous voulez les alimenter, et votre interface utilisateur devrait leur permettre d’effectuer les actions qu’ils veulent. Cette règle est divisée en deux parties: contexte et permissions. Tout d’abord, toute mesure que l’utilisateur doit prendre doit être proche de ce qu’il veut faire. S’ils doivent modifier un message, les boutons d’édition doivent être situés à proximité des boutons enregistrer, publier \/ envoyer et prévisualiser. En fait, la meilleure option est de fournir un menu contextuel pour toutes les actions que l’utilisateur peut effectuer sur un élément (ou une page) particulier. Comme nous l’avons mentionné précédemment, si votre interface utilisateur est cohérente, vos utilisateurs comprendront que ces menus raccourcis ou barres d’outils contiendront toujours une liste complète des actions pour un élément particulier. De plus, l’interface utilisateur devrait toujours donner à l’utilisateur l’impression qu’il peut quitter ou annuler toute action qu’il effectue. Ils l’utilisent lors de la conception de l’interface utilisateur. Ils ont donc besoin de permission (ou même de liberté) pour faire ce qu’ils doivent faire pour accomplir leur travail. Pour ce faire, il suffit d’ajouter un bouton « désabonner » à chaque page de la clôture du commerce électronique (parce qu’il peut y avoir une erreur en appuyant sur le bouton « précédent » du navigateur). C’est peut – être une fonction d’annulation, donc ils pensent que l’expérience est bonne. Ou consultez l’historique des grands projets (tels que Google Drive, WordPress ou GIT). Lorsque vos utilisateurs se sentent libres et libres, vous suivez clairement de bons principes de programmation
Conception de l’interface utilisateur. L’interface utilisateur est – elle prête? Mauvais jeu de mots. Je sais, désolé. Mais avec ces règles d’interface utilisateur, vous pouvez vraiment mettre votre prochain projet de conception de site Web hors des nuages. Bien que certains d’entre eux puissent être plus adaptés à certains projets que d’autres, une bonne interface utilisateur est une bonne interface utilisateur qui apporte une bonne expérience utilisateur. Mais c’est le sujet d’un billet complètement différent. Avez – vous toujours de bonnes règles de conception d’interface utilisateur à suivre? Image caractéristique de l’article emojoez \/ shutterstock. Com