10 règles de bonne conception d'interface utilisateur à suivre sur chaque projet de conception Web

Fini le temps des sites Geocities avec leur code HTML codé en dur et qui ne change jamais. Les sites et les applications d'aujourd'hui sont dynamiques et interactifs. Notre travail en tant que concepteurs est de faire en sorte que l'interface à travers laquelle ils interagissent avec notre conception d'interface utilisateur Web soit aussi proche que possible de l'idéal. Heureusement, il existe des règles presque universelles qui peuvent aider. Nous avons rassemblé ce que nous pensons être les meilleurs principes de conception afin que vous puissiez améliorer tous vos futurs projets de conception de sites Web.

10 règles de bonne conception d'interface utilisateur à suivre sur chaque projet de conception Web

Abonnez-vous à notre chaîne Youtube

1. Rendre facilement accessible tout ce dont l'utilisateur a besoin

Qu'il s'agisse d'une série d'outils de conception d'applications de conception Web, de l'inventaire d'un personnage dans un jeu vidéo, d'une feuille de calcul ou de toute autre chose, si l'utilisateur ne trouve pas ce qu'il veut, il rebondit sur votre logiciel. Les onglets rendent les choses accessibles. Raccourcis et infobulles de survol aussi.

Nous avons choisi d'utiliser des onglets pour organiser Divi, par exemple. Tous les outils dont vous avez besoin se trouvent dans le générateur, séparés par catégorie. Les barres d'outils sont également accessibles. Si vous utilisez WordPress, la barre d'outils d'administration vous permet d'accéder rapidement à l'éditeur de publication, au personnalisateur de thème, aux paramètres du plugin, etc. Les options sont clairement étiquetées et vous n'avez pas à les rechercher.

Un autre exemple est les options Aide/Support/Contact. Lors de la conception d'une interface utilisateur, que ce soit pour une application mobile, des applications Web, des sites Web WordPress ou toute autre chose, vos utilisateurs auront toujours besoin de trouver le bouton Aide (ou le bouton Contacter l'assistance). Ils auront absolument besoin de vous contacter à un moment donné . C'est pourquoi vous devez toujours vous assurer de placer les boutons d'aide au premier plan. Regardez Divi. Dans chaque module, nous avons le bouton d'assistance prêt pour vous, à portée de main, quand vous en avez besoin.

En plus de cela, la fenêtre d'aide apparaît avec un didacticiel vidéo sur la fonctionnalité avec laquelle vous travaillez. En incluant ce in-module, Divi devient beaucoup plus accessible et moins frustrant. De plus, dans le cadre de l'interface utilisateur, l'emplacement de l'aide est cohérent dans l'ensemble du produit. Ce qui nous amène au point suivant…

2. Soyez cohérent

Comme nous l'avons dit il y a un instant, il est important d'être cohérent dans le placement des fonctionnalités au sein de votre interface utilisateur. Mais vous devez également vous soucier du fait que votre interface utilisateur fonctionne et semble cohérente dans l'ensemble du produit. Ne pas avoir le menu en haut d'une page et en bas d'une autre. Ne réorganisez pas les éléments du menu à chaque chargement. Assurez-vous que vos utilisateurs savent où se trouvent les choses sur votre site. Si vous gardez un formulaire de contact sous vos articles de blog, ne décidez pas de le laisser de côté. Les utilisateurs le remarqueront et seront déconcertés.

La cohérence inclut également vos polices et la conception doit fonctionner d'une page à l'autre. N'échangez pas les polices d'en-tête/corps d'une page à l'autre.

Il existe une idée intéressante appelée le principe de la moindre surprise qui dit que si vous surprenez votre utilisateur sur la façon dont quelque chose fonctionne… retravaillez-le pour qu'il soit plus intuitif.

