SuperFiction, le blog ::: marketing interactif, experience utilisateur, conception multimedia et gestion de projets

lundi 22 juin 2009

Les outils online de conception de wireframes (5/5) : utiliser Pencil Project

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.

Logo de 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.

Page d'exemple réalisée avec Pencil project

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."

Bookmark and Share

mercredi 17 juin 2009

Uniqlo, une marque étonnante et des contenus à découvrir

Vous n’avez peut-être jamais porté de vêtements de la marque japonaise Uniqlo mais vous avez certainement déjà entendu parler d’eux.

Si ce n’est pas le cas, je vous conseille vivement d’aller jeter un œil aux différents sites et/ou contenus mis en place par la marque pour mettre en scène ses produits. Je vous conseille notamment les suivants :

"Introduction", ou comment rendre ludique et attractifs des contenus à priori pas très intéressants

Cette animation intitulée "Introduction" présente de façon très originale tout ce qui constitue le groupe : sa philosophie, la qualité et la technologie utilisée dans les produits, les différents styles, la méga culture (élément essentiel de l’essence de la marque) ... C’est richement illustré avec des photos de centaines de produits, les vidéos des spots de pub, des photos des boutiques ou des ateliers de fabrication... La musique et l’animation des différents éléments participent à rendre l’expérience ludique et réussie.

Uniqlo : Introduction

"Parka style - Tokyo Fashion Map"

Dans "Parka Style - Tokyo Fashion Map", 1000 personnes aux styles différents ont été filmées et photographiées dans les rues de Tokyo. On découvre ces différents styles au travers d’une frise vidéo ou d’une carte interactive très bien intégrée basée sur Google Maps. Chaque personnage a son propre style qui varie en fonction du quartier dans lequel il se trouve, on y trouve à la fois des jeunes filles branchées, une mère de famille avec ses 2 enfants, une vieille dame ou bien encore un marchand de poisson... La double navigation (via la frise et la carte) est très bien gérée et donne envie de regarder tous les styles !

Uniqlo : Parka style - Tokyo Fashion Map

"UT Zoom", la collection Printemps Eté 2009

Une mosaïque de visuels permet de découvrir la nouvelle collection Printemps Eté 2009. En cliquant sur un visuel, on entre en mode défilement en gros plan. La nouvelle collection peut être visualisée en défilement automatique ou en mode manuel, en utilisant la molette de la souris. Simple, efficace et à la hauteur

Uniqlo : UT Zoom

"Uniqlo Wire - Hello Bra Top"

Présentation du Bra Top (un haut apparemment génial… ;-) au travers de petites scènes vidéos qui mettent en scène des jeunes femmes du monde entier, et qui portent le Bra Top à différentes occasions (au bureau, en soirée etc…) Les vidéos, agrémentées de petites illustrations animées, s’enchaînent et sont entrecoupées d’un petit sondage qui permet à la marque de recueillir des informations importantes sur le Bra Top et son accueil par les clients (ex : Comment trouvez-vous le Bra Top au porter ? Le bonnet du Bra Top épouse-t-il bien la poitrine ? etc...)

Uniqlo : Uniqlo Wire - Hello Bra Top

Derrière ces mises en scènes réussies se trouve une volonté business toujours présente : renvoyer systématiquement les internautes vers la e-boutique ou le store locator (en effet, sur chacun des sites / contenus présentés se trouve un lien qui renvoie systématiquement vers la fiche produit) Faire du ludique c’est profitable pour la marque et son image, mais faire du ludique avec du ROI, c’est encore mieux !

De façon générale, les idées sont simples et efficaces, et la réalisation de ces contenus est impeccable. Graphiquement c’est très cohérent, c’est fluide au niveau de l’animation, c’est souvent très simple à utiliser... Il y a une constance en terme de qualité entre tous les sites qui est admirable car très rare je trouve.

Uniqlo sur le web, vous l’aurez compris, c’est simple, frais et original. C’est donc une expérience online à découvrir et à suivre. Vivement le prochain mini-site !!!

