Imaginez cette situation: vous travaillez sur un nouveau site Web et êtes en train de créer les wireframes. Lors de vos réunions de révision, vous recevez des commentaires de votre client et de votre équipe, anticipant la génération inévitable de demandes de changement, de suggestions d'amélioration et de mises à jour. Après plusieurs réunions de révision, vous vous sentez coincé dans une boucle sans fin, des modifications sont apportées et annulées, la demande de vos clients pour plus de fonctionnalités semble s'éterniser et parvenir à un accord semble impossible.

Ou, peut-être, le contraire est vrai: vous soumettez vos wireframes, tout le monde acquiesce, et les wireframes sont parfaits pour passer à l'étape suivante. Mais, à mesure que le travail progresse, vous constatez qu'il ne reflète pas votre intention - davantage de fonctionnalités sont encombrées et le flux se fait sentir.

Qu'est-il arrivé? La réponse est simple: manque de communication.

Communiquez plus efficacement avec vos wireframes

L'un de nos principaux outils de communication en tant que concepteurs UX sont les wireframes, 'Blueprints' en noir et blanc qui font de nous les architectes de la conception web. Bien que les wireframes n'aient pas les détails colorés de la conception visuelle, ils sont la base de la conception du produit, tout comme les plans architecturaux sont la base de la construction finale d'un bâtiment.

Les wireframes sont plus qu'une carte statique. En utilisant l'analogie d'une maison, ils montrent non seulement une pièce, mais plutôt toute la maison et toutes les différentes façons dont un utilisateur peut se déplacer. Ils comprennent également l'intérieur, définissant l'objectif principal de chaque pièce.

En outre, les wireframes montrent plus que de simples pièces. Ils aident à planifier les voyages et à définir l'expérience qu'un visiteur aura lors d'une promenade dans la maison. Vous pouvez utiliser des wireframes pour de nombreuses choses, et il y a beaucoup de choses que votre équipe et votre client devront comprendre à mesure qu'un projet évolue. Une partie du travail de concepteur ux est d'être traducteur, en veillant à ce que toutes les personnes impliquées comprennent la vision envisagée.

Faire passer vos wireframes au niveau supérieur avec une carte filaire

Alors comment nous communiquons le parcours de l'utilisateur? Comment cartographier l'expérience utilisateur d'une manière facile à lire afin que votre équipe et votre client puissent la visualiser? Comment vous assurer que le voyage reste simple et offre tous les éléments nécessaires pour chaque pièce sans créer obstacles frustrants ?

est express et nodejs un framework côté client

Voici un outil utile pour communiquer et organiser vos wireframes plus efficacement: une carte filaire .

