vendredi 23 mars 2012

Documation 2012 - Rencontre avec Patick Hofmann


Documation


Présentation

Le salon documation comme certains le savent déjà et LE salon français réservé à la documation électronique, connu internationalement.


Objet

Il traite en autres sujets de  :

  • la dématérialisation, 
  • la numérisation, 
  • la gestion électronique,
  • la gestion de la traduction,
  • la représentation de l'information (Illustration 3D notamment)
  • l'archivage
  • la sécurisation de l'accès à l'information
et bien d'autres sujets souvent liés à la gestion de l'information et son accès plutôt qu'à la création de l'information.

Nouveauté

Et cette année enfin on parle de la documentation technique ! De sa création, sa segmentation, et sa représentation (Illustration)


Ma rencontre

Dans cet article je ne vais pas vous parler du salon en lui même, des ses statistiques visiteurs, ni même des sociétés ou éditeurs présents ils feront leur publicité aux-mêmes via le site de Documation.

Je vais vous parler d'un sujet qui m'a plus qu’intéressé et interpellé via une rencontre professionnelle d'une grande richesse....

Le sujet :  Icônes et des images : comment améliorer leur facilité d'utilisation graphique dans nos informations ?

Cette KeyNote a été menée par un expert en la matière : Patrick HOFMANN (User Experience Designer chez Google)

Son parcours


Tour à tour rédacteur technique, puis dessinateur il est actuellement responsable du design icônographique chez ....excusez moi du peu : GOOGLE pour le projet GoogleMaps. Pour résumer, c'est le Monsieur Icônes de GoogleMaps...et croyez moi ce n'est pas si simple qu'il en parait, lisez la suite...

Son constat - sa KeyNote

Le constat que fait Patrick H. suite à des études, est à la fois évident et effarent : nous n'interprétons pas les icônes de la même manière...bien sûr nous nous en doutions...mais les preuves ci-après nous amènent à penser qu'il faut être vigilant au début et dans la durée.

Nos interprétations sont différentes pour diverses raisons :

  • de culture
  • de nationalité,
  • de religion
  • ....mais le plus surprenant et finalement le plus intéressant, en raison de l'âge des utilisateurs...

Si nous devions retenir une phrase ce serait celle-ci : nos icônes vieillissent avec nous...

L'étude


Notre expert en la matière s'est en effet, amusé à réaliser un test au près d'enfants de 5 à 10 ans en leur demandant quelles icônes représenteraient le mieux pour eux certaines actions ou thèmes  telle que


  • Enregistrer, 
  • Musique, 
  • Vidéo, 
  • Allumer/Éteindre
  • etc.


Le résultat de l'étude


Les réponses sont sans appel : pour

Vidéo : les petites têtes blondes n'ont pas reconnu l'icône représentant un morceau de bobine de film super8 ils n'ont d'ailleurs aucune idée de ce que cela représente....et oui nous sommes à l'air du numérique...

Allumer/Éteindre : bien qu'il existe des interrupteurs type levier ou bouton, partout dans notre vie, là ne fut pas leur réponse en termes d'icône. Ils ont majoritairement choisi cette célèbre icône représentant un cercle  fendu d'une barre verticale disponible sur toutes nos télécommandes voire nos téléphones...que cela représente-t-il pour eux...rien !! nous parlerons dans ce cas d'une "learn icon" ...inutile de traduire (je m'excuse pour la loie francaise !...mais la aussi vivons avec notre temps.).
Mais d'ailleurs d'où vient cette représentation, car en effet, si il est communément admis que le radio bouton vient des anciennes radio avec des boutons physiques ronds qui ne permettaient de ne sélectionner qu'un bouton à la fois et faisaient remonter le bouton enfoncé lors de la pression sur un autre bouton, d'où vient cette représentation du marche/arrêt...?
Cette représentation est tellement universelle, qu'une célèbre marque de cigarette la utilisé dans son principe de cigarette convertible. Il est utiliser à la fois dans le ON de cONvertible, mais aussi est surtout sur le filtre. L'icone est en effet placée à l'endroit où la pression doit être exercée pour passer en mode menthol...ne chercher pas une fois en mode menthol, impossible d'arrêter avec une nouvelle pression ;-)

Sauvegarder : autre exemple de "learned icon" la "sauvegarde". Ils ont tous choisi la disquette comme icône représentant la sauvegarde...et oui regardez bien elle est dans tous ou presque tous nos logiciels...mais ils n'ont jamais vu de disquette !!! ...
pire ils y voient une porte de garage ;-)


Conclusion


Les exemples sont pléthores et je pense qu'il serait même possible d'en écrire  un livre !!

Alors si nous devions résumer le sujet de cette KeyNoet, il est à retenir que les icônes doivent

  • être simples, 
  • dessiner à taille réelle, 
  • directement compréhensibles sans être olbigé de les lires, 
  • adaptées pour les enfants de 7 à 97 ans, 
  • uni-sexe, 
  • uni-religion, 
  • uni-nationnalité...
  • bref universelles !


et enfin son conseil le plus pragmatique, le plus judicieux et le plus sûr : il faut tester ses  icônes le plus vite possible dans différentes situations de la vie (pas uniquement devant l'écran)...car n'oubliez pas vous voyez avec vos yeux qui eux ne sont pas universels...

PS : Thanks Patrick, a very interesting and professional KeyNote ;-)

La conférence en image :  
Icônes et des images : comment améliorer leur facilité d'utilisation graphique dans nos informations ?

vendredi 16 mars 2012

ePub et HTML5 et CSS3, le trio gagnant

Dans l'article précédent je mettais en avant le nouveau format des livres électroniques : ePub.

Cet article sera court mais je le pense permettra d'évoquer toutes les possibilités offertes par l'ensemble de ces technologies, à savoir ePub + HTML5 + CSS3.

Je ne présenterai pas ce qu'est HTML5 et CSS3, d'autres l'on fait et la littérature est très riche. Peut être un résumé simple :

HTML5+CSS3+Javascript est la combinaison gagnante des applications mobiles non développées en langage natif à savoir Objectif C pour l'iPad, l'iPhone et l'iPod ou encore Java pour les plate-formes Android. Bien il existait des sites Web en HTML5+CSS3 avant le portage sur les tablettes, pour comme vous pouvez le savoir, ou l'apprendre, combattre le monopole de Flash dans les applications Web demandant plus d'ergonomie et d’interactivité que de simples sites textuels.

Donc, HTML5+CSS3 permet de faire des WebApp, et si on pousse le bouchon un peu plus simple, ePub est basé sur du XHTML, il s'agit donc d'un mini-site web...donc il est possible d'y ajouter de l'ergonomie et de l’interactivité via HTML5 et CSS3. cf : le dernier paragraphe de l’article précédent : ici.

En résumé dans un livre ePub en HTM5 CSS3, il est possible d'avoir

  • Une interactivité maximale sur des images,
  • Créer des carrousels dans le livre,
  • Afficher des pop-up,
  • Renseigner des formulaires,
  • voire ajouter un moteur de recherche intelligente (multi-critères)
  • et bien d'autres choses encore, ou seule l'imagination est la limite.

Pour imaginer toutes les possibilités offerte par ces formats, il suffit de regarder la vidéo du dernier livre de la société WALRUS-BOOK, spécialisé dans la réalisation de livre numérique interactif...

Bonne projection...