Bookmark and Share

lundi 8 juin 2009

Fnac.com : 10 ans de e-commerce

Pour fêter ses 10 ans de présence et de vente online, la Fnac a mis en place une opération commerciale relayée sur le web et intitulée "les passionnés".

10 ans de fnac.com, 10 ans de passions partagées

Au programme, des offres spéciales et un jeu concours avec tirage au sort. Et pour symboliser la diversité de l’offre et la passion de la culture que veut transmettre la marque, la Fnac utilise des personas personnages en vidéo. On trouve :

  • Philippe, la quarantaine qui est fan de nouvelles technos (il me fait penser au PC dans les pubs Apple Mac vs. PC, pas vous ?) ;
  • Julien, le bobo parisien concon et prétentieux ;
  • Christiane, écolo-attitude et adepte de la (bio) diversité ;
  • Markus, l’ado fan de mangas ;
  • Marielle, qui ne vit que pour Bach et Schubert ;
  • William, addict aux jeux vidéos ("10 ans... t’as passé un sacré level là...") ;
  • Guillaume, dessinateur de BD un peu tête en l’air ;
  • Chloé, fan de rock et de live ;
  • Henry, le jazzman de service ; ("qui a dit big band passante...?")
  • Et Caroline, la mère de famille qui coure après ses petits au rayon enfants.

