SublimaCtion : User Experience

Interfaces naturelles : Le projet Con10uum par Maxence Dislaire, et la vidéo du proto

CLaueR — Sun, 29 Nov 2009 17:07:00 GMT

Peut être aviez vous déjà vu cette vidéo de concept de 10/Gui, si ce n’est pas le cas la voici :

C’est sur la base de ces concepts que Maxence Dislaire a lancé un projet nommé Con10uum et dont il nous présente un premier prototype en vidéo :

Con10uum project from 10/GUI is alive from gotactile on Vimeo.

Si le sujet vous intéresse – ce dont je ne doute pas un seul instant – vous pouvez retrouver le projet sur CodePlex et suivre les avancées via twitter sur lequel Maxence publie régulièrement ses avancées ou plus simplement directement sur son tout nouveau blog.

Le projet de Maxence a fait l’objet d’un très bon billet sur le blog “Génération Tactile”, un blog sur lequel vous pourrez aussi en apprendre plus sur le concept de 10/Gui.

Maxence travaille en indépendant sur ce projet WPFCon10uum, il est un ancien Ingénieur de chez Brainsonic, où il était alors à l’origine des premières réalisations en Silverlight, entre autres. N’hésitez pas à le contacter pour lui donner vos feedbacks et vos réactions sur son projet, ainsi que les encouragements ;)

Ici, son profil sur LinkedIn.

Ergonomie Web, 2ème Edition par Amélie Boucher

CLaueR — Mon, 04 May 2009 09:00:00 GMT

Vous connaissez sans doute déjà la première édition de ce Best Seller, ainsi que son auteur, Amélie Boucher, pour l’avoir sans doute déjà croisée sur une conférence ou un séminaire, comme par exemple lors du ReMix’08 à Paris ou à Paris Web 2007.

Au travers de sa société Ergolab, Amélie Boucher travaille pour des clients dont plusieurs grands comptes à l’optimisation de l’ergonomie des interfaces utilisateur des applications Web et mobiles, à partir d’audits ergonomiques éventuellement avec un panel d’utilisateurs, en utilisant éventuellement les méthodes de “eye tracking”, ou encore via des analyses concurrentielles.

Le site web de Ergolab contient une riche collection de ressources qui méritent qu’on passe un peu de temps à les consulter : articles, liens, lexiques et études de cas, par exemple ici un article complet sur le sujet du “drag and drop”.

Voilà donc un livre qui devrait se trouver sur le bureau de tout développeur Web, expérimenté ou débutant.

On voit encore malheureusement sortir trop de nouveaux sites qui auraient été bien inspirés d’investir les 32 Euros du prix du livre et le temps de le consulter…

(via le blog de Benoit Drouillat, de Designers Interactifs)

Smashing Magazine sur les tendances 2009 du Design Web

CLaueR — Sat, 31 Jan 2009 15:44:00 GMT

Smashing Magazine - qui n’est plus à présenter – a sorti dernièrement un billet qui met en lumière quelques tendances dans le design Web pour l’année 2009.

La première, que je n’ai pas encore vraiment constatée par moi même – serait le recours plus fréquent à des embossages pour les fontes et les éléments de mise en page :

Bon, on sait tous clairement quelle est la source d’inspiration, pas vrai ? ;)

Une autre tendance annoncée (la 5ème dans leur classement) sur laquelle je suis assez dubitatif, c’est l’utilisation de fontes alternatives, ie, de polices autres que les habituelles Helvetica, Arial et consorts qui sont universellement disponibles sur tous les navigateurs et qui permettent donc d’avoir des rendus identiques.

Curieux de voir pratiquement comment c’est utilisé, je me suis rendu sur le premier site exemple cité et j’ai désactivé les CSS “pour voir”. Etonnant : au delà de l’utilisation de bitmaps pour les textes (on les voit dans les texte anti-aliasés sous l’image verte) il y a aussi une utilisation de Flash pour les titres (cf. le menu contextuel que j’ai ouvert).

Pas bête. Ca permet donc d’embarquer des fontes alternatives et de pouvoir les utiliser “dynamiquement” ce qui n’est pratiquement pas réalisable sinon avec des bitmaps (sauf à les générer dynamiquement en Server Side à la façon LibGD).

Vous avez déjà utilisé cette technique qui consiste à utiliser des petits bouts de Flash dans une page pour vous permettre d’utiliser dynamiquement une fonte custom ? By the way, c’est également faisable en Silverlight, mais ça n’est pas le sujet heh ;))

