Demat Store est une jeune société reposant sur les années d’expérience de ses fondateurs dans le secteur de la dématérialisation. Elle s’était dotée il y a un an d’un site internet présentant rapidement son service technologique. Elle propose une clef sécurisée pour accèder à tout moment à ses données personnelles depuis n’importe quel poste informatique du globe. Un espace privé est disponible en ligne pour stocker, partager, gérer et consulter ses documents numériques personnels et professionnels, uniquement accessibles par le biais de cette clef où est embarqué un navigateur internet spécifiquement développé.

Le besoin

Le site internet Demat-Store.com ne reflète qu’une image BtoB où le produit et les avantages du service de dématérialisation ne sont pas perçus. Au contraire, ils sont noyés dans une masse d’informations techniques et des zones éditoriales redondantes. La simplification du message et des promesses devient indispensable.

Ancienne page d’accueil du site internet :

La réponse stratégique

Une conception rédactionnelle axée sur 4 promesses produit : la sécurité informatique, la valeur juridique reconnue pour les documents numériques gérés, la mobilité / la disponibilité, et enfin la valeur haut de gamme du produit physique.

Le discours peut alors s’étoffer :

LE CHEZ-VOUS NUMÉRIQUE

100% SÉCURISÉ
Cryptage des données et navigateur web embarqué

100% LÉGAL
Un archivage de vos documents à valeur juridique

100% LIBERTÉ
Pas d’engagement, un espace disponible pour 30 ans

100% TENDANCE
Un étui prestigieux en cuir pour le transport

Ces 4 points sont accompagnés de visuels illustratifs qui agrémentent ainsi un « slide-show » sur la page d’accueil. L’internaute perçoit immédiatement la globalité de ce qui lui est proposé. Car, c’est évident, avant d’acheter il vaut mieux savoir ce que l’on achète et être rassuré sur le fait que c’est bien ce qu’il nous faut !
Le service proposé par Demat Store est alors synthétisé au maximum pour n’en présenter qu’une phrase unique, une accroche :

« Vos documents numériques, personnels et confidentiels, disponibles en ligne à tout moment ! »

La construction du site devient ensuite aisée avec une restructuration de l’information (l’architecture des contenus) et de sa présentation (ergonomie).
La réflexion ergonomique est étroitement liée à 4 phases marketing, AIDA :

• attirer l’Attention
• susciter l’Intérêt
• provoquer le Désir
• inciter à l’Action.

Le résultat

Que des félicitations sur le site internet et sur la perception du message de la part du grand public, des institutions et des professionnels. Message renforcé par les opérations de relation presse dont les retombées sont visibles ici : http://www.demat-store.com/cms.php?id_cms=12

Ce discours devient l’argumentaire de vente de Demat Store, utilisé durant leurs présentations, leurs séminaires, leurs show-room et les conférences. Réussite !

Voir la page référence sur le projet Demat-Store.com

Mise à jour du 01 avril 2011 :
Demat Store à l’antenne de RTL2 : http://legrandmorning.rtl2.fr/2011/03/shopping-sauvez-vos-donnes.html

Les écrans multimédia sont des bornes dénommées Ray-On et développées par la société On-Situ. Ils se comportent comme des tableaux vivants orientables à souhait, restituant à la vue actuelle les éléments virtuels d’origine ainsi que l’éclairage selon la lumière naturelle.

Vidéo de la borne :

Site internet du projet Cluny-numérique : http://www.cluny-numerique.fr/

Nous nous lançons dans la conception d’interface en mode numérique, nous éloignant ainsi peu à peu du traditionnel papier/crayon ou du tableau-blanc/feutre. Cela permet de maquetter des interfaces, de les corriger, de les publier voire de les partager. Voici une petite liste d’outils de création d’interfaces graphiques et de schémas (wireframes, prototypages, etc.) pour la conception de projets interactifs.

