Modèles de conception de l'interface utilisateur : des solutions éprouvées pour les problèmes d'utilisation courants

Sonja Hoffmann Dernière mise à jour le 21.10.2020
11 Min.
Modèles de conception de l'assurance-chômage
Dernière mise à jour le 21.10.2020

Comment le menu de votre site web doit-il être structuré ? Pourquoi est-il plus facile pour certains propriétaires de sites web d'obtenir des abonnés que pour d'autres ? Qu'est-ce qui pousse les utilisateurs à remplir le formulaire sur votre site web ou à l'ignorer ? En tant que designer, j'ai été confronté à des questions sur la conception d'interfaces utilisateur et la convivialité du web - vous trouverez les réponses dans ce billet.

Que sont les modèles de conception d'interface utilisateur (IU) ?

Les modèles de conception d'interface utilisateur (IU) sont des bibliothèques de problèmes de convivialité qui ont déjà été analysés et résolus avec succès. Toutefois, il ne faut pas les adopter de manière individuelle. Ils constituent toutefois une base complète pour une expérience utilisateur harmonieuse. Les modèles d'assurance-chômage sont là pour faciliter et accélérer votre travail.

Plus de conseils sur la conception de l'UX et la convivialité du Web

Comme décrit dans cet article, une bonne ergonomie aide à guider vos utilisateurs en douceur à travers votre site, votre produit ou votre marque.

Formule pour les modèles de conception de l'assurance-chômage

Comment savez-vous quels sont les modèles de conception qui conviennent à votre site web et comment les utiliser correctement ? Chris Bank a élaboré l'approche suivante dans son livre électronique Mobile UI Design Patterns:

  • Identification des problèmes : quels sont les objectifs de l'utilisateur sur votre site web et quels sont les problèmes qu'il rencontre ? Essayez de formuler les problèmes en une seule phrase.
  • Approche de la solution : d'autres concepteurs ont-ils déjà résolu ce problème ? Si oui, comment ?
  • Exemple concret : regardez des exemples et parcourez-les en tant qu'utilisateur. Essayez d'analyser ce qui vous a aidé à résoudre une certaine tâche. Pensez à ce qui vous a fait penser - ou peut-être même vous a fait vous sentir en insécurité. 
  • Sensibilisation : résumez les résultats de votre analyse. Comment pouvez-vous les mettre en œuvre sur votre site web afin qu'ils offrent une valeur ajoutée aux visiteurs ? Quels sont les modèles à éviter ? Si vous disposez d'un guide de style, vous devez y inclure vos résultats.

4 catégories de modèles de conception de l'assurance-chômage

Les modèles de conception de l'assurance-chômage peuvent être divisés en quatre catégories, que je vais brièvement présenter dans cette section. Malheureusement, je ne pourrai pas couvrir tous les modèles de conception de l'assurance-chômage. Si vous souhaitez approfondir le sujet, le web offre des possibilités presque illimitées pour vous informer. Voici quelques ressources utiles sur le thème des modèles de conception de l'assurance-chômage :

1. les éléments de navigation les plus courants

La navigation est l'un des éléments d'interaction les plus importants pour l'utilisateur : elle fonctionne non seulement comme une table des matières de votre page, mais aussi comme une aide à l'orientation. Le fait qu'il soit généralement placé au sommet ou sur le côté avait à l'origine des raisons principalement hiérarchiques. Avec la navigation, nous montrons à l'utilisateur d'un seul coup d'œil ce qu'il peut faire sur notre page et où il se trouve actuellement.

Grâce à des années de pratique, nous avons intériorisé ces connaissances à tel point que la tendance au minimalisme ne doit pas s'arrêter à la navigation. Les modèles de conception sont donc tout à fait personnalisables - ou même ils doivent être individualisés pour votre site, afin qu'ils fonctionnent.

screenshot-www.castoretpollux.com-2020.06.11-18-05-59
Site web de Castor & Pollux

Castor et Pullex ont suivi les règles du UI Pattern tout en les adaptant individuellement à leur site : une navigation qui se trouve dans l'écran supérieur droit et qui devient "collante" lorsqu'on la fait défiler. Le logo qui ramène toujours l'utilisateur au "refuge" - la page d'accueil.