A chaque personnage sont associés des contenus. Ainsi, pour chacun d’entre eux, on peut :

  • découvrir leurs produits préférés (l'équivalent des Coups de CÅ“ur Fnac)
  • savoir ce qu’ils aiment à la Fnac (des événements, des exclusivités...),
  • connaître leurs services préférés (la réservation de spectacles pour notre jazzman, le comparateur de produits pour notre technophile...)
  • en savoir plus sur leurs offres spéciales 10 ans (les produits en promo)

Vous l’avez remarqué, tous les personnages sont très différents, ils sont dans des tranches d’âges et ont des passions qui permettent de bien couvrir l’offre de la Fnac.

Et même si les vidéos sont caricaturales (je les trouve parfois même risibles pour certaines...) l’intention est bonne. Les personnages sont également mis en scène dans les pages des différentes rubriques, ils sont insérés entre les push produit (cf. ci-dessous) Enfin, chacun possède son profil sur Facebook.

10 ans de fnac.com, 10 ans de passions partagées

C’est une réalisation online intéressante qui permet à la fois de mettre en avant certains produits et de promouvoir les différents services de fnac.com. Je suis plus sceptique concernant la partie communautaire sur Facebook, mais peut-être faut-il les ajouter en tant qu’amis pour mieux comprendre l’intérêt.

10 ans de e-commerce... Peu de boutiques peuvent se vanter d’avoir une telle expérience et d’être toujours présent ! Happy birthday fnac.com !!!

Bookmark and Share

dimanche 7 juin 2009

Google lance de nouvelles options de recherche

Sur Google.com, lorsque vous effectuez une recherche, un lien "Show options…" est apparu récemment sur la page de résultats.

Grâce à ces options, vous pouvez notamment affiner vos recherches par source d’information (forum, vidéo, reviews...) ou par période. Mais le plus intéressant se trouve dans la partie "Standard View" : le wonder wheel et la timeline.

Faites le test avec le terme "e-commerce" par exemple.

Le wonder wheel affiche les termes liés à la manière d’un mindmapping. Je peux ainsi voir les termes liés à "e-commerce" sous une forme graphique et animée. Au fur et à mesure que je clique sur un nouveau terme, la liste de résultats se met à jour automatiquement sans refresh, et je conserve grâce au mindmapping le cheminement qui m’a amené de "e-commerce" à "business plan start up" par exemple. Je peux donc revenir en arrière à tout moment pour modifier ma recherche.

Nouvelles options de Google : le wonder wheel

Cliquez sur l'image pour l'agrandir

La timeline quant à elle, affiche un graphique qui permet de visualiser les volumes de résultats par période. Ainsi, avec le terme "e-commerce", on voit que les premières références remontent aux années 1990 et qu’il y a eu une explosion de ce terme entre 1998 et 2001. En fonction des termes, la timeline s’adapte (avec "general motors" par exemple, la timeline remonte à 1900...)

Nouvelles options de Google : la timeline

Cliquez sur l'image pour l'agrandir

Même si elles peuvent être "noyées" dans le flot de nouveautés que sort Google régulièrement, ces nouvelles fonctionnalités peuvent-être vraiment intéressantes, soit pour trouver des infos encore plus pertinentes (avec le tri par période et/ou source d'information), mais également pour travailler sur le SEO d'un site (notamment grâce aux termes liés qui sont proposés sous forme de mindmappping).

Bookmark and Share

Faire son site web... sous YouTube !

C’est l’idée originale qu’a eue l’agence Boone Oakley.

Le nom de domaine www.booneoakley.com redirige automatiquement vers une page YouTube et l’agence a choisi de faire un "site vidéo" : on retrouve une structure de site classique (works, news, vision, contact...) mais tout est présenté sous forme d’animations interactives avec musique et voix-off. Et grâce aux zones interactives (que l’on avait déjà vu sur la campagne "Samsung Instinct" notamment), on peut naviguer au sein du "site vidéo".

Chaque rubrique est ainsi animée et permet à l’agence d’exprimer sa créativité, de montrer son 2nd degré, notamment avec les noms des agences et la séquence où les créatifs se mettent à travailler... Des indicateurs positionnés au-dessus de la timeline sont l’équivalent du scroll et permettent d’avancer dans les explications (ici par exemple)

Une belle démonstration de créativité et très certainement de buzz par la même occasion.

Bookmark and Share

mardi 26 mai 2009

26 Mai 2006 - 26 Mai 2009 : 3ème année pour mon blog

Le 26 Mai 2006, je mettais en place mon blog et je postais mon 1er billet.Trois ans plus tard, je suis étonné d’être encore là et de poster encore (relativement) régulièrement.

Etonné, car je n’ai plus trop le temps de lire mes blogs favoris et qu’il m’est parfois difficile de trouver du temps à consacrer à mon propre blog... D’où, parfois, des semaines sans billet comme cela a été le cas en début d’année à plusieurs reprises. J’avoue me poser des questions parfois : pourrai-je continuer à bloguer régulièrement avec l’arrivée de mon bébé cet été ? Ce que je propose est-il toujours intéressant ou bien est-ce que je ne m’épuise pas un peu au bout de 3 ans... ? Beaucoup de blogueurs ont certainement dû se poser les mêmes questions avec le temps...

Et puis, de temps à autre, je reçois quelques commentaires ou mails qui me font du bien et me remontent le moral.

Ces quelques commentaires et autres mails sont réconfortants et essentiels, et c'est en grande partie grâce à cela que je vais renquiller pour une année supplémentaire !!! Donc pas de chiffres ou de stats cette année (même si je les regarde de temps à autre ;-) juste un petit mot très sincère pour vous remercier de me lire de temps en temps après ces 3 années, et pour remercier celles et ceux qui m’encouragent à continuer !

Bookmark and Share

dimanche 24 mai 2009

Formation en "Gestion de projets interactifs" à l’Ecole HETIC (2/2) : le point de vue des élèves

Voici le second billet concernant la formation en gestion de projets interactifs à HETIC ("Hautes Etudes des Technologies de l’Information et de la Communication")

Dans le billet précédent, Jean-Christophe Beaux, le Directeur de HETIC, nous présentait l’école et sa formation. Dans ce 2nd billet, ce sont 3 anciens élèves qui vont nous apporter leur point de vue :

  • Renaud PERRIN, actuellement Consultant e-marketing (génération de trafic et mesure d’audience) chez SQLI Agency et diplômé de HETIC cette année;
  • Etienne MAUJEAN, actuellement Architecte de l’information chez Axance et diplômé de HETIC cette année;
  • et Antso RAKOTO, actuellement Chef de Projet chez Nurun (tiens tiens ;-) et diplômé de HETIC en 2008.

1. Qu’avez-vous pensé globalement de la qualité des intervenants (formateurs permanents et intervenants ponctuels) ?

Renaud : HETIC fait intervenir des professionnels en activité. C’est une des forces de la formation. Plus que de la qualité des cours, c’est une véritable expérience en agence/entreprise qui nous est offerte.

La formation oscille entre intervenants réguliers dans les domaines fondamentaux (gestion de projets, développement, e-marketing) et intervenants ponctuels (droit, simulation d’entreprise...)

Etienne : Les intervenants qui enseignent à HETIC sont soit des professionnels aguerris, soit des professeurs reconnus qui interviennent dans d’autres grandes écoles. Les premiers étant clairement majoritaires, l’enseignement est très pragmatique et emprunt de leur expérience du terrain. Leurs interventions sont certainement les plus riches d’anecdotes et de cas réels qui nous permettent d’anticiper les risques d’un projet ou les réactions d’un client. C’est véritablement primordial d’être au plus près des métiers dans notre industrie, qui reste jeune et qui évolue très vite.

Antso : A mon sens, c'est véritablement un des points forts de la formation. J'ai trouvé les intervenants HETIC vraiment très bons: ils maitrisent bien leur sujet, sont très à l'écoute des étudiants et sont aussi de bons pédagogues (dans l'ensemble ;-))

