Précision pixel des wireframes?
On m'a demandé de concevoir une série de wireframes interactifs en utilisant Axure pour un client qui voulait voir comment nous aborderions un processus de conception. J'ai fait les dessins en niveaux de gris avec une fidélité relativement moyenne, mais certains autres concepteurs m'ont fortement recommandé de rendre les filaires aussi parfaits que possible en pixels (même si nous utilisons des espaces réservés et aucune couleur). Je suis un peu confus à ce sujet car le concept de wireframes est de montrer rapidement une preuve de concept et de conduire le processus de réflexion.
Je comprends qu'un filaire propre et bien conçu est agréable aux yeux et pourrait avoir une réponse plus positive, mais le défi est que le rendre parfait en pixels\précis nécessite autant de temps que de créer un design visuel et je ne veux pas entrer dans le piège des utilisateurs qui pensent que c'est le dernier Shell sur lequel la couleur vient d'être appliquée et que la conception est terminée.
Ma question est donc de savoir s'il existe un réel avantage à rendre les pixels filaires parfaits et où sont ces cas spécifiques.
J'ai regardé les questions Combien de détails dans les wireframes? et tiliser la couleur dans les wireframes… est-ce un "non non"? mais ils ne répondent pas à la question que j'ai.
Edit : Eh bien, ce que j'entendais par pixel parfait était comme un alignement parfait, assurant que le contenu de la grille a un espacement exact de chaque côté et nous utilisons les tailles d'icônes exactes qui serait utilisé dans un espace mobile
À mon avis, avoir des wireframes pixel imparfait est certainement la voie à suivre. Je préfère un style sommaire pour deux raisons:
- Cela stimule mon inspiration. En ne se souciant pas de créer des wireframes parfaitement esthétiques, il est plus facile de tester différentes itérations et je suis beaucoup plus capable d'élaborer des approches créatives que lorsque créer des wireframes stricts et parfaitement alignés.
- Habituellement, lorsque les clients voient des images filaires parfaites en pixels, ils le jugent comme s'il s'agissait d'un design fini. En utilisant un style sommaire, il est beaucoup plus clair qu'il s'agit d'un travail conceptuel en cours. Vous ne pouvez pas imaginer à quelle fréquence j'ai des clients qui me demandent pourquoi je ne l'ai pas fait n'utilisez aucune couleur.
Au fait, un très bon outil pour créer des wireframes sommaires est Balsamiq Mockups .
Je dirais qu'un degré élevé de polissage dans les wireframes - et certainement un alignement parfait des pixels y tombe - est une indication pour un client expérimenté que vous gaspillez leur argent .
N'oubliez pas que les wireframes sont une langue apprise; ils sont un raccourci pour communiquer une idée, et ils ne fonctionnent que lorsque tout le monde dans le public parle couramment cette langue. Ils sont l'équivalent du pseudocode en ce qu'ils portent délibérément avec eux le contexte selon lequel "ce n'est pas fini et je veux m'assurer que nous comprenons tous cela." Ce sont les quantités minimales absolues de travail nécessaires pour transmettre une idée visuellement.
L'alignement parfait des pixels confond ce message. Cela dit à votre client que c'est en quelque sorte plus qu'un filaire, et quand ils découvriront que ce n'est pas le cas, un client expérimenté se demandera (et devrait) combien d'argent vous avez brûlé en alignant parfaitement ces lignes.
Vos collègues ont tort. Il est inutile de produire un filaire avec autre chose que le niveau de fidélité le plus bas. S'ils s'inquiètent du niveau d'expérience de certains des intervenants du public (comme ils devraient l'être), leur objectif devrait être de les identifier et de déterminer quels artefacts de conception seront appropriés pour ces personnes.
Edit: bonne discussion ici: conseils pour la démonstration de wireframes aux clients
Ne faites pas de wireframes pixelperfect si:
- vous venez de commencer à comprendre comment le site Web devrait se comporter. Itérations rocheuses.
- les wireframes ne seront utilisés qu'en interne et pour faire passer votre idée, je jette juste des trucs ensemble sur un morceau de papier mais si je vais présenter et livrer des wireframes au client, je mettrais plus d'efforts sur eux.
Faire des wireframes pixelperfect si:
- votre outil filaire vous permet de travailler rapidement (comme il prend en charge les grilles et les objets à alignement automatique). Sinon, ne le transpirez pas. Et vous ne commencez absolument pas par jouer avec les boîtes d'alignement.
vous allez tester les wireframes comme prototype avec les utilisateurs. Souvent, il vaut mieux que les wireframes semblent alignés et bien conçus car un croquis rugueux avec de mauvais contrastes, etc. pourrait créer des problèmes d'utilisation qui ne se produiraient pas si le participant au test essayait d'utiliser quelque chose qui ressemblait à un site presque fini.
vous devez vraiment comprendre si le contenu réel s'intégrera dans votre solution. Par exemple, vous pourriez penser qu'une page de catégorie de produit fonctionnerait en fonction de votre filaire, mais en réalité, il n'y a de la place que pour 4 colonnes au lieu de votre version avec cinq. (Ouais, cela ne dépend pas vraiment de la perfection des pixels, c'est plutôt des proportions)
Aussi
Il y a un argument commun contre les wireframes polis qui va quelque chose comme ça inciterait un client à penser que c'est ce que le site Web regarderait. Eh bien, je fais ce travail depuis plus de 12 ans, je n'ai jamais rencontré un client qui ne pouvait pas comprendre la différence entre un filaire grisâtre et une maquette de conception.
Oui, il y a une chance que vous gaspilliez le budget d'un client pour la conception excessive d'un filaire, mais comme vous recueillez, créez et modifiez des composants filaires au fil des ans, après un certain temps, il ne faut plus de temps pour concevoir un look de premier ordre filaire au lieu d'un bâclé.
Enfin, puisque la plupart des clients ne comprennent pas vraiment beaucoup de notre travail (les médias numériques semblent à la fois magiques et effrayants pour beaucoup de gens), ils jugeront la qualité de notre travail en grande partie sur la façon dont nous se comporter, à quoi ressemble notre bureau, comment nous présentons notre travail et à quoi ressemblent nos livraisons. n wireframes d'aspect professionnel vous fait paraître plus compétent et plus fiable. Et c'est à la fois important pour vous et votre agence.
Certains autres concepteurs m'ont fortement recommandé de rendre les wireframes aussi parfaits que possible en pixels
Ce sont des concepteurs qui ne comprennent pas à quoi servent les wireframes - ni comment le Web fonctionne en général.
Transformer Axure en un outil de conception visuelle est un cauchemar pour tout le monde. Ce n'est pas un outil de conception visuelle. Il est censé être un outil de prototypage itératif et pour que les choses soient sensées de manière itérative, il faut le garder aussi simple que possible.
J'encourage les gens à activer le mode `` croquis '' dans Axure ... où il transforme tout en lignes ondulées et utilise une police manuscrite. Cela permet de souligner le fait que ce n'est pas la conception visuelle et vous permet de mieux concentrer les clients sur l'examen des flux et des interactions.
Rappelez également à vos concepteurs que le web n'est pas le pixel parfait pour commencer. ;)
Maintenant, y a-t-il un avantage à les rendre parfaits en pixels?
Oui en fait! L'avantage est que vos concepteurs visuels n'ont pas à réfléchir très sérieusement à leur travail. Cela et le client voit de très jolis écrans, ce qui les rend heureux.
Mais, hélas, les deux présentent d'énormes inconvénients. Tout d'abord, les concepteurs visuels devraient apporter leurs propres talents, compétences et expériences à la table. Ce qui est dans les wireframes peut très bien changer en fonction des compétences des concepteurs visuels. Ainsi, le fait de vouloir être "verrouillé" sur une image filaire parfaite en pixels peut entraîner une stagnation.
Quant au client, le design visuel l'emportera sur tous les autres aspects de la pensée design. Une fois qu'un client commence à voir des icônes et des couleurs, c'est la SEULE chose sur laquelle il se concentrera - souvent au détriment de l'expérience utilisateur globale. Vous voulez donc garder ce processus entièrement séparé autant que possible.
Il y a certainement des cas où les wireframes "plus jolis" sont jugés plus favorablement par les clients. Après avoir lu sur effets d'utilisabilité esthétique J'ai changé la façon dont je filaire et essaie de faire des croquis dessinés à la main plus rapidement et des trucs moins parfaitement alignés dans Omnigraffle ou Illustrator. Cela permet de rester concentré sur l'idée ou le concept principal. Il est également plus facile pour les clients de donner leur avis sur les wireframes/design s'ils ne se sentent pas finis.