[Edit] : Alsacréation vient de publier un billet qui me permet de combler une partie de mon ignorance en la matière. Il est question de ces outils nommés sIFR ou encore FLIR ou Cufón et qui permettent justement de mettre en place cette technique dite de "font replacement". Il était d'ailleurs clairement question de sIFR dans l'article de Smashing Magazine, mais ça n'avait pas attiré mon attention. Je me coucherai moins bête ce soir... ou pas :)

Commentaires welcome!

Vous pensiez avoir tout vu concernant DeepZoom ?

CLaueR — Wed, 07 Jan 2009 18:04:00 GMT

Si après vous être amusé à vous promener quelques minutes dans les collections du Hard Rock Café, ou les mini-sites Renault Laguna Coupé et Nouvelle Mégane vous pensiez avoir déjà tout vu concernant DeepZoom, lisez la suite, il y a deux ou trois petites choses qui pourraient bien vous intéresser…

AndreaMosaic

Trouvé via cet article très détaillé, pratiquement un tutoriel. AndreaMosaic est un Shareware très sympathique qui permet de créer une image depuis un modèle sous la forme d’une mosaïque d’images. C’est un effet que l’on rencontre assez souvent maintenant, et sa réalisation avec ce petit shareware est à la portée de tous, via quelques clics.

J’ai fait un petit essai avec une illustration du Coach Silverlight, ici :

Et voilà le résultat (vu de loin, car l’image résultante fait 3400x4300 pixels) :

Il ne reste plus alors qu’à faire passer cette méga image dans Deep Zoom Composer, puis à exporter le tout soit pour Silverlight / Deep Zoom soit vers un projet de type Seadragon AJAX et au final vous pouvez obtenir quelque chose ressemblant à ceci, et ne nécessitant pas Silverlight :

C’est l’exemple qui est tiré de cet article. Il est complètement fonctionnel, vous pouvez zoomer en cliquant ou via la molette de votre souris.

A noter que c'est précisément l'outil AndreaMosaic et cette même technique qui ont été employées pour réaliser la mosaïque "DeepZoomObama" du candidat aux élections Présidentielles Américaines. Détails ici.

Mooncake Viewer

C’est un service en ligne qui vous permet de créer des collections Deep Zoom et fournit ensuite un player embarquable en quelques clics sur un site Web ou un blog. Vous pouvez pour le moment importer des photos et images depuis Flickr et Smugmug, et dans le futur il est annoncé qu’il sera possible d’uploader directement des images.

En quelques clics, on dispose ensuite d’un lecteur embarquable et paramétrable tel que celui-ci, qui contient quelques photos d’un de mes passages à Prague :

Un moyen simple et rapide de partager des collections d’images avec des amis ou de la famille sans leur imposer des téléchargements interminables.

NEC Biglobe Picture Viewer

Trouvé via ce billet. Il faut le voir et jouer un peu avec pour apprécier la réalisation. La capture d’écran ne restitue pas le ressenti et l’expérience utilisateur. Belle réalisation, je tente de me renseigner pour savoir si ce travail est complètement privé ou bien si il serait possible de le partager…

DocZoom

Trouvé via un collègue Coréen. Ne m’en demandez pas plus, il y a quelques explications ici, et pour le reste un peu d’intuition et les libellés en Anglais sur les contrôles permettent de jouer un peu avec l’application. Intéressant ;)

ZUI : Zoomable User Interface

Trouvé via l’excellent blog Dragonostiscism

Il y a des truc cachés un peu partout dans cette démonstration en ligne d’une interface utilisateur zoomable. Faites bien le tour, c’est caché un peu partout…

[Edit] : On me signale dans l'oreillette que cette dernière réalisation serait en fait en Flash. Hé hé, pas grave, je la laisse quand même car la réalisation est intéressante. Preuve que les frontières sont parfois assez peu épaisses :)

Mot de la fin, provisoire ;)

Voilà, si tout ceci vous a plus – ce dont je ne doute pas un seul instant – je vous encourage à souscrire au flux RSS du blog Dragonisticism qui répertorie de nombreuses utilisations intéressantes de Seadragon et Deep Zoom. More to come ;)

SFMOMA Artscope : N’est pas Deep Zoom qui veut…

CLaueR — Fri, 19 Dec 2008 20:32:05 GMT

Je viens presque par hasard de tomber sur ce site présentant une collection de 3,500 oeuvres de la collection du Musée d’Art Moderne de San Francisco. En apparence, ça ressemble de loin à du Deep Zoom, mais c’est une réalisation entièrement en Flash :

Je suis resté sur ma faim avec ce site. L’expérience utilisateur est approximative, l’impression de plonger en avant quand on zoom est absente, contrairement à ce qu’on a pu voir au travers des différentes réalisations mettant en oeuvre Deep Zoom dans Silverlight 2.

