Il y a fort longtemps, mais longtemps… le 12 mai dernier, Galdric Pons a posté un billet sur son blog HebiFlux à  propos du site TypeSql.com réalisé en AS3 et Papervision. Au passage, je vous conseille de vous abonner à  Hebiflux qui est un très bon blog consacré à  la 3D sur le web o๠Galdric n’arrête pas de posté jour et nuit… 🙂

Un historique omniprésent

Provenant d’une formation de graphiste, forcément ce site ne m’a pas laissé indifférente : TypeSql permet de consulter des informations sur l’origine d’une quarantaine de typographie. On peut y trouver l’auteur d’une police, sa catégorie, sa naissance, un exemple d’utilisation, etc.

Dès l’ouverture du site, rien ne prédit à  l’utilisateur qu’il va être confronté à  une nouvelle navigation dans un espace tridimensionnel : un design sobre, une grille typographie faisant office de fond, un menu principal positionné à  l’emplacement du pied de page permettant un espace plus important pour le contenu.

La particularité de ce site est la possibilité de voir les étapes et l’historique de ses recherches tout en utilisant le positionnement du contenu dans une interface 3D.

Pour la sélection des sous-catégories d’une typo, la transition du contenu se fait par une animation des éléments qui se déplacent grâce à  une rotation en perspective. Cette animation peut dérouter et surprendre la première fois mais la lecture du contenu est assez rapide et claire grâce à  une structure en colonne.

Par contre, La superposition des recherches permet de voir visuellement son historique mais malheureusement elle occasionne un surplus d’information et entraine une gêne pour la lisibilité du contenu en cours de lecture.

Beaucoup de lacunes ralentissent la consultation et la satisfaction de se site telle que :

• Ouverture d’une popup pour consulter le site… bizarre
• Aucune possibilité de revenir sur une police déjà  consultée
• Impossible de naviguer à  l’intérieur du contenu avec la souris, la roulette (de la souris) ou les flèches du clavier : étant dans un espace 3D, l’utilisateur a surement envie de se balader dans son historique
• La superposition du contenu entraine une surcharge visuelle ce qui empêche la lisibilité et porte à  confusion
• Mauvaise gestion des fermeture des popups : Absence de bouton « fermer ». Lorsque l’utilisateur clic sur l’extérieur d’une popup, cette dernière ne disparait pas.
• etc.

Conclusion

Ce site est purement expérimental. Vous me direz qu’il n’est pas du tout fonctionnel et pratique à  utiliser. Un simple site en HTML aurait suffit avec une bonne ergonomie. Peut-être bien et surement que oui ! Ce site peut ne pas satisfaire l’utilisabilité d’un utilisateur mais permet de découvrir de nouveau mode de navigation. Même si cela nous perturbe, nous chagrine dans nos habitudes, ces nouveaux modes de navigation vont voir le jour de plus en plus vite avec l’arrivée du Flash Player 10 et vont bien sûr s’améliorer avec le temps. Ils s’adapteront aux besoins des utilisateurs tout en apaisant nos réticences au changement.

A lire aussi :

• Créateur de Typesql.com : So Won Young
• HebiFLux.com
• SqliAgency : résistances au changement

Derniers Ergospeeds :

• Widget FnacMusic.com
• Samsung NV24HD
• Moma.com

Ayant déjà  écrit un billet sur le mobile Samsung F490, l’agence Heaven m’a convié, le 17 mai dernier, cette fois-ci à  un FanDay pour découvrir le nouvel appareil photo NV24HD de Samsung et son concours ShootTheSofa.com. Ce concours ludique vous permet de gagner un appareil photo chaque semaine juste en délirant sur votre canapé 😉

Nos habitudes peuvent-elle nous déstabiliser ?

Je souhaite faire un aparté sur nos habitudes d’utilisation lorsque nous sommes confronté à  un nouvel objet : J’ai longtemps pratiqué la photographie argentique avec un Nikon Reflex F601 (objectif 28-300mm), aujourd’hui je possède un Lumix TZ1. Lorsque je suis passée d’un reflex à  un compact numérique, mes habitudes ont été bouleversées et un temps d’adaptation fut nécessaire.

