Extrait de "Rocket Surgery Made Easy" (2010), de Steve Krug :

"If you already have a site and you're about to begin redesigning it, the obvious place to start is by testing your existing site".

Cela vient parfaitement appuyer ce que je détaille dans mon article sur la "Refonte de votre site internet" : pourquoi faut-il accorder de l’importance à un site que l’on va faire évoluer ? Car le site existant peut vous fournir des informations primordiales sur vos visiteurs, leurs attentes, leurs besoins. Les axes d’améliorations sont là, sous vos yeux...

Vous pouvez télécharger l'article en PDF ou lire les 3 parties :

• lire la 1ère partie
• lire la 2nde partie
• lire la 3ème et dernière partie

PS : j'ai payé Steve Krug très très cher pour dire ça ;-) Merci Steve !

Suite à la soirée de lancement de la semaine passée et la sortie de la version 2010 de "Internet Marketing" (anciennement intitulé "Petit Livre Rouge du Marketing Interactif"), je vous propose la publication de mon article sur "la refonte de site web".

Je vais le publier en 3 temps, voici la 3ème et dernière partie.

REFONDRE VOTRE SITE INTERNET :
capitaliser sur l'existant pour mieux reconstruire

• lire la 1ère partie
• lire la 2nde partie

GOOGLE N'OUBLIE RIEN...

Etre bien positionné dans les moteurs de recherche n’est pas chose facile. Et si vous avez été blacklistés par Google, même une journée ou deux, vous savez combien il est important de conserver votre positionnement dans les moteurs...

Par contre, savez-vous qu’à chaque nouvelle version de votre site, un travail de SEO ("Search Engine Opimization") concernant les urls existantes est important ?

En plus d’une mise à jour de l’audit sémantique que vous aviez peut-être réalisé initialement, un plan de mapping est à prévoir entre les anciennes urls et les nouvelles / futures urls. Car Google n’oublie rien... Il se souvient de cette page de contenu de niveau N-3 qu’il a indexé il y a maintenant 2 ou 3 ans. Comme elle était bien écrite et pertinente, il la positionne toujours bien dans ses résultats de recherche. Il serait donc dommage, sous prétexte que vous refondez votre site, de ne pas capitaliser le bon positionnement de cette page pour rediriger les internautes vers la nouvelle page correspondante !

La redirection des anciennes urls vers les nouvelles est utile en terme de SEO car on conserve le positionnement existant et on l’améliore lors de sa refonte. Mais cela permet également à vos utilisateurs de retrouver un contenu qu’ils ont apprécié : pensez à ceux qui ont utilisé les favoris pour marquer certaines de vos pages. Sans plan de redirection, ils tomberont dans une impasse sur une page d’erreur et ne prendront certainement pas la peine de retrouver votre page. Il y a de fortes chances pour qu’ils quittent le site, tout simplement...

CONCLUSION

Cet article propose quelques exemples de pratiques à mettre en œuvre lors d’une refonte de site web et n’a pas vocation à être exhaustif. D’autres tâches peuvent être mises en place, comme par exemple cartographier les contenus existants et établir un gap avec les contenus futurs, ou bien encore faire intervenir un Business Analyst pour mener un entretien avec le Webmaster de votre site pour identifier ses besoins et ses attentes concernant le CMS etc...

Encore une fois, si les quelques pratiques détaillées dans cet article sont mises en application, vous posséderez un certain nombre de leviers et de réponses pour optimiser au mieux votre futur site. Et la pratique de base de l’Analytics (Mesurer / Analyser / Emettre des hypothèses / Optimiser) est une des clés qui permettent d’améliorer petit à petit et de façon continue les performances de votre site. Et c’est notamment lors d’une refonte que cette pratique est la plus pertinente, notamment si elle est couplée avec le recueil des feedbacks de vos utilisateurs.

Les outils cités :

• 4Q Survey, de iPerceptions :
• Xiti
• Google Analytics
• Google Website Optimizer
• Coremetrics
• Omniture

Suite à la soirée de lancement de la semaine passée et la sortie de la version 2010 de "Internet Marketing" (anciennement intitulé "Petit Livre Rouge du Marketing Interactif"), je vous propose la publication de mon article sur "la refonte de site web".

Je vais le publier en 3 temps, voici donc la 2ème partie.

REFONDRE VOTRE SITE INTERNET :
capitaliser sur l'existant pour mieux reconstruire

[ lire la 1ère partie ]

SUBJECTIVITÉ DES EXPERTS & OBJECTIVITÉ DES STATISTIQUES

Dans un projet web, se baser uniquement sur l’expertise marketing et stratégique d’une agence ne suffit pas toujours. Il faut compléter cette expertise avec la réalité des chiffres. L’analytics (l’analyse du trafic et des données statistiques) permet de mettre le doigt sur un certain nombre d’informations essentielles.

Si dans la première version de votre site vous avez utilisé un logiciel de statistiques (XiTi, Google Analytics, Coremetrics, Omniture etc...) vous disposez de données précieuses sur vos visiteurs et leur comportement.

Exemples :

Le taux de rebond (ou le syndrome du "bonjour / au revoir"...)