De plus, vous devez vous assurer que votre interface utilisateur est adaptée à votre plate-forme - les applications iOS fonctionnent différemment dans certains cas qu'Android. Les sites de bureau ont des besoins différents de ceux des sites mobiles pour les menus, les galeries et même le paiement des produits. La cohérence signifie que vous ne frustrez pas vos utilisateurs en les obligeant à trouver quoi faire sur votre site.

3. Soyez clair

Cela peut sembler être une répétition de ce qui précède, mais la clarté et la cohérence sont différentes. La clarté signifie que vous voulez que vos utilisateurs sachent quoi faire à tout moment. À certains égards, cela se répercute également sur la conception UX, car cela réduit la frustration de vos utilisateurs, augmente la rétention et réduit le taux de rebond.

La clarté est la raison pour laquelle la conception Web minimaliste (et dans une certaine mesure brutaliste) a été si populaire. Les gens ne sont pas confus quant à l'objectif d'un site ou d'une page car il n'y a pas (ou peu) d'encombrement. Vous voulez offrir l'expérience opposée à celle de Ling's Cars.

Une façon d'atteindre la clarté est de passer d'une étape à une autre sur différentes pages. Au lieu de faire défiler la page vers le bas - ou d'être contenu dans une seule section ou boîte - demandez à vos utilisateurs de naviguer d'une page de produit à une page de panier d'achat à une page de paiement à une page Choisissez votre paiement à une page Passer une commande pour une page de confirmation. (Amazon fait cela, comme vous pouvez le voir dans l'image ci-dessous).

Ils sauront exactement où ils en sont dans le processus, éliminant toute ambiguïté. Ceci est particulièrement important pour les utilisateurs mobiles, car l'espace sur l'écran est précieux .

4. Donnez votre avis

La dernière chose que veulent les utilisateurs est de ne pas comprendre ce qui se passe. S'ils appuient sur un bouton, indiquez que le bouton a été enfoncé. Vous pouvez le faire de plusieurs manières. Vous pouvez animer le bouton pour qu'il semble s'enfoncer dans la page. Les icônes de chargement (comme la roue arc-en-ciel de MacOS) fournissent des commentaires, « Nous travaillons sur votre demande », sans avoir à le dire.

Si vous autorisez les utilisateurs à télécharger des fichiers (comme avec Dropbox ou Google Drive), donnez une indication du temps restant. Fournir une fenêtre contextuelle ou un modal qui leur dit que leur action a été un succès réduit la frustration et la confusion.

Vraiment, chaque fois que l'utilisateur entreprend une action dans votre interface, une petite reconnaissance peut faire la différence entre une bonne expérience et une expérience terne.

5. Utilisez la reconnaissance, pas le rappel

À l'opposé de bonnes compétences en matière de test, vous voulez que vos utilisateurs reconnaissent tout sur votre site lorsqu'ils le voient. Ils ne devraient pas avoir à y penser et à se souvenir de l'information. Plus que tout, vous rationalisez votre interface afin que chaque partie soit intuitive et se déplace d'un point à un autre. Cela peut être fait en utilisant des icônes reconnaissables comme nous l'avons mentionné ci-dessus. Les gens reconnaissent certaines icônes pour certaines choses.

Cela peut également être fait en utilisant des visites virtuelles pour guider un utilisateur tout au long d'un processus, même si ce n'est pas la première fois. Ils reconnaîtront le processus une fois que le premier modal apparaîtra et ils n'auront pas à dépenser de l'énergie pour se rappeler exactement comment effectuer ces actions.

Vous pouvez également y parvenir grâce à des messages bien placés qui rappellent à vos utilisateurs ce que fait quoi sur votre site. Nous accomplissons cela dans Divi avec de simples info-bulles de survol — même si quelqu'un ne se souvient pas de ce que fait l'icône, nous l'amenons à sa fonction. Après cela, ils devraient reconnaître l'icône. Ou au moins l'info-bulle s'ils survolent à nouveau. Ou même le processus de survol pour obtenir les informations.