Un site web qui permet en soi beaucoup d'interaction, et semble donc presque quelque peu chaotique, se voit offrir une convivialité agréable grâce à l'utilisation de solutions de conception déjà familières.

Les navigations "collantes", telles que décrites dans l'exemple ci-dessus, sont une merveilleuse invention en matière de conception de sites web. Non seulement ils peuvent être utilisés pour afficher des animations impressionnantes, mais ils permettent également aux visiteurs de votre site web de se rendre plus rapidement de "A à B". Avec One Pagers, ils fonctionnent aussi comme un fil rouge : L'utilisateur sait où il se trouve et ce qu'il a déjà vu.

Il en va de même pour les miettes de pain : Pour les petites pages, elles n'ont pas beaucoup de sens. Pour les pages plus complexes, cependant, elles peuvent faire des merveilles. Ils aident non seulement l'utilisateur à s'orienter, mais aussi à revenir à n'importe quel endroit de la navigation.

Vous pouvez voir une autre façon d'utiliser ces modèles dans l'exemple suivant :

Les créateurs de ce site ont adopté les connaissances du menu burger mobile : d'une part, pour faciliter une navigation minimaliste de leur site, qui n'est pas étrangère à l'utilisateur. D'autre part, pour offrir à leur produit suffisamment d'espace pour être au premier plan.

capture d'écran-demodern.com
Exemple de projet de Demodern

Un peu démodés - mais au moins aussi utiles - sont les onglets de navigation. Ils rappellent un système d'archivage et sont rapidement et intuitivement compris par les utilisateurs. Ici aussi, les fonctions apprises dans la version allégée sont aussi bien que dans la version originale.

Entre-temps, les onglets sont de plus en plus utilisés comme onglets modaux pour afficher des contenus qui devraient être liés entre eux de manière à économiser de l'espace. En tant qu'onglets modaux, ils présentent également l'avantage de ne pas avoir à recharger complètement les pages pour afficher d'autres contenus. Nous les voyons souvent, en particulier dans les pages de produits des magasins basés sur WooCommerce - comme dans les exemples suivants : 

Modèles de conception de l'interface utilisateur : des solutions éprouvées pour les problèmes d'utilisation courants
Vue de l'Atlantic Patio

Ensuite, un exemple moins minimaliste pour la comparaison :

Modèles de conception de l'interface utilisateur : des solutions éprouvées pour les problèmes d'utilisation courants
Exemple de page de vêtements en bambou

Souvent, les modèles d'assurance-chômage sont modelés sur les interactions du monde réel. Il est donc important de ne jamais perdre de vue les propriétés physiques et/ou de les modifier intentionnellement. Car cela conduit à ce que l'utilisateur ne soit pas en mesure de comprendre intuitivement ces actions et leurs conséquences. Pour que cela soit plus clair pour vous, j'ai adapté l'exemple ci-dessus une fois :

screenshot-bambooclothing.co.uk-2020.06.11-18-33-55_modified

Les propriétés physiques de la structure des dossiers ne sont plus présentes. Les onglets ressemblent maintenant à des éléments de navigation mal placés. L'affiliation des éléments est quelque peu perdue - ils semblent disposés presque au hasard.

Menus de débordement et boutons "Aller à la section

Pour que notre liste soit complète, il ne faut pas manquer les menus de débordement et les boutons "Aller à la section". "Les boutons de saut à la section sont généralement situés dans le coin inférieur gauche. Ils permettent à l'utilisateur de revenir en haut de la page en un seul clic. Surtout avec un seul pager, les boutons de saut de section ont un sens : ils font gagner du temps et évitent la frustration causée par un défilement fastidieux.