Le taux de rebond ("bounce rate" en anglais) correspond aux "single page visits", c’est-à-dire au pourcentage d'internautes qui ont visité une seule page de votre site et qui ne sont pas allés plus loin. Autrement dit, ils sont arrivés sur une page qui ne leur a pas suffisamment donné envie de découvrir plus en profondeur votre site web.

Le taux de rebond est un KPI ("Key Performance Indicator") majeur car il montre dans quelle mesure le contenu existant correspond aux attentes des utilisateurs.

Légende : L’analyse du taux de rebond permet de mettre en évidence les pages sur lesquelles vous devrez vous concentrer lors de votre refonte.

En analysant le taux de rebond de chacune de vos pages et en le comparant avec le taux de rebond moyen de votre site, vous détectez alors les pages qui ne correspondent pas aux attentes de vos visiteurs et sur lesquelles il faudra particulièrement travailler. Les raisons de ce manque de performance peuvent être très variées :

• le contenu est trop pauvre et/ou pas assez pertinent ;
• les internautes s’attendaient à trouver autre chose en arrivant sur cette page ;
• le texte est illisible ;
• les titres et les accroches ne sont pas assez explicites ;
• etc...

Lorsque vous refondez partiellement votre site, l’analyse du taux de rebond vous permet d’une part de définir précisément les pages qui doivent être repensées et d’autre part de ne pas toucher celles que vous pensiez être de piètre qualité (parce que leur taux de rebond est supérieur à la moyenne)

L’analyse des mots clés recherchés (ou "donne moi ce que je recherche...")

Rien de tel que de savoir ce que recherchent les internautes pour leur proposer le contenu le plus approprié. Cela a évidemment son importance au niveau du référencement (qu’il soit naturel ou payant) mais également au niveau du discours à tenir et du rédactionnel à utiliser.

Si un mot clé est beaucoup plus recherché qu’un autre que vous pensiez plus approprié, peut-être faudra-t-il repenser la rédaction de vos textes... Par exemple pour un site de ventes de montres : si le mot "timepieces" correspond plus à votre image en terme de vocabulaire mais que les internautes utilisent le mot "watches" dans leurs recherches, la question d’un changement de vocabulaire devient alors légitime. Peut-être faudra-il orienter la rédaction de vos contenus en fonction de certains mots clés sur lesquels vous souhaitez vous positionner.

Cela peut donc avoir un impact à la fois sur la rédaction des textes de votre site, et sur le choix de vos meta (balise "title", arborescence des répertoires, nom des urls de vos pages etc...) qui devront certainement être adaptés en fonction de certaines expressions plus recherchées que d’autres.

Un bouton bleu + une petite vignette + un lien souligné en rouge ? Ou bien l’inverse... ?

Les tests A/B et les tests multivariés, vous connaissez ? Ce sont des méthodes qui permettent de comparer plusieurs versions d’une page et/ou d’éléments d’une page, et qui indiquent, grâce aux comportements des utilisateurs, quelle version et/ou combinaison d’éléments fonctionne le mieux.

Par exemple, comment savoir avec certitude que votre nouvelle fiche produit est efficace ? Comment savoir si les éléments sont bien positionnés et si le bouton d’ajout au panier est à la bonne taille ?

On se pose souvent ces questions lors d’une refonte, et elles sont bien légitimes. Deux possibilités s’offrent alors à vous :

• soit vous faites uniquement confiance à l’expertise de l’ergonome et/ou du designer en charge de l’interface ;
• soit vous complétez cette expertise avec des tests effectués auprès de vos utilisateurs.

En effet, c’est à ce moment du projet, lors d’une refonte, qu’il faut procéder soit à des tests A/B (on teste uniquement 2 versions d’une page) soit à des tests multivariés (qui permettent de faire plus de combinatoires) pour définir ce que préfèrent vos utilisateurs. Car même s’il y a des règles et des grands principes ergonomiques que les experts connaissent et appliquent, seuls vos utilisateurs via leur comportement vous apportent la réponse la plus précise à ces questions.

La plupart des solutions d’Analytics permettent de faire des tests multivariés, mais si vous êtes limités en terme de budget, Google (encore lui) propose son Google Website Optimizer. Cet outil, entièrement gratuit, vous permettra de définir ce qui fonctionne le mieux en terme de conversion.

Les deux types de tests (A/B et multivariés) concernent des éléments de détails qui peuvent être :

• graphiques (le bouton est-il plus cliqué lorsqu’il est vert ou rouge ?)
• éditoriaux (l’intitulé le plus utilisé est-il "ajouter au panier" ou bien "acheter" ?)
• ergonomiques (faut-il placer le bouton d’achat au-dessus du prix ou bien en-dessous ?)
• etc...

Légende : Vous pouvez utiliser l’A/B testing ou les tests multivariés pour déterminer les versions de pages ou les combinatoires d’éléments qui sont les plus efficaces.

Une fois les différentes pages et/ou combinatoires designées, il suffit d’insérer un script dans la page HTML et c’est l’outil qui se chargera d’afficher les différentes versions de manière égale aux internautes. Ensuite, c’est l’analyse des comportements des internautes qui répondra aux questions que l’on se posait : on verra ainsi que c’est la combinaison de tel élément avec tel autre qui a le meilleur taux de transformation ex : le bouton rouge placé sous le prix et avec l’intitulé "ajouter au panier")

