MockFlow Editor

Quoi de plus délicat lorsqu’on conçoit un site web que de définir ce que l’on souhaite, sans rien oublier. Nombre de situations montrent le décalage entre ce que le client souhaite, ce qu’il exprime, ce que le prestataire comprend et réalise au final.

Le cahier des charges fonctionnel et technique, document contractuel et engageant pour le client et le prestataire, permet de définir précisément les différentes fonctionnalités souhaitées et d’en établir les contraintes techniques. Il émane du cahier d’expression des besoins fourni par le client et le complète, le formalise.

Visualiser pour mieux anticiper

Parfois, parce qu’on n’a pas anticipé un comportement ou une contrainte particulière, parce qu’on n’a pas suffisamment souligné les implications de telle ou telle fonction ou parce qu’on a omis de préciser telle ou telle chose qui semble « évidente », il est nécessaire de redévelopper tout un pan du site, voir même de réaménager la structure de la base de données. Pour l’éviter, et pour compenser la relative rigidité du cahier des charges qui rend difficile d’en saisir tous les enjeux, le recours au prototypage permet de proposer une visualisation quasi exhaustive, à moindre coût et plus pragmatique du service web.

Parce que nous pensons, ici chez Médiablue, que « ce qui se conçoit bien s’énonce clairement et les mots pour le dire arrivent  aisément » (selon les préceptes de N. Boileau) nous utilisons les outils de prototypage des écrans. Ils permettent de « dessiner » les différents écrans avant leur réalisation. On obtient ainsi, sans nécessité de développer quoi que ce soit et comme si on les traçait à la main, une représentation visuelle des écrans avec les différents éléments qui les composent. Leur nature modulaire permet de les modifier aisément sans avoir à employer de lourds processus de programmation. Le client visualise ainsi l’aspect futur de son site (et peut prendre conscience de certaines omissions ou comportements non souhaités). Par ailleurs le prestataire peut, au fur et à mesure qu’il réalise le prototype, identifier des contraintes qu’il pourra retranscrire dans le cahier des charges fonctionnel et technique, comme un outil d’aide à la décision.

La solution MockFlow

Après bien des tests, l’offre étant assez riche et variée, nous avons jeté notre dévolu sur MockFlow qui allie simplicité d’utilisation et richesse fonctionnelle pour un coût parmi les plus raisonnables de sa catégorie.

Réalisé en Flash, utilisable en ligne ou hors ligne, en version navigateur ou desktop (sous Adobe Air), il permet un usage local ou en mobilité, quelque soit le poste de travail.
La richesse de sa bibliothèque (qui ne cesse de croître) et de ses fonctions, sans être pléthorique, permet de réaliser des prototypes (les mockups, en anglais) suffisamment précis sans se rapprocher trop fortement de l’aspect graphique final, ce qui nuirait à la capacité d’abstraction. Son système de templates (modèles) permet de décliner aisément des pans entiers de page pré-définies en y ajoutant des éléments spécifiques.
Ses fonctions d’exportation en images, en PDF ou en PowerPoint permettent de manipuler aisément les résultats.
Mockflow génère une arborescence de site et permet même d’établir des liens entre les pages. Ainsi, en version « présentation » (que l’on peut partager en ligne) il est possible de naviguer au sein des pages, presque comme sur un site finalisé.

Il ne lui manque aujourd’hui que la possibilité de créer une bibliothèque de templates qui permettrait de les gérer de façon plus rationnelle et de les exclure de l’arborescence globale. Nul doute que l’équipe dynamique de Produle (la société éditrice de MockFlow) développera cette fonctionnalité dans un proche avenir.

Voici un exemple en lien direct en cliquant ici et en format PDF :

Exemple de prototypage de Twitter (PDF Mockup)

La newsletter de Février est pour nous l’occasion de vous présenter nos dernières réalisations (Ma Rosita, Batchi Batcha, APEL St-Michel et PersoPress) et de nous attarder sur Les Editions de l’Epargne.

A consulter ici…

Médiablue vous présente ses Meilleurs Vœux
pour cette nouvelle année qui commence :

Que les commandes débordent !
Que votre chiffre d’affaires explose !
Que vos projets prennent vie !

Nous vous remercions de votre confiance,
et serons fiers d’être toujours présents à vos côtés
pour vous accompagner dans cette ébullition !!

Un nouveau site, réalisé par Médiablue, a vu le jour cette semaine.
Ma Rosita c’est le projet de deux amies, Catherine et Valérie, dont l’ambition est de proposer des objets à la fois ludiques, pédagogiques et décoratifs pour les enfants.