6. Choisissez d'abord comment les gens vont interagir

crédit photo John Picklap, avec l'aimable autorisation de MarieClaire.com

Tu sais quel est le pire ? Pousser sur une porte à tirer. Surtout quand vous venez d'appuyer sur un précédent pour accéder à celui-là. Le concepteur de ce bâtiment a rendu l'interface utilisateur incohérente, vous ne saviez donc pas comment faire ce que vous deviez faire. Qu'en est-il d'appuyer sur quelque chose qui ressemble à un bouton qui ne l'est pas, mais d'attendre quand même une réponse ? Eh bien, c'est parce que ces concepteurs n'ont pas pris en considération la façon dont leurs utilisateurs allaient interagir avec leur produit. Ainsi, lorsque vous concevez votre interface utilisateur, choisissez un mouvement (peut-être deux) et respectez-le.

Sur les appareils mobiles, cela a tendance à glisser. Regardez Snapchat. Presque toutes les actions sont effectuées en balayant , y compris en atteignant vos paramètres et votre profil. Vous pouvez balayer vers le bas sur Snapchat pour vous voir, balayez vers la gauche pour accéder aux conversations, vers les histoires et vers le haut pour accéder à vos souvenirs (ou quel que soit leur nom cette semaine). Ils ont choisi la manière dont ils voulaient que leurs utilisateurs interagissent avec leur produit et ont conçu leur interface utilisateur pour s'adapter à cela. Pas l'inverse.

Lorsque vous concevez votre interface utilisateur, choisissez si vous allez utiliser des menus et des tapotements, une iconographie, des balayages et des gestes, ou autre chose. Alexa et Siri utilisent la saisie vocale comme interaction principale de l'interface utilisateur. La façon dont ils fournissent des informations et effectuent leurs tâches est conçue autour de cette entrée particulière. Et en tant qu'utilisateur, vous savez ce qu'il faut faire intuitivement car ces informations ont été définies pour vous au départ. Les concepteurs vous ont dit quoi faire, et vous l'avez fait . Vos utilisateurs apprécieront que vous fassiez de même pour eux.

7. Suivez les normes de conception

Le vieil adage si ce n'est pas cassé, ne le répare pas s'applique ici. Il n'est vraiment pas nécessaire d'essayer de revitaliser quelque chose si la norme fonctionne. Cela va de l'utilisation des icônes au placement standard des éléments. Vous ne voulez pas aller à l'encontre de ce que vos utilisateurs attendent des choses. Les gens savent que les points d'interrogation (?) indiquent de l'aide. N'utilisez donc pas de point d'exclamation (!) . Si vous souhaitez que les utilisateurs trouvent votre menu mobile, utilisez l'icône de hamburger (les trois lignes empilées), pas une grille.

Pensez aux barres de recherche. Ils ont tendance à se trouver à des endroits similaires sur la plupart des sites : en haut de la barre latérale ou à la fin du menu d'en-tête. Sinon, le centre de la section supérieure de la page. Si vous décidez d'inclure le seul champ de recherche au bas de votre barre latérale, dans les pieds de page ou sous le texte de vos articles de blog, les gens ne sauront pas où chercher. Même si vous l'identifiez avec l'icône de loupe standard.

Il n'y a rien de mal à sortir des sentiers battus et à opter pour un design nouveau et innovant, mais cela ne devrait pas signifier que le design est difficile à utiliser.

8. La hiérarchie élémentaire compte

Non, nous ne voulons pas dire que la Terre, le Vent, l'Eau ou le Feu sont les patrons des autres. Nous voulons dire que les éléments de votre page doivent avoir une hiérarchie claire à la fois pour l'utilité et la façon dont l'utilisateur voit la page. Fondamentalement, vous voulez vous assurer que les fonctions les plus importantes sont en haut de leurs pages respectives. De plus, ce type de hiérarchie peut conduire l'utilisateur vers le bas de la page de manière organique, guidant l'utilisateur à travers votre service.