Prochainement :

Refondre votre site internet (partie 3/3)

Suite à la soirée de lancement de la semaine passée et la sortie de la version 2010 de "Internet Marketing" (anciennement intitulé "Petit Livre Rouge du Marketing Interactif"), je vous propose la publication de mon article sur "la refonte de site web".

Je vais le publier en 3 temps, voici donc la 1ère partie.

REFONDRE VOTRE SITE INTERNET :
capitaliser sur l'existant pour mieux reconstruire

Qui dit "refonte" dit "existant". Et bien que la refonte d’un site web ait des phases communes avec la première mise en place d’un site internet, elle ne se déroule pas tout à fait de la même façon.

Le résultat d’une première expérience interactive, qu’il soit bon ou mauvais, existe bel et bien. Et cette première expérience doit vous servir de socle solide sur lequel vous appuyer pour construire au mieux la nouvelle version de votre site.

Cet article n’a pas vocation à lister toutes les étapes : il présente quelques conseils / méthodes à appliquer pour capitaliser sur l’existant et effectuer la refonte de son site dans de meilleures conditions en s’appuyant sur des bases objectives et chiffrées.

FAIRE FI DU PASSÉ ?

Dans une refonte, l’erreur serait de croire qu’il faille faire table rase du passé pour reconstruire la prochaine version. Or, il faut précisément s’appuyer sur l’existant pour bâtir de solides fondations.

Mais pourquoi faut-il accorder de l’importance à un site que l’on va faire évoluer ?

Car le site existant peut vous fournir des informations primordiales sur vos visiteurs, leurs attentes, leurs besoins. Les axes d’améliorations sont là, sous vos yeux, il suffit de mettre en place quelques étapes qui précèdent la conception fonctionnelle du futur site pour recueillir toute une série d’inputs importants pour la suite.

ET VOS VISITEURS DANS TOUT CA ?

"Le site en l’état actuel ne correspond plus à nos attentes..."

Cette remarque est assez courante, mais :

• fait-elle référence aux attentes des responsables internes ? (le Directeur Marketing, la Directrice de la Communication, le Responsable Internet etc...)
• ou bien fait-elle référence aux attentes de vos visiteurs, ceux que vous souhaitez toucher via le web ?

Cette question n’est pas sans conséquence, car lorsque l’on se place d’un point de vue "User Centric", les perceptions peuvent être radicalement différentes et il peut y avoir un gap important sur la perception de votre site par vos collaborateurs / managers et par votre public cible. Votre équipe interne et vous, pensez que votre site n’est pas le reflet de votre société en terme de qualité des contenus, en terme d’image... A contrario, vos utilisateurs peuvent le trouver parfaitement adapté à leurs besoins et en être globalement satisfaits.

Dès lors, comment obtenir une description objective de votre site ?

En mettant en place, par exemple, un sondage qualitatif (sur le site existant) qui permette à vos visiteurs de s’exprimer.

La solution 4Q Survey de iPerceptions ¹ est un outil gratuit et très performant qui permet de recueillir les feedbacks de vos utilisateurs, et ce via 4 questions :

1. Etes-vous satisfait de votre visite sur le site ?
2. Pour quelle(s) raison(s) êtes-vous venus visiter ce site ?
3. Est-ce que vous avez trouvé ce que vous étiez venu chercher ?
4. Si oui, pourquoi ? Si non, pourquoi ?

Avec 4Q, les questions sont standardisées (vous pouvez néanmoins proposer une liste de motifs de visites pour la 2nde question) et la méthode a été éprouvée. L’outil, très performant, vous permet d’obtenir une photographie de votre site, vu par vos utilisateurs.

Légende : 4Q permet de recueillir des données chiffrées concernant la satisfaction / l’insatisfaction des visiteurs vis-à-vis de votre site.

Vous connaissez ainsi ses points forts et ses points faibles. Et en plus des données chiffrées, ce type de sondage permet de recueillir des verbatims, c’est-à-dire la transcription fidèle des déclarations de vos utilisateurs. Et bien souvent, dans les motifs de non accomplissement d’une tâche, vous verrez ressortir 2 ou 3 motifs récurrents. Vous devrez donc prendre en compte ces remarques et les intégrer dans la réflexion de refonte de votre site. Par exemple, beaucoup de marques se demandent s’il faut afficher les prix sur un site produit qui ne fait pas d’e-commerce. Si la question divise au sein des équipes internes, il se peut que les internautes vous apportent la réponse. Ils ont peut-être été déçus de leur visite car ils cherchaient le prix de tel produit et ils ne l’ont pas trouvé...

Note :

1. 4Q est disponible en plus d’une dizaine de langues et est entièrement paramétrable (fréquence d’affichage, choix des questions...)

Prochainement :

Refondre votre site internet (partie 2/3)

Cela faisait un long moment que Todd Zaki Warfel préparait, chez Rosenfeld Medias, un livre sur les wireframes.

C’est maintenant chose faite, "Prototyping : a practitioner’s guide to prototyping" est enfin sorti et il est disponible en version papier et/ou en PDF.

Dans ce livre, Todd Zaki Warfel présente la valeur du prototypage et explique l’intérêt d’utiliser des wireframes.