2. Quels sont les atouts et les points négatifs de cette formation ?

Renaud : Le point fort incontestable est la réalisation de projets client. L’école permet à l’ensemble des élèves de chaque promotion de réaliser des projets en équipe en mode projet (chef de projet, développeur, e-marketer) en relation directe avec un client afin de répondre à un besoin de communication en ligne. Quelle meilleure école que de se confronter à la réalité de la gestion de projets client.

Le second atout est à mon sens, la sans cesse évolution de la formation fonction des retours des élèves et des anciens élèves pour se calquer sur les besoins du marché (des agences et des annonceurs) et ses évolutions. HETIC intègre l’ensemble (ou presque) des métiers de la communication en ligne.

Les stages en 3ème et 4ème année nous permettent d’avoir des expériences riches et variées à chaque fin d’année comme pour mettre en pratique l’année écoulée et s’enrichir dans un environnement différent au contact de professionnels.

L’alternance (6 mois à temps partiel et 6 mois à temps complet) en dernière année nous permet d’être complètement intégrés au cœur des projets et de l’agence/entreprise et d’être opérationnel avant même la fin de la formation.

Je dirais que c’est une formation pragmatique en phase avec les évolutions qu’a engendré internet et les métiers de la communication de manière générale.

Les deux points négatifs : le suivi des stages et l’hétérogénéité pédagogiques des intervenants.

Etienne : HETIC se veut être une formation polyvalente. Les premières années permettent d’acquérir de solides compétences relatives aux métiers "historiques" du web. Je pense à la direction artistique, au développement (Php, Flash, maîtrise des principaux CMS, etc...) et au marketing. La deuxième partie du cursus propose une formation beaucoup plus pointue et novatrice puisqu’elle aborde des thèmes comme l’ergonomie, SEO/SEM, les langages récents (Flex, Ruby, AS3, etc...) le web analytics, l’entreprenariat, etc...

La formation est riche et aborde une multitude de domaines. Même s’ils font le choix de se spécialiser par la suite, les diplômés ont une vraie culture de l’internet et de ses métiers. Cela permet, notamment en gestion de projet, de comprendre les contraintes de chacun et d’être à même de dialoguer avec des profils très différents.

Pour autant, l’école est encore jeune et certains domaines auraient mérité d’être plus approfondis (je pense à l’accessibilité ou au buzz marketing). Malheureusement, les journées ne font que 24h et les plannings sont déjà bien chargés, ce qui empêche parfois d’approfondir des matières très pointues. HETIC a le mérite de les aborder à titre d’initiation, ce qui est déjà bien.

