Outils, astuces et ressources pour créer de meilleures expériences utilisateur —

Que faut-il pour créer des expériences utilisateur significatives ? Bien qu'il n'y ait pas de recette secrète pour réussir, il y a quelques principes fondamentaux que vous pouvez considérer pour relever le défi. Dans cet article, nous avons compilé des outils, des conseils et des ressources utiles qui vous aideront à créer de meilleures expériences utilisateur. Vous trouverez des heuristiques psychologiques tout comme des conseils pour créer une stratégie UX gagnanteapprofondissez la recherche utilisateur et l'écriture UXet explorez des exemples du monde réel — bons et mauvais — à partir desquels vous pouvez apprendre à créer des expériences qui comptent vraiment. Mais soyez averti, il y a beaucoup de choses à digérer dans cet article, vous pouvez donc envisager de le mettre en signet et de le diviser en plusieurs pauses-café. Bonne lecture !

Les lois de l'UX

La loi de Fitt, la loi de Miller, l'effet de position en série. Savez-vous ce qui se cache derrière ces noms ? Sinon, Laws of UX jettera plus de lumière sur leur signification.

Créé par Jon Yablonski, ce joli site Web explique 21 principes psychologiques que les concepteurs peuvent prendre en compte pour créer des produits et des expériences plus centrés sur l'humain. Une excellente initiative pour rendre les heuristiques psychologiques complexes plus accessibles.

Les bons outils au bon moment aident à rationaliser le processus de conception. Pour vous donner un meilleur aperçu des outils qui pourraient améliorer vos projets de conception UX, Jordan Bowman et Taylor Palmer organisent le site UX Tools.

Leur base de données d'outils de conception propose des outils pour tout, de la conception et du prototypage de l'interface utilisateur au flux et au transfert des utilisateurs, en passant par les systèmes de conception et la gestion des versions. Chaque outil est évalué en fonction de l'utilisation et de l'évaluation des utilisateurs et est accompagné d'informations détaillées sur la prise en charge, le coût et les fonctionnalités de la plate-forme. Sur le site, vous trouverez également des défis UX pratiques pour vous former aux compétences UX cruciales. Une excellente ressource pour créer de meilleures expériences numériques.

Le guide ultime de la recherche UX

La recherche sur l'expérience utilisateur est un élément crucial du processus de conception centré sur l'humain. Mais comment aborder la tâche et intégrer un processus de recherche UX dans le flux de travail de votre équipe ? Pour vous aider à démarrer, les gens de Maze ont rassemblé le «Ultimate Guide to UX Research».

Le guide complet plonge dans les principes fondamentaux de la recherche UX et ses différentes méthodes. Il commence par examiner de plus près ce qu'est la recherche UX et pourquoi c'est l'épine dorsale de la construction de bons produits, dissèque différentes méthodes et outils de recherche et partage des conseils pour créer un plan de recherche et établir un processus de recherche UX. Une excellente lecture pour les concepteurs UX et les chefs de produit. Bien entendu, nous souhaitons améliorer l'expérience utilisateur globale et la satisfaction des utilisateurs, et nous voulons établir une relation positive et durable avec nos clients en les gardant heureux et productifs avec nos services. Mais comment y arrive-t-on exactement ?
Dans son discours sur la stratégie UX (transcription), Jared Spool a cherché des moyens pour nous de créer un meilleur produit et une meilleure stratégie UX. Cela implique d'élaguer régulièrement les fonctionnalités plutôt que de les ajouter, d'explorer en permanence les attentes communes et les frustrations fréquentes, d'ajouter de la valeur en innovant là où les clients sont les plus frustrés et d'établir des heures d'exposition avec les clients pour toute l'équipe.