Egalement, il liste différents usages du même outil, ce qui ouvre le champ d’utilisation des wireframes. Il précise que l’on peut s’en servir pour répondre à différents objectifs (désolé pour la traduction) :

• shared communication
• working through a design
• selling your idea internally
• usability testing
• gauging technical feasibility and value

Enfin, la seconde partie du livre est plus pratique car il a testé pas mal d’outils (Powerpoint, Keynote, Visio, Axure RP Pro, Fireworks, les maquettes HTML…) et il détaille chacun d’entre eux avec ses avantages / inconvénients.

Vous pourrez donc comparer ses conclusions avec les miennes via mes différents billets (entre les outils de wireframing offline et les outils online, j’ai testé plus d’outils que lui mais la comparaison est intéressante)

Il a d’ailleurs synthétisé cela dans une matrice que voici :

Cliquez sur l'image pour l'agrandir

Bref, c’est un livre qui a l’air vraiment bien fait car il propose une partie théorique sur les wireframes ET une partie pratique avec des démos de certains outils. Et comme il y a peu de livres à propos des wireframes, celui-ci est, à coup sûr, à lire.

Pour ceux qui sont intéressés :

• le sommaire détaillé
• un extrait d’un chapitre
• les illustrations du livre

Ca faisait longtemps qu'un billet à ce sujet n'avait pas été publié ;-)

C'est signé Nick Finck et si vous appuyez sur le bouton Play et que vous allumez vos enceintes, vous verrez que le slideshare comprend également la retranscription audio.

Sinon, pour voir d'autres billets sur les wireframes, je vous conseille de jeter un oeil à ma rubrique "Conception - Outils"

Comme vous le savez, le prototypage est un sujet qui m’intéresse ;-) Après mes billets sur certains outils offline (Powerpoint, Visio, Axure, Omnigraffle, Acrobat, Fireworks) et sur d’autres outils online (Gliffy, Jumpchart, Balsamiq, Protoshare et Pencil), j’ai testé tout récemment JustInMind Prototyper, et je n’ai pas été déçu.

PRÉSENTATION

JustInMind est une société basée à Barcelone (Espagne) qui a développé JustInMind Prototyper, un outil qui permet de faire du prototypage et de la simulation d’applications online.

JustInMind Prototyper est disponible sur Mac (OS X / Leopard) et PC (Windows XP / Vista). Pour ma part, j’ai testé JustInMind Prototyper pour PC en version 2.6 (elle n’est pas encore sortie et la version actuelle est la 2.5) Il y a avait encore quelques bugs mais l’application était globalement stable.

Voici une vidéo de présentation qui vous donne une overview des possibilités qu’offre l’outil.

PRÉSENTATION DE L’INTERFACE

L’interface de JustInMind Prototyper est assez complète car elle permet de travailler sur 4 types d’éléments, chacun faisant l’objet d’un onglet dans la barre de navigation principale :

• onglet "User Interface" pour les wireframes ;
• onglet "Functional scenarios" pour les process ;
• onglet "Comments" pour les commentaires ;
• onglet "Requirements" pour spécifier, entre autres, les Business Rules de l’application.

L'interface de JustInMind Prototyper rappelle un peu celle d'Axure

Si vous avez déjà utilisé Axure RP Pro, alors le contenu de l’onglet "User Interface" de JustInMind Prototyper vous semblera un peu familier car l’interface se présente un peu de la même façon :

• sur la gauche, composants HTML et Masters ;
• dans la zone centrale, création / édition des éléments ;
• à droite, écrans ("screens") et notes / remarques.

Enfin, le moteur de recherche placé en haut à droite est assez pratique et permet de retrouver un élément parmi toutes vos pages.

JUSTINMIND PROTOTYPER, UN OUTSIDER TRÈS SÉRIEUX A AXURE RP PRO

Tout comme Axure, JustInMind Prototyper permet de réaliser des wireframes et de générer des spécifications fonctionnelles au format Word. Il possède une bonne bibliothèque de composants HTML prédéfinis et utilise aussi le principe très utile des Masters et des Templates.

Mais sur d’autres points, il va plus loin qu’Axure.

JustInMind Prototyper permet notamment de définir les process en lien avec les pages, de préciser les requirements et d’utiliser des données réelles en se connectant par exemple à une BDD.

Les functional scenarios

Contrairement à Axure, la définition des process n’est pas décorrélée des interfaces, elle est en lien direct avec vos pages. Exemple avec la modélisation d’un module de login :

• dans l’onglet "User interface", on crée les pages "identification" (login), "erreur lors de l’identification" (login error) et "identification réussie" (login ok)
• et dans l’onglet "functional scenarios", on crée le process "login process", on fait glisser ses 3 pages sur la zone centrale en ajoutant les actions et les décisions correspondantes.
• ensuite, on connecte le process avec les pages correspondantes et on obtient une gestion des cas (login correct / login incorrect) qui permet de simuler le comportement de l’application au plus juste.

Voir la vidéo sur les functional scenarios

Les requirements

