Modèles de conception de l'assurance-chômage

UI Design Patterns : des solutions éprouvées pour les problèmes d'utilisabilité courants

Comment le menu de ton site web doit-il être structuré ? Pourquoi certains propriétaires de sites Web ont-ils plus de facilité à obtenir des abonnés que d'autres ? Qu'est-ce qui incite les utilisateurs à remplir ou à ignorer le formulaire sur ton site ? En tant que designer, je me suis penchée sur les questions liées au design d'interface utilisateur et à l'utilisabilité du Web - tu trouveras les réponses dans cet article.

Que sont les UI Design Patterns ?

Les design patterns d'interface utilisateur (UI) sont des bibliothèques de problèmes d'utilisabilité qui ont déjà été analysés et résolus avec succès. Ils ne doivent cependant pas être appliqués tels quels. Ils fournissent cependant une base importante pour une expérience utilisateur harmonieuse. Les UI patterns sont là pour faciliter et accélérer ton flux de 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 savoir quels design patterns sont appropriés pour ton site web et comment les utiliser correctement ? Chris Bank a élaboré la procédure suivante dans son livre numérique Mobile UI Design Patterns:

  • Identification des problèmes : qu'est-ce que l'utilisateur essaie d'atteindre sur ton site web et à quels problèmes se heurte-t-il ? Essaie 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é. 
  • Utilisation : rés ume les résultats de ton analyse. Comment peux-tu les mettre en œuvre sur ton site web pour qu'ils offrent une valeur ajoutée aux visiteurs ? Quels sont les modèles de design que tu devrais éviter d'utiliser ? Si tu possèdes un guide de style, tu devrais y inclure tes 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 pour ta page, mais aussi comme un guide d'orientation. Le fait qu'elle soit généralement placée en haut ou sur le côté était à l'origine principalement dû à des raisons hiérarchiques. La navigation permet à l'utilisateur de voir en un coup d'œil ce qu'il peut faire sur notre site et où il se trouve.

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'interactions, et qui semble donc presque un peu chaotique, obtient une ergonomie agréable grâce à l'utilisation de solutions de design déjà connues.

Les navigations "sticky", comme celles décrites dans l'exemple ci-dessus, sont une invention merveilleuse dans le design web. Non seulement elles permettent de créer des animations impressionnantes, mais elles permettent aussi aux visiteurs de ton site web de se rendre plus rapidement de "A à B". Pour les One Pagers, ils fonctionnent 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 se sont appropriés la connaissance du menu mobile Burger : d'une part, pour faciliter une navigation minimaliste de leur site, à laquelle l'utilisateur n'est pas étranger. D'autre part, pour offrir malgré tout à 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 : 

UI Design Patterns : des solutions éprouvées pour les problèmes d'utilisabilité courants
Vue de l'Atlantic Patio

Ensuite, un exemple moins minimaliste pour la comparaison :

UI Design Patterns : des solutions éprouvées pour les problèmes d'utilisabilité 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.

"*" indique les champs requis

Je souhaite m'abonner à la newsletter pour être informé des nouveaux articles de blog, des ebooks, des fonctionnalités et des nouvelles de WordPress. Je peux retirer mon consentement à tout moment. Merci de prendre connaissance de notre politique de confidentialité.
Ce champ sert à la validation et ne doit pas être modifié.

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 n'ont pas été créés pour améliorer l'ergonomie des pages. Ils ont été conçus pour économiser de l'espace et pour pouvoir placer plus de contenu dans la navigation. De plus, ton design est plus ordonné et plus clair. Les menus déroulants font partie des design patterns qui sont souvent appelés anti-patterns - car ils ne facilitent pas vraiment la navigation sur le site. L'utilisation de menus déroulants est néanmoins recommandée. Après tout, leur fonctionnement est connu et appris. Les indicateurs d'un menu déroulant sont souvent les motifs en épi qui pointent vers le bas.

UI Design Patterns : des solutions éprouvées pour les problèmes d'utilisabilité 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 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 de contenu sur plusieurs pages - est particulièrement importante pour les boutiques de commerce électronique qui proposent un grand nombre de produits. Grâce à elle, le contenu est proposé sur plusieurs pages, le temps de chargement est réduit et le contenu est divisé en sections faciles à digérer. Les journaux, comme le FAZ, utilisent également la pagination pour diviser 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 donner à l'utilisateur un exemple de saisie dans des espaces réservés - les informations demandées sont ainsi visualisées à l'avance. Il faut éviter les entrées numériques fragmentées, car elles ne font que compliquer la saisie. De plus, ils doivent être programmés de manière à tolérer les 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. La forme multi-étape a plusieurs avantages psychologiques. Tout d'abord, elle est plus claire et moins dissuasive. Ensuite, si un indicateur (ici la barre de chargement) indique à l'utilisateur où il se trouve dans la forme, il sait exactement ce qui l'attend. La probabilité qu'il abandonne avant la fin est plus faible. Les informations personnelles devraient toujours être demandées à la fin du formulaire. Si une personne a déjà rempli une grande partie du formulaire, il lui est plus difficile d'abandonner le temps déjà investi sans résultat. Il est également conseillé de ne demander que les informations dont tu as réellement besoin et de justifier ta demande. Si tu demandes à tes utilisateurs de s'inscrire à quelque chose, il est conseillé d'indiquer un avantage pour eux du type "Obtiens toujours les meilleurs deals en premier". Dans la dernière étape, tu dois donner un petit aperçu de ce qui se passera ensuite - et à quoi l'utilisateur peut s'attendre et 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

Si tu as un site web, tu devrais particulièrement te demander comment le contenu de ton site est structuré : Est-ce qu'ils aident tes visiteurs à naviguer facilement sur ton site ? Ton contenu est-il facilement accessible et peut-on comprendre sa hiérarchie ? 

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 tu as un blog ou un magazine en ligne, tu connais peut-être le problème : tu as beaucoup de contenus intéressants que tu aimerais proposer de la manière la plus régulière possible. Un modèle de design approprié est la "liste d'articles". Ici, tu catégorises ton contenu et tu n'en montres qu'une petite partie à la fois. De cette façon, tu peux montrer beaucoup de sujets en un coup d'œil sans submerger tes 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, tu devrais surtout agir en fonction de la fonction : Quel genre d'images tu présentes ? Doivent-elles obligatoirement être disponibles en plein écran ? Et qu'est-ce qui est le plus important : ton contenu dans son ensemble ou les images individuelles ? Vaut-il la peine de recourir à d'autres possibilités, comme une loupe qui agrandit tes images au survol ? Cette dernière est particulièrement appréciée 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 sur les UI Design Patterns

Pour conclure, je peux te recommander deux approches principales. Premièrement : visite et analyse autant de sites que possible pour trouver de l'inspiration : Comment les autres designers ont-ils résolu ou non certains problèmes ? Qu'est-ce qui me frustre lorsque je surfe sur le web ? Quand ai-je été agréablement surpris pour la dernière fois - et pourquoi ? 

Deuxièmement, rappelle-toi toujours que tu n'es pas l'utilisateur. Les visiteurs de ton site web pensent étonnamment différemment de toi. Il se peut qu'ils ne connaissent pas encore ton produit. Fais donc plusieurs tests pour évaluer l'utilisabilité de ton 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 postes et des conseils sur la conception et le développement de sites web ? Alors suivez-nous sur Twitter, Facebook ou via notre newsletter.

As-tu aimé cet article ?

Tes évaluations nous permettent d'améliorer encore plus notre contenu.

Laisse un commentaire

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