Les menus déroulants ont en fait moins pour origine l'amélioration de la convivialité des pages. Ils ont été développés pour économiser de l'espace et pour permettre une navigation plus riche en contenu. Ils donnent également un aspect plus net et plus clair à votre design. Les menus déroulants font partie de ces modèles de conception souvent appelés "anti-modèles", car ils ne facilitent pas vraiment la navigation sur le site. Toutefois, l'utilisation de menus déroulants est toujours recommandée. Après tout, on sait et on apprend comment ils travaillent. Les indicateurs d'un menu déroulant sont souvent les motifs en chevrons pointant vers le bas.

Modèles de conception de l'interface utilisateur : des solutions éprouvées pour les problèmes d'utilisation courants
Site web d'Ehire

Les boutons et les liens ne sont intentionnellement mentionnés que brièvement dans cet article, car ils devraient être suffisamment familiers à chaque concepteur. Il n'y a pratiquement pas de limites à la conception et à l'animation des boutons. Leur style dépend généralement de la présentation visuelle des informations proposées. Ils doivent être affichés bien en évidence dans la couleur primaire de la page et placés de manière à être groupés avec le contenu pertinent.

Il en va de même pour les liens : Ils ne doivent plus être affichés en bleu avec un trait de soulignement, comme c'était le cas auparavant. Mais leur existence doit être claire et, surtout, cohérente. Vous pouvez obtenir des informations détaillées sur les boutons ici.

La pagination - le partage du contenu sur plusieurs pages - est particulièrement importante pour les magasins de commerce électronique qui proposent un grand nombre de produits. Grâce à cela, le contenu est proposé sur plusieurs pages, le temps de chargement est réduit et le contenu est divisé en sections facilement digestibles. Les journaux, tels que le FAZ, utilisent également la pagination pour séparer les articles plus longs.

screenshot-www.faz.net-2020.06.13-15-49-43
Exemple du FAZ

En outre, le "gros pied", qui est devenu à la mode ces dernières années, est maintenant l'un des modèles appris de l'assurance-chômage. Vous pouvez, par exemple, créer des liens vers des sous-pages fréquemment visitées, stocker vos coordonnées et afficher des contenus juridiques qui n'ont pas leur place dans la hiérarchie de la navigation principale. 

Le pied de page fonctionne alors en partie comme une table des matières différemment structurée pour votre page. Mais il peut également servir d'aguicheur pour obtenir des informations complémentaires. Une fois que l'utilisateur a fait défiler votre page, le pied de page peut lui proposer un contenu pertinent - comme des articles intéressants, des liens vers des médias sociaux, etc.

2. entrée et sortie : Formulaires de contact et d'inscription

Outre les lignes directrices sur la protection des données, il est également utile de se concentrer sur les besoins des utilisateurs. Sur les appareils mobiles en particulier, un formulaire de saisie peut rapidement entraîner une certaine frustration : L'écran déjà petit, l'environnement physique pendant son utilisation, l'aspect temporel ainsi qu'une éventuelle connexion instable peuvent rapidement être un test éprouvant pour les nerfs. Heureusement, certains modèles de conception ont déjà abordé ces questions.

Conseil :

Comme c'est généralement le cas sur le web, il en va de même ici : Aussi court que possible, aussi longtemps que nécessaire. Des études ont montré que l'ajout de questions inutiles entraîne un effondrement de la participation et peut donc coûter très cher dans certaines circonstances.

J'ai créé ci-dessous un formulaire fictif pour vous montrer les grands principes : 