Parce que les wireframes ne peuvent à eux seuls décrire l’intégralité du comportement de l’application, des Business Requirements (ou "Business Rules") sont ajoutés aux spécifications fonctionnelles. Contrairement à Axure, JustInMind Prototyper intègre la rédaction de ces requirements (onglet "Requirements")

On peut saisir les requirements un par un au fur et à mesure de son prototypage, ou bien les saisir d’un seul coup à la fin, en les reliant avec les éléments HTML par un simple drag’n’drop. L’outil prévoit un système de versioning avec historisation des modifications, on peut également définir des test cases et insérer des commentaires. Evidemment, lors de l’export de vos spécifications au format Word, vous pourrez choisir de faire figurer ces éléments dans le document final.

Voir la vidéo sur les requirements

L'onglet "Requirements" permet de définir toutes les Business Rules que le wireframe ne peut contenir et/ou expiquer.

Les data masters

C’est un ensemble de données que vous définissez et qui peuvent être crées, lues, modifiées, effacées ou recherchées.

Avec les data masters, vous pouvez par exemple créer une fiche produit de façon "dynamique". Après avoir défini ce qui constitue une fiche produit (le nom du produit, sa référence, son prix, sa marque...), JustInMind Prototyper génère automatiquement les écrans permettant de faire du CRUD (Create / Read / Update / Delete) sur cette fiche.

Vous pouvez ainsi simuler la création / modification / suppression / recherche de vos produits grâce aux "data grids" et ce, avec les données que vous avez saisies ! Il ne vous reste plus qu’à trouver la mise en page qui vous convient et le tour est joué. Vous pouvez même faire un import / export en .CSV de ces données.

Une vidéo vaut mieux qu’un long discours.

Justinmind Server

Aussi appelé "Factory Server", JustInMind Server est un repository unique sur lequel vos prototypes sont publiés, commentés et partagés avec vos clients via votre navigateur Internet.

Outre le faire de pouvoir partager et annoter vos wireframes, l’intérêt de JustInMind Server est de pouvoir se connecter à une BDD pour utiliser ainsi des données réelles ! Sauf erreur, on pourrait donc, si je reprends l’exemple précédent de ma fiche produit, aller piocher les vrais datas dans une BDD pour les afficher dans ses wireframes et voir le "vrai" résultat !

JustInMind Server permet également de gérer une liste d’utilisateurs et de leur donner des droits d’accès différents. Enfin, il permet de mettre en ligne des versions différentes de ses prototypes (gestion automatique du versioning) et de faire des roll back si nécessaire.

Voir la vidéo de Factory Server

Factory Server permet de se connecter sur une BDD pour en utiliser les datas dans ses wireframes.

Et d’autres bonnes surprises...

• génération automatique du sitemap qui est relié aux pages qui ont été crées ;
• gestion visuelle des statuts des pages (terminée, en cours...) ;
• prise en compte des raccourcis clavier ;
• possibilité d’importer et de lire des fichiers PDF ou SWF au sein même de ses wireframes ;
• etc…

Pour avoir plus de détails sur ses fonctionnalités, je vous invite à regarder les 12 vidéos disponibles.

QUELQUES PETITS REPROCHES TOUT DE MÊME...

Bien qu’Axure soit très puissant, son interface est relativement simple. Une partie de l’interface d’Axure se retrouve dans cette de JustInMind Prototyper, mais comme l’application permet de faire plus de choses, l’interface se complexifie : onglet supplémentaires, panneaux contextuels additionnels, pas facile de s’y retrouver parfois entre les pages. Et la logique est parfois pas facile à comprendre (passage d’un onglet à l’autre pour finaliser une même action...)

Le panneau de gestion des événements n’est pas très intuitif selon moi, il est moins "parlant" que celui d’Axure. Pour utiliser à fond les possibilités qu’il offre, il est nécessaire de passer un certain temps pour bien l’utiliser. D’ailleurs, je n’ai pas encore compris comment faire pour passer des variables entre des pages ou comment créer un élément en différents états (les "states" dans Axure s’appellent "Layered box" sous JustInMind Prototyper)

LES CRITÈRES D’ÉVALUATION

1. Prise en main et Utilisation

JustInMind Prototyper n’est pas simple à prendre en main pour un néophyte. Certes vous retrouverez dans JustInMind Prototyper certains automatismes que vous aviez avec Axure, mais si l’on veut s’en servir de façon complète, l’outil est assez hardu. La courbe d’apprentissage peut être longue, notamment le temps de tester les possibilités offertes (et elles sont nombreuses) et de le paramétrer notamment pour le format des spécifications fonctionnelles.

2. Prototypage rapide

Aller vite avec JustInMind Prototyper, c’est possible. Créer des pages et des liens se fait simplement avec les éléments HTML. C’est donc possible, mais c’est dommage, car vous passez à côté des possibilités qu’il offre. Utiliser les Masters et/ou les Templates, créer ses process pour simuler au mieux les différents scenarii, renseigner les requirements... Tout ceci vous échappera, ce qui est bien dommage.

3. Partage des fichiers / Travail collaboratif

Cette fonctionnalité n’est pas géré nativement par JustInMind Prototyper, il faut utiliser Factory server. Ce dernier permet de partager son document avec les utilisateurs inscrits et laisse la possibilité de le commenter. Pour une utilisation optimale des commentaires donnant lieu à des évolutions, la gestion des versions (versioning) est également prise en compte.