Antso : Ce que j'ai beaucoup apprécié à HETIC c'est l'aspect pratique de la formation. Les projets mis en avant par l'école sont des "vrais" projets pour de "vrais" clients. Les problématiques étant (quasi) similaires à celles que l'étudiant rencontrera en entreprise, cela lui permet d'être relativement opérationnel dès sa sortie.

La pluricompétence enseignée à HETIC est l'autre atout majeur. En effet, on y aborde autant les sujets relatifs à la gestion de projet qu'à la conception (élaboration de storyboards / spécifications...) et à la production (création, intégration, développement...)

Du côté des points à améliorer, je dirais que les enseignements HETIC gagneraient à traiter davantage de l'aspect budgétaire d'un projet (connaissance globale des taux du marché, élaboration de pricing, initiation à la négociation commerciale etc...) et à intégrer un peu plus la dimension internationale, ne serait-ce qu'en proposant plus de cours en anglais (you know what I mean !)

3. Est-ce qu’il vous a été possible de mettre directement en pratique en entreprise ce que vous appreniez à l’école ?

Renaud : Comme je le disais ci-dessus, l’école nous permet d’avoir une vue transversale des métiers en agence de communication interactive. En arrivant en agence en tant que chef de projet, vous avez déjà des bases solides en gestion de projets et connaissez la relation client. Bien sûr, il s’agit d’un autre environnement (parfois hostile) mais la qualité de la formation donne une aisance indéniable.

Etienne : Absolument ! Hormis la pluridisciplinarité, la pierre angulaire d’HETIC touche à l’insertion professionnelle. A partir de la troisième année, des projets réels sont assignés aux étudiants. Certains sont imposés par l’administration et font partie intégrante du cursus, d’autres sont proposés par la Junior-Entreprise. Pour ma part, j’ai participé à 15 projets (principalement des créations ou refontes de sites) répartis sur ma troisième et ma quatrième année. Sachant que chacun dure en moyenne 2 mois et permet d’endosser des responsabilités très différentes (j’ai été plusieurs fois chef de projet, concepteur/rédacteur, etc...) il faut bien souvent jongler entre trois ou quatre projets de front.

De plus, la formation impose plusieurs stages, ce qui m’a permis dès la troisième année de m’exercer à la gestion de projet au sein de l’agence Nurun qu’Eric connait bien. Enfin, la dernière année en alternance permet aux étudiants de revendiquer l’équivalent d’un ou deux ans d’expérience avant même d’être diplômés.

Antso : En intégrant Nurun, j'ai rapidement été confronté à des problématiques (somme toute classiques pour un chef de projet) telles que la compréhension des spécificités et de l'historique d'un projet, la gestion d'une équipe, la maitrise des délais etc... Le fait d'y avoir été confronté lors de mon cursus HETIC m'a permis de "rentrer dans le bain" (un peu) plus facilement et plus rapidement.

4. On a l’impression en lisant les réponses de J-C Beaux que la formation est trop généraliste et pas assez spécialisée en gestion de projet. Est-ce le cas ?

Renaud : Tout dépend de ce que l’on entend par généraliste. Il y a des cours/bases indispensables à connaitre, en tant que chef de projet et futur professionnel de la communication interactive. La formation ne vise pas à former une batterie de chefs de projet. Elle forme lors de la troisième année et quatrième année (anciennement la deuxième et troisième année) aux différents métiers avec une très forte composante en gestion de projets. Chaque élève, au cours de ces deux années est confronté à la gestion de projets et suit de nombreuses heures de cours dans ce domaine.

La dernière année permet à chacun de se spécialiser en suivant des cours spécifiques en même temps que ce que l’on pourrait appeler tronc commun.