Les gros éléments dont la taille diminue au fur et à mesure que vous avancez dans le processus sont révélateurs de l'importance et de l'ordre. La couleur et le contraste aussi. L'utilisation d'espaces blancs est également importante, car l'encombrement peut ralentir la progression de l'utilisateur et détourner l'attention de l'objectif de la page. Des lignes épurées, beaucoup d'espace et des éléments bien définis peuvent indiquer visuellement à vos utilisateurs comment se déplacer dans votre interface utilisateur sans aucune documentation ni annotation.

Une règle de base décente est que vous voulez que les choses se déroulent de gauche à droite, de haut en bas.

9. Gardez les choses simples

Regardez ce formulaire de contact :

Regardez maintenant celui-ci :

Les deux sont des formulaires de contact pour faire une demande. L'un d'eux n'est pas un problème à remplir, tandis que l'autre est un peu plus un casse-tête. En plus d'être un formulaire gouvernemental, la conception du formulaire du bas n'est pas faite pour l' utilisateur mais pour l'administrateur. Ce n'est pas votre travail. Votre travail consiste à rendre les choses aussi fluides que possible pour l'utilisateur . Et l'une des meilleures façons de le faire est de couper tout ce qui n'est pas absolument nécessaire.

10. Gardez vos utilisateurs libres et sous contrôle

La toute dernière chose que nous voulons aborder - et la toute dernière chose que vous voulez faire avec votre interface utilisateur - est de prendre le contrôle de l'utilisateur. Ou pour qu'ils se sentent confinés ou limités par votre conception. Vous voulez les responsabiliser et votre interface utilisateur doit leur permettre d'effectuer les actions qu'ils souhaitent. Cette règle comporte deux parties : le contexte et l'autorisation .

Tout d'abord, toute action que l'utilisateur doit entreprendre doit être située à proximité de ce sur quoi il souhaite agir. S'ils ont besoin de modifier un article, le bouton d' édition doit se trouver à côté des boutons d' enregistrement , de publication/soumission et d' aperçu . En fait, la meilleure option est celle des menus contextuels pour toutes les actions que l'utilisateur peut effectuer sur un élément (ou une page) particulier. Si vous êtes cohérent dans votre interface utilisateur, comme nous en avons parlé ci-dessus, vos utilisateurs comprendront que ces menus contextuels ou barres d'outils auront toujours la liste complète des actions pour un élément donné.

De plus, votre interface utilisateur doit toujours donner à l'utilisateur l'impression qu'il peut annuler ou annuler toute action qu'il entreprend. Pendant que vous concevez l'interface utilisateur, ils vont l'utiliser . Ils ont donc besoin de la permission (ou peut-être même de la liberté) pour faire ce dont ils ont besoin pour faire le travail. Cela peut être aussi simple que d'ajouter un bouton d' annulation à chaque page de votre commande de commerce électronique (car appuyer sur le bouton de retour du navigateur peut provoquer des dérapages). Peut-être que c'est une fonction d' annulation afin qu'ils sentent que l'expérimentation est correcte. Ou un historique des révisions pour les projets à grande échelle (comme dans Google Drive ou WordPress ou Git).

Lorsque vos utilisateurs se sentent libres et sans contraintes, vous avez évidemment suivi de bons principes de conception d'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 serez absolument prêt à faire sortir votre prochain projet de conception de sites Web du parc. Bien que certains d'entre eux puissent s'appliquer davantage à certains projets qu'à d'autres, une bonne interface utilisateur est une bonne interface utilisateur, et une bonne interface utilisateur conduit à une bonne UX. Mais c'est un sujet pour un tout autre article.

Avez-vous des règles pour une bonne conception de l'interface utilisateur que vous suivez toujours ?

Article présenté en image par emojoez / shutterstock.com