Comment réussir dans la conception filaire

Pour la plupart, nous avons tendance à sous-estimer les choses qui sont familier pour nous. Il est également très probable que nous sous-estimerons ces choses qui, bien que nouvelles, semblent très simples à traiter. Et c'est correct dans une certaine mesure. Mais, lorsque nous sommes confrontés à des cas complexes et que toutes les mesures sont prises, une bonne et solide compréhension des bases pourrait nous aider à trouver les bonnes solutions.

Dans cet article, nous allons approfondir l'un des plus des activités simples, donc, assez souvent sous-estimées dans le développement web qui est la conception de wireframes. Nous découvrirons ce que sont les wireframes, pourquoi nous devons les concevoir, comment tirer le meilleur parti de la conception des wireframes et comment passer au niveau supérieur.

D'après le Top 20 Reasons Startups Fail rapport de CB Insights 17% des startups ont signalé le manque de convivialité comme raison de leur échec. La conception d'une interface conviviale n'est pas une tâche triviale, en particulier pour les produits volumineux et complexes où il existe de nombreuses entités, dépendances et éléments à organiser. Pour concevoir des produits aussi complexes, vous devez suivre une approche descendante et la conception filaire est la meilleure technique qui pourrait vous aider.

Commençons par définir les termes

Filaire – également connu sous le nom de schéma de page ou schéma d'écran, et c'est un guide visuel qui représente le cadre squelettique d'un site Web ou d'une application.

Une définition supplémentaire que nous examinerons est filaire – un processus de conception d'un filaire, et couramment utilisé pour présenter le contenu et les fonctionnalités sur une page qui prend en compte les besoins et les parcours des utilisateurs. Les wireframes sont utilisés au début du processus de développement pour établir la structure de base d'une page avant l'ajout de la conception visuelle et du contenu.

À première vue, le wireframing semble simple. Et c'est là que réside le problème majeur: que nous avons tendance à ne pas accorder suffisamment d'attention aux choses simples. Une façon de nous aider à tirer le meilleur parti de la filaire est de définir les objectifs du produit ou du service.

L'objectif principal du filaire que nous pourrions obtenir, est de montrer à l'équipe et aux parties prenantes quelles entités , pages et composants que l'application va avoir et comment ces éléments du produit numérique interagiront les uns avec les autres.

D'après la définition de l'objectif, nous pouvons voir l'ampleur de l'impact du wireframing tant pour le processus de développement que pour la version finale.

Lorsque nous gardons à l'esprit les objectifs du processus de wireframing, nous devons encore prêter attention aux pièges courants à éviter lors de la conception de wireframes.

Erreurs de wireframing que nous voulons éviter

• Création de wireframes pour l'intérêt de la «vérification des cases»;
• Ignorer l'étape du wireframes;
• Préparer les wireframes après les conceptions visuelles;
• Ne pas comprendre pourquoi utiliser les wireframes.

Les wireframes devraient précéder l'étape de la conception visuelle, non vice versa. C'est comme décider de la pile technologique pour votre application après avoir écrit le code.

La conception filaire jette les bases de la qualité de la conception, et mieux nous comprenons l'objectif de cette phase, plus nous pourrions obtenir d'avantages. Alors approfondissons et découvrons pourquoi nous devons concevoir des structures filaires et quelles valeurs cette technique apporte.

Les entreprises qui ne connaissent pas la conception de produits peuvent se féliciter de la pratique de sauter la conception filaire car elle leur permet de réduire les coûts du projet, mais cette décision peut conduire à un échec potentiel à long terme. Et vous, en tant que concepteur, devez expliquer pourquoi nous le faisons, comment cela aidera le produit final et comment cela pourrait même permettre d'économiser de futures dépenses.

Ensuite, examinons quelques points qui pourraient vous aider à mieux comprendre pourquoi nous avons besoin wireframes et découvrez comment les wireframes aident à obtenir des commentaires de vos développeurs, clients et futurs utilisateurs de votre produit. créer une représentation visuelle du futur produit et le démontrer à l'équipe pour les révisions nécessaires. Les wireframes vous aident également à montrer à votre équipe quels écrans l'application va avoir, quels éléments et contrôles seront sur chaque écran et comment tous les éléments interagiront les uns avec les autres. De plus, la recherche à travers les wireframes est bien plus rapide que la lecture des spécifications. En outre, cela nous aide à éviter les écarts de portée entre les estimations initiales et les estimations finales.

