Mon premier panoramique remonte au bon vieux quicktime VR. A l’ère de flash, du papervision et de la visite virtuelle, l’usage de ce concept a un peu évolué depuis. Je suis tombé sur deux panoramiques ces derniers temps qui valent un petit coup d’oeil :

Le premier, c’est @Ozon3 qui l’a remarqué avec cette vue magnifique de New York en hauteur :
Consultable sur http://www.pixelcase.com.au/vr/2009/newyork/

Superbe panoramique mais surtout doté d’une inclinaison dès lors que l’on regarde de droite ou de gauche. Cela n’a l’air de rien, mais la vue est ainsi beaucoup plus naturelle.

Le second, (attention, c’est un peu plus compliqué), est venu jusqu’à moi via @Hugobiwan: RT: @isa2886: RT @jultan RT @panoramix360: #rennes :
Consultable à cette adresse http://www.360ouest.com/reportages/rennes/

De très bons repères dans l’espace, c’est une chose assez connue à présent, mais j’ai bien aimé l’ensemble.

Note : ceci est mon 1000ème billet ! Cheers ! :)

Edipa sort un site de démo assez original permettant de tester de simples vêtements en superposition de son apparence à la webcam sur un site de e-commerce type. L’interface permet de gérer grâce à une détection de mouvement la navigation : vêtement suivant/précédent, panier, capture d’écran pour retenir le résultat.

La navigation avec le mouvement des bras est plutôt bien gérée et réagit assez bien. Toutefois, l’essai du vêtement laisse plus à désirer, je n’ai pas réussi à essayer cette magnifique robe bleue à petits motifs roses… C’était l’expérimentation du lundi !

Via development.blog.shinobi.jp (Thanks Etsuji-san!)

Plus simple que sous After Effects en tout cas. La bonne idée de cette campagne Xfactor de Talk Talk, étant d’utiliser la webcam et une source lumineuse (un portable ou une lampe de poche), pour amuser les gens à dessiner dans l’air des messages.

Au fait, cela me rappelle une petite expérimentation similaire vue il y a quelques mois déjà…

Billet en réaction à quelqu’un qui me parlait des applications sur Iphone de sites d’actualités qui se copiaient tous les uns les autres avec le même positionnement de boutons : Ce positionnement en bas de l’écran étant un élément de navigation standard (Apple l’utilise d’ailleurs pour son application de l’appstore) prévu en développant comme une sorte de composant déjà tout prêt. Ce qui est malin dans ce type de développement, c’est que le code standardise un peu l’ergonomie des applications, évitant de partir dans toutes les directions côté conception.

Car la tâche n’est pas facile : les contrôles se sont déplacés dans l’écran. C’est tout simple mais cela peut provoquer une remise en question en terme de conception, et une perte de la navigation pour l’utilisateur.

Finalement, une chose intéressante lorsque l’on regarde un Iphone, c’est qu’il n’a bien sûr pas de clavier, mais pas de bouton de contrôle non plus. Un changement dans l’interface puisqu’elle doit répondre à deux situations : le mode vertical et horizontal.

Deux modes de visualisation et de navigation à maîtriser
Deux modes de visualisation du contenu et d’interaction qui ont du résoudre et absorber deux usages bien différents mais plus traditionnels :
- les claviers de téléphones portables (contrôles en dessous de l’écran)
- les contrôles (touches et stick) de consoles de jeux portables (PSP par exemple…) placés sur les côtés de l’écran.

Verticalement, on se rend compte que le système d’onglet, bien connu du web, est des plus utilisés (voir mon image plus haut). Les boutons sont tous placés en bas de l’écran, puisque très logiquement en haut, le doigt cache complètement le reste du contenu lors de la navigation. Les claviers étaient généralement placés en dessous de l’écran, les interfaces tactiles ont supprimé les croix directionnelles mais ont déplacé ces boutons dans l’écran. CQFD. Tous ces boutons au reflet bleutés dans l’état sélectionné formatent un peu la navigation exactement comme si tout le web était sous le même CMS, même si l’on perd un peu en originalité au final. Vraiment ?

