Synerg'heBlog le blog de la Junior-Entreprise spécialiste du web » Actualité et veille numérique

Lorsqu’on travaille en tant que chef de projet, deux solutions s’offrent schématiquement à nous pour réaliser et suivre son planning.
D’un côté Microsoft Project, que beaucoup trouvent trop lourd et complexe. A l’opposé, la bonne vieille feuille Excel remplie de formules.
Celle-ci fait souvent l’affaire, mais s’avère parfois peu pratique, surtout en cas de mises à jour successives de planning.

Entre les deux, on trouve quelques très bons logiciels de gestion de projets comme Merlin ou Omniplan, mais uniquement disponibles sous Mac OSX.

Je vous propose de découvrir Tom’s Planner, une application web dédiée à la gestion de projet et la création de planning en toute simplicité.
L’outil fonctionne en drag’n'drop et au clic-droit, permet d’attribuer des couleurs aux différents métiers impliqués dans le projet (développement, design, intégration…), d’ajouter des commentaires sur les tâches et d’exporter aux formats MS Project, image ou en version publiée en ligne.

L’utilisation de Tom’s Planner est gratuite pendant sa version bêta, toutefois tous les inscrits avant le 31 décembre bénéficieront gracieusement d’un an utilisation.

Site : http://tomsplanner.com/

Il y a une phase dans la création graphique qui est particulièrement délicate à gérer. C’est celle de la validation du travail par le client, que ce soit pour des cinématiques (wireframes), des concept-board, des logos ou autres maquettes.
Plusieurs rendez-vous et de nombreux échanges d’emails sont bien souvent nécessaires pour aboutir à un travail de qualité, qui satisfait aussi le client.
En effet, il n’est pas toujours aisé de saisir la vision graphique d’un client et il s’avère que la plupart sont soucieux du plus petit détail.
Cela peut vite devenir un véritable calvaire pour le graphiste si la communication des changements voulus par le client est difficilement compréhensible.

Parmi les dix projets présentés lors du carrefour des possibles organisé dans le cadre de Futur en Seine, par la FING, dont Synerg’heTiC est partenaire, un a particulièrement retenu notre attention, et répond à cette problématique, UpShot, service édité par le Studio Melipone.

UpShot vise à faciliter la communication entre un graphiste et son client.

Voici la démarche. Vous uploadez votre création. UpShot envoie alors un email à votre client contenant un lien vers celle-ci. Il peut enfin laisser très facilement des commentaires directement sur votre création.
UpShot a vraiment été conçu pour être simple d’utilisation, les créateurs d’UpShot sachant bien que tout le monde n’est pas à l’aise avec l’outil informatique, notamment les clients, diront les mauvaises langues.

L’offre commerciale se divise de façon naturelle en deux, une pour les free lance (pro) et une autre pour les agences (agence). Nous disposons d’ailleurs d’un compte agence ici à Synerg’heTiC.

En plus d’avoir bien conçu et réalisé ce service, les fondateurs d’UpShot utilisent les outils de webmarketing d’une bonne façon : blog actif et pertinent, vidéos (exemple en fin d’article), concours avec Emob, etc.
Autre preuve de leur bonne utilisation du web, ils ont mis en place un outil de feedback très à la mode, UserVoice, pour remonter les nouvelles fonctionnalités souhaitées par les utilisateurs. On peut d’ailleurs voir qu’une version mobile d’UpShot est en préparation.

UpShot est un service utile et bien réalisé par des fondateurs passionnés et compétents. C’est un bel exemple pour tout ceux qui souhaitent un jour devenir des entrepreneurs du web.
Nous ne pouvons que souhaiter à cette sympathique équipe de réussir.

UpShot et Synerg’heBlog vous offrent 10 codes donnant droit à un plan professionnel UpShot d’une durée d’un mois (valeur 35€ chaque). 2 moyens de jouer :

• Laisser un commentaire sur cet article / 4 gagnants
• Retweeter ce message : « RT@synerghetic Avis aux graphistes, 10 invits à gagner pour le service UpShot http://bit.ly/2TSVzn (RT pour participer) » / 6 gagnants

Vous avez jusqu’au 16 octobre à minuit pour participer. Les gagnants seront tirés au hasard et annoncés ici même.

Les RIA pour Rich Internet Application sont des applications web dont l’utilisation diffère d’une utilisation traditionnelle, en permettant de retrouver sur internet ce que vous aviez l’habitude de trouver sur votre bureau.  Vous l’aurez compris, le mot clé est porté sur l’utilisation de ses applications mais aussi sur leur utilité. La manière d’accéder à l’information diffère cependant des sites traditionnels de par l’utilisation de nouveaux modèles de navigation créant ainsi une rupture avec les standards HTML. Les RIA remettent en question les modèles des pages, par la simplification des interfaces utilisateurs en affichant les informations de manière sélective.

Toutefois,  comment peut-on définir l’utilité de telles applications ? Une interface riche peut être utile si, par exemple, elle propose des aides au remplissage de formulaires, des infobulles, un affichage plus sophistiqué, des réglettes, des sélections sur des éléments graphiques  ou un apport d’une plus value bénéfique au site.  Cependant, une sophistication toujours croissante amène les développeurs à innover sans cesse sur les modèles de navigation au risque de les rendre, parfois,  trop compliqués.