Dans son autre exposé sur les étapes de croissance dans l'UX (transcription), Jared explique comment toutes les personnes impliquées dans le produit sont également des concepteurs, augmentant ainsi la connaissance du design au sein de toute l'équipe est nécessaire pour que le produit soit entièrement axé sur la conception globale et l'UX. Il parle du point de basculement UX que les organisations doivent atteindre lorsque le design devient l'avantage concurrentiel d'une organisation. Les deux entretiens sont un excellent point de départ lorsque vous voulez comprendre comment faire passer votre organisation du statu quo à un meilleur endroit, et par où commencer.

La maturité de l'écriture UX

Au cours des dernières années, les organisations et les concepteurs se sont concentrés sur l'importance de l'écriture. Ils ont réalisé que le contenu peut en effet aider à concevoir des expériences claires et significatives. Mais qu'est-ce que l'UX Writing et pourquoi est-ce si important ?

Selon le UX Writing Worldwide ReportUX Writing se concentre sur les utilisateurs et aide à créer des expériences adaptées à leurs besoins. L'enquête menée auprès de 110 professionnels de l'écriture en mai 2020 donne des informations intéressantes sur le rôle du rédacteur UX dans les entreprises du monde entier.

La combinaison nourriture et expérience utilisateur

Qu'ont en commun la nourriture et l'UX ? Beaucoup en fait ! Si vous êtes ouvert à un autre type d'approche de l'UX, nous sommes tombés sur un projet qui a déjà quelques années sur le dos mais qui offre une perspective sur la conception de l'expérience utilisateur que vous n'avez probablement jamais adoptée auparavant.

Pour une conférence qu'il a donnée en 2010, Peter J. Bogaards a rassemblé sur son blog Food UX pensées, idées et ressources, simplement tout ce qui fait le lien entre les disciplines food/gastronomie et user experience design. . Ce qui peut sembler un peu étrange au début commencera à avoir un sens au fur et à mesure que vous commencerez à plonger dans la façon de penser de Peter. Il s'avère qu'en fin de compte, la gastronomie et l'UX sont vraiment la même chose : engager les sens pour permettre aux expériences d'émerger, préparer le terrain pour que quelque chose de bien se produise et servir quelque chose de délicieux.

The Deck Of Brilliance

19659004] Vous trouvez-vous parfois face à une page blanche avec peu ou pas d'inspiration ? La concurrence avec des créatifs de tous les coins du monde ne facilite certainement pas la génération d'idées inédites, surtout lorsque vous avez l'impression qu'elles ont déjà toutes été prises.

Le Deck of Brilliance vous offre 52 outils gratuits qui vous aideront à développer des idées en peu de temps. Tout ce que vous avez à faire est de choisir un outil l'un après l'autre et d'être prêt à noter vos idées lorsqu'elles commencent à arriver. Plus vous générez d'idées, meilleures sont les chances de réussir !

Accessibilité pour les équipes

L'accessibilité va bien au-delà du code, donc lorsqu'il s'agit de fournir des sites Web accessibles, chaque membre d'une équipe a ses responsabilités spécifiques. Si vous pensez que votre équipe n'a pas encore trouvé la bonne stratégie pour lutter contre l'accessibilité, le guide de Peter van Grieken "Accessibilité pour les équipes" est là pour vous.

Le guide se compose de six parties, chacune d'entre elles s'adressant aux différents spécialistes de votre équipe : chefs de produit, concepteurs de contenu, concepteurs UX, concepteurs visuels et développeurs front-end, plus un guide sur les tests d'accessibilité. Les deux derniers ne sont pas encore sortis. Une excellente ressource qui aide à intégrer l'accessibilité dans le flux de travail de votre équipe à partir de la base.

Slack Communities For Designers

S'entraider, partager l'inspiration, demander des commentaires, encourager la discussion – tout cela est un élément crucial de toute création traiter. Si vous êtes un designer et que vous souhaitez entrer en contact avec des personnes partageant les mêmes idées, il existe de nombreuses communautés de design sur Slack auxquelles participer. Pour vous aider à découvrir celle qui correspond le mieux à vos besoins, Ryan Yao a créé des Communautés de designers Slack[19659045].