Être une formation spécifique en gestion de projets serait une hérésie (à mon sens) tant les métiers de la communication interactive sont multiples et les connaissances de ces mêmes chefs de projet doit être transversale pour mener à bien ceux-ci. Chef de projet, consultant e-marketing, développeur, ergonome et j’en passe sont autant de métiers vers lesquels peuvent prétendre les élèves ayant suivi la formation HETIC.

La formation propose une vue transversale des métiers de l’agence. Toutefois la composante gestion de projets rythme les journées (et souvent les nuits) des deux premières années.

Etienne : HETIC ne se résume certainement pas à une école de gestion de projet. Les projets tenant une place importante dans le cursus et la mise en pratique des connaissances, c’est logique qu’une partie des diplômés débutent leur carrière par un poste de chef de projet. Pour autant, leur polyvalence et le caractère éclectique de la formation leur permet d’intégrer beaucoup d’autres postes à responsabilités. Je me suis moi-même orienté vers la conception et l’architecture de l’information, d’autres sont responsables techniques ou consultant e-marketing par exemple. La formation donne une multitude de clés. A chacun la responsabilité de s’orienter vers la serrure qui l’intéresse.

Antso : Effectivement c'est le cas, mais je pense que c'est voulu. En sortant d'HETIC, on ne ressort pas forcément chef de projet. Les profils de sortie sont plutôt variés: dans ma promotion par exemple, on retrouve des graphistes, des développeurs mais aussi des personnes qui travaillent dans l'analytics... Bref un peu de tout ! Je dirais donc que la formation n'est pas spécialisée mais plutôt orientée gestion de projet.

5. Un cursus de 5 ans est-il justifié selon vous ? Et quelles sont les différences fondamentales entre le cycle court et le cycle long ?

Renaud : Le cycle long vient d’ouvrir cette année et je ne préfère pas me prononcer sur la question ne connaissant pas assez celui-ci.

Etienne : Selon la philosophie de l’école, 5 ans ne sont pas de trop pour acquérir les connaissances de bases, les exercer lors des projets et amorcer son projet professionnel en connaissance de cause. Le cycle prepa ressemble au cursus d’un DUT Services et Réseaux de Communication, mais il approfondit largement les enseignements dits de culture générale. Les trois années suivantes permettent d’être opérationnels dès la sortie d’étude et d’accéder à des postes à responsabilités.

Internet est une industrie relativement jeune et nombre de managers se sont formés "sur le tas", en étant issus d’une école de commerce par exemple. Les formations courtes d’aujourd’hui (BTS, DUT, Licences Pro, etc...) vont se fondre dans cet environnement mouvant. Elles suffisent encore parfois pour exercer un métier exécutif (intégrateur html, développeur, ou designer par exemple). D’un autre côté, on commence vraiment à voir des jeunes diplômés sortir d’école dédiées aux métiers du web et je suis persuadé que le degré de qualification requis sera de plus en plus élevé au fur et à mesure que notre secteur gagnera en maturité.

Antso : C'est une question à laquelle il m'est difficile de répondre dans la mesure où le cycle prépa HETIC n'avait pas encore été mis en place lorsque j'y étais et que je ne connais pas la nature des enseignements proposés. Mais tout ce que je peux dire, d'un point de vue personnel, c'est que mes 3 années à HETIC ont été amplement suffisantes.

6. L’investissement financier que représente la formation sur 5 ans est-il selon vous justifié par rapport à la qualité des cours, aux compétences des formateurs, au matériel disponible etc... ?

Renaud : C’est un investissement financier et humain qui donne des débouchés incontestables et incontestés. Une formation de cette qualité n’a pas de prix tant le retour sur investissement est considérable.

Etienne : Après une certaine hésitation, j’ai souscris un prêt avec remboursement différé pour ne pas trop solliciter financièrement mes parents. Mon idée initiale était de continuer mes études en cycle supérieur pour augmenter mes chances de trouver un emploi.