4. Options d’export

JustInMind Prototyper ne permet pas d’exporter ses wireframes en HTML et nécessite l’installation (gratuite) d’un viewer. On peut détourner cela en utilisant Factory Server. Une fois installé, les utilisateurs peuvent consulter les wireframes avec leur browser sans module supplémentaire.

Mais les deux possibilités (le viewer gratuit et le mode Server) sont, je trouve, un frein au développement de cette application. En tant qu’application payante, il est dommage je trouve de ne pas avoir d’export qui soit lisible directement par un browser.

5. Interactivité des éléments

Aucun problème à ce niveau là : hyperliens, conditions, image map, formulaires que l’on peut renseigner... L’interactivité est au rendez-vous ! Pour pinailler, je dirai que je ne sais pas si l’on peut associer un lien différent à chaque élément d’une droplist mais bon... l’essentiel au niveau interactivité est présent ;-)

6. Wireframes adaptés à l’écran / au print

La seule chose qui soit adaptée au print, ce sont les spécifications au format Word. Tout le reste est fait pour de l’écran. Voici le format définitif (.doc)

7. Coût

A peine plus cher qu’Axure pour une licence unique ($690 pour JustInMind Prototyper vs. $589 pour Axure RP Pro), le prix n’est pas le même quand on passe à 5 licences ($ 4 290). Voir les tarifs.

Si le prix est un critère discriminant et que vous souhaitez acheter plusieurs licences, alors ça risque de coincer... Par contre, si vous recherchez un outil spécialisé et de qualité, le prix les vaut largement.

CONCLUSION

JustInMind Prototyper est une très belle surprise ! C’est un logiciel complet qui a su tirer certains avantages de son "grand frère" Axure et qui a, en plus, complété sa palette de fonctionnalités.

La prise en main pourra en rebuter certains et on regrette un peu l’efficacité d’Axure. Mais la complexité de JustInMind Prototyper va de pair avec les fantastiques possibilités qu’offre l’outil. Débutants dans le prototypage, passez votre chemin ! JustInMind Prototyper est fait pour des Architectes de l’Information désireux de produire des wireframes ultra complets pouvant faire pâlir un Business Analyst. Celui qui saura l’apprivoiser aura entre les mains un formidable outil de simulation fonctionnelle d’applications interactives.

Ce billet est le 5ème d’une série consacrée aux outils online de conception de wireframes. La cinquième application online que je présente s’appelle Pencil Project.

PRÉSENTATION

L’unique mission du projet Pencil est de "construire un outil open source gratuit pour la création de diagrammes et de prototypage que tout le monde peut utiliser." Une mission ambitieuse donc.

Pencil peut fonctionner de 2 manières :

• soit en tant qu’addon de Firefox 3 ;
• soit en mode standalone sous Linux GTK+, Windows XP ou Vista.

Pour ma part, l’addon ne voulant pas fonctionner sous ma version de Firefox, j’ai testé la version standalone (mais je ne pense pas qu’il y ait de grandes différences entre les 2).

PRÉSENTATION DE L’INTERFACE

Pas grand-chose à dire sur l’interface, elle est très basique : les éléments HTML sont sur la gauche et le plan de travail constitue le reste de la page. Le contenu des menus est très léger et tout se fait via la barre d’outils, très simple à utiliser. Les éléments HTML ont le design des interfaces de Windows XP ce qui fera plaisir aux Mac users ;-)

LES CRITÈRES D’ÉVALUATION

1. Prise en main et Utilisation :

Question utilisation et prise en main, Pencil ne réinvente pas la poudre et ça fonctionne bien : drag and drop des éléments, double clic pour les éditer... C’est du basique. Pas mal d’éléments HTML sont présents nativement, les raccourcis clavier de base sont pris en compte (couper / copier / coller, annuler multiple etc...) On peut faire un glisser / déposer d’une image externe (formats .png, .jpg, .gif et .svg) Rien de plus à dire, la prise en main simple permet une utilisation rapide et efficace.

2. Prototypage rapide

La simplicité d’utilisation de Pencil permet de l’utiliser pour créer rapidement des prototypes, d’autant plus que l’on peut utiliser des éléments et/ou des pages en tant qu’arrière plan d’autres pages, ce qui facilite la mise à jour de certains éléments récurrents (ex : un footer...) C'est l'outil parfait pour faire simple et aller vite.

Réaliser cette page a été très simple et n’a pris que quelques minutes.

3. Partage des fichiers / Travail collaboratif

Pencil n’a pas été pensé pour ce genre de chose. Aucune notion liée au partage des fichiers ni au travail collaboratif n’est abordée.

4. Options d’export

L’option qui permet d’exporter soit une page, soit l’intégralité des pages est assez pratique je dois dire. Par contre, les wireframes dessinés sous Pencil sont exportables uniquement en PNG. Le fichier source porte une extension .EP qui, d’après Pencil, est basé sur du XML et permet donc d’être un format ouvert qui n’a pas de restrictions… (je ne sais pas si c’est d’une réelle utilité mais cela va dans le sens d’un "outil open source gratuit")

5. Interactivité des éléments