Peu importe si vous aimez l'UX, l'animation ou la typographie Web, ou si vous cherchez des moyens de créer un changement social positif, d'explorer comment façonner une culture du design ou si vous voulez simplement parler de systèmes de conception, l'aperçu de Ryan a vous a couvert. Si vous connaissez une communauté qui mérite d'être rejointe mais qui n'est pas encore répertoriée, vous pouvez l'ajouter. Bonne connexion !

Le passé, le présent et l'avenir des interfaces

Pourquoi interfaçons-nous ? Après plusieurs mois de stricte quarantaine Covid, le concepteur de produits Ehsan Noursalehi a eu une nouvelle perspective sur notre relation avec la technologie, il a décidé de convertir ses observations et ses questions en un micro-livre en ligne.

Why Do We Interface jette un regard historique sur les interfaces pour comprendre comment elles nous permettent d'utiliser l'information de manière si puissante qu'elles peuvent fondamentalement changer ce que cela signifie d'être humain. Un voyage stimulant de l'échec d'Apple Newton de 1993 aux interfaces vocales d'aujourd'hui et aux défis que l'avenir pourrait apporter, ainsi qu'un précieux rappel sur le véritable objectif du travail d'un designer.

Fonts Knowledge[19659004]Sans aucun doute, il est possible de faire un excellent travail de conception avec une police de mauvaise qualité, mais, d'un autre côté, des choix typographiques réfléchis améliorent l'expérience utilisateur : ils améliorent le sens du texte, aident les utilisateurs dans l'orientation et améliorer la lisibilité. Pour faciliter vos premiers pas dans le monde de la typographie (ou vous aider à améliorer vos compétences), l'équipe Google Fonts s'est associée à des experts en typographie du monde entier pour créer une bibliothèque de guides typographiques : Fonts Knowledge.

Fonts Knowledge permet aux concepteurs et aux développeurs de tous les ensembles de compétences de choisir et d'utiliser le type avec un objectif. Les rubriques comprennent OpenType, les polices Web, les éléments essentiels du type et les polices variables et sont divisées en trois sections : « Présentation du type », « Choix du type » et « Utilisation du type ». Un glossaire vous aide à comprendre les termes typographiques.

Concevoir de meilleures pages de destination