La standardisation des éléments de navigation limite-elle la créativité de mise en page ? Pas forcément. On peut citer certaines applications comme Dexigner, Ru89, Home, ou même un peu plus éloigné l’application de Absolut, qui utilisent une mise en page ou une mise en scène un peu différente, se démarquant des simples listings d’articles.

Horizontalement, ce sont plutôt les jeux. Et là, je rejoins mon dernier article sur ce même déplacement. Challenge en terme de conception et de gameplay donc : tous les jeux ne se ressemblent pas et beaucoup n’ont pas accroché à certains qui demandaient de recouvrir tout l’écran avec le doigt. Certains sont même injouables. Il n’en demeure pas moins que le fait de placer des contrôles dans l’écran au même emplacement qu’ils n’étaient lorsqu’ils étaient bien physiques, n’est pas une si mauvaise idée quand même.

Image tirée du forum de iphone.fr, de Seven Swords, un RPG sur Iphone : les contrôles sont placés là idéalement de la même manière pour se déplacer et pour réaliser des actions. Pas si simple pour un RPG.

Ce challenge en terme d’interface intervient pour toutes les interfaces tactiles au final : comment s’échapper des contrôles physiques et comment surtout faire sans pour réaliser des même actions. Pour les larges surfaces tactiles, le problème n’est que plus large (ahah…). Je l’avais déjà évoqué : comment démarrer une vidéo sur un écran tactile (double clic, enfin double-doigt, ou bien dessin d’un ‘play’ ?), comment enregistrer un élément ou changer de vue ? Bref, de quoi se creuser la tête, au-delà d’une certaine standardisation récurrente…

Pour les plus anciens lecteurs de mon blog, j’avais relevé une superbe campagne de Motorola Chicago à l’époque. Réalisé par des français au passage, il se trouve que ce projet regorgeait quand même d’idée et d’une identité graphique très forte…

Le projet a donc trouvé son prolongement dans le projet Bllankwall : un mur interactif et artistique contrôlé par l’utilisateur par tout type de périphérique.

« A l’aide d’une Wiimote, d’une Tablet pc, d’une surface tactile… et de thèmes réalisés par des artistes, l’utilisateur dessine de façon magique une œuvre originale et ce sur tout type de surface (écran holographique, plasma, façade d’immeuble, objets,…). L’utilisateur peut au final imprimer sa création. »

Je vous invite à consulter sans plus tarder leur compte Flickr pour avoir une petite idée du rendu final, qui avait été pris lors d’une expo à l’ENSCI.

bllankWall Teaser from bllank.com on Vimeo.

Wonderfl relancerait-il une certaine culture de la découverte et du partage du code en communauté ? Le fait que cette plateforme permette de créer du flash à coeur ouvert et directement sur le serveur semble réellement engager pas mal d’initiatives, et c’est une très bonne choses car au final les autres plateformes de partage de code semblent s’essouffler quelque peu, hormis le bien connu TourDeFlex mais qui n’est pas sur le même modèle :

Ainsi, des sous domaines à wonderfl apparaissent, dédiés à des activités ou des projets particuliers :

- http://physical.wonderfl.net/index_en.html : est un sous domaine dédié à Arduino, permettant de connecter des appareils électriques avec du flash, petit outil adoré des designers aimant les expérimentations.

physicalwonderfl from physical_Wonderfl on Vimeo.

- http://checkmate.wonderfl.net : concours d’échecs sous forme de quizz

Lorsque l’on regarde un Iphone, il faut bien se rendre à l’évidence : il n’a pas de stick de contrôle. Ce qui pour les jeux peut s’avérer délicat, surtout lorsque l’on sait que de faire tourner l’iphone de droite et de gauche est à la longue assez pénible et que le pointé du pouce pour contrôler un élément cache le reste de l’écran.

