Comment concevoir pour le Web à l'aide de modèles de conception

Les modèles de conception sont la base d'une bonne convivialité d'un site Web, et ce sont les éléments sur lesquels les sites Web sont construits. Il s'agit d'une décision de conception stratégique qu'un concepteur Web prend pour assurer une bonne expérience utilisateur. Le travail d'un concepteur consiste à résoudre les problèmes d'utilisabilité courants et à créer la solution la plus intuitive pour l'utilisateur, et les modèles créent une expérience utilisateur prévisible, intuitive et optimisée. Que vous débutiez dans la conception ou que vous soyez un professionnel chevronné, vous devez rester conscient des modèles de conception d'interface utilisateur courants et suivre l'évolution des modèles.

Exemples de modèles de conception

Vous avez probablement entendu parler des composants ; des choses comme les boutons, les champs de formulaire, les barres de recherche, etc. en sont tous des exemples. Pour les utiliser, vous pouvez les utiliser à bon escient en créant des motifs dans votre conception.

Une chose à savoir : parfois, les termes « composants » et « modèles de conception » sont utilisés de manière interchangeable. Pour les besoins de cet article, les composants sont les blocs de construction d'un site Web, et les modèles sont des moyens établis par lesquels les utilisateurs sont habitués à effectuer des tâches.

Comme vous le verrez, un motif est « plus grand » qu'un simple composant. Les modèles vous permettent d'optimiser ce qui est fait avec des composants individuels. Il existe de nombreux modèles de conception traditionnels, tels que :

• Un logo qui renvoie à la page d'accueil dans un en-tête de site Web
• Navigation Hamburger sur les sites Web mobiles
• Formulaires de connexion avec un lien "Réinitialiser le mot de passe"
• Fils d'Ariane qui permettent aux utilisateurs de garder une trace de leur emplacement sur un site
• Chariots avec des compteurs d'objets dessus

Pourquoi les designers devraient-ils se concentrer sur les Design Patterns ?

L'utilisation de modèles de conception présente de nombreux avantages. Non seulement ils rendent votre travail de concepteur plus efficace, mais plus important encore, les modèles facilitent l'expérience de vos utilisateurs.

Les modèles de conception établissent la confiance

Les utilisateurs font des suppositions rapides dès qu'ils arrivent sur votre site. En une fraction de seconde, ils déterminent s'il vaut la peine d'interagir avec le contenu ou s'ils doivent trouver une autre option.

Votre site est-il facile à naviguer ? Est-il facile de trouver les informations que vos utilisateurs recherchent ? Ils n'auront pas la patience de cliquer et de dépanner. Il est absolument essentiel de faire une bonne première impression et d'établir la confiance avec vos utilisateurs.

Dans ce qui est devenu l'histoire du Web, certains modèles sont devenus monnaie courante. Les concepteurs se sont appuyés sur ces éléments d'interface utilisateur établis pour concevoir des sites Web, et les utilisateurs se sont habitués à voir ces modèles de conception. Ils reconnaissent les points communs entre les sites et font confiance à ce qui est familier.

Prenons un exemple de modèle de conception établi sur un site de commerce électronique. Les utilisateurs sont habitués à voir de petits aperçus de produits dans une grille, puis à cliquer pour en savoir plus sur l'élément individuel. En utilisant des modèles établis dans votre conception et en créant une expérience facile à utiliser, vous établissez la confiance avec vos utilisateurs, et il est plus probable qu'ils reviendront.

Les modèles de conception sont intuitifs

Au fur et à mesure que les utilisateurs interagissent avec votre site, le facteur de prévisibilité devient très important. [twitter_link]Les modèles prévisibles permettent l'expérience la plus intuitive.[/twitter_link] Il est essentiel d'avoir des modèles familiers, mais il est également important de s'assurer que ces modèles sont utilisés de manière cohérente.