Actuellement je découvre l’excellent outil de conception en ligne Balsamiq (démo ici : http://www.balsamiq.com/builds/mockups-web-demo/ )
En plus de l’avantage d’être en ligne et d’être gratuit, le rendu « rough » est assés convivial et l’interface est simple d’utilisation.

Il y a évidemment d’autres outils, gratuits, payants, en ligne ou en application locale.
Parmi ceux déjà listés (mais pas testés) :

• Axure (payant et trés complet) : http://www.axure.com/
• Guimags et Guiboards : http://www.guimags.com
• Cacoo (que en ligne) : http://cacoo.com/
• Fluidia : démo testable ici http://stage.fluidia.org/
• Mocking bird (que en ligne) : http://gomockingbird.com/mockingbird/
• Mockflow : http://www.mockflow.com/

Enfin un bon article rédigé par Korben : « 18 outils gratuits pour faire des maquettes d’interfaces graphiques » à cette adresse http://www.korben.info/18-outils-gratuits-mockups.html

N’hésitez pas à partager vos avis ici ou sur le sujet équivalent au sein du nouveau forum de l’association FLUPA : http://forum.flupa.eu/phpbb/viewtopic.php?f=8&t=81

–
Mise à jour de l’article le 25/08/2010 :

• nous nous sommes décidés pour la license de Lovely Charts : http://www.lovelycharts.com/ De multiples outils pour le prototypage, diagramme, organigramme hiérarchique, etc. qui vont évoluer dans les prochaines versions, nous confirme l’éditeur belge.
• découverte de iPLOTZ, payant et visiblement puissant : http://iplotz.com/

Mise à jour du 16/05/2011 :

• découverte de Gliffy : http://www.gliffy.com/wireframe-software/
• et de MX Graph : http://www.jgraph.com/mxgraph.html

Chris Anderson, le rédacteur en chef, est fier de la présenter en vidéo. Et il a de quoi pavaner un peu : l’innovation et « l’édition numérique du futur » sont déjà au rendez-vous.
NB : question accessibilité ? cela fera l’objet d’un projet article. Pour l’instant, apprécions l’expérience utilisateur…

Source : Wired.com

Le 15e rendez-vous international des conférences Design Typo Berlin se déroule du 20 au 22 mai.

Disons-le : cet événement est au Design (avec un grand D) ce que ParisWeb est aux bons usages du Web (avec un grand W). Il s’adresse aux professionnels du design graphique, du design industriel, du design artistique et même celui d’internet.

La liste des intervenants est disponible sur le site officiel www.typoberlin.de, avec notamment au programme une intervention de l’américain David Carson. Si vous ne connaissez pas ce typographe/designer, voici une vidéo de sa conférence au cycle TED de 2003.

L’édition de cette année tourne autour du thème de la « Passion », coeur de réflexion et de travail pour la cinquantaine de graphistes et designers qui relèvent le défi ! Les places ne sont plus disponibles ce jour, mais une application iPhone est proposée sur le site pour suivre la retransmission.

Le clin d’oeil au référencier international des couleurs intégrant l’évolution des prises de conscience environnementale est une belle idée.

Plein les yeux de dérivés Pantone sur l’article : Du Pantone dans les yeux.

Nous venons d’achever l’ergonomie et l’intégration d’un projet intranet pour le Centre National de la Fonction Publique Territoriale (CNFPT) reposant sur le principe fonctionnel du service Netvibes.

Netvibes est un portail web français, lancé en 2005 et représentatif de ce que l’on nomme le « Web 2.0″ : il permet de créer sa page d’accueil personnalisée via la gestion de contenus et de services (agrégation de flux RSS). Les utilisateurs de cette application peuvent construire leur page de démarrage selon leurs besoins en ajoutant différents modules, que ce soit les fils d’actualité de leurs sites favoris ou des applications (widgets) spécifiquement développées. La modularité des « espaces » ou « blocs de contenu » ainsi ajoutée permet de les déplacer, de les afficher en mode réduit et d’en déterminer des paramètres spécifiques d’affichage.

C’est cette souplesse de modularité en « blocs de contenu » que nous avons reproduit pour l’interface de l’intranet du CNFPT. Avec un soupçon supplémentaire : l’accessibilité numérique de ces fonctions. Ainsi, la navigation par tabulation permet la même interactivité fonctionnelle que la navigation à la souris.

Focus :

• au passage de la tabulation sur l’intitulé de déplacement, une fenêtre de dialogue propose les liens « déplacer vers le bas, déplacer vers la droite » dont les options de déplacement correspondent à l’emplacement de la boite initiale ;
• les blocs peuvent être réduits ou agrandis individuellement ou globalement ;
• la première tabulation affiche le prélude d’accès aux contenus ou aux outils proposés par l’intranet ;
• l’affichage du pied de page peut être réduit ou complet.

Le résultat est consultable ici :
- interface type de l’intranet du CNFPT
- gestion des formulaires et de la navigation interne du backoffice : page 1 – page 2

Pour la bonne réalisation et la qualité de ce projet interactif nous avons collaboré avec la société Temesis car il est bien évidemment toujours plus convenable de faire valider son travail par des experts externes !

Un merci au CNFPT pour la confiance accordée et pour les échanges constructifs qui ont abouti à ce résultat. Un merci plus personnel à Servan (webdesign), à Nicolas (développement front) et à Aurélien (audit/validation) pour la qualité et la conformité de ce projet !

Une fois n’est pas coutûme, voici une petite news typographique concernant les fonts Helvetica et GillSans que tout graphiste connaît, quelles que soient sa situation géographique ou son origine culturelle !

Pour les 50 ans de la police de caractères suisse Helvetica, la maison d’édition Moleskine édite son notebook de 192 pages en deux versions de couverture : rouge ou noir estampillées d’Helvetica. Tirage très limité à 500 exemplaires !

Pour le GillSans, voici un admirable travail de présentation de la typographie sous forme d’argumentaire vidéo, réalisé par Matthieu Dufour et Carl Soper, deux étudiants en troisième année de typo/éditions à l’ECV Paris (Ecole de Communication Visuelle) :

Via be-pôles

« doit-on faire confiance aux décisions artistiques d’un décideur ou à celles d’un directeur artistique (dont c’est le métier à priori) ? »

autre question :

« doit-on faire confiance aux décisions ergonomiques d’un décideur ou à celle d’un professionnel en ergonomie interactive ? »

(volontairement, je ne liste pas les similitudes interrogatives autour d’un concepteur, d’un rédacteur, d’un achitecte de l’information, d’un expert en accessibilité, etc. afin de ne pas s’éloigner du sujet central)

Les semaines passant, les drafts passant, les story-boards, les débriefs, les réunions, les re-drafts, les n-ièmes propositions de variantes et de déclinaisons passant, force est systématiquement de constater que c’est l’interlocuteur qui a le dernier mot parce que :  

• il agit en conséquence et en pleine connaissances de cause vis-à-vis de tous les conseils donnés (répétés ?) ;
• le rapport de force n’est pas égal et à moins d’aller au crash, le seul objectif commun reste quand même le projet ;
• il valide le devis et les factures !

Tout étudiant en école de communication, de graphisme et de multimédia devrait être fortement sensibilisé sur ce point. Les stages et autres échanges concrets avec le milieu de l’entreprise peuvent y contribuer : cela leur enseignera la « frustration du mode projet » et à lacher du lest vis-à-vis de leur création qui ne leur appartient pas finalement…

NB : … et ce soir je suis fortement frustré !

Comme en ce moment nous croulons sous les impératifs, je me suis fixé une urgence supplémentaire d’une extrême importance : faire le Vendée Globe 2008 !
… en ligne naturellement.

Le principe est aussi simple que celui donné aux « vrais » concurrents : prendre un bateau et naviguer sur le même parcours autour du monde pour arriver le 1er en franchissant les portes obligatoires.

L’application full-flash tient compte en temps réel de la météo, des vents, des courants marins, du choix de la voile, etc. Il ne manque plus qu’une pseudo-caméra embarquée et le goût de sel ! Un petit développement signé ManyPlayers, avec lesquels nous avons déjà collaboré pour la conception de jeu en ligne.

Rejoignez-moi (profil : « digitzu ») et mes collègues sur virtualregatta.com. Nous nous sommes fixé un 1er challenge : le dernier arrivé au sud de l’Afrique (donc à franchir le cap de Bonne Espérance) paye son coup

Sur la capture écran vous pouvez voir que je suis déjà très mal parti : voilà ce qui arrive quand on ne s’occupe pas de son bateau et que l’on travaille ! Mais je compte bien sur les courants marins pour m’aider.

Pour suivre la « vraie course » avec « les vrais concurrents dedans » connectez-vous sur le site officiel : vendeeglobe.org

Mise à jour du 27 février 2009 : capture écran de l’arrivée aux Sables d’Olonne