Formulaire
Principes pour les formulaires de saisie
  1. Lestests de suivi des yeux ont montré que nous traitons les informations plus rapidement lorsqu'elles sont disposées de haut en bas, plutôt que de gauche à droite. Il est donc conseillé de placer le titre au-dessus du champ du formulaire et de ne créer qu'une seule colonne.
  2. Il est utile de fournir à l'utilisateur un exemple de saisie dans des espaces prédéfinis - cela permet de visualiser à l'avance les informations requises. Vous devez éviter les entrées fragmentées de numéros, car elles ne font que compliquer la saisie. En outre, ces derniers doivent être programmés de manière à être tolérants à l'égard des espaces.
  3. La gestion des erreurs est un sujet important et complexe. L'astérisque et le champ de saisie bordé de rouge ont fait leurs preuves en tant que modèles d'assurance-chômage. Idéalement, les champs devraient être explicites. Néanmoins, vous devez toujours vous attendre à ce que quelque chose ne fonctionne pas. Par conséquent, assurez-vous de proposer différentes façons d'aider. Il y a plusieurs façons de le faire : Un bouton d'information qui offre une aide possible en cas de survol. Ou l'apparition de petites modales lorsque le formulaire n'est pas soumis avec succès.
  4. Il est bon de donner un retour d'information pendant la saisie du mot de passe. Dans le cas des mots de passe, il s'est également avéré utile de donner à l'utilisateur une évaluation qualitative de la sécurité du mot de passe qu'il a choisi. 
  5. Le formulaire à plusieurs étapes présente plusieurs avantages psychologiques. Tout d'abord, elle est plus claire et moins intimidante. Si un indicateur (dans ce cas la barre de chargement) indique à l'utilisateur où il se trouve dans le formulaire, il sait exactement à quoi s'attendre. Il est moins susceptible d'avorter prématurément. Vous devez toujours demander des informations personnelles à la fin du formulaire. En effet, si le visiteur de votre site web a déjà rempli la majeure partie du formulaire, il lui sera plus difficile de renoncer au temps qu'il a déjà investi sans résultats. Il est également conseillé de ne demander que les informations dont vous avez réellement besoin et de justifier la demande. Si vous demandez à vos utilisateurs de s'inscrire à quelque chose, il est conseillé de leur offrir un avantage à la manière de "Toujours obtenir les meilleures offres en premier". Dans la dernière étape, vous devez donner un petit aperçu de ce qui se passera ensuite - et de ce à quoi l'utilisateur peut s'attendre quand.