Lors de ce FanDay, qui réunissait une trentaine de personne, les remarques que j’ai pu entendre étaient : « pourquoi la molette du zoom est à  cet emplacement ? », « le déclencheur est mal positionné », etc… En discutant avec ces personnes, je me suis vite rendue compte qu’elles comparaient ce nouvel objet à  leur propre compact numérique et leurs habitudes qui vont avec.

Le temps d’adaptation à  un nouvel appareil (composé de nombreuses fonctionnalités) n’est pas forcément évident pour tous et nous avons souvent besoin d’un référant existant pour nous rassurer ou pour le comparer avant de l’apprivoiser.

La Smart Touch attitude

Cet appareil photo est doté d’une navigation dite Smart Touch permettant un accès direct aux options grâce à  deux rangées de boutons et une interface rappelant celle du mobile F490 : la navigation en croix. Après avoir reçu la récompense du prix international du design iF 2007 pour celle-ci, Samsung a été aussi récompensé pour l’interface Smart Tocuh par le prix de « la meilleur innovation Photo 2007 » par la Technical Image Press Association (TIPA).

Samsung a sans doute voulu homogénéiser sa gamme de produit avec ce système de navigation en croix pour habituer sa clientèle et la fidéliser. Cette navigation devient une identité pour eux. Le Smart Touch est étonnant et à  la fois confus lors de sa première prise en main. L’utilisateur peut être effrayé lorsqu’il aperçoit tous ses boutons. Mais lors d’une utilisation quotidienne, cela permet d’être rapide grâce à  la sensibilité des boutons et l’usage devient assez instinctif grâce à  des pictos identifiables avec ou sans leur intitulé. A tester au moins une fois dans sa vie.

Conclusion

Durant le prêt de cette appareil, je n’ai pas été déçu de la qualité des photos, du double système du stabilisateur, de la macro… Cette appareil photo est un très bon rapport/qualité prix. Dommage, j’ai déjà  un Lumix et aujourd’hui si je devais investir dans un compact photo je serai tentée par une interface tactile. Je suis trop habituée maintenant à  mon LG Wiewty (qui me dépanne bien au quotidien) et à  mon iPod Touch.

Caractéristiques du NV24HD :

• 10 mégapixels
• Un objectif Ultra Grand Angle 24mm avec zoom optique 3.6x
• Ecran Amoled
• Un double système de stabilisation (optique et numérique)
• Correction automatique du contraste et une sensibilité de l’appareil qui atteint 3200 ISO
• Plus de détails…

Derniers Ergospeeds :

• Widget FnacMusic.com
• TypeSql.com
• Moma.com

Il y a environ 2 semaines, en revenant du Wif, j’ai rencontré Alexandre Tonneau, designer d’intéraction, qui m’a gentiment recommandé d’aller jeter un coup d’Å“il au site Design and the Elastic Mind du musée MoMA de New York. Alexandre ne m’a rien dit de plus, juste que je serais sûrement impressionnée.

A propos

Le 24 février dernier, ce célèbre musée d’art moderne et contemporain New Yorkais inaugure l’exposition Design and the Elastic Mind. Cette exposition aborde le design contemporain sous toutes ses formes et permet aux visiteurs ne pouvant faire le voyage d’accéder à  une exposition virtuelle grâce à  un site web détaillé et une navigation inhabituelle.

Une navigation en étoile

A première vue, le site n’a rien d’exceptionnel : un design sobre, une organisation visuelle stricte et froide, une abondance d’information structurée sur plusieurs niveaux, une surcharge visuelle provenant de l’absence d’image, un sens de lecture à  la fois verticalement et horizontalement.

Toutefois, ce site avertit l’utilisateur d’une navigation nouvelle et non-commune grâce à  une animation qui se joue dès l’ouverture. L’utilisateur peut constater qu’il visite un site vivant avec un contenu diversifié à  l’aide de cette animation fluide et visuelle.

Lorsque l’internaute a sélectionné une information, l’animation s’ouvre telle une « étoile câblée ». L’information principale s’affiche visuellement au cÅ“ur et s’entoure de plusieurs lignes qui signalent à  l’utilisateur des directions différentes afin d’accéder à  des informations similaires à  sa sélection. Ces lignes sont la métaphore de câblage accentué par un son lors de leurs sélections. Bien sûr, ces possibilités restent au second plan et n’apparaissent qu’en contenu textuel et non visuel. Cela évite de polluer le site d’images inutiles qui risque de perturber la lisibilité du contenu. Si ce dernier valide cette information une fenêtre de type Lightbox apparait en superposition au site.

