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

Sonja Hoffmann Mis à 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, je me suis occupé de questions sur la conception d'interfaces utilisateur et la convivialité du web - vous trouverez les réponses dans cet article.

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, ils ne doivent pas être adoptés individuellement. Toutefois, elles constituent une base complète pour une expérience harmonieuse de l'utilisateur. Les modèles d'IU sont là pour faciliter et accélérer votre flux de travail.

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

Comme 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 écrit à ce sujet dans son livre électronique Modèles de conception de l'assurance-chômage mobile la procédure suivante est mise au point :

  • 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.
  • 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 troublé - à cette tâche. 
  • Utilisation : 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 de conception qu'il vaut mieux éviter d'utiliser ? Si vous avez 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 vous présenterai brièvement dans cette section. Malheureusement, je ne pourrai pas couvrir tous les modèles de conception de l'assurance-chômage. Si vous voulez approfondir le sujet, le web vous offre des possibilités presque illimitées pour en savoir plus. 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 sert non seulement de table des matières de votre page, mais aussi de guide d'orientation. Le fait qu'il soit généralement placé en haut ou sur le côté de la page était à l'origine principalement pour des raisons hiérarchiques. Avec la navigation, nous montrons à l'utilisateur d'un seul coup d'œil ce qu'il peut faire sur notre site et où il se trouve en ce moment.

Grâce à des années de pratique, nous avons internalisé 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 de les faire fonctionner.

capture d'écran-www.castoretpollux.com-2020.06.11-18-05-59
Site web de Castor & Pollux

Castor et Pullex ont suivi les règles du modèle de l'assurance-chômage tout en les adaptant à leur site : une navigation qui se situe 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 beaucoup d'interaction et semble donc presque chaotique, obtient une convivialité agréable en utilisant des solutions de conception déjà connues.

La navigation "collante", telle que décrite dans l'exemple ci-dessus, est 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 Pager, ils fonctionnent aussi comme un fil rouge : L'utilisateur sait où il se trouve et ce qu'il a déjà vu.

Il en est de même pour la chapelure : Les petites pages n'ont pas beaucoup de sens. Mais pour les pages plus complexes, elles peuvent faire des merveilles. Ils aident non seulement l'utilisateur à s'orienter, mais aussi à revenir à n'importe quel endroit souhaité dans la navigation.

Une autre façon d'utiliser ces modèles est illustrée dans l'exemple suivant :

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

capture d'écran-demodern.com
Exemple de projet de Les démodérateurs

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, dans la version allégée, le travail semi-qualifié est aussi bien que dans la version originale.

Parallèlement, 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. C'est surtout dans les pages de produits des magasins qui s'en inspirent que nous les voyons souvent 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 Patio Atlantique

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

Les modèles d'assurance-chômage sont souvent basés sur des interactions dans le 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 au fait que l'utilisateur ne peut plus comprendre intuitivement ces actions et leurs conséquences. Pour vous le faire comprendre, j'ai adapté une fois l'exemple ci-dessus :

capture d'écran-bambooclothing.co.uk-2020.06.11-18-33-55_modifié

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

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

Pour que notre liste soit complète, les menus de débordement et les boutons "Aller à la section" ne doivent pas manquer. "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 pager, les boutons "Sauter à la section" ont du sens : ils permettent de gagner du temps et d'éviter la frustration due à un défilement fastidieux.

Les menus déroulants ont 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 des Design Patterns, souvent appelés Anti-Patterns - 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, leur fonction est connue et apprise. 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 de 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 clairement visibles dans le Couleur primaire de la page et placées de manière à être regroupées 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 uniforme. Une connaissance approfondie des boutons que vous obtenez ici.

La pagination - le partage du contenu sur plusieurs pages - est particulièrement importante pour les boutiques de commerce électronique qui proposent un grand nombre de produits. Grâce à la pagination, 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.

capture d'écran-www.faz.net-2020.06.13-15-49-43
Exemple de la FAZ

En outre, le "pied gras", qui est devenu une tendance 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 données de contact et afficher des contenus juridiques qui n'ont pas leur place dans la navigation principale. 

Le pied de page fonctionne alors en partie comme une table des matières différemment structurée de votre page. Mais il peut aussi servir d'aguicheur pour obtenir des informations complémentaires. Une fois que l'utilisateur a fait défiler votre site, 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 ici 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 l'utilisation, l'aspect temporel et une éventuelle connexion instable peuvent rapidement devenir un test éprouvant pour les nerfs. Heureusement, il existe des modèles de conception qui ont déjà traité exactement ces problèmes.

Conseil :

Il en va de même ici que sur le web en général : 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 coûter très cher.

