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 web ? En tant que designer, je me suis penchée sur les questions liées au design d'interface utilisateur et à la convivialité du web - tu trouveras les réponses dans cet article.

Que sont les UI Design Patterns ?

Les User Interface (UI) Design Patterns 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 toutefois pas être repris tels quels. Ils fournissent cependant une base complète pour une expérience utilisateur harmonieuse. Les UI patterns ont pour but de faciliter et d'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 électronique Mobile UI Design Patterns:

  • Identification des problèmes : qu'est-ce que l'utilisateur essaie d'accomplir sur ton site web et quels sont les problèmes qu'il rencontre ? 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 afin qu'ils offrent une valeur ajoutée aux visiteurs ? Quels sont les design patterns 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 ne fait pas seulement office de table des matières pour ta page, mais aussi d'aide à l'orientation. Le fait qu'elle soit généralement placée tout en haut ou sur le côté avait à l'origine principalement des raisons hiérarchiques. Avec la navigation, nous montrons ainsi à l'utilisateur en un 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, en soi, permet beaucoup d'interactions et qui, de ce fait, paraît presque 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 domaine du webdesign. Non seulement elles permettent de créer des animations impressionnantes, mais elles permettent également aux visiteurs de ton site Web de se rendre plus rapidement de "A à B". Dans le cas des One Pagers, ils fonctionnent en outre 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 fait leur le savoir 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 de place pour être mis en avant.

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.

Consentement*
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.

L'origine des menus déroulants n'est pas tant d'améliorer l'ergonomie des pages. Ils ont été développés pour économiser de la place et pour pouvoir placer plus de contenus dans la navigation. De plus, ils donnent à ton design un aspect plus épuré et plus clair. Les menus déroulants font partie des design patterns qui sont souvent qualifiés d'anti-patterns - car ils ne facilitent pas vraiment la navigation sur le site. Il est toutefois recommandé d'utiliser les menus déroulants. Après tout, leur fonctionnement est connu et appris. Les indicateurs d'un menu déroulant sont souvent les motifs en chevrons pointant 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 surtout importante pour les boutiques en ligne qui proposent un grand nombre de produits. Elle permet de proposer le contenu sur plusieurs pages, de réduire le temps de chargement et de diviser le contenu en sections faciles à digérer. Les journaux, comme le FAZ, utilisent également la pagination pour diviser les articles 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 est préférable d'éviter les entrées numériques morcelées, car elles ne font que compliquer la saisie. De plus, ils devraient ê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 présente plusieurs avantages psychologiques. Tout d'abord, elle est plus claire et moins dissuasive. Ensuite, si un indicateur (ici la barre de chargement) permet à l'utilisateur de savoir 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. En effet, si une personne a déjà largement rempli le formulaire, il lui sera plus difficile d'abandonner sans résultat le temps qu'elle a déjà investi. Il est également conseillé de ne demander que les informations dont on a réellement besoin et de justifier la demande. Si tu demandes à tes utilisateurs de s'inscrire à quelque chose, il est conseillé de leur donner un avantage du type "Soyez toujours le premier à recevoir les meilleurs deals". Dans la dernière étape, tu devrais donner un petit aperçu de ce qui va se passer ensuite - et de ce à 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

Celui qui gère un site web devrait particulièrement se demander comment les contenus de ton site sont structurés : Aide-t-il tes visiteurs à naviguer facilement sur ton site ? Ton contenu est-il facilement accessible et sa hiérarchie est-elle compréhensible ? 

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 souhaites proposer de la manière la plus régulière possible. Un design pattern adapté à cette situation est la "liste d'articles". Ici, tu catégorises tes contenus et tu n'en montres qu'une petite partie. Tu peux ainsi présenter de nombreux thèmes 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 type d'images présentes-tu ? Doivent-elles impérativement être disponibles en plein écran ? Et qu'est-ce qui est le plus important : ton contenu dans son ensemble ou les différentes images ? Vaut-il la peine de recourir à d'autres possibilités - comme par exemple une loupe qui agrandit tes images au survol ? Cette dernière solution est particulièrement appréciée dans le domaine du 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, visitez et analysez autant de sites que possible pour trouver l'inspiration : Comment d'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. Effectue donc différents tests à plusieurs reprises afin de pouvoir évaluer la convivialité réelle 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.