Un cas pour les wireframes de feuilles de calcul | par Clair Rock [they/them] | Octobre 2020

1*8kFWObrkDAoZyambw3Jkiw


Pourquoi j'ai changé, et je pense que vous devriez aussi.

Clair Rock (ils / eux)

En tant qu'architecte de l'information, vous devez parfois créer des wireframes. Celles-ci devraient être super lo-fi, mais un client peut vous demander d’en faire plus (ce qui, espérons-le, ne le fera pas, car c’est à cela que sert le concepteur et ce n’est pas une structure filaire). Pour les structures filaires précédentes, j'ai utilisé Sketch, ou j'ai simplement dessiné quelque chose avec un crayon et du papier. Sketch est un outil simple qui est devenu une norme de l'industrie; il permet aux utilisateurs d'accomplir des tâches de conception visuelle de base sans les obliger à trouver une suite complète d'outils pour le faire, contrairement à certains autres outils là-bas * coughcoughAdobecoughcough *. De nombreuses sociétés de logiciels de conception se vantent de l'utilité de leurs outils, de tout ce qu'elles peuvent faire, mais en tant qu'utilisateur, je ne devrais pas avoir à suivre un cours ou à passer des centaines d'heures à trouver des logiciels. C'est juste une mauvaise expérience utilisateur … généralement soutenue par une mauvaise IA.

Avant d’entrer dans le vif du sujet, j’ai le sentiment qu’il est important de comprendre ce qu’est un wireframe. J'ai entendu et travaillé avec de nombreuses personnes qui utilisent le mot "wireframe" de manière vague. Je souhaite donc être sur la même longueur d'onde. Nous utilisons des wireframes pour comprendre la mise en page de conception d'un site Web. Ils sont une représentation basse fidélité des pièces qui doivent être réunies pour créer un site Web. C’est le squelette, aussi simple que cela. Le sang et les tripes, le design visuel; cela vient plus tard.

Mais pourquoi les wireframes sont-ils importants pour les architectes de l'information? Facile. C'est la première fois dans un projet que vous pouvez voir toutes les stratégies derrière l'IA connectées à une représentation visuelle du site. Les chemins à travers le site commencent à devenir visibles avec un filaire. Lorsqu'ils sont utilisés de manière appropriée et au bon moment dans un projet, les wireframes permettent de modifier la structure avec beaucoup moins de maux de tête. Après toute réinitialisation, un os est plus facile que la chirurgie reconstructive.

Ce filaire n'est pas lié au projet abordé dans cet article.

Je ne suis pas un concepteur visuel, mais je donnerai volontiers à un client un filaire statique de base, et je sais que je ne suis pas seul ici. Ce simple livrable peut suffire. Mais alors l'inévitable se produit. Quelque chose survient et un changement doit être fait. Le client décide qu'il veut aller dans une direction complètement différente. Peut-être que le client est confus par Lorem Ipsum et ne comprend pas le «contenu» qui est un faux latin utilisé pour remplir l'espace. Ce sont de véritables problèmes. Ces choses arrivent tout le temps. Et généralement, ces problèmes nécessitent de revenir à la case départ, peut-être à la case 2, de gratter le travail et de proposer une autre interprétation (du moins d'après mon expérience). Et – eh bien, soyons réalistes, c’est ennuyeux. Cela ajoute du temps qui peut ne pas exister pour faire du travail supplémentaire. Il est rarement possible de faire un changement «simple» en temps opportun. Il n’est pas logique que la création d’un outil aussi utile et simple accompagne ce travail inutilement stressant. Non seulement une simple structure filaire statique peut entraîner les problèmes ci-dessus, mais elle n’en offre pas assez. Cela peut donner à votre client une idée de la façon dont les choses pourraient fonctionner, mais cela peut demander beaucoup à quelqu'un venant d'un point de vue différent. Ils nécessitent beaucoup plus d'explications. Et ont tendance à avoir un rendement assez faible, du moins d'après mon expérience.

Et c'est pourquoi je suis passé à la création de wireframes dans des feuilles de calcul.

Ce concept a été porté à mon attention par Abby Covert après avoir réalisé des wireframes sans éclat dans Sketch. Dit-elle,

«Je sais que les feuilles de calcul sont votre langage d'amour; avez-vous déjà essayé de créer une feuille de calcul filaire? »

La réponse courte était non. Non, je ne l'ai pas fait. Mais j'avais absolument besoin d'en savoir plus, car je trouve peu de choses plus sexy qu'une feuille de calcul bien formatée.

Donc, étant la personne que je suis, j'ai passé les prochaines heures à mener plus de recherches que nécessaire, à essayer d'en apprendre davantage sur ce beau concept qui sonne. J'ai été choqué par le peu que j'ai trouvé. Alors, j'ai ouvert Google Sheets et j'ai commencé à fouiner. Et devine quoi? J'ai rapidement réalisé des wireframes assez impressionnants. Ces wireframes se sont avérés extrêmement utiles pour les prochaines étapes du projet sur lequel je travaillais. Ils avaient du sens, étaient facilement modifiables, contenaient du contenu réel, créaient un espace de travail collaboratif et étaient cliquables, navigables, donnant à chacun de tous les niveaux d'expérience la possibilité de comprendre comment les utilisateurs navigueraient sur le site. C'était incroyable de voir comment un artefact aussi simple, une feuille de calcul, pouvait contenir un aspect aussi «complexe» et essentiel de wireframes.