C’est sur ce sujet que j’ai été très déçu par Pencil. L’export des pages se faisant en PNG, il n’est pas possible de faire des hyperliens entre les pages. On ne peut donc pas naviguer entre les pages, que ce soit à l’intérieur du logiciel ou en export. Un bouton qui sert apparemment à créer des liens, permet en fait de les simuler (il va colorer le texte en bleu et le souligner, mais aucun lien HTML n’est fait) Vos formulaires seront sont magnifiques mais, vous l’aurez compris, ils resteront non cliquables / non utilisables. Dommage...

6. Wireframes adaptés à l’écran / au print

Pixels, DPI... il y a quelque chose que je ne trouve pas très logique : quand on crée une page dans Pencil, l’application propose des tailles en pixels (là, c’est donc adapté çà l’écran). Par contre, il n’est pas possible de faire des liens entre les wireframes (là, ce n’est pas adapté à l’écran, c’est plus dans une logique print) mais je ne peux pas imprimer directement... L’application semble donc avoir été pensée à mi-chemin entre le print et l’écran, ce qui rend son utilisation parfois déroutante.

7. Coût

Pencil Project est totalement gratuit (et ne pèse que 400 Ko !) Qui dit mieux ?

CONCLUSION

La volonté de Pencil Project est de "construire un outil open source gratuit pour la création de diagrammes et de prototypage que tout le monde peut utiliser." En ce sens, la mission est réussie : l’application ne demande que très peu d’apprentissage, elle est gratuite et le format d’export PNG étant également lisible quasiment de partout, l’application est accessible au plus grand nombre.

Cependant, je reste sur ma faim concernant notamment les liens : le rendu des maquettes est très soigné et même s’il ne propose pas de fonctionnalités poussées, j’aurai aimé pouvoir créer des liens entre les pages. Du coup, Pencil équivaut à mes yeux à Microsoft Powerpoint (les liens en moins et les éléments HTML en plus) Et c’est vraiment dommage car Pencil avait les moyens d’être aussi simple que Powerpoint mais plus puissant.

Sixième Prochain billet de la série : "Les outils online de conception de wireframes : JustInMind."

Ce billet est le 4ème d’une série commencée il y a un petit moment déjà, et consacrée aux outils online de conception de wireframes

La quatrième application online que je présente s’appelle Protoshare.

PRÉSENTATION

Protoshare est une application online développée par Site9, une société spécialisée dans le software design.

Protoshare est un outil de wireframing qui est censé s’adresser à différents profils (chef de projet, DA, IA...) ainsi qu’aux clients. Protoshare est utilisé par des agences interactives telles que Ogilvy Interactive ou Avenue A. Razorfish, et un témoignage de Wikinomics.com affiché en home page affiche clairement les ambitions de Protoshare :
"Protoshare has the potential to revolutionize the process of webdesign"

C’est donc prometteur, et la vidéo de démo est plus qu’alléchante :

Alors, effet d’annonce ou réelle révolution ? Voici mon humble avis...

PRÉSENTATION DE L’INTERFACE

L’interface, toute en Ajax, est composée d’onglets :

• 1 pour visualiser le sitemap ;
• 1 pour éditer les pages ;
• 1 pour les composants et les templates ;
• 1 pour les styles CSS (oui oui, vous avez bien lu ;-)
• 1 pour l’export des spécifications et les options correspondantes ;
• 1 pour la recherche de remarques / annotations ou questions posées à propos du projet et de certaines pages ;
• Et enfin 1 onglet consacré à l’aide.

Cliquez sur l'image pour l'agrandir.

Chaque onglet comporte sa propre sous-navigation contextuelle avec également 1 ou plusieurs autres onglets. Bref, il y a des menus et des options partout et c’est parfois à la limite du digeste niveau utilisation.

LES ÉLÉMENTS POSITIFS DE PROTOSHARE...

Ils sont nombreux et certains sont vraiment intéressants :

• L’utilisation de templates, très pratique dans la production de sites volumineux ;
• La présence d’une fonctionnalité qui permet de poster des questions, remarques et/ou annotations pour que les autres utilisateurs puissent y répondre ;
• La génération de contenus liés au SEO : balises title, url de la page et balises meta description et keywords (c’est une des rares applications qui propose cela) ;
• La génération automatique de certains éléments en fonction du sitemap du projet : un breadcrumb et une barre de menu sont, par exemple, générés automatiquement en fonction des pages de votre sitemap ;
• La possibilité d’utiliser des feuilles de styles CSS ;
• Les éléments de formulaires sont interactifs ;
• Protoshare propose pas mal d’éléments HTML dont certains qui sont originaux, comme un (vrai) flux RSS ;
• Travail collaboratif en temps réel avec possibilité d’ajouter des users qui ont accès au projet ;
• L’upload d’images et de SWF est possible ;
• L’export des spécifications fonctionnelles au format Word ;

LES ASPECTS DÉCEVANTS DE PROTOSHARE...