Le mot est donc particulièrement bien choisi, c’est un investissement. A la réflexion, il me parait mesuré car il ne s’agit pas tant de bénéficier d’un ordinateur portable performant ou d’intervenants plus réputés qu’ailleurs. Il s’agit surtout d’acquérir l’expérience suffisante pour construire son projet professionnel et de se distinguer lors de la première embauche. En ce sens, la dernière année en alternance est un facteur facilitant important.

Antso : Encore une fois, ne connaissant pas bien le contenu du cycle prépa HETIC, je préfère répondre à la question en ce qui concerne le cycle supérieur. Les enseignements proposés à HETIC ainsi que le matériel mis à disposition des étudiants sont de très très bonne qualité, c'est indéniable. Maintenant dire que l'investissement financier est justifié c'est difficile : "oui" pour ce que je viens de préciser ci-dessus, mais "non" car je trouve que les frais de scolarité sont encore trop élevés (pour quelqu'un qui n'est pas encore sûr de trouver ce qu'il recherche en intégrant l'école, je comprends que le risque puisse être trop important).

7. Avez-vous des remarques à faire à l’école dans l’optique d’améliorer la formation ?

Renaud : Oui mais pas ici. Je l’ai souligné ci-avant, la formation évolue en fonction des retours d’expérience des élèves et anciens élèves confrontés à la réalité des métiers en agence/entreprise. Les échanges avec la direction de l’école sont réguliers.

Etienne : Je pense que la formation va encore s’améliorer avec le temps. Pour schématiser, plus elle sera reconnue, plus le niveau des candidats sera élevé. Si les élèves ont déjà des connaissances de base, les intervenants n’auront que plus de temps pour approfondir des domaines "experts". L’école fait également de gros efforts pour sélectionner soigneusement ses intervenants.

Antso : Baisser les frais de scolarité ;-) Plus sérieusement, comme je le disais précédemment, pour moi, le vrai point à améliorer serait de proposer des enseignements spécialisés budget. Cela accentuerait davantage le côté pratique et opérationnel de la formation.

8. Si vous deviez recommencer votre formation, est-ce que vous vous tourneriez toujours vers cette formation ?

Renaud : Sans aucun doute. Après un DUT Informatique, je ne savais pas trop vers quel métier m’orienter malgré ma passion pour le web. Cette formation m’a permis d’appréhender le Marketing Internet et m’a permis de m’orienter vers un métier. Je dis bien métier, car c’est à un métier qu’HETIC nous forme et non à un simple panel de connaissance. Un métier dans lequel nous serons de futur spécialiste et à un savoir transverse indispensable des différents métiers/profils de l’agence.

Etienne : Absolument. A l’issu de mon DUT obtenu en province, je ne me voyais pas commencer à travailler. J’avais une vision très simpliste des professions qui s’offraient à moi, et n’avais aucune notion business. Mes connaissances étaient superficielles et je n’avais quasiment aucune expérience professionnelle. Aujourd’hui, j’ai acquis une certaine confiance en mes capacités de conseil, d’adaptation, etc... tout en gardant une bonne marge de progression bien-sûr ;-)

Antso : Sans aucun doute, oui complètement. Après mon DUT Informatique, je cherchais une formation plus axée gestion et management et si possible, dans un domaine que je commençais à apprécier fortement, le web. Et bien, je n'ai pas été déçu. Encore aujourd'hui, je suis vraiment content ce que je peux apporter à Nurun, en partie grâce à HETIC.

9. Question facultative : vous a-t-on obligé à lire le livre "Conduite de projet web" de Stéphane BORDAGE ;-) ?

Renaud : Non mais oui (ou l’inverse) ;)

Etienne : Ce n’est pas obligatoire, mais la rumeur dit que c’est un pré requis à l’obtention d’une bonne note aux partiels ;-) Plus sérieusement, ses interventions et son soutien tout au long de nos projets sont parmi les fondations de la formation. Soyez rassurés. Ses cours sont beaucoup plus digestes et agréables que la lecture des 400 pages de son bouquin ;-)