Impliquez tous les membres de l'équipe dans la phase de conception du produit

Nous avons tous été en mesure d'avoir créé une conception de premier ordre, uniquement être confronté à des contraintes de développement. L'utilisation de wireframes nous permet d'impliquer les développeurs dans les discussions sur les conceptions aux premiers stades, leur permettant de fournir des commentaires et de suggérer des changements avant de commencer à travailler sur la conception visuelle. De cette façon, vous pouvez accélérer le processus de conception et éviter de gaspiller du temps et de l'argent.

Tenir une démo pour les clients

Obtenir des commentaires rapides de vos clients et parties prenantes est un élément important du processus de conception. De plus, nous avons tous connu de multiples demandes de changement de la part de nos parties prenantes et c'est normal. Avec les wireframes, nous pourrions rendre ce processus plus efficace. La modification des prototypes nécessite plus de temps et d'efforts que la modification des structures filaires, elle vous permettra d'être plus agile et de ne pas perdre de temps supplémentaire à retravailler.

Effectuez des tests utilisateur

Selon Eric Ries, auteur de Lean Startup plus tôt vous effectuez des tests utilisateur, mieux c'est – personne ne veut déployer une application et découvrir que les utilisateurs ne savent pas comment l'utiliser correctement. Les wireframes peuvent aider les concepteurs à obtenir de précieux commentaires des utilisateurs potentiels et à ne pas consacrer de temps au développement de prototypes interactifs complexes lorsqu'ils ne sont pas nécessaires.

Le fait que les concepteurs d'interfaces utilisateur / utilisateur utilisent des wireframes ne signifie pas nécessairement qu'ils le font correctement. Pour cela, vous devez vous souvenir et suivre les meilleures pratiques.

Wireframing Best Practices

Pour obtenir les meilleurs résultats et servir de base solide pour une meilleure interface utilisateur, vous devez suivre plusieurs règles simples:

1. Minimisez l'utilisation de la couleur dans les wireframes

Si vous utilisez des palettes de couleurs riches dans vos wireframes, rappelez-vous l'objectif du wireframing (pour montrer quels éléments le produit va avoir et comment ils devraient interagir les uns avec les autres) et pensez si des couleurs supplémentaires vous aident à y parvenir.

Dans certains cas, ils le pouvaient. Mais en général, l'ajout de couleurs à vos wireframes peut distraire l'attention du spectateur et rendra sûrement les mises à jour plus difficiles. De plus, il y a un autre problème important à considérer – tous les clients n'ont pas une bonne compréhension des techniques UX et peuvent prendre des wireframes colorés pour les conceptions finales.

Cependant, cela ne signifie pas que vous ne devez jamais utiliser de couleur sur les wireframes et vous en tenir strictement à la palette noir et blanc. Parfois, l'utilisation de la couleur pour mettre en évidence des composants spécifiques est justifiée. Par exemple, vous pouvez utiliser le rouge pour les états d'erreur ou le bleu pour les notes, etc.

2. Utiliser la conception simple de composants

Lorsque vous ajoutez des composants à vos wireframes, optez pour des conceptions de base. Les wireframes ne sont pas destinés à contenir des composants soigneusement conçus et détaillés. Au lieu de cela, ils devraient être facilement reconnus par les membres de votre équipe et les parties prenantes. L'ajout de composants détaillés vous coûtera beaucoup de temps et d'efforts sans être particulièrement utile.

3. Maintenez la cohérence

Les composants similaires doivent être identiques sur tous vos wireframes. Si les mêmes composants semblent différents, les développeurs sont susceptibles de se demander s'ils sont réellement les mêmes et même d'ajouter du temps supplémentaire aux estimations en raison de conceptions différentes. Lorsque vous travaillez sur des images filaires, souvenez-vous d'une règle simple: soyez cohérent et essayez de ne pas créer de confusion.

4. Utiliser du contenu réel