Innovation et aide à la navigation

Si l’on prend l’exemple de Deezer, l’innovation se fait dans l’interactivité entre les différentes zones du site. Pour ajouter une musique dans votre playlist, vous pouvez la faire glisser dans le nom de la playlist (avec un effet de surbrillance) ou cliquer sur le pictogramme associé à l’ajout d’une musique. Si vous essayez de déplacer une musique dans une autre zone incompatible, l’effet de surbrillance passera de vert à rouge, vous indiquant clairement que l’action n’est pas faisable.
Cette application permet donc de simplifier la navigation de façon cohérente. Au lieu de cliquer sur le pictogramme « + » puis de sélectionner le nom de la playlist et enfin de cliquer sur « autoriser », vous pouvez ajouter une musique grâce à un simple glisser déposer. 
 

La navigation se veut aussi fortement intuitive. Dans l’exemple suivant, Miramarcrouesty, plusieurs boutons peuvent être déplacés afin de ne pas gêner la lecture du contenu mais aussi pour permettre à l’utilisateur de créer en quelque sorte son petit univers. Ces modifications permettent de passer outre les règles de navigation préétablies d’un site traditionnel.  Cependant cela implique évidemment un petit travail d’organisation de la part de l’utilisateur, car si certaines zones d’un site sont déplaçables, d’autre ne le sont pas et n’ont pas été prévues pour. Autrement dit, si vous déposez un élément à droite d’une page pour améliorer votre lecture, vous aurez surement à le déplacer à nouveaux à l’affichage d’une nouvelle page.

 Certaines applications ne se révèlent être qu’une sorte de tape à l’œil cherchant à distraire pour cacher un contenu pauvre ou peu attractif. Sans prétendre que cette utilisation produit des applications futiles, quels sont alors les bénéfices apportés ?

Immersion par le Gameplay

Afin de se démarquer des systèmes de navigation classiques, on voit apparaitre de plus en plus de modèles  de navigation empruntés  aux jeux vidéos ou relevant d’une certaine expérience d’utilisation. Par exemple le Gameplay des jeux vidéo grâce auquel,  l’utilisateur  va naviguer en utilisant les touches de son clavier, la visualisation en 3D et le clic droit. C’est-à-dire qu’on utilise vos habitudes de navigation n’étant pas issues du web pour les adapter aux applications.  Cela permet notamment de créer une forte immersion dans l’univers du site afin d’amener l’utilisateur à son objectif d’une façon moins ennuyeuse.

Dans l’exemple de Photosynth, l’utilisateur peut utiliser son clavier ou sa souris pour naviguer. Les flèches permettent d’avancer dans la photo comme on avancerait dans un univers avec son personnage. La souris sert ici à regarder autour de soi. Cette navigation est très intéressante car elle propose une nouvelle approche de la navigation que ne permettaient  pas certaines visionneuses innovantes.

Outre le fait de créer une forte immersion,  ce genre de navigation prend tout son sens quand l’application devient le centre d’intérêt unique du site sans avoir à cacher ou à justifier un contenu quelconque  par la suite. L’application perd alors son statut d’aide à la navigation pour devenir une entité supérieure, l’objet de toutes les attentions.  L’application remplace le contenu pour délivrer un divertissement qui se révèlera utile ou non en fonction de l’exigence de chacun.

Pour conclure je souhaite vous poser cette question :

Pensez-vous que l’interface utilisée dans les applications riches sert le contenu pour plus de clarté ou sert uniquement à divertir son utilisateur ?

J’ai eu l’occasion de travailler sur de nombreux projets de création d’interfaces web. Bien que ces projets ne soient pas tous en ligne, cela m’a permis de développer mes compétences dans ce domaine.

Depuis cela, je m’oriente volontairement vers les domaines de l’utilisabilité et de la conception orientée utilisateurs. Plusieurs débats ont animés la blogosphère ces derniers mois. Les avis divergent quant au meilleur outil de création de wireframes et de prototypage (Axure, Powerpoint, Visio ou encore Illustrator).

Pour ma part, je n’ai jamais utilisé que Powerpoint lors de projets professionnels et souhaite vous faire partager mon expérience à ce sujet.

J’ai tout d’abord débuté avec le toolkit de Long Zhen. Je pense qu’il s’agit là d’un bon outil de départ bien que ce dernier soit perfectible. J’ai par la suite découvert celui de Fred Cavazza, moins précis et un peu plus ancien. Il ne correspondait pas non plus à ce que je souhaitais utiliser.

L’un de mes projets nécessitait un haut niveau de détails dans la production des cinématiques c’est pourquoi j’ai décidé de créer mon propre toolkit et souhaite à présent vous le faire partager.

• NuTIC_PrototypingToolkit_v1.ppt (2,4Mo)
• NuTIC_PrototypingToolkit_v1.pptx (530ko)

Retrouvez plus de détails sur mon blog personnel NuTIC.net et visitez également les principales sources m’ayant permis de créer ce document :

• Long Zhen’s toolkit v 0.2 (.pptx)
• Cavazza’s wireframe toolkit (.ppt)
• Discours de Manuel Clément à propos de la création des outils Office (nécessite le plug-in Silverlight)
• Eric’s workshop and files

Je suis en attente de vos remarques. N’hésitez surtout pas à partager vos exemples avec nous !