Antso : Secret professionnel ;-) Tiens d'ailleurs, si tu as des exemplaires cadeaux, je suis preneur !

Merci à Antso, Renaud et Etienne d’avoir répondu à mes questions.

Plus d’infos sur leur parcours :

Bookmark and Share

lundi 18 mai 2009

Belle interface riche pour trouverunvol.com

Trouverunvol.com est un comparateur (de vols, séjours, location de voiture, hôtels...) qui a mis en place une interface riche en apparence traditionnelle mais qui regorge de pas mal de petits détails qui la rendre intéressante :

1ère étape : la saisie des informations

  • sur chacun des 4 types de recherche, les logos des voyagistes défilent, ce qui est très utile pour savoir chez qui trouverunvol.com va effectuer ses recherches ;
  • sur certains champs de saisie, l’auto-complétion permet de trouver facilement la ville correspondante ;
  • quand plusieurs villes portent le même nom, un joli petit drapeau est associé à chaque ville pour les différencier ;
  • les aéroports liés à 1 ville sont indentés pour plus de lisibilité ;
  • enfin, pour la location de voitures, on voit les logos des loueurs directement dans l’auto-complétion ;
Trouverunvol.com

L'indentation et l'utilisation de pictos rendent le menu déroulant clair et compréhensible.

2ème étape : la recherche

Après avoir cliqué sur le bouton "rechercher" :

  • le chargement s’effectue avec indication du temps restant ("vos résultats dans moins de X secondes") ;
  • possibilité de stopper la recherche si l’on dispose de suffisamment de résultats ;
  • au fur et à mesure de la recherche, des petites animations indiquent les positions des voyagistes avec des indicateurs colorés correspondant au prix;
Trouverunvol.com

Des petites animations et des indicateurs colorés pendant la recherche.

3ème étape : l’affichage détaillé des résultats

Une fois la page rechargée, les résultats sont affichés sous forme de liste que l’on peut affiner :

  • sur la droite, un slider permet de réduire la fourchette de prix, les autres options peuvent se cocher / se décocher pour remettre instantanément la liste à jour ;
  • de belles et grandes vignettes prédictives s’affichent au survol de certains boutons (sur la location de voitures et la recherche d’hôtels) ;
  • en haut de page, pour les billets d’avion, une courbe d’évolution des prix trouvés par les internautes s’affiche : ainsi, on peut voir la progression du prix des billets plusieurs dates, ce qui est très utile pour faire des économies si l’on est flexible sur les dates de voyage ;
  • toujours en haut de page et toujours pour les billets d’avion A/R, des graphes indiquent les meilleurs propositions d’aller et de retour en fonction des dates sélectionnées et d’une flexibilité ;
  • sur la recherche d’hôtels, une Google Maps est intégrée à la page, avec 2 particularités :
    • on peut la consulter en petite ou en grande taille ;
    • et quand on clique sur un hôtel, celui-ci apparaît sur la droite de la map et fait partie de ma sélection.
  • et ce qui est très bien fait, c'est que les listes de résultats varient en fonction des types de recherches (une map pour la recherche d'un hôtel, des comparateurs différents pour la recherche d'un billet d'avion...)
Trouverunvol.com

Une page de résultats très complète qui varie en fonction du type de recherche.

Comme vous le voyez, il y a pas mal d’animations et d’effet visuels, mais globalement, cela ne nuit pas à l’interface, bien au contraire. Ca fait plutôt plaisir de tomber sur des interfaces comme celle-ci !

Avez-vous d’autres exemples aussi intéressants et bien finis ?

Bookmark and Share

jeudi 14 mai 2009

Les outils online de conception de wireframes (4/5) : utiliser Protoshare

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.
Protoshare : l'interface 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."

Bookmark and Share

dimanche 10 mai 2009

Une arborescence à mi-chemin entre plan du site et inventaire des contenus

Voici une arborescence particulière vue sur Wireframes Magazine.

Une arborescence à mi-chemin entre plan du site et inventaire des contenus 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 ?

Bookmark and Share