Dans ce qui suit, j'ai créé un formulaire fictif pour vous montrer les principes les plus importants :

Formulaire
Principes pour les formulaires de saisie
  1. Tests de suivi des yeux ont constaté 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 donner à l'utilisateur un exemple de saisie dans des espaces prédéfinis - de cette façon, les informations requises sont visualisées à l'avance. Vous devez éviter les entrées fragmentées de numéros, car elles ne font que compliquer la saisie. En outre, ils 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 encadré en 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. Proposez donc différentes options d'aide. Il existe plusieurs possibilités pour cela : Un bouton d'information, qui offre une aide au survol. Ou l'apparition de petites modales si le formulaire n'est pas envoyé avec succès.
  4. Il est logique de donner un retour d'information dès la saisie. 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 multi-étapes présente plusieurs avantages psychologiques. Tout d'abord, elle a un effet plus clair et moins dissuasif. Si l'utilisateur est alors également indiqué où il se trouve dans le formulaire au moyen d'un indicateur (ici la barre de chargement), il sait exactement à quoi s'attendre. La probabilité qu'il se sépare prématurément est plus faible. Les informations personnelles doivent toujours être demandées à la fin du formulaire. Si le visiteur de votre site web a déjà rempli le formulaire dans une large mesure, 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 motiver votre demande. Si vous demandez à vos utilisateurs de s'inscrire à quelque chose, il est conseillé de leur indiquer 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 à ce moment-là.

En outre, vos formulaires doivent être remplis automatiquement (par des données stockées dans le navigateur) et reconnaître les informations (comme l'ajout de la ville après la saisie d'un code postal). De WordPress nombreux formulaires, en particulier, l'ont déjà inclus par défaut. 

Vous devriez éviter l'utilisation de captchas, si possible, ou du moins la limiter au minimum. Selon de cette étude Les captchas peuvent entraîner une diminution de 30 % de l'interaction avec la forme.

3. structurer votre contenu

En tant qu'exploitant de site web, vous devez porter une attention particulière à la manière dont le contenu de votre site est structuré : Aident-ils vos visiteurs à trouver leur chemin sur votre site ? Vos contenus sont-ils facilement accessibles et leur hiérarchie peut-elle être comprise ? 

La question de la facilité d'accès intéresse particulièrement 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 aborder le thème de l'accessibilité et de l'absence d'obstacles de manière plus détaillée, vous trouverez de plus amples 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é pour cela est la "Liste d'articles". Ici, vous catégorisez votre contenu et n'en montrez qu'une petite partie. 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 WordPress magazine wp unboxed

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

Afin d'offrir certains contenus sans distraction, vous pouvez utiliser des boîtes modales. Ces boîtes sont placées au-dessus du reste de votre site et permettent à l'utilisateur de se concentrer sur le contenu. Cela peut être nécessaire et important. Notez cependant que ces modaux sont également plus anti-modèles : En fait, ils bloquent la liberté d'action de l'utilisateur tant que le mode est ouvert.

Utilisées correctement, les boîtes modales peuvent toutefois aider vos visiteurs à mieux comprendre votre contenu. Cependant, des boîtes modales trop fréquentes ou apparemment non provoquées peuvent rapidement provoquer de la frustration et un sentiment d'impuissance.

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

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 votre fonction : Quel genre d'images représentez-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 de Unsplash-UI Design Patterns
Vue miniature de 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 au premier coup d'œil. Pour pouvoir 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é du site.

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

4. utiliser les canaux sociaux

Cela concerne les modèles qui aident à guider vos utilisateurs vers vos canaux de médias sociaux et/ou à faciliter l'interaction sociale. Vous pouvez trouver des exemples détaillés de ces modèles ici Lisez.

Conclusion

En conclusion, je peux recommander deux approches en particulier. Premièrement : visitez et analysez autant de sites web que possible pour vous inspirer : Comment les autres concepteurs ont-ils résolu ou non certains problèmes ? Qu'est-ce qui me frustre quand je surfe sur le web ? 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 différents tests de manière répétée afin d'évaluer la convivialité de votre site.

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 articles et des conseils sur la conception et le développement de sites web ? Alors suivez-nous sur TwitterFacebook ou sur notre Newsletter.

Après avoir étudié la conception de jeux et la création littéraire dans la région verdoyante d'Auckland, il s'est spécialisé Sonja Hoffmanndans la conception de sites web et d'applications et leur développement. Elle se concentre sur la ludification et l'exploration de la motivation et de l'expérience des utilisateurs, associées à une passion et une curiosité pour les tendances technologiques.

Articles connexes

Commentaires sur cet article

Ecrire un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont marqués par * .