En outre, le remplissage automatique (par les données stockées dans le navigateur) ainsi que la reconnaissance des informations (comme l'ajout de la ville après avoir saisi un code postal) doivent être intégrés dans vos formulaires. Surtout sur le site WordPress , de nombreux formulaires en font déjà partie par défaut. 

Vous devriez éviter d'utiliser des captchas si possible, ou du moins les réduire au minimum. Selon cette étude, les captchas peuvent entraîner une diminution de 30 % de l'interaction avec la forme.

3. structurer votre contenu

En tant que propriétaire d'un site web, vous devez porter une attention particulière à la manière dont le contenu de votre site est structuré : Cela aide-t-il vos visiteurs à trouver leur chemin sur votre site ? Votre contenu est-il facilement accessible et sa hiérarchie peut-elle être comprise ? 

La question de la facilité d'accès est particulièrement intéressante pour les utilisateurs qui consultent votre site dans des conditions modifiées. Par exemple, les personnes ayant des problèmes de vision des couleurs et des déficiences visuelles. Si vous souhaitez approfondir le sujet de l'accessibilité, vous trouverez plus d'informations ici : 

Si vous avez un blog ou un magazine en ligne, vous connaissez probablement le problème : vous avez beaucoup de contenus intéressants que vous aimeriez proposer de manière aussi homogène que possible. Un modèle de dessin ou modèle approprié est la "liste d'articles". Ici, vous catégorisez votre contenu et ne montrez qu'une petite section à la fois. Vous pouvez ainsi montrer de nombreux sujets d'un seul coup d'œil sans inonder vos utilisateurs d'informations. Voici un bel exemple RAIDBOXES:

RAIDBOXES WP unboxed
Vue du magazine WordPress wp unboxed

Cette division permet à l'utilisateur de parcourir l'ensemble du contenu par domaine d'intérêt et de trouver ainsi plus rapidement ce qui l'intéresse.

Afin d'offrir certains contenus sans distractions, vous pouvez utiliser des boîtes modales. Ceux-ci se superposent au reste de votre page et permettent à l'utilisateur de se concentrer uniquement sur son contenu. Cela peut être nécessaire et important. Notez cependant que ces modaux ont également tendance à être des anti-modèles : Fondamentalement, ils empêchent l'utilisateur d'effectuer une quelconque action tant que le modal est ouvert.

Utilisées correctement, les boîtes modales peuvent toutefois aider vos visiteurs à mieux comprendre votre contenu. Cependant, les boîtes modales qui se déclenchent trop souvent ou sans raison apparente peuvent rapidement provoquer une frustration et un sentiment d'impuissance.

Les modes "lightbox" et "fullscreen" appartiennent également à cette catégorie. D'une part, ils permettent à votre utilisateur de regarder de près le contenu sélectionné. D'autre part, ils rendent toute autre interaction impossible. C'est pourquoi il est toujours important d'offrir au moins un point de fuite. Les plus connus sont ceux qui cliquent sur un X dans la partie supérieure droite de l'image ou qui cliquent en dehors de la boîte pour la refermer.

Les diaporamas sont également une façon populaire d'afficher des images. On distingue les diaporamas à lecture automatique et les diaporamas à navigation manuelle. Les galeries sont souvent répertoriées sous forme de vignettes, puis agrandies à l'aide de diaporamas et/ou de boîtes à lumière.

Ici, vous devez agir principalement en fonction de la fonction : Quel type d'images affichez-vous ? Doivent-ils être disponibles en plein écran ? Et qu'est-ce qui est le plus important : votre contenu dans son ensemble ou les images individuelles ? Cela vaut-il la peine de recourir à d'autres possibilités - comme une loupe qui agrandit vos images lorsque vous êtes en vol stationnaire ? Ce dernier est particulièrement populaire dans le commerce électronique.

Capture d'écran des modèles de conception de l'interface utilisateur Unsplash
Vue miniature sur unsplash.com

unsplash.com utilise un mélange de galerie d'images et de boîtes à lumière. Toutefois, les images ne sont pas affichées sous forme de vignettes. Pourquoi ? Unsplash est une plateforme qui ne propose que des images à télécharger. Cela signifie que les utilisateurs doivent pouvoir décider pour ou contre l'image directement au premier coup d'œil. Pour prendre cette décision, la résolution de l'image doit être relativement bonne. Les vignettes seraient trop petites pour cela. Et le fait de cliquer sur chaque image individuellement ou de naviguer dans un diaporama réduirait considérablement l'efficacité de la page.

Tout au long du processus de mise en œuvre et de conception, vous ne devez jamais perdre de vue la question de l'avantage/valeur et de l'importance.

4. jouer sur les chaînes sociales

Il s'agit de modèles qui aident à guider vos utilisateurs vers vos canaux de médias sociaux et/ou à faciliter leur interaction sociale. Vous pouvez lire des exemples plus détaillés ici.

Conclusion

En conclusion, je peux vous recommander deux approches en particulier. Tout d'abord, visitez et analysez autant de sites web que possible pour trouver l'inspiration : Comment les autres concepteurs ont-ils résolu ou non certains problèmes ? Qu'est-ce qui me frustre moi-même quand je surfe sur le net ? Quand ai-je été positivement surpris pour la dernière fois - et pourquoi ? 

Deuxièmement, n'oubliez jamais que vous n'êtes pas l'utilisateur. Les visiteurs de votre site web pensent étonnamment différemment de vous. Il se peut qu'ils ne connaissent pas encore votre produit. Par conséquent, effectuez régulièrement divers tests pour pouvoir évaluer la convivialité de votre page.

Quelles questions avez-vous à poser à Sonja sur les modèles d'assurance-chômage ?

N'hésitez pas à utiliser la fonction de commentaire. Vous voulez être informé des nouveaux postes et des conseils sur la conception et le développement de sites web ? Alors suivez-nous sur Twitter, Facebook ou via notre newsletter.

Après avoir étudié la conception de jeux et la création littéraire dans la ville verdoyante d'Auckland, Sonja Hoffmann s'est spécialisée dans la conception et le développement de sites web et d'applications. Elle se concentre sur la ludification et les causes derrière la motivation et l'expérience des utilisateur·rice·s, et y combine une passion et une curiosité pour les tendances technologiques.

Articles connexes

Commentaires sur cet article

Laisse un commentaire

Ton adresse électronique ne sera pas publiée. Les champs obligatoires sont marqués d'un *.