L’importance des détails graphiques

Si nous nous intéressons aux détails visuels, notons l’importance de ces derniers qui permettent à  l’internaute d’être orienté :

• Les flèches de pagination de couleur blanche et de taille importante signalent leurs fonctions grâce à  leur positionnement et leurs omniprésences.
• Les flèches de direction qui soutiennent le regard de l’internaute afin de le guider dans le bon sens de lecture
• Le code couleur des intitulés (des « lignes directrices ») qui permet de classifier mais aussi d’apporter un peu de gaité à  ce site.
• Les points d’intersections qui changent de couleurs selon le nombre de croisement ce qui indique un taux d’importance similaire sur l’information
• Lors du rollover d’une direction, cette dernière reste visible à  la différence du site qui s’assombrit afin de laisser une meilleur lisibilité à  cette dernière.
• La barre de défilement est personnalisée à  l’image du site afin d’homogénéiser l’ensemble.

Conclusion

Même si l’internaute risque de trouver ce site assez déroutant, au point de se perdre, l’accès aux informations complémentaires reste néanmoins instinctives malgré un afflux de contenu qui montre la richesse de cette exposition. Ce genre d’initiative et d’expérimentation sont importants pour faire avancer les recherches dans le domaine du web et des interfaces innovantes. Bien sûr, cela permet au musée de renforcer son image de marque avec une reconnaissance du public positive.
Et vous, qu’en pensez-vous ?

A lire aussi :

• Archiact.fr
• NoDesign.net
• MoMa.org

Derniers Ergospeeds :

• Widget FnacMusic.com
• Samsung NV24HD
• Typesql.com

Depuis quelques semaines, j’ai le lien de Issuu.com en réserve et je viens enfin de tester ce service. Issuu permet de transformer un PDF en « livre virtuel » (au format Flash) tout en ayant la possibilité de le partager avec d’autres internautes que se soit dans son blog ou sur le site de Issuu.

Partager et consulter

Une des grande qualité du site d’Issuu est son interface simple et épurée permettant une publication rapide et facile du PDF que l’on désire mettre sous format « magazine ». Par la suite, l’utilisateur peut prendre plaisir à  consulter rapidement et de manières multiples son « ouvrage » :

1. L’apparition d’un bouton juxtaposé au bord des pages permet d’informer l’internaute de l’action qui lui permet de faire tourner automatiquement les pages d’un simple clic.
2. Situé dans le menu principale, des flèches permettent aussi de feuilleter le livre.
3. Entre ces deux flèches (2) est situé un picto (non-explicite) qui a pour but d’offrir à  l’utilisateur une consultation du livre sous forme de « planche de contact« . « L’imposition » du livre se superpose au site à  l’aide d’un fond grisé permettant de faire ressortir les previews.
4. Un « Dock » similaire à  la plateforme Macintosh permet aussi une consultation plus rapide du livre avec les previews des pages du livres omniprésentes.
5. Lorsque l’utilisateur désire zoomer sur le livre, il doit simplement cliquer au centre d’une des pages…
6. …ou bien, l’option FullScreenest visible dans le sous-menu.

Noter à  la fin du screencast la possibilité de créer un widget ou une page personnalisable : une bonne solution pour les photographes ou graphistes ne pouvant se faire un site web.

Un exemple de widget que l’utilisateur peu importer dans son blog ou un site web.
(photos du site Chairsoftheworld.com)

Une qualité FullScreen

Le mode plein écran est bien pratique pour visualiser et voir des détails du document.

La navigation en mode zoom (disponible aussi en mode FullScrenn) est instinctive mais assez inconfortable et peut-être déstabilisant pour lire des écrits.

Conclusion

Ce service est utile pour concevoir un book, une brochure ou un magazine mais certaines contraintes peuvent freiner une utilisation courante : impossible de copier du texte, de télécharger le pdf sources, de partager un livre en public ou privé, l’utilisateur doit préparer un pdf contenant toutes les pages car il n’est pas possible d’uploader pages par pages. Néanmoins, le site est fort agréable à  utiliser et la représentation graphique/animation du livre est très subtile et fine.