Persuader quelqu'un d'agir ne consiste pas toujours à le convaincre avec des arguments. Parfois, il suffit de décrire clairement les problèmes auxquels un produit répond, de rendre les prix transparents et d'expliquer à quel public le produit s'adresse (peut-être en s'appuyant sur des preuves sociales). , mais de meilleures images" n'est qu'un des 100 conseils de page de destination que Rob Hope partage.

Dans un fil Twitter sur Landing Page Hot TipsRob Hope, un concepteur UX passionné de Cape Town, Afrique du Sud, répertorie 100 conseils utiles à garder à l'esprit lors de la conception d'une page de destination (ou tout autre interface vraiment). Chaque conseil a un visuel et une petite aide-mémoire, ainsi que quelques conseils rapides sur les choses à faire et les choses à éviter. Tous les conseils sont également rassemblés dans un joli livre électronique.

L'expérience utilisateur de la banque

Chaque banque prétend offrir la meilleure expérience bancaire globale, et pourquoi ne le feraient-elles pas, n'est-ce pas ? Eh bien, afin de découvrir ce que les banques challenger ont fait différemment, le spécialiste UX Peter Ramsey a décidé qu'il était temps d'en tester quelques-unes.

Tout d'abord, il a ouvert 12 comptes bancaires réels au Royaume-Uni et a tout enregistré. Suivront ensuite six chapitres détaillés de son parcours utilisateur : ouverture d'un compte, effectuer son premier paiement, bloquer sa carte, effectuer des paiements internationaux, ouvrir une banque et enfin, le support client. Un guide de référence fantastique pour vous aider à créer de meilleures expériences. le nouveau contenu est en cours de chargement – ce ne sont là que quelques-uns des pièges courants de l'expérience utilisateur que le Baymard Institute a rencontrés lors de l'analyse de l'état actuel du commerce électronique mobile . Pour les utilisateurs, des choses comme celles-ci sont ennuyeuses ; pour l'industrie du commerce électronique, ce sont des opportunités manquées.

En fait, comme l'a découvert le Baymard Institute, les performances de commerce électronique mobile des sites de commerce électronique américains et européens les plus rentables en moyenne sont médiocres. Pour nous aider tous à faire mieux, ils ont distillé leurs conclusions en 18 pièges de conception communs et oublis stratégiques qui offrent une marge d'amélioration, en particulier en ce qui concerne l'UX au sein de la page d'accueil mobile, la recherche sur site, les formulaires, ainsi que le site -larges fonctionnalités et éléments. À lire absolument.

Simplification de l'expérience de paiement

Cinquante-six. C'est le nombre d'actions qu'un client doit effectuer pour acheter un billet American Airlines. Avouons-le, les formulaires de paiement sont souvent trop longs et fastidieux à remplir. Dans le pire des cas, les clients pourraient même abandonner le processus. Pour nous aider à faire mieux, UX Planet a publié une série d'articles en quatre parties sur la rationalisation de l'expérience de paiement en 2017, qui est toujours d'or pour tous ceux qui travaillent aujourd'hui sur un flux de paiement.

La ​​ première partie de la série examine des exemples où l'expérience de paiement s'est mal passée et pourquoi. La deuxième partie répertorie les éléments les plus importants qui aideront à améliorer toute expérience de formulaire de paiement en 16 conseils faciles à suivre. La troisième partie est consacrée à la validation des formulaires et à la manière de minimiser le nombre d'erreurs qu'un client pourrait commettre, tout en examinant de plus près les différences entre les marchés B2C et B2B qui entraînent des différences de conception. Enfin, la quatrième partie traite des détails de la carte bancaire, vous apprend comment détecter et valider un numéro de carte et comment gérer les autres champs du formulaire de paiement. Une lecture longue mais intéressante.

A retenir UX des services de streaming

Les utilisateurs sont sensibles à toute friction lors de l'utilisation d'une application et comme le nombre d'applications offrant des fonctionnalités similaires augmente, plus l'expérience est importante en tant que différenciateur. Joseph Mueller a analysé les petites décisions d'expérience qui font toute la différence dans les meilleures applications de streaming sur iOS.

Plongeant plus profondément dans « l'évier de cuisine » de Netflix, le concept de Hulu de « recul 10 en avant 30 », les cibles de double appui de YouTube et les approches « tourner pour plus », Joseph a résumé cinq points clés pour améliorer l'expérience utilisateur qui peut être appliquée à tout type du projet : supprimez les raisons pour lesquelles un utilisateur devra quitter l'application ; prêter attention à la nuance de la motivation d'un utilisateur car cela pourrait conduire à une nouvelle solution ; éduquer l'utilisateur avec l'interface ; changer les points de sortie en opportunités ; laissez vos utilisateurs obtenir les résultats qu'ils souhaitent sans avoir à être trop précis. L'analyse de Joseph montre d'excellents exemples de la façon dont tout cela peut être réalisé. Mais au lieu d'y renoncer complètement, Stéphanie Walter suggère une approche différente — après tout, si c'est bien fait, il existe des cas d'utilisation où les notifications peuvent améliorer l'expérience utilisateur.

Dans son guide des notifications push Stéphanie partage de précieux conseils pour ne plus gâcher les notifications push et regagner la confiance des utilisateurs. Les deux piliers sur lesquels repose une bonne notification : Donnez à vos utilisateurs une chance de comprendre ce qu'ils gagnent des notifications et demandez une autorisation dans le contexte, et non lors du chargement de la page. Il peut s'agir d'un site de commerce électronique qui demande aux clients s'ils souhaitent recevoir des notifications sur l'état et la livraison du colis après avoir effectué un achat ou d'une compagnie aérienne informant les utilisateurs lorsque leur vol est retardé, par exemple. À lire absolument.

Le bouton « Retour » UX

La qualité d'une expérience se révèle dans les situations où quelque chose se passe de manière inattendue. Que se passe-t-il lorsque le client recharge accidentellement la page au milieu d'un paiement, par ex. lors du défilement vers le haut et vers le bas sur un téléphone mobile ? Le formulaire de paiement est-il effacé lorsqu'un utilisateur remarque une faute de frappe sur une page d'avis ? Que se passe-t-il lorsqu'un client appuie sur le bouton « Précédent » dans un processus en plusieurs étapes au sein de votre application à page unique ?

En fait, le comportement inattendu du bouton « Précédent » a souvent de graves problèmes d'utilisation, et certains d'entre eux sont mis en évidence dans l'article du Baymard Institute « Design Patterns That Violate « Back » Button Expectations  ». Cela vaut la peine de tester le bouton « Précédent » pour les superpositions, les lightbox, les liens d'ancrage et les sauts de contenu, le défilement infini et le comportement « charger plus », le filtrage et le tri, les accordéons, le paiement et l'édition en ligne.

Nous pouvons utiliser l'API d'historique HTML5, ou spécifiquement history.pushState() pour invoquer un changement d'URL sans rechargement de page. L'article détaille les problèmes courants et les solutions pour faire les choses correctement. Cela vaut la peine d'être lu et mis en signet, et d'y revenir de temps en temps.

Les boutons doivent-ils être désactivés ?

Il est devenu assez courant que les formulaires Web longs maintiennent le bouton « Continuer » désactivé jusqu'à ce que le client ait fourni toutes les données. correctement. Ce comportement agit comme un indicateur que quelque chose ne va pas avec le formulaire, et il ne peut pas être complété sans examiner l'entrée. Mais attention : cela fonctionne si la validation en ligne pour chaque champ de saisie fonctionne bien, et cela ne fonctionne pas du tout lorsqu'il est défectueux ou bogué.

Dans « Les boutons désactivés sucent », Hampus Sethfors met en évidence les inconvénients des boutons désactivés. Avec eux en place, nous communiquons que quelque chose ne va pas, mais nous n'expliquons pas vraiment ce qui ne va pas ou comment le réparer. Ainsi, si le client a omis un message d'erreur, que ce soit sous une forme longue sur ordinateur de bureau ou même sous une forme courte sur mobile, il sera perdu. À bien des égards, garder les boutons actifs et communiquer les erreurs est plus efficace. Et si ce n'est pas possible, fournissez au moins un moyen de sortir avec un bouton "Je ne peux pas remplir le formulaire, aidez s'il vous plaît", afin que le support client puisse revenir vers les clients en cas de problème. Si vous avez besoin d'un rappel plus détaillé sur les formulaires Web, «  Conception de formulaire : de zéro à héros » vous occupera.

Concevoir de meilleures tables d'entreprise complexes

La conception de grandes tables complexes est délicate. Il y a pas mal d'informations que nous devons montrer, et montrer ces informations sous une forme structurée nécessite pas mal d'espace. Pour le bureau, nous pourrions permettre aux clients de personnaliser le tableau, de déplacer les colonnes et de modifier les vues. En fait, dans son article « Le guide ultime de la conception de tables de données », Molly Helmuth met en évidence certaines des meilleures pratiques pour la conception de tables de données complexes, et Andrew Coyle a quelques modèles de conception de table que vous pouvez également utiliser.

En ce qui concerne spécifiquement les tables d'entreprise qui nécessitent généralement une édition et un filtrage en ligne, Fanny Vassilatos et Ceara Crawshaw ont écrit un guide détaillé des tables d'entrepriseavec des considérations utiles sur options d'affichage, comportement de défilement, en-têtes et pieds de page collants, pagination, tri, filtrage et recherche. comme le montre Joe Winter .

Mais qu'est-ce qu'on fait pour le mobile ? Transformer une table en une table légèrement plus étroite sur mobile ne fonctionne généralement pas particulièrement bien. Habituellement, nous aurions besoin de repenser l'expérience à partir de zéro. Comme le montre Joe Winter dans son article sur concevoir une table complexe pour mobilenous pourrions permettre aux clients de parcourir l'ensemble de données par colonne d'abord ou par ligne d'abord – en combinant une liste déroulante avec des cartes et des filtres pour prendre en charge ce type de la navigation. Tous d'excellents modèles que nous pouvons utiliser pour démarrer notre projet du bon pied !

La localisation dans l'UX

La localisation va bien au-delà de la traduction. Il s'agit aussi de petites nuances dans l'état d'esprit et la culture. Comme le souligne Tania Conteun produit efficace, comme pour l'UX design, ne risque pas d'être fidèle à sa version originale lorsqu'il sera disponible dans un autre pays. Au lieu de cela, l'expérience doit être alignée sur différentes cultures, goûts et styles. différents pays.

Pour vous éviter les pièges courants lors de l'introduction de votre produit sur de nouveaux marchés, Tania a collecté les principales actions de conception UX appliquées à la localisation des produits et services. En un mot : Considérez que la valeur culturelle peut changer la façon dont le contenu visuel est traité. Soyez respectueux des particularités culturelles et religieuses. Introduisez des variantes qui tirent parti des caractéristiques d'un pays. Concentrez-vous sur les habitudes et les traditions locales du monde entier. Et, last but not least, recherchez les aspects juridiques qui pourraient être impliqués. Un excellent rappel pour surmonter les hypothèses.

Améliorer l'expérience utilisateur avec les animations CSS

Les animations sont devenues un moyen populaire d'améliorer l'expérience utilisateur ces dernières années. Mais comment pouvons-nous nous assurer que nos animations et transitions CSS auront du sens pour les utilisateurs et pas seulement une belle décoration ? Stéphanie Walter a donné une conférence sur l'amélioration de l'UX avec des animations CSS lors de la conférence virtuelle Shift Remote en août de l'année dernière. Au cas où vous l'auriez manqué, elle a résumé tout ce que vous devez savoir dans un article de blog.

À partir d'un rappel de la syntaxe CSS pour construire des transitions et des animations, Stéphanie explore pourquoi certaines animations fonctionnent mieux que d'autres. Elle partage des conseils pour trouver le bon timing et la bonne durée pour que les animations de l'interface utilisateur se sentent bien et explique pourquoi et comment les animations contribuent à améliorer l'expérience utilisateur. Et comme une grande puissance s'accompagne d'une grande responsabilité, elle examine également de plus près comment vous pouvez vous assurer que vos animations ne déclenchent pas le mal des transports. Un excellent guide de référence.

Le rôle des sons

Tout comme les logos, les sons jouent un rôle important dans la création de votre identité visuelle de marque. Bien qu'il existe deux catégories de sons d'interface utilisateur sur lesquels les concepteurs se concentrent principalement (c'est-à-dire les sons de notification et d'interaction), ils doivent tous attirer l'attention des utilisateurs sur un certain événement et rendre l'expérience aussi agréable que possible.

Alors, comment les concepteurs sonores trouvent-ils le meilleur son approprié pour une certaine notification d'application ou un événement particulier se déroulant à un moment donné ? Comme l'explique le concepteur sonore et musicien Roman Zimarev : « Seuls les sons qui fournissent des informations utiles ou améliorent l'expérience de l'utilisateur doivent rester. » Assurez-vous d'étudier quels types de sons il y a, quelles sont leurs fonctions et où nous devons réellement les utiliser. De cette façon, il ne fait aucun doute que les expériences des utilisateurs seront plus agréables et mémorables. ou cela a peut-être même changé votre façon d'aborder les défis UX ? Faites-nous savoir dans les commentaires ci-dessous! Nous aimerions en savoir plus.

(vf, il)