De temps en temps, nous pouvions voir que les concepteurs d'interface utilisateur / UX n'ajoutent pas de contenu réel sur les wireframes et utilisent lorem ipsum à la place. C’est une erreur courante que peu de designers réalisent même qu’ils font. Vous pouvez vous opposer et dire que le contenu n'est pas disponible au stade de la conception. Eh bien, il suffit d'utiliser la version provisoire du contenu.

Le contenu a un impact sur la conception que vous allez créer, et le brouillon de contenu vous aidera à prendre les bonnes décisions et à livrer la superbe conception. Si vous utilisez lorem ipsum cependant, vous ne verrez pas l'image complète et devrez probablement apporter de nombreux ajustements à l'interface utilisateur ou pire encore – vous créerez un design qui ne fonctionne pas. De plus, le contenu réel ajoutera de la valeur à vos structures filaires, expliquera mieux le contexte et indiquera peut-être que vous devez déjà commencer à rassembler le contenu réel.

5. Utiliser les annotations

Il peut arriver que certaines solutions de conception ne puissent pas être illustrées visuellement, de sorte que les parties prenantes ou les développeurs peuvent avoir des questions à leur sujet. Par exemple, la logique derrière certains contrôles. Dans de tels cas, vous pouvez fournir des annotations à l'écran pour expliquer la logique derrière cela. De cette façon, votre équipe comprendra vos solutions et vous n'aurez pas besoin de passer du temps à en discuter.

6. Faible à haute fidélité

Il n'y a pas de règle stricte. Parfois, vous devriez opter pour des images filaires basse fidélité, tandis que certains projets peuvent nécessiter des images haute fidélité. Cela dépend du projet, donc si vous avez envie d'ajouter plus de détails aux wireframes – n'hésitez pas à le faire. Mais selon Eric Ries ne faites pas de travail supplémentaire lorsque cela n’apporte pas de valeur, commencez par les bases puis ajoutez des détails aussi longtemps que nécessaire. Par exemple, si vous devez attirer l'attention des développeurs sur une solution personnalisée, ajoutez plus de détails pour l'illustrer dans vos wireframes.

7. Étendre les structures filaires aux prototypes

En tant que concepteurs, nous travaillons avec différents produits, certains d'entre eux ont des interactions simples et communes, et certains ont des interactions assez avancées. Parfois, les wireframes ne suffisent pas à illustrer l'interaction d'interfaces complexes et peu communes, mais au lieu d'écrire de longues notes et de passer des heures sur des explications, vous pouvez étendre vos wireframes à des prototypes interactifs.

La bonne nouvelle est qu'aujourd'hui nous avons une large gamme d'outils simples mais très puissants comme Figma Invision Adobe XD UXPin Axure Moqups etc. et nous devons absolument les revoir et choisir le meilleur outil pour concevoir les wireframes et développer

Outils de conception filaire

Il est maintenant temps de choisir un superbe outil de filaire qui vous aidera à créer des conceptions étonnantes et à rationaliser votre flux de travail. Il existe de nombreuses options différentes que vous pouvez utiliser pour le wireframing, et vous en avez peut-être déjà utilisé certaines auparavant. Je voudrais vous donner une compréhension de base de leur différence.

La plupart des outils filaires sont conçus pour:

• Simplicité
  Ils ont une faible barrière à l'entrée et sont parfaits pour les personnes qui font leurs premiers pas dans la conception UI / UX et manquent d'expérience en utilisant des logiciels plus sophistiqués.
• Collaboration
  Ceux-ci sont riches en fonctionnalités pour le travail d'équipe. La collaboration est l'épine dorsale du développement de logiciels modernes, donc les meilleurs outils de wireframing fournissent non seulement beaucoup de fonctionnalités mais permettent une collaboration efficace et facile entre tous les membres de l'équipe impliqués dans le processus de conception.

Voici les outils filaires les plus largement utilisés collaboration:

• Figma
  Un puissant outil basé sur le cloud, disponible dans une version Web et des applications de bureau pour Windows et macOS. Figma est livré avec de nombreuses fonctionnalités puissantes pour la construction de wireframes, de prototypes, d'interfaces utilisateur, etc. (voir le tableau ci-dessous).
• Sketch
  Cet outil est extrêmement populaire auprès des concepteurs d'interface utilisateur / UX. Si vous devez aller au-delà du jeu d'outils Sketch par défaut, vous pouvez utiliser des dizaines de plugins pour obtenir des fonctions supplémentaires. Contrairement à beaucoup de ses concurrents, Sketch n'est disponible que sur macOS et vous aurez besoin d'une solution tierce pour la collaboration.