A ce titre, la collection d’objets du Hard Rock Café, présentée dans cette autre réalisation en Silverlight 2 avec Deep Zoom comporte 70,000 photos d’objets divers et variés, et l’expérience est autrement plus bluffante…

Au fait : vous avez testé le cheat code de la touche “v” dans le site Hard Rock Café ?

Faites le test ;)

Hook Network intègre la Messenger Library sur le site de Canal+ Foot

CLaueR — Thu, 04 Dec 2008 18:46:00 GMT

L’agence Hook Network vient de réaliser une intégration de la bibliothèque JavaScript de Windows Live Messenger sur le site de Canal Plus Foot. Si vous suivez le blog de l’équipe Windows Live Messenger, vous avez sans doute déjà vu passer cette nouvelle.

Voici une capture d’écran de cette intégration :

De quoi s’agit-il ?

Il s’agit tout simplement d’une utilisation de la bibliothèque JavaScript Windows Live Messenger, et qui permet du coup de disposer de plusieurs de fonctionnalités de Windows Live Messenger dans votre site ou votre application. Cette bibliothèque supporte Internet Explorer, Firefox et Safari.

Vous pouvez aussi imaginer utiliser cette bibliothèque depuis un site réalisé en Silverlight ou en Flash.

On a d’ailleurs un autre référence d’utilisation de ceci dans un site en Flash, je fais référence au site Euro 2008 Coca / Panini réalisé par FullSix et dont on a déjà commencé à vous parler ici.

Dans cet autre dispositif, d’ailleurs, au delà de fournir des fonctionnalités de “chat” (ou Instant Messaging, selon le terme que vous préférez), cette bibliothèque permet également de récupérer les contacts et donc le graphe social d’un utilisateur donné, et devient donc un très bon outil permettant de relayer une opération ou un site de proche en proche, facilitant éventuellement sa propagation sur un mode viral.

Tout ceci permet de tirer parti de la très large base d’utilisateurs de Windows Live Messenger en France, et à peu de frais puisque l’utilisation de cette bibliothèque JavaScript est gratuite.

Et comme disait quelqu’un que je connais, lors d’une récente conférence : “Quand on veut un gros ROI, il faut soit un gros R soit un petit I” et c’est là clairement le cas typique d’un petit I qui a toutes les chances de donner un gros R.

Alors vous pouvez en user et en abuser !

Le buzz autour du proto d’application BMW pour la table Microsoft Surface

CLaueR — Tue, 02 Dec 2008 14:31:48 GMT

Ca fait quelques temps qu’on entend parler ici ou là d’un prototype d’application de type Configurateur pour le constructeur automobile Allemand BMW et qui a été conçue pour tirer parti des fonctionnalités spécifiques de la table Microsoft Surface.

Le mois dernier, c’était cette vidéo (quasi pirate!) qui était apparue sur le Blog Auto.

Aujourd’hui, deux billets sur Gizmodo et Engadget nous présentent une vidéo plus officielle et de nettement meilleure qualité sur ce projet, on ne va pas s’en plaindre ;)

Allez, une fois n’est pas coutume, voilà la vidéo en question enrobée dans son zouli player Youtube ;)

Enjoy! :)

Pas mal au niveau de la User Experience, vous ne trouvez pas ? Allez, on devrait prochainement reparler de la table Surface et des Agences Intéractives ici…

Mais inutile de me soudoyer, je ne suis pas le Chef de Produit Microsoft Surface pour l’Europe, c’est un autre ;)

Onze idées d’usage de la vidéo dans un site de eCommerce – Par Eric Di Pol de l’agence Nurun

CLaueR — Sat, 22 Nov 2008 15:09:00 GMT

Je faisais un peu de veille sur le vaste sujet de la vidéo en ligne sur internet, et de ses usages et je suis tombé sur un très récent billet publié par Eric Di Pol – que je ne connais pas mais que je salue néanmoins au passage – et qui est Chef de Projet au sein de l’agence Nurun.

Eric signe en effet sur son blog SuperFiction.net un superbe billet dans lequel il présente onze idées d’utilisation de l’objet vidéo dans un site de eCommerce. C’est ici.

~~J’en ajouterai un douzième avec~~ J'en souligne une en particulier, qui est celle concernant les Vidéos Cliquables. On parle aussi souvent de “hypervidéos” en faisant référence aux vidéos cliquables, ce qui résume bien le concept d’un mix entre des vidéos et des hyperliens.

Je vous propose ces deux autres liens pour en savoir plus sur ce concept de vidéos cliquables : ici et là. Et je vous en reparlerai prochainement d’ailleurs.

[Edit] : Effectivement, le billet parle bien des hypervideos. Mea Culpa, c'est le terme de Shopisode qui m'aura trompé :)