• J’avoue avoir eu du mal à m’adapter à l’interface et l’utilisation de l’application m’a semblée, du coup, compliquée ;
• pas mal d’actions sont laborieuses à cause du manque d’intuitivité de l’interface. De plus, cette dernière ne répond pas forcément de suite aux actions souhaitées ;
• il est impossible de faire un copier / coller d’une page à l’autre, ce qui est très très très embêtant pour réutiliser certains éléments d’une page à l’autre ;
• le clic droit est utilisé de façon assez maladroite : dès fois il est présent et inutile, et parfois il est absent alors qu’il serait nécessaire...
• l’édition des propriétés des éléments n’est pas évidente à faire (ex : les textes) ou à comprendre (ex : certaines propriétés des éléments de formulaire) ;
• je n’ai pas compris comment faire un bouton avec 2 états, rollover et rollout, ce qui est une chose assez simple avec d’autres outils :-(

LES CRITÈRES D’ÉVALUATION

1. Prise en main et Utilisation

Pas évidente, surtout la première fois. A titre de comparaison, je trouve Axure RP Pro (qui permet de faire des choses beaucoup plus complexes) plus facile à prendre en main que Protoshare.

De plus, l’utilisation clavier / clic droit de la souris n’est pas optimisée : quelques raccourcis clavier sont utilisés, quelques éléments contextuels à la souris, mais on sent que cela n’a pas été poussé jusqu’au bout dans les 2 solutions.

J’ai tout de même réussi à reproduire la page qui me sert d’exemple :

Cliquez sur l'image pour l'agrandir.

2. Prototypage rapide

Il faut une certaine habitude pour jeter rapidement les premières versions d’un wireframe. Protoshare n’est pas, à mon avis, l’outil idéal pour la personne qui voudrait se lancer dans du prototypage rapide : son interface n’est pas adaptée et elle nécessite de renseigner parfois trop d’informations.

3. Partage des fichiers / Travail collaboratif

Protoshare permet d’avoir un seul repository unique et online, accessible à tous les utilisateurs. Egalement, les fonctionnalités de discussions et de d’annotation sont très bien pensées et parfaitement au point.

4. Options d’export

L’export des pages se fait en HTML mais ne regardez pas le code source, vous allez avoir une crise cardiaque. Egalement, les pages sont visibles uniquement pour les personnes qui sont identifiées : impossible donc de générer des pages qui fonctionnent en local. Dommage.

5. Interactivité des éléments

Les liens sont faciles à mettre en place, qu’ils soient internes ou externes, mais je n’ai pas vu comment simuler des popup. Les éléments de formulaire sont cliquables mais il est assez compliqué d’associer des actions à certains états (rollover / rollout) ou des éléments. Néanmoins, c’est toujours mieux que ce que propose Visio.

6. Wireframes adaptés à l’écran / au print

Protoshare est 100% pensé pour l’écran. La fonction d’impression n’existe pas, seule la fonction d’export des spécifications concerne le print.

7. Coût

Il varie de 26 $ par mois pour une utilisation personnelle et bridée, à 129 $ / mois pour une utilisation en réseau avec des capacités plus importantes (espace de stockage, nombre de pages actives...) Pour les entreprises, il faut les contacter car le prix sera adapté à votre utilisation et vos besoins. C’est donc somme toute très abordable même si Gliffy propose des tarifs plus intéressants.

Tous les tarifs de Protoshare sur cette page.

CONCLUSION

L’application était très prometteuse et j’étais ravi d’avoir (enfin) le temps de la tester. La vidéo de démo m’avait convaincu, j’étais persuadé que Protoshare allait me faire oublier toutes les autres solutions

Et bien non, je suis un peu déçu malgré les bonnes surprises que propose cette application... J’ai vraiment beaucoup de mal avec l’interface, ce qui fait que l’utilisation laborieuse de l'appli me fait oublier les très bonnes fonctionnalités (templating, SEO, export des specs...) A titre de comparaison, la prise en main de Gliffy est beaucoup plus aisée et son utilisation est beaucoup plus souple. Mais avec un peu de persévérance et de bonne volonté, les bons côté de Protoshare devraient me permettre d’oublier l’interface.

Mon avis est donc assez mitigé. Pour vous faire votre propre idée, je vous conseille de l’essayer : il est gratuit pendant 30 jours et si vous ne restez pas bloqué comme moi sur l’interface, Protoshare est certainement l’outil qu’il vous faut pour la conception de vos wireframes.

Cinquième billet de la série : "Les outils online de conception de wireframes (5/5) : Pencil Project."

Voici une arborescence particulière vue sur Wireframes Magazine.

Cliquez sur l'image pour la voir en intégralité.

Comme le dit Linowski , elle combine la représentation structurale de l’arborescence avec la description textuelle des contenus.

Elle est intéressante car elle permet :

• de visualiser assez simplement une partie du périmètre fonctionnel ;
• de bien comprendre le contenu de chaque rubrique et si besoin, d’apporter des précisions sur certaines rubriques ;
• de faire comprendre au client ce qu’est une "arborescence", d’échanger avec lui sur le format du document et valider sa compréhension ;

L’arborescence étant un des livrables de la phase de conception web, il est primordial que le client la comprenne et la valide. Même si le format de cette arborescence n’est pas le format final du livrable, c’est une première étape qui permet d’enchaîner plus facilement vers une arborescence détaillée comme je l’avais présentée dans un précédent billet ("Méthodologie : focus sur l’arborescence").

Intéressant non comme arborescence high level ?