Résultat : Des heures de pertes de temps à réajuster une maquette Photoshop!

Depuis ce temps j’ai découvert 2 outils en ligne très pratiques pour accélérer votre processus de wireframing :

Mockingbird
Gratuit et simple à utiliser, options de partage pour envoyer à vos clients, etc.
http://gomockingbird.com/

Protoshare
Payable au mois et plus complexe à utiliser. Les options son hyper avancées par contre et pour de gros sites web avec beaucoup de phases de développement et de programmation je crois que c’est un « must ».
http://www.protoshare.com/

Bon wireframing!

J’aimerais applaudir à ta belle contribution claire et la plus précise que j’ai pu trouvé sur le Web. Bravo à cette gymnastique de synthèse.

Quant à moi, pour la réalisation du zoning Web de mes pages, je le fais sous FireWorks, très rapide, avec une panoplie de librairies Web. Pour la création du wireframe (mon prototype sans fonctionnalité), je le fais avec Axure principalement.

Wow pour ta conclusion!

Sébastien

je viens apporter ma petite pierre à l’édifice en ce qui concerne la maquette. Microsoft a développé un logiciel à cet effet, SketchFlow. Ce dernier est inclus dans la suite Expression Studio 3, vous pouvez néanmoins le télécharger en version d’évaluation à cette adresse :

http://www.microsoft.com/france/expression/produits/Expression_SketchFlow.aspx

P.s : J’ai oublié de dire que j’ai beaucoup aimé cet article.

J’utilise différentes méthodes selon le contexte et le budget du client. Si le budget est serré, j’utilise des méthodes qui économisent du temps. Cela peux se répercuter sur la qualité du livrable mais on ne peux pas avoir la qualité ET le prix discount. Si le budget est plus confortable, je peux consacrer plus de temps à élaborer des documents plus aboutis.

Pour le zoning, j’utilise généralement mon logiciel vectoriel. On peut aussi utiliser un simple schéma papier, la technique des post-it sur un tableau blanc ou des découpages qui représentent les zones du site que l’on place sur un canevas qui représente la page. Il suffit ensuite de prendre une photographie du montage.

Pour les wireframe ça se complique, surtout avec le développement des effets JavaScripts, les interfaces riches … ou une même page peut avoir plusieurs états.

Il existe plusieurs logiciels qui essayent de prendre en charge cette interactivité avec plus où moins de bonheur : Omnigraff, Visio, SharePoint, Axure …

Personnellement, je pense que la meilleure solution pour les sites standards css/xhtml, reste le prototype wireframe codé en css/xhtml/javascript. Cela demande de bonnes compétences en intégration, l’utilisation d’un framework efficace couplé à une librairie javascript type Jquery et peut être un peu plus de temps quoi que … Il faut donc faire travailler l’ergonome, le chef de projet et l’intégrateur ensemble pour établir ce genre de wireframe (prototype css/xhtml/javascript).

De part mes expériences professionnelles en France et en Australie, je n’ai pas encore eu la chance de travailler sur des projets élaborés avec des zonings et wireframes.

Il est vrai que le budget a une importance primordiale, mais surtout, c’est la taille du site (ou de l’application) qui détermine l’utilisation de ses procédés.
Un site vitrine statique de moins 10 pages de nécessitera pas forcément une telle élaboration. De même que le budget accordé par le client pour un petit site ne devrait pas prendre en compte ceci.
Budget et complexité de développement sont donc très fortement liés dans ce cas là.

Merci encore et bonne continuation!

Ta contribution est très intéressante car elle complète bien mon article qui, c’est vrai, n’aborde pas du tout le travail en amont des wireframes.

Cette réflexion sur l’utilisateur et son comportement vis à vis de l’interface (personas, scénarii) est davantage une tâche qui incombe aux ergonomes, raison pour laquelle je n’en ai pas parlé, me concentrant plutôt sur les tâches du designer.

Cependant, sur des projets de plus petite taille, le budget ne permet pas toujours de faire appel aux ergonomes et c’est le designer qui doit bien souvent assumer la partie ergonomie. Dans ce cas, personas et scenarii sont bien souvent oubliés (manque de temps ou de compétences) et l’on passe directement du brief créatif à l’architecture de l’information (navigation …) puis au zoning et wireframe. Les wireframe ne servent alors qu’à valider auprès du client la présence des fonctions du site et la mise en page.

Donc de ce que j’ai pu voir, les techniques dont tu parles sont appliquées en France depuis que des sociétés d’experts en ergonomie sont impliquées dans les projets web. Cela concerne bien sure les projets dont le budget est suffisamment conséquent.

A mon avis, le designer doit connaitre les bases de l’ergonomie afin de collaborer plus efficacement avec les ergonomes mais c’est rarement lui qui travaille sur la création des personas et des scenarii.

De ce fait, ils servent non seulement à préciser la copie, story-boarder les interactions… mais également à tester et mettre à l’épreuve l’application quand à son usage, ils sont l’outil idéal d’un processus itératif qui serait bien couteux si effectué après le design graphique ou encore après le développement !

En tout cas, je suis ravi de voir qu’un designer français applique cette méthode dans son travail. Je me pose justement la question de l’utilisation de ces méthodes en France. Etant venu après mes études travailler à Montréal comme designer interactif, j’ai découvert ce type de process, et ces méthodes qui viennent de disciplines comme le HCI. C’est vraiment une façon de travailler typiquement nord américaine, et je suis content de voir par ailleurs que l’association designerinteractifs s’applique à faire reconnaître les métiers du design interactif et poser la question de nos processus de travail…

Donc, après nous présenter ta façon de travailler, quel est ton feedback par rapport à son application dans le web design français, as tu de la facilité à expliquer à tes clients ce que sont ces documents ? Rencontre tu des problèmes à justifier cette démarche auprès de développeurs ? Est ce qu’il t’es facile de justifier la création de ces documents et le temps passer à la conception auprès de chefs de projets ?