Ma petite entreprise

I just demo'ed a port of Revealicious to a 2 x 42" multi-touch surface built by Christophe Viau at ETS Montréal. It was a lot of fun, and a lot of work too !

I wrote the port in OpenGL and Scala, using TUIO as the interaction communication protocol. Here are some technical notes on the implementation:

• Implementing interactions is hard: bye bye hover/click/drag, you have to deal with multiple cursors, gestures, time(out) and unreliable event sources.
• You need muscle: interfaces are not supposed to hog your CPU, yet the users expect fluid interactions and transitions. Using a fast language and library helps a lot, but you still need to optimise so that you don't eat CPU when the UI is idle (this can be tricky !)
• Tweening will make you happy: as multi-touch, and especially surface interfaces usually require animations and even sometimes 3D, you'll get much better results if you use tweening (like exponential ease out). This small change will make you interface shine at a small cost !
• OpenGL libraries are not designed for UI: almost every single OpenGL library is about games or creating real 3D environments. When you do an interface in 3D, you need a scene graph, but you also really need good picking/selection/events functions. You also need something simple, and an ability to deal with text. While there is tons of OpenGL libraries, I've found none of them to meet these requirements (and I've looked in Python and Java libraries)

Overall, my experience with Scala for this was really great: the performance is there, using immutable data structures is reassuring when you know you have at least 3 concurrent threads in your app (AWT events, TUIO events and OpenGL loop), and the memory footprint is not that bad (you need to constrain the heap consumption). On a language level, the DSL-ability of Scala makes it really convenient to write event handlers, even thought the type systems is sometimes more a burden than a boon. Being able to re-use existing Java libraries is also a big plus.

If you're interested in some design-related notes on this topic, here is the design notes on creating a multi-touch interface on FFunction's blog.

The price drop of many integrated hardware components, esp. embeddable motheboards, cameras or servo-motors fascinates me in the breadth of possibilities it creates for people who like to experiment with hardware and software. I found the VJ scene to be very rich in hardware/software cross-pollenation, and so is some of the electro music scene (Jean-Michel Jarre is known for creating his own instruments).