Une carte filaire est un moyen de faire correspondre vos structures filaires au plan du site de votre site Web (ou aux flux d'utilisateurs de votre produit). Pour ce processus de mappage, vous avez besoin de modèles filaires qui représentent un type spécifique de page (par exemple, page de formulaire vs page de destination vs page de liste de produits vs page de détails du produit). C'est comme décider d'abord de l'objectif de chaque pièce d'une maison, qui détermine ensuite les éléments de chaque pièce. Un modèle serait une salle de bain avec des toilettes et un lavabo comme éléments de contenu communs.

La création d'une carte filaire vous sera bénéfique de plusieurs manières:

• Aide à estimer la portée du projet (de combien de modèles filaires ai-je besoin?)

• Fournissez un aperçu de tous les différents modèles qui doivent être créés (qui peuvent également être utiles comme index d'un style , ou une simple liste de contrôle pour identifier les modèles qui peuvent être réutilisés pour d'autres pages)

  
  
  

• Améliorez la communication sur le but de vos wireframes et aidez vos clients à mieux comprendre le parcours utilisateur

  à quoi sert l'étincelle

Comment créer une carte filaire?

La création d'une carte filaire comporte trois étapes.

Étape 1: identifier les éléments de contenu

Avant de commencer à plonger dans les wireframes, il est utile de réfléchir à toutes les différentes pièces qui doivent vivre dans un wireframe, comme les éléments que vous voulez avoir dans chaque pièce pour décider de la taille de votre pièce. Pour un site e-commerce, les exemples peuvent être: barre de recherche, filtrage des produits, description du produit, image du produit, prix, sélecteur de quantité, bouton `` ajouter au panier '', produits recommandés, icône du panier ... En tenant compte des composants d'interface nécessaires.

• Commencez à lister tous les éléments de contenu (composants) auxquels vous pouvez penser - pensez aux fonctionnalités que vous souhaitez offrir pour aider l'utilisateur à aller de l'avant et à répondre aux besoins de l'entreprise.

• Ajoutez une autre colonne pour le type de page (par exemple, page de détail du produit, panier, page de destination, etc.) pour regrouper les éléments de contenu.

• Dans une troisième colonne, vous classez vos articles de contenu par importance (c'est-à-dire faible, moyenne, élevée).

• Si vous avez des user stories, vous pouvez ajouter une autre colonne pour faire référence aux numéros d'histoires associés.

Un exemple de liste d'éléments de contenu

Pourquoi le classement des éléments de contenu est-il utile? Il a deux objectifs principaux:

1. Créer une hiérarchie: Le classement définit la hiérarchie du contenu pour chaque page et vous donne un guide pour vos wireframes (quel contenu doit être en haut).

2. Évitez l'encombrement: La hiérarchisation de vos éléments de contenu vous aidera à garder une concentration minimale et vous aidera à prendre des décisions avec votre équipe sur le contenu dont vous avez vraiment besoin.

Les éléments de contenu définissent la portée du travail. Avoir une liste d'éléments de contenu vous aidera à traverser plus facilement la phase de planification et peut être utilisée pour définir le processus et estimer le travail filaire. (Par exemple, comment structurer nos sprints? Quel contenu abordons-nous en premier?)

La liste de contenu est également très utile lors de toute discussion concernant les exigences. Vous pouvez facilement identifier les éléments de contenu que vous avez acceptés et les éléments supplémentaires demandés et considérés comme une demande de modification.

développement piloté par les tests vs développement piloté par le comportement

Étape 2: définir le plan du site et les flux d'utilisateurs

Vous disposez des éléments de contenu dont vous avez besoin et regroupez-les en pages. Jetons un coup d'œil à un aperçu en les publiant. Comment sont-ils interconnectés? Comment un utilisateur les navigue-t-il pour atteindre ses objectifs?

Accédez à ce niveau en créant un plan de site (pour les sites Web) ou un flux d'utilisateurs (pour les applications):

• Plan du site: Affiche un aperçu de toutes les pages et de leur hiérarchie.

• Flux d'utilisateurs: Découvrez comment les pages s'interconnectent pour les principaux scénarios d'utilisation.

Version simplifiée d'un plan de site et d'un flux d'utilisateurs

Étape 3: mappez vos wireframes

Maintenant que vous savez quel contenu fournir, sur quelles pages le fournir et comment ils sont connectés, vous pouvez commencer à travailler sur vos wireframes.

• Définissez les modèles de page qui nécessitent des wireframes en fonction du plan du site et des flux d'utilisateurs. (Chaque page qui nécessite une fonctionnalité unique sera un modèle différent.)

Modèles de fils représentant des pages uniques

• Si vous trouvez des variations mineures pour certains modèles (par exemple, une page de contenu avec un curseur dans l'en-tête ou non), travaillez sur des pages maîtres et ignorez ces variations mineures. Vos wireframes doivent inclure tous les composants principaux qui vivraient dans ce modèle de page maître.

• Mappez maintenant vos wireframes au plan du site et aux flux d'utilisateurs. Vous pouvez mettre à jour votre plan de site avec des miniatures filaires pour chaque type de page. Le codage couleur ou la numérotation permet de synchroniser les choses, de donner une meilleure vue d'ensemble et d'aider les clients à comprendre les wireframes dont ils ont besoin.

  exemple de serveur client node js

Un exemple de plan de site à code couleur

Un exemple de plan de site à code couleur

Un exemple de modèle de carte filaire. Le plan du site est à gauche et les wireframes sont à droite avec les codes couleurs correspondants.

Pour les sites très complexes, un système de numérotation peut avoir un sens par rapport au codage couleur

Pourquoi ce processus de cartographie est-il utile? C'est un excellent outil à utiliser lors de la création d'une vue d'ensemble de haut niveau d'un projet. Plutôt que de simplement regarder les wireframes autonomes page par page, la carte filaire vous permettra, ainsi qu'à votre équipe, de voir les wireframes dans leur contexte. D'où viennent les utilisateurs? Où vont-ils maintenant?

Pour revenir à l'analogie de la maison, c'est le plan qui est créé pour visualiser la structure de la maison, par conséquent continuez à regarder les premières représentations de chaque pièce (qui sont les wireframes pour chaque modèle de page), puis à partagez le résultat final et la vue d'ensemble.

Amener le flux de travail filaire au niveau supérieur

En résumé, voici pourquoi les cartes filaires sont un outil de communication et d'organisation utile:

• Ils aideront à la planification. (Quel contenu avons-nous et de quels wireframes avons-nous besoin?).

• Ils seront utiles comme liste de contrôle pendant le processus de création du projet. (Quels composants puis-je réutiliser pour rester cohérent?).

• Ils aideront à estimer le coût et la durée du projet, ainsi qu'à réduire les inefficacités.

• Ils vous aideront à suivre vos tâches (travail terminé vs travail toujours dans l'arriéré).

• Ils vous aideront à mieux communiquer le but et le but de vos wireframes lors des revues (comment les wireframes sont utilisés pour l'ensemble du projet).

Une carte filaire est un outil utile pour estimer la portée du travail au début d'un projet et comme liste de contrôle tout au long de votre processus de travail. Cela aidera à améliorer le processus de prise de décision de votre équipe, à garder tout le monde sur la même longueur d'onde et à les recentrer périodiquement sur la vue d'ensemble de haut niveau du projet. Bonne cartographie!