18 juillet 2006 - 23:29 # Prototypes - usability Exemples de prototypes : le zoning
Voici un terme que je ne connaissais pas pour décrire ce qu'on appelle wireframe, blue print, outlines, ergolayout , ... Voici un exemple de "zoning" simplfié réalisé par Eric Di POL
Cet exemple de schéma propose une représentation abstraite d'une page. On remarque
que le schéma reste (volontairement) très abstrait
avec à peine plus qu'un positionnement des différentes
éléments constituants de la page. A ce niveau de détail, je qualifie ce type de zoning/wireframe de wireframe low fidelity
Alors, est ce que c'est une contrainte ou une aide précieuse?
Même avec ce niveau de détail,
ce genre de document est utile car:
c'est une bonne base de briefing pour un graphiste
cela permet de valider avec un client le contenu et les fonctionnalités
d'une page avec une représentation plus concrète
qu'un document de spécifications fonctionnelles. Cela permet
de valider des éléments avant d'aborder la partie
souvent subjective (et émotionnelle) de la validation graphique d'un site.
C'est le début d'une réflexion ergonomique mais
c'est largement insuffisant pour évaluer la moindre chose.
Cela permet à une équipe importante de se faire une idée d'un projet. Des développeurs peuvent également employer ce genre de document pour aborder leur analyse technique.
Pour évaluer l'ergonomie d'un
site, il faut recourir à des wireframe high fidelity dans
lesquels il faut
hiérarchiser les
éléments : définir l'importance perceptuelle
des éléments entre eux
travailler à l'échelle afin de pouvoir évaluer la taille réelle des éléments
intégrer une masse
représentative de contenu
utiliser un formalisme de couleur et de formes standards (valeurs de gris, bleu lien, carré,
représentation images ou de certaines pattern UI)
Evaluer plus ou ou moins
la zone above the fold
Positionner une grille
réaliste qui pourra déà être employée
dans le site
Développer une sémantique des différents élements dans la page
... etc...
Il y a encore bien des choses auquelles il faut réfléchir. Cela dépendra en fonction du type de page à produire (axe plus marketing, conversion, landing pages, applications, etc...)
Tout cela intège des concepts ergonomiques, les demandes du client ainsi que des contraintes techniques.
Cela concrétise une abstraction possible mais c'est bien sûr
ouvert à critique de la part du directeur artistique.
Voici un exemple (pas encore tout à fait) high fidelity
pour une homepage d'une enseigne de distribution réalisée
en 2003. Le formalisme n'était pas enore tout à fait
OK mais cela insistait sur les éléments qu'un utilisateur
devrait percevoir et la manière dont il devrait scanner la
page.
Ce genre de formalisme permet à mon
sens d'aller plus loin que le zoning moins détaillé au niveau de l'ergonomie. Cc'est vrai que certain graphistes ont parfois l'impression d'être bridés mais d'expérience, cela leur facilite souvent la vie.
Le grand intérêt de faire intervenir ce genre de document est principalement dans le cadre des grands projets faisant appel à des graphistes, développeurs, copywritters, gestonnaires de projets et bien sûr plusieurs intervenants chez le client. Cela permet à tout le monde d'avoir une représentation plus concrète d'un projet encore virtuel. Cette représentation va permettre d'aller beaucoup plus loin dans la réflexion.
Prochaine fois, je vais essayer de parler de prototypes clickables, prototypes applicatifs ou encore du prototypage d'une application Ajax.
J'ai toujours détesté ce terme ! "Zoning", ça veut dire quoi "zoning", je suis sûr que ce mot n'existe même pas (j'aimerais bien en avoir la confirmation de la part d'un anglais).
Je préfère largement le mot "Storyboard" qui est plus imagé et surtout qui fait référence aux storyboards du cinéma que tout le monde connait. De plus, avec la montée en puissance des interfaces riches, nos représentations schématiques d'interfaces devront de plus en plus représenter les transitions, comportements et autres effets de cinématique.
19 07 2006 - 20:03 par xavier de stoppani [ site ]
Bonjour, Personnellement je parle de "gabarits", car zoning me semble évoquer seulement le spatial et non les outils ni les textes. Je partage votre exigence sur les détails nécessaires et me rapproche plus de votre vision la plus élaborée. J'utilise la notion de "story board" uniquement quand je fais jouer plusieurs gabarits dans un processus. Je réalise généralement cela sur un fichier texte comprenant des tableaux. Ce principe de gabarits de futures pages Web est aussi très utile en termes de gestion de projet. Il est plus facile et plus sain de valider cette étape, avec le client et les développeurs, avant de passer au graphisme pur. Il oblige tout le monde à se poser des questions de sens et de fonctionnalité avec de tomber dans le "j'aime / j'aime pas". J'ajoute que les graphistes avec lesquels je travaille apprécient la méthode. NB: j'aurais bien voulu visualiser les propositions de Fred, mais son lien est apparemment faux. A bientôt sur les ondes Xavier de Stoppani
19 07 2006 - 21:03 par Pierre Chassany
Salut En tant que webdesigner, ce genre d'approche est tout à fait bien venue puisqu'elle clarifie la majeure partie des questions à ce poser. Ceci étant, le graphiste et l'équipe de développement doivent pouvoir donner leur avis en aval avant que ce document puisse être présenté. Et même, nous avons eu le cas où le gabarit fût légèrement modifié quand nous nous sommes retrouvés devant la production des pages et qu'un aspect des choses s'est vu être plus mis en valeur et d'autre interprété. Cette méthode doit être un document de travail et non pas un plan à suivre ou un scéma statique. Il est bon aussi de le faire savoir à nos clients... il serait très présomptueux de pouvoir "cracher" du premier coup LA solution. Tiens, je pose la question: Présentez-vous un seul gabarit ? Présentez-vous une seule voie graphique découlant de cette étude?
Le nom a finalement moins d'importance que le principe de penser abstraitement un site avant de le réaliser concrètement.
Pour y arriver, le prototype ou wireframe n'est pas suffisant et en fonction des projets, il doit être accompagné de concept map, sitemap, flow map, use case diagram, sequence diagram, etc.. Tout dépend du problème à traiter et du niveau d'exigence.
Un prototype approuvé est souvent revu avec un graphiste. Le graphiste peut bien sûr remettre en question le prorotype pour autant qu'il respecte les contraintes identifiées pendant la phase prototypes. Parfois, il faut faire des choix une fois qu'on passe au graphisme et donc c'est une perpétuelle remise en cause.
Au niveau des éléments présentés, cela dépend clairement des projets. En général, il faut d'abord approuver un concept (user scenario, user expérience, concept map). A partir de là on commence un processu itératif avec plusieurs propositions au début et puis on affine. Il peut arriver de présenter jusqu'à 20 versions différentes en fonction de certaines hypothèse de travail.
Ensuite, on fait les maquettes et là également, de nombreuses propositions et directions seront proposées.
j'essaierai de creuser le sujet dans de prochains posts
25 07 2006 - 12:24 par Eric - SuperFiction [ site ]
"j'essaierai de creuser le sujet dans de prochains posts" --> j'attends avec impatience ton nouveau billet pour en discuter !
Rétention client : Comment garder ses clients selon AOL 