Reprenant le principe des tableaux d’apprentissage de notre enfance, Ma Rosita propose des mémos, véritables outils pédagogiques, qui complètent et égayent les apprentissages autour des thèmes de l’alphabet, l’addition, la multiplication et la conjugaison.

Une excellente idée cadeau pour les fêtes qui s’annoncent !

Ah ! J’allais oublier !…
Si vous souhaitez suivre l’actualité de Médiablue vous pouvez, en parallèle du blog, devenir fan de Médiablue sur Facebook et suivre la timeline Twitter de Médiablue

Si vous avez suivi les épisodes précédents, vous savez que nous sommes désormais équipés d’iPhones chez Médiablue. Et ces petites machines diaboliques et addictives (les mêmes que celles dont on se demande après les avoir acquises comment on faisant avant) vous font voir le monde du web autrement. Si… Si… ! J’y reviendrai dans un prochain billet, mais dans l’immédiat j’ai installé un plugin permettant d’adapter le blog en version mobile iPhone/iTouch. Ce plugin s’appelle WPTouch et il fonctionne nickel-chrome. Je vous laisse déguster…

Le thème iNove

Le blog de Médiablue s’habille d’un nouveau thème (dont le nom est iNove) et en profite pour passer à la version 2.7 de WordPress.

Un thème plus sobre, plus aéré et en même temps plus agréable (nous semble-t-il).
Plus large (adapté aux résolutions 1024 qui sont désormais majoritaires) il donne plus de place aux contenus qui sont désormais largement constitués de médias divers (images, sons, vidéos, etc…) et permet de mieux organiser la barre latérale.

Du côté technique, la version 2.7 de WordPress apporte une refonte majeure de l’administration qui le rend particulièrement ergonomique et réellement efficace. Comme bien souvent, on se demande comment on faisait avant

Quelques parties ne sont pas encore traduites mais elles se font vite oublier grâce au confort d’utilisation et l’ergonomie bien pensée.

PS :
Des réglages sont encore nécessaires et des plugins doivent être mis à jour.
Merci de votre patience et de votre compréhension

Cliquez pour agrandir

Mieux vaut tard que jamais ! Voici nos voeux pour la nouvelle année.
Personnellement, je vous souhaite une année 2009 pleine de projets personnels et professionnels !

Les premières réactions au billet précédent n’ont pas tardé.

Dès leur publication elles ont été disponibles dans la timeline publique de Seesmic.
Malgré mes appels au commentaire sur le blog, les habitudes Seesmic sont bien ancrées et chacun a répondu dans Seesmic. Peu importe, l’essentiel est d’avoir des retours. Et ils sont très intéressants.

Alors qu’en ressort-il ?

1) L’expérience est appréciée

Les participants à la discussion ont encouragé le projet et apprécient que l’expérience du cross-posting blog + Seesmic soit tentée. Certains y ont pensé sans passer le pas.

2) La simple transcription du texte en vidéo n’est pas satisfaisante

Le média vidéo ne tolère pas la médiocrité du style,
Celui-ci a été ressenti comme dérengeant et difficile à suivre.

"Vidéo d’entreprise des années 80", "allocution présidentielle" ou "publicité ringarde de cinéma" sont les principaux qualificatifs adressé du côté du style.
Il semble même faire écran au sens. A tel point que certains lecteurs ont avoué décrocher du fil du propos.

J’en conclue que c’est plutôt la vidéo qui doit être l’origine, le texte n’étant présent que pour soutenir le propos sous forme de sommaire ou de liste de références.

Il est de toute façon indispensable de dossocier le propos écrit du propos filmé.

3) Un support propice à la mobilisation du lecteur

Les préalables, déjà valable sur tous les supports "sociaux", de l’intérêt du propos et de la mobilisation du lecteur ont ici aussi toute leur place. Mais sous réserve de mettre en oeuvre les autres points, la relative proximité que le support vidéo permet d’entretenir lui confère un fort potentiel de mobilisation du lecteur.

4) Pouvoir appréhender le contenu avant visionnage est essentiel

Il semble essentiel de pouvoir juger du contenu de la vidéo pour décider de la visionner.

Pour ce point je pense que la décision initiale, même malheureuse, de doubler le texte par l’image et le mise en application des conclusion du second point permettent de satisfaire cette exigence.

5) Structurer le propos en chapitrant les vidéos

Dans le cadre de contenus longs et argumentés, le découpage en plusieurs vidéos est souhaitable afin de permettre au lecteurs d’assimiler le propos dans les meilleures conditions.

Je vous propose de visionner les contributions,
suite à la publication de ce billet
avec quelques mots de résumé pour chacune :