In the same vein, I just found this video that demoes the Reactable interface which is a tangebile (ie. physical) interface for creating music by arranging units (if you know Reaktor, that's very similar). The video presents the different modules and how they interact together.

Now, once the "wow" effect wears out (it takes some time ;), you can take a step back and think about what's the difference between this and a mouse/keyboard + screen interface. I think it takes seeing it in live action, where many people use it simultaneously, like at this show in Berlin to fully understand the effect of tangible interfaces.

Not only do these kind of interfaces remove the unnecessary context of computers as we know them (operating system, desktop interface), but it also changes their main human-interaction devices : the screen is replaced by a surface that is both where you see things and where you interact. This is a straight departure from the current keyboard+mice/screen paradigm, where the location of the interaction is separate from the location of the feedback.

I think that this allows a much more immersive way of using something, while also creating the notion of the surface (or table in this case) to be a standalone, self-contained, almost alive entity. Of course, musicians and artists are people who can have immediate benefit from such a paradigm shift, as this actually brings the interaction closer to the type if interaction they would have with a "natural" instrument.

I'm pretty sure that there are some fields, more "serious" fields, where people would get great benefits from such interfaces. The first that comes to mind, and which is somehow well represented by Reactable, is collaborative work where people have to gather and put something together. I can also see interactive graphs that would be projected on the middle of a conference table, where people could interactively explore and manipulate their dataset (a company sales, a website traffic log) -- turning this abstract mass of data into a tangible representation.

The challenge that has still to be taken is to find more real-world applications for all these amazing new perspectives, but thanks to the low-cost of technology and the availability of so much processable information, the barrier is very low, and I think we can expect very soon many great new applications that will touch our daily lives.

I've been thinking for some months of replacing MacOS X with Ubuntu as my primary OS. I've been using Ubuntu for a couple of years on my good old T22 and felt that each year Linux was getting closer to what I expected. I actually made the full move a couple of weeks ago and Ubuntu 8.04 is now my OS of choice for my everyday work -- but I missed some extras that were only available in OSX.

One of these is Camouflage, a small utility that lets you toggle the display of desktop icons. My desktop can become rather messy, and I like to get rid of unnecessary information when I need to concentrate. After some research, I realized there was no utility to do that easily on Linux, so I wrote a simple one.

By clicking on the "toggle desktop" icon, my desktop icons disappear or appear, which is really like the inverse from the "show desktop" icon next to it. To implement this feature, you simply have to create this script somewhere in your filesystem:

#!/usr/bin/tcsh
if ( `gconftool --get /apps/nautilus/preferences/show_desktop` == "true" ) then
       gconftool --set /apps/nautilus/preferences/show_desktop \
                 --type boolean false
else
       gconftool --set /apps/nautilus/preferences/show_desktop \
                 --type boolean true
endif
# EOF

Then right-click on an empty space in your top or bottom gnome panel, select the "Add to panel" menu entry. Fill in the form in a similary way as illustrated below, making sure that you give the path to the script you just saved (also make sure the script has +x rights).

You can also get the icon file here if you want to give it the same look as on the illustration. It seems like Nautilus sometimes has problems when toggling the show_desktop properties, and I have to restart it manually.

Un des articles les plus populaires de ce blog (si j'en crois les statistiques) est un article que j'ai écrit il y a un peu plus de deux ans sur le feng-shui et les interfaces graphiques.

Justement, ReadWriteWeb nous présente Feng-GUI qui semble utiliser une technique très similaire à celle que je présentais : en gros, il s'agit d'obtenir au moyen de transformations simples de l'image une représentation des zones qui vont naturellement attirer notre oeil.

D'après l'image ci-dessus (tirée de l'article de RWW, mais dont l'origine n'est pas précisée), les résultats sont surprennament proches de la technique de l'eye-tracking, beaucoup plus onéreuse et complexe a mettre en place. Maintenant, le problème c'est qu'aucune étude concrète et extensive n'est mentionnée...

Au fond, Feng-GUI rend accessible une technique qui est tout de même un brin fastidieuse pour qui n'a pas automatisé le processus : il faut faire des captures du site, les filtrer, et puis les interpréter. Une petite "bookmarklet" permettant de convertir la page courante en différentes "heatmaps" serait à mon avis idéale, puisque Feng-GUI ne permet que d'envoyer des images.

En tout cas, je suis content de voir qu'il y a de l'innovation au niveau des outils dans le domaine de l'ergonomie. Le renouveau du web a permis une prise de conscience croissante de l'importance des interfaces, et par conséquence de l'importance de leur conception. Nous avons atteint avec HTML et CSS une très grande plasticité, ce qui permet d'expérimenter, et ce qui implique aussi la naissance de nouvelles techniques et outils !

Pfeeewww... ça fait du bien de reparler d'interfaces

Personnellement, j'ai la ferme conviction qu'après des années 90 très lourdes en processus (avec une éclaircie sur la fin), nous allons vers de plus en plus de légerté - autant dans la manière de travailler que dans les outils que nous utilisons.

Les wikis, la collaboration en ligne, et l'importance croissante du design dans le domaine du logiciel vont largement dans cette direction.

Depuis que j'ai officiellement la casquette de User Interaction Designer, j'ai pas mal travaillé sur les méthodes de conception d'interface, et mes amis les plus fidèles ont été mes ciseaux, mes post-its, mes feutres colorés et de grandes feuilles de papier. C'est assez surprenant le gain de productivité que l'on peut avoir, notamment parce que l'on court-circuite ce qui n'est pas nécessaire -- et avec un peu d'organisation, on arrive au résolutat de manière impressionnamment rapide !

A ce sujet, je suis tombé la semaine dernière sur cette video en provenance de l'annonce du support des présentations pour Google Docs -- et là je dois dire que ça incarne totalement l'esprit dont je viens de parler...

En tout cas, c'est une belle source d'inspiration pour un "retour aux sources" salutaire... souvent, je me sens comme un gamin a l'école primaire qui joue avec sa colle, son tape et ses ciseaux... et c'est encore plus marrant a plusieurs !

Infosthetics a deux ans aujourd'hui, et j'aimerais tirer mon chapeau à cet excellent site, qui témoigne des nouvelles formes de design, issue de la rencontre de l'information et de du graphisme. Après deux ans d'activité, l'auteur se pose une question plutôt interessante:

''now I wonder what most 'infosthetic' works have in common: is it the attention to superficial decoration, a creative design approach to visualization, the desire to merge beauty & functionality, or a general lack of effective information communication? ''

Ce qui me plaît, c'est que nous sommes clairement face à une forme émergente de design, et qu'il nous reste encore beaucoup de choses à découvrir et à définir. Il y a quelques années, je me disais que les gens un peu plus vieux avait eu beaucoup de chance de vivre la révolution de la micro-informatique (que j'ai aussi un peu vécue), mais j'aime beaucoup la sensation de faire partie de quelque chose de nouveau, qui n'est pas encore établi.

D'ailleurs, j'ai eu mon heure de gloire sur Infosthetics il y a un peu plus d'un an

Je dois avouer que je trouve qu'il n'y a pas souvent du nouveau dans le monde des interfaces graphiques. Certes, on a l'impression que les choses évoluent (Compiz, Aero ou Illuminous), mais en pratique, il s'agit bien souvent d'un travail de "ravalement de façade" plutôt que d'un véritable travail de fond. C'est donc avec beaucoup de plaisir que j'ai découvert les directives de conception d'interface graphique associées au projet "One Laptop Per Child" (OLPC).

Lire la suite

Je viens juste de finir de lire cet article qui analyse (de manière très précise, avec de nombreux examples) le "style graphique" des applications "Web 2.0".

En voici un petit résumé:

• Des couleurs simples, primaires et vives, qui donnent un côté "fun" et dynamique
• De l'arrondi dans les coins et dans les fontes pour rajouter encore un peu plus de douceur
• Des symboles graphiques plutôt que des photos (en contrepied aux photos "corporate" de gens qui sourient)
• Une interface légère, pour que l'ensemble soit compris en un coup d'oeil et quelques clics
• Des textes affichés en grand, pour mettre l'accent sur l'accessibilité (avec parfois un peu d'excès)
• Une interface aérée, l'interface laisse un part importante au fond (blanc, en général), pour ne pas surcharger la lecture
• Des petites phrases sympas, pour montrer que ce sont des jeunes qui s'amusent qui ont écrit l'application, plutôt que des développeurs Java à la solde d'une grande compagnie.

En lisant cet article, je me suis rendu compte que j'avais été aussi contaminé par ces tendances, qui n'ont finalement pas grand chose de mauvais. Outre les éléments purements graphiques (couleurs, agencement, typo), il y a une constante qui ressort : les interfaces se veulent simples et accessibles, à l'écoute des utilisateurs.

C'est en quelque sorte un contre-pied au monde des interfaces des applications de bureau, qui sont en général complexes et assez rébarbatives. A ceci, je pourrais tout de même donner quelques contre-exemples: Quicksilver ou Disco sur OS ou Tomboy (j'aurais encore d'autres exemples, mais je ne les ait pas sous la main... ).

Bref, j'ai l'impression que le Web est devenu un terrain d'expérimentation pour l'interface, et qu'il va sans doute "tirer vers le haut" les interfaces de bureau, en nous montrant qu'il est possible d'avoir de petites applications simples et agréables, capables de très bien communiquer ensemble.... un retour à OpenDoc ?

Je ne connaissais pas TED avant aujourd'hui même, ni même d'ailleurs Hans Rosling, et je dois dire que c'en est presque grave ! TED est une conférence mélangeant "technologie, divertissement et design", pendant laquelle Hans Rosling a présenté le fruit de Gapminder, un logiciel de visualisation de données statistiques qui "nous ouvre les yeux" sur les données dont nous disposons...

Lire la suite

Ces derniers temps, nous avons pu être témoins d'une certaine effervescence dans le domaine de l'interface graphique, avec notamment des projets tels que Compiz ou BumpTop, qui montre qu'il est possible d'intégrer une autre dimension dans notre bureau : celle de la 3D et des intéractions physiques.

Ces changements nous mettent l'eau à la bouche, d'autant plus que certains (Compiz) sont dors et déjà utilisables (et... indispensables !). Faisons le tour de quelques points intéressants au sujet de ces changements...

Lire la suite

Non, ce n'est pas une question, mais bien une affirmation, à laquelle j'aurais volontiers rajouté un ou deux points d'exclamation ! Ayant un pied dans le Web, ses aspects techniques, et ses enjeux (tels que défendus par le W3), et ayant également un pied dans la comm' visuelle et le design graphique, je vais me permettre de vider un bidon d'essence virtuel sur un site, dont les concepteurs semblent avoir quelque peu perdu la trace du contexte (le web) et l'objectif (communiquer) de leur travail...

Lire la suite

Comme j'utilise Gimp et Inkscape de manière assez régulière pour mes travaux graphiques, il me prend parfois de vouloir mettre mon grain de sel et de m'exprimer sur des aspects ergonomiques, en général plutôt négligés par les développeurs de projets open-source. Il y a un ou deux ans, je m'étais exprimé au sujet de l'incohérence des modificateurs (Alt, Ctrl) dans Gimp... a ce titre, je viens de recevoir ce commentaire de bug report :

Please... The fact that nothing has happened does not mean that the bug does not exist. There are inconsistencies in the way the modifiers are used. This is a fact. I do not know what is the best way to solve this, but I do not think that closing this bug report helps solving this problem faster. Swiping bugs under the carpet is not the right way to improve the GIMP. So I am re-opening this bug report again.

En bref, ce bug (initialement reporté en 2003) a été "poussé sous le tapis" car personne n'a pris de décision, ou n'a fourni une solution qui a convaincu la communauté. Je salue Raphaël Quinet pour avoir marqué le coup et signalé que ce n'était pas une manière de faire !

Reste, cela dit, à formuler une solution, et surtout (ce qui est le plus difficile), de le faire accepter par la communauté. Le "coût d'entrée" dans un projet open-source est souvent élevé, surtout si c'est pour apporter des modifications ergonomiques, car elles génèrent bien souvent des discussions houleuses...

En regardant les projets du Summer of Code 2006 pour Gnome, j'ai vu que les tests de performance étaient à l'ordre du jour. Un des points mentionnés dans cette perspective est de créer des timelines (illustration ci-contre) permettant de trouver aisément les opérations les plus coûteuses. Voilà donc une bonne occasion de mélanger le design et la technique, et de regarder ce que nous apporte cette visualisation...

Lire la suite

Je suis régulièrement ce qui se passe dans le monde de la visualisation d'information, et je dois dire que je suis toujours sensible à l'aspect utile des visualisations. C'est généralement là où le bât blesse, car une visualisation a beau être jolie, elle n'est pas forcément vraiment informative ou utilisable.

Et bien après quelques minutes à jouer avec Google News Cloud, je dois dire que je suis plutôt convaincu :

• L'interface en HTML est très réactive, ce qui incite à promener sa souris
• La mise en surbrillance des mots connexes fait émerger des groupes d'information surprenants
• En quelques secondes, on peut vraiment lire les préoccupations du moment, et leur importances relatives

Voilà, même si le rendu graphique n'est pas le plus alléchant qui soit, je trouve qu'il y a ici une très bonne exploitation des tendances actuelles concernant l'interface utilisateur et la visualisation d'information. Pour moi, c'est un peu là que l'on retrouve l'essence du design : aller à l'essentiel, et savoir ajuster les bons paramètre pour créer une expérience, qu'elle soit graphique, physique ou bien simplement... informative !

Je ne sais pas si vous avez passé du temps à configurer votre éditeur de texte, et à chercher la combinaison fonte/couleur idéale. Je suis tombé récemment sur une collection de liens vers des fontes pour programmeur (qui vient compléter la mienne), qui me donne l'occasion d'aborder le sujet... pour l'instant, il n'y a rien à faire pour détrôner ma préférée : Vera Sans Mono (7pt), illustrée ci-contre. Juste après, il y a Monaco (par défaut sur Mac), et enfin la vielle fonte Fixed 6x13 de X11 (mais qui ne semble plus disponible par défaut).

Le grand reproche que je pourrais faire aux fontes actuelles est qu'elles sont trop larges. Ce n'est pas forcément mauvais pour des tailles supérieures à 8pt, mais personnellement, je préfère développer avec une fonte bitmap, sans anti-aliasing, et dans une petite taille qui me permet d'avoir une "vue d'ensemble" de mon code... en attendant les interfaces zoomables !