Un exemple de modèle courant et prévisible se trouve sur les formulaires. Plus précisément, tous les formulaires fournissent des messages de validation et d'erreur. Tous les formulaires de votre site le font-ils de manière cohérente ? Tous les messages sont-ils au même endroit ? Qu'en est-il du bouton d'envoi ? Y a-t-il un message indiquant que le formulaire a été envoyé ?

Du point de vue de la conception, les utilisateurs ont déjà rencontré ces modèles à plusieurs reprises. Fournir une validation de formulaire avec une messagerie utile indique à l'utilisateur où se trouvent les problèmes, et avoir un message indiquant que le formulaire a été envoyé est un indicateur utile qu'une action a eu lieu.

Cela peut sembler être du bon sens lorsque vous entendez que les modèles et la prévisibilité sont nécessaires pour une bonne expérience utilisateur. Cependant, il n'est pas trop difficile de trouver des sites qui brisent les schémas communs, ce qui peut provoquer de la frustration ou de la confusion. Dans cet esprit, continuez à concevoir avec des modèles d'interface utilisateur utiles. Plus les utilisateurs les connaissent, plus ils savent à quoi s'attendre. Les modèles et les conventions empêchent les utilisateurs de se perdre, et s'en tenir aux modèles crée une expérience prévisible.

Les modèles de conception fournissent un langage commun entre les concepteurs

[twitter_link]Les bonnes expériences commencent par une conception efficace.[/twitter_link]

Dans de nombreux cas, les concepteurs travaillent en équipe. Cela aide l'équipe à travailler plus efficacement lorsqu'il existe des modèles de conception établis. Il n'est pas nécessaire de réinventer la roue si le problème a déjà été résolu.

Conserver tous les modèles dans un guide de style frontal central est un excellent endroit pour conserver l'inventaire. En tant que ressource globale, il s'agit d'un guide rapide permettant à tous les membres de l'équipe de comprendre le cas d'utilisation de chaque modèle. Même si vous travaillez en solo, garder une trace des modèles de conception que vous utilisez vous permettra de travailler plus efficacement et de les revoir à l'avenir.

La phase de planification

La raison pour laquelle les modèles de conception doivent être utilisés est assez claire, mais comment les concepteurs Web les mettent-ils réellement en place lors de la conception pour le Web ? Voici quelques conseils qui facilitent le processus de conception.

Utilisez ce que vous savez déjà pour commencer

Si vous concevez une refonte complète ou une « extension » de site, il est utile de faire l'inventaire et de regarder ce que vous savez déjà. Obtenir un bon point de départ est la clé. S'il s'agit d'un projet entièrement nouveau, il est important de réfléchir à ces choses et de s'attendre à ce que certaines questions soient inconnues au début. Dans cette situation, utiliser l'expérience de conception passée pour commencer est une bonne première étape. Cela informe les décisions initiales parce qu'ils ont travaillé sur d'autres projets.

Commencer la recherche

La recherche est la clé d'une base de projet solide. Comme vous le savez bien, les utilisateurs chercheront toujours le moyen le plus simple d'accomplir une certaine action sur un site Web. Comprendre les problèmes et les tâches à accomplir vous assurera de concevoir la bonne chose. Pour commencer, pensez à ces éléments :

• Qui sont les utilisateurs actuels ? (Leurs objectifs, démographiques, etc.)
• Que voulez-vous en savoir d'autre sur ces utilisateurs ?
• Avec quels modèles interagissent-ils le plus ?
• Y a-t-il des modèles avec lesquels ces utilisateurs ont des problèmes ?
• Quelles améliorations peut-on apporter ?
• Quelles nouvelles fonctionnalités sont conçues ?
• Tous les modèles actuellement établis peuvent-ils fonctionner ?

La phase de recherche est le moment d'identifier ce que vos utilisateurs doivent accomplir lorsqu'ils interagissent avec votre site Web. Des exemples seraient des choses comme rechercher du contenu, s'inscrire à une newsletter, faire un achat, etc. Confrontés à des éléments familiers, les utilisateurs auront besoin de moins de temps pour réfléchir et auront plus de raisons de convertir. Gardez la conception axée sur la création de modèles d'une manière qui semble familière à vos utilisateurs en fonction de leurs connaissances existantes à partir de ce qu'ils vivent sur le Web.