La version sur Iphone d’Assassin’s Creed édité par Gameloft, très en forme sur les jeux sur cette plateforme, a joué là d’astuce : le stick est virtuel et le pouce ne sort pas d’un petit cercle rond placé en bas à gauche de l’écran. Le déplacement des contrôles comme ceux de la DS ou la PSP avec des sticks bien physiques directement dans l’écran est très malin, résout bien des problèmes de gameplay et surtout, cela offre une très bonne qualité de jeu à l’arrivée. Il fallait y penser.

On retrouve le même sur Resident Evil porté sur Iphone d’ailleurs :

Encore une librairie disponible sur libspark en train de devenir une petite mine d’or de projets, Iphoneas permet de connecter un jeu en flash et un Iphone. Une vidéo dénichée chez un-q.net :

The flash game is controlled with iPhone from ll_koba_ll on Vimeo.

A quoi ressemblait l’OS de l’Amiga, BeOS ou Gnome ? Sujet récurrent mais qui passsionne toujours : les interfaces d’OS au travers les âges en images. Vous les trouverez sur http://www.guidebookgallery.org/screenshots

Je reviens encore sur cet article L’information en ligne comme une mosaique et sur celui de Cédric Deniaud Présentation des contenus sous forme de mosaique.

En 2006, j’avais écrit quelques billets en relevant ce qui se faisait au travers des mosaiques d’images (mosaique d’images en flash et exploration en mosaique. Egalement des projets très forts comme le Eyeprojet , Uniqlo pour ses créations récentes ou plus anciennes ou Oreseg plus en vidéo. Trollback l’utilise très bien pour son portfolio, et Viewzi comme moteur de recherche.

Plus récemment, grâce à un tweet de fwa, http://www.spezify.com/ qui, fort intéressant en lui même est un moteur de recherche organisant en mosaique l’actualité aussi bien textuelle que visuelle.

Sans parler également de Feedly, qui offre une surcouche de présentation à un google Reader ou un Netvibes en extension Firefox, en transformant vos flux d’informations comme un magazine. Un peu plus éloigné de la mosaique d’images mais très efficace pour l’équilibre entre un contenu textuel et visuel.

Le déplacement qui s’opère sur l’image est intéressant à plusieurs niveaux :

- L’image a été retournée, décomposée, par couleur, par formes, par pixel durant de nombreuses années, et elle vient s’insérer petit à petit dans l’information ou les moteurs de recherches pour diversifier, illustrer, souligner ou résumer même un contenu.

- Chez spezify, l’image est photo -shop-, de mode, issue de vidéos youtube ou avatar de twitter. Qu’importe. L’image en arrive au même niveau piédestal en tant qu’information que le texte pour donner à l’internaute un niveau de compréhension global. En une image, on peut avoir tout compris.

- Cette proximité avec le texte en vient à mettre l’image au même niveau que les mots. Tantôt pour faire respirer un contenu, pour lui donner une ambiance, ou pour resituer plus facilement un contenu dans son contexte (Une photo de Barack Obama dit tout…)

- Parfois, c’est le contraire : l’image reste illustration et le texte domine, parfois c’est l’inverse. Il est intéressant de voir pour quels usages et dans quels cadres cet équilibre penche d’un côté ou de l’autre. Adidas met en avant l’image, là ou le New York Times la relègue au rang d’illustration. Spezify la place au même niveau.

- L’appel visuel des mosaique d’images donne la part belle à la navigation en diagonale que l’on a de plus en plus sur internet, en survolant les contenus. Plus rapide, même si parfois on en dit moins.

C’est la vue omnipotente de l’utilisateur sur l’information
Au final, la mosaique reste pour moi la vue la plus omnipotente qui soit. Telle la mouche avec ses 3000 yeux dôtée d’une vision panoramique, chaque oeil va renvoyer une facette différente de l’information ou d’une même information (on relit parfois sur internet la même info avec plusieurs angles et sources différentes). A l’ère de la donnée exhaustive et redondante, de l’instantanéité, c’est bien représentatif aussi de l’ère de l’information dans laquelle nous sommes et que l’on regarde au travers d’un caléidoscope.