Il existe de nombreuses applications que vous pouvez utiliser pour concevoir des wireframes. Vous ne devez pas faire un choix basé uniquement sur les fonctionnalités fournies dans l'application. Au lieu de cela, je vous conseillerais d'essayer de les explorer tous et de décider lequel vous convient le mieux. Vous trouverez ci-dessous une liste de certains des outils les plus populaires pour commencer.

À titre d'exemple de la puissance des outils de conception modernes, je voudrais partager ma propre expérience et vous montrer comment nous mettons en place un processus de conception filaire efficace avec l'un des outils ci-dessus.

Étude de cas: comment nous mettons en place un processus filaire à travers plusieurs équipes

Contexte

La société dans laquelle je travaillais construisait un complexe fintech produits numériques. Outre l'équipe de conception, il y avait une équipe professionnelle d'analystes commerciaux (BA). Ils ont préparé les exigences et créé des wireframes basse fidélité qu'ils ont transmis à notre équipe de conception.

Choisir l'outil

Nous devions choisir un outil tout-en-un pour le BA et les équipes de conception. Comme la plupart des analystes commerciaux ont des compétences de conception assez faibles, nous voulions trouver un outil qui serait suffisamment simple pour les BA et – en même temps – assez puissant pour les concepteurs. De plus, une collaboration facile était la priorité de notre équipe. Sur la base de ces critères, nous avons opté pour Figma.

Création de la bibliothèque de composants

Pour rationaliser le processus de conception du produit, nous avons créé une bibliothèque personnalisée de composants que l'équipe BA pourrait utiliser. Cela nous a permis d'accélérer le wireframing, car les analystes commerciaux pouvaient rapidement utiliser des blocs prêts à l'emploi au lieu de dessiner les leurs.

Formation de l'équipe

Pour montrer comment utiliser Figma et la bibliothèque de composants, nous avons organisé une atelier pour notre équipe BA. Nous avons également trouvé important de leur enseigner quelques fonctionnalités supplémentaires, telles que le prototypage.

Résultat

Dans notre cas, Figma s'est avéré efficace pour le wireframing et la collaboration, même si les membres de l'équipe étaient situés en Ukraine, en Australie et aux Philippines. Nous utilisons actuellement Figma pour le canal de communication – il s'est avéré plus pratique de collaborer sur les wireframes par courrier ou dans des messagers.

Résumé

Étant une pratique simple, la conception de wireframes ne reçoit généralement pas assez de sensibilisation de notre part , concepteurs, lorsque nous les affrontons pour la première fois.

Par conséquent, le manque d'attention pour cette technique entraîne un certain nombre de défauts, lorsque nous ajoutons beaucoup de décoration aux wireframes ou créons des wireframes low-fi pour le souci de cocher la case lorsque le projet nécessite plutôt une solution plus détaillée, ou même sauter cette étape et passer directement à la conception d'interface visuelle.

Habituellement, toutes ces erreurs sont le résultat d'une mauvaise compréhension des deux objectifs de conception des structures filaires ( c'est de montrer quels éléments le produit va avoir, et comment ils devraient interagir les uns avec les autres ), ainsi qu'une mauvaise compréhension du moment où les wireframes pourraient nous aider, comme:

• Les wireframes pourraient aider le équipe pour obtenir plus de pr
• Les wireframes pourraient aider à impliquer tous les membres de l'équipe dans la conception des processus et éviter les erreurs d'ingénierie qui affecteront le processus de développement.
• Les wireframes pourraient nous aider à faire des présentations précoces aux clients, aux parties prenantes et à effectuer des tests utilisateurs

Aujourd'hui, en tant que concepteurs, nous avons plus de chance que jamais car il y a des dizaines d'outils disponibles pour concevoir des wireframes et également les intégrer en douceur.

La seule chose que nous devons faire est de consacrer un peu de temps à incorporer à la fois la technique et les outils dans notre propre processus de conception, et trouver un moyen de les faire fonctionner pour que nous processus de conception de produits au niveau suivant. Qu'ils peuvent certainement.

(ah, yk, il)