Lors de la résolution de problèmes de conception, le temps et le budget sont toujours un facteur, mais faites autant de recherches que possible. C'est à vous de découvrir les principaux points faibles de vos utilisateurs et d'étudier les modèles de conception existants. Qu'est-ce qui est commun sur le Web ? Quels modèles avez-vous utilisés avec succès dans le passé ? Une fois que vous avez défini les problèmes que vous devez résoudre, explorez les sites avec des modèles qui ciblent les mêmes objectifs utilisateur. Cela servira de bonne inspiration pour le projet. Il n'est pas nécessaire de les « copier », mais il est utile de prendre note de ce qui existe.

Jusqu'à présent, je vous ai recommandé de rester cohérent et prévisible. Il convient de mentionner que les modèles existants peuvent être modifiés et qu'il peut y avoir des cas pour faire quelque chose de nouveau. Assurez-vous simplement que si vous introduisez un nouveau modèle, il est justifié par les données de l'utilisateur et bien testé.

Concevoir pour le Web avec des modèles de conception

Prototype et test

Après la phase de recherche, il est temps de commencer à mettre en pratique ce que vous avez appris. C'est là que le design prend vie avec le prototypage. Selon votre processus, les prototypes peuvent être de simples structures filaires basse fidélité ou des conceptions haute fidélité plus complexes.

Commencez avec les modèles existants de votre recherche comme référence. Au fur et à mesure du processus, assurez-vous que le prototype couvre toutes les fonctionnalités dont vous avez besoin et qu'il tient compte de tous les objectifs de l'utilisateur. Cela peut prendre un peu de révision et d'ajustement pour arriver à un bon point de départ.

Une fois que vous êtes sûr que toutes les exigences sont incluses dans le prototype, il est temps de faire des tests pour avoir un aperçu de la convivialité de la conception. C'est ici que vous validerez l'efficacité des modèles de conception ainsi que la fonctionnalité globale.

La raison pour laquelle les tests sont si importants dans la phase de prototype est que, dans certains cas, les clients ne peuvent pas exprimer ou prédire pleinement leurs pensées et leurs besoins. Les tests utilisateurs leur permettent de montrer au lieu de dire. Les participants montrent comment ils utiliseraient réellement le site, tandis que vous observez et apprenez de leurs actions. Ceci est à la fois utile pour les participants et pour vous en tant que concepteur.

Il est important de garder des notes sur les principaux objectifs de l'utilisateur lorsque vous vous lancez dans les tests, pour rester concentré. Après avoir invité les participants au test, mettez le design devant autant d'utilisateurs que possible. Si les contraintes de temps sont serrées, assurez-vous de tester avec au moins cinq utilisateurs.

Le sujet des tests utilisateurs est un sujet à part entière. Choisissez la méthode la plus logique en fonction de votre temps et de votre budget. Ce serait formidable d'avoir toujours suffisamment de temps, mais ce n'est pas toujours possible. À la rigueur, des tests d'utilisabilité "de couloir" ou "de style cafétéria" peuvent être utiles (un test d'utilisabilité mis en place dans une zone à forte circulation piétonne, utilisant des personnes qui passent pour tester votre produit). Même impliquer quelques collègues est toujours mieux que pas de test.

Il y a de fortes chances que vos modèles de conception ne soient pas parfaits dès le départ. Des modifications devront être apportées et davantage de tests seront nécessaires pour valider la conception mise à jour. Cependant, vous obtiendrez plus d'informations à chaque phase de test et serez en mesure d'intégrer ce que vous avez appris pour continuer à itérer et à tester jusqu'à ce que la conception soit optimisée.

Les modèles de conception Web garantissent une expérience utilisateur cohérente. Vous trouverez ci-dessous des liens utiles qui fournissent plus d'informations pour commencer :

• Guide complet des tests utilisateurs
• La chirurgie de fusée de Steve Krug rendue facile
• Exemples de guide de style