L'utilisation de ces tableaux filaires a permis au concepteur, au client et à moi-même (l'architecte de l'information, le stratège de contenu et le chef de projet… j'aime porter beaucoup de casquettes) de collaborer tout au long du projet. Nous pourrions travailler sur les sites Web IA, la conception et la création de contenu de manière transparente. Je pouvais apporter les modifications demandées par le client en un rien de temps, sans stress. Cela a créé un transfert si simple au concepteur, qui fabriquait les conceptions étoffées. Et les maquettes entièrement rendues ont pu contenir le contenu réel fourni par le client dans le wireframe.

Ce filaire crée un simple outil cliquable, mais il condense également plusieurs fichiers en un seul. Le client n'a qu'à garder une trace d'un seul fichier qui contient des multitudes. Pour ce projet, ma feuille de calcul contenait un plan du site simple et facile à lire. Grosse surprise ici! Le plan du site était cliquable, ce qui permettait au client d'accéder à la page spécifique qu'il souhaitait consulter. Le fait d'avoir ce plan du site dans le même document montre également la taxonomie du site. Donner à chacun une chance de voir et d'interagir avec l'architecture du site pour s'assurer qu'elle est simple, productive et facilement navigable. Et ramenez-le – la partie centrale de ce document teste cette navigabilité.

Maintenant, je ne peux pas rester ici et vanter cet outil comme la meilleure chose qui soit, bien que proche, il ne résout toujours pas tout. Il y a le trou flagrant évident qui est l'aspect de la conception visuelle. Vous ne pouvez pas obtenir ce look filaire haute fidélité à partir d'une feuille de calcul (vous pourriez probablement vous en approcher si vous avez suffisamment essayé). Je ne dis en aucun cas qu’un concepteur n’est pas nécessaire dans le processus de planification de la création ou de la révision d’un site Web. Ces wireframes doivent être utilisés comme un tremplin très stable dans le processus. Une équipe doit être en mesure d'avoir une solide compréhension de la stratégie de contenu et une IA se sentir complètement confiante dans le travail squelettique avant d'essayer d'ajouter la couche visuelle. Un concepteur devrait entrer dans ce processus avec une direction apparente fournie. Laissez le designer faire ce qu'il fait de mieux et rendez cette chose aussi jolie que diable!

Je suis converti. Je ne veux plus jamais revenir à la création d'un wireframe dans Sketch. Je ne veux plus jamais passer de temps à connecter des lignes. C’est vrai, j’adore une bonne feuille de calcul, ce n’est pas difficile de m’intéresser à une feuille de calcul, alors je suis au volant de celle-ci. Je ne me vois pas revenir à Sketch pour les wireframes de si tôt; Je ne vois pas l'intérêt d'InVision pour les wireframes cliquables. Je n’ai pas l’intention de me sentir «moins qualifié» parce que je ne veux pas ou n’ai pas le temps d’apprendre un outil complexe. Pourquoi utiliser ces programmes alors que je peux créer une feuille de calcul.

– – – – – –

Comment fonctionne ce wireframing de feuille de calcul magique? Permettez-moi de vous offrir un bref aperçu. Ne t'inquiète pas. Il y a un modèle avec lequel vous pouvez jouer à la fin de cela. 🙂

Avant de plonger, il y a une information essentielle à noter: je n'ai créé ces wireframes qu'avec Google Sheets. Je ne suis pas fan de la suite Microsoft Office ou de la suite Apple iWork et je travaille presque exclusivement sur les plates-formes Google, donc cet aperçu concerne uniquement les fonctions disponibles dans Sheets. Ces fonctions peuvent être possibles dans les autres suites, mais je n'en ai pas connaissance.

Maintenant, pour rendre les choses cliquables!

Et c'est tout. (J'ai laissé quelques éléments de navigation sans liens dans le modèle, vous pouvez donc suivre ces étapes).

À ce stade, si vous avez du contenu réel que vous souhaitez ajouter au wireframe, allez-y et ajoutez-le. Si vous n'avez pas de contenu, mais que vous avez une idée de la structure de la page, créez cette structure dans la feuille de calcul.

Si vous prévoyez d'avoir des liens dans le texte, vous pouvez également utiliser les étapes ci-dessus pour ajouter des liens vers un contenu spécifique.

Si vous souhaitez passer du temps à explorer cette idée, j'ai créé un modèle pour vous. Vous pouvez le trouver ici. Téléchargez simplement le document, ajoutez-le à votre disque et faites ce que vous voulez!

J'espère que vous apprécierez cet outil incroyable et que vous trouverez une utilisation pour les wireframes de feuilles de calcul dans votre travail!

Merci d'avoir lu.

Le Collectif UX fait un don de 1 USD pour chaque article publié sur notre plateforme. Cette histoire a contribué à Designers noirs de la région de la baie: une communauté de développement professionnel pour les Noirs qui sont des concepteurs et des chercheurs numériques dans la région de la baie de San Francisco. En se réunissant en communauté, les membres partagent l'inspiration, la connexion, le mentorat par les pairs, le développement professionnel, les ressources, les commentaires, le soutien et la résilience. Le silence contre le racisme systémique n'est pas une option. Développez la communauté du design en laquelle vous croyez.



Source link

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *