De l’art de ne pas du tout respecter les conventions

Celles et ceux qui me lisent depuis un certains temps, notamment sur des sujets liés à l’ergonomie et à la conception d’interfaces web, savent à quel point j’insiste sur les conventions (liens soulignés bleus…) et les risques liés au non-respect de ces conventions. Bon… vous pourriez me dire qu’il y a convention et convention mais là n’est pas mon propos, je ne cherche pas à rentrer dans ce débat.

Bref, tout ça pour dire que je suis récemment passé sous Mac et que j’ai découvert un utilitaire tout à fait singulier : Skitch. Pour faire simple, il s’agit d’un outil de capture, de retouche et de partage d’images (uniquement disponible sur Mac). Il existe de nombreux logiciels proposant la même chose (dont le très original Jing) mais Skitch propose une interface tellement déconcertante que ça mérite un billet.

La particularité de ce fameux Skitch est de proposer une fenêtre où les différentes icônes et fonctions sont réparties tout autour du cadre :

Deuxième particularité : le modèle d’interaction très particulier qu’il propose pour redimensionner, renommer et sauvegarder une image. Dans n’importe quel outil vous vous attendriez à faire quelque chose comme :

Menu « Image » puis option « Redimensionner » ;
Menu « Fichier » puis option « Enregistrer sous » avec une fenêtre de dialogue pour choisir le nom et l’emplacement du fichier.

Et bien ici pas du tout car le redimensionnement se fait directement en déplaçant un des coins de la fenêtre et le renommage en saisisant le nom du fichier et le fomat dans le champ en bas de la fenêtre :

Encore plus déroutant : pour sauvegarder le fichier il faut attraper l’onglet « drag me » en bas de fenêtre et le positionner à l’emplacement désiré (sur le bureau, dans un fichier ou un email…) :

A la première utilisation c’est très déroutant mais on a vite fait de se prendre au jeu et surtout de se dire que ce modèle d’interaction est terriblement efficace. Voici donc un bon exemple de non respect des conventions qui pourtant fonctionne plutôt bien. Un excercice très délicat (voir carrément dangereux) mais qui donne un caractère très particulier à cette application (en plus de la couleur rose).

Dans le même genre il y a également Chrome qui a supprimé la barre de menu. Si vous connaissez d’autres exemples, n’hésitez pas à publier les liens en commentaire.

Alors bien évidemment vous vous doutez bien que je ne vous recommanderais pas dans un premier temps d’appliquer ce principe (« Don’t try this at home« ), mais il y a tout de même de quoi nourrir une réflexion intéressante sur une approche en décallage complet avec les conventions et autres normes informelles (le fameux « Thinking outside the box« ).

La fondation Mozilla intègre les équipes de Humanized

Souvenez-vous, il y a quelques temps je vous parlais de Songza, un moteur de recherche musicale avec un concept très intéressant d’interface transparente.

Et bien figurez-vous que la fondation Mozilla vient d’annoncer qu’elle avait recruté une grosse partie de l’équipe de Humanized, la société à l’origine de Songza : Mozilla Hires Humanized Founders. Parmi les personnes recrutées, il y a (entre autres) Aza Raskin le fils de Jef Raskin, une pointure de la conception d’interfaces.

C’est une très bonne nouvelle dans la mesure où les équipes de Humanized sont également à l’origine d’un produit remarquable : Enso Launcher qui permet de lancer tout un tas de commandes à partir de commandes au clavier. Je vous recommande à ce sujet la démonstration vidéo ainsi que cet article : Enso est une merveille.

Il y a fort à parier que les personnes recrutées chez Humanized vont travailler sur des améliorations portées à l’interface de Firefox (peut-être pour la version 4 ?).

Connaissez-vous la simplexité ?

Je vous propose de découvrir un concept qui me tient à cœur : la simplexité (contraction de simplicité et complexité). Pour faire simple, la simplexité est un art qui consiste non pas à simplifier un produit complexe, mais plutôt à rendre à priori simple un produit qui ne peut pas être simplifié sous peine de ne pas remplir sa fonction.

La première fois que j’ai entendu parler de ce terme c’était chez Renault où un réel effort est déployé pour améliorer le confort d’utilisation et la lisibilité des tableaux de bord (SVP pas de troll dans les commentaires). Mais cette notion s’applique à de multiples domaines comme le design (exemple ici : Quand les constructeurs de l’EGP misent sur le design), l’art (notamment avec des artistes comme Constantin Brâncuşi) ou encore le managment (Manager soyez dans l’art de la simplexité).

C’est d’ailleurs de ce dernier article que je tire une première définition : « Art qui consiste à rendre simple les choses compliquées et à vulgariser le monde dans le but de le mettre à la portée de tous« .

Appliquée à la conception d’interfaces web, qu’est-ce que ça pourrait bien donner ? Voilà ce que je vous propose : « Une interface à la simplicité apparente pour un service à la complexité induite« .

Illustration avec Gmail et son interface de rédaction d’un email : les options sont nombreuses (car c’est comme ça que les systèmes de messagerie fonctionnent) mais les équipes de Google ont trouvé l’astuce en masquant un maximum de choses.

Regardez bien cette copie d’écran, à gauche la version initiale (à l’ouverture de la page) et à droite la version complète (avec toutes les options déployées) :

L’impression de simplicité à l’ouverture de la page est réelle, par contre en cliquant sur différents liens on s’aperçoit que toutes les options sont bien là. Et voilà : simplicité apparent pour un service à la complexité induite.

Et vous, ça vous inspire quoi ?

Est-ce la mode des blogs minimalistes ?

Après quelques années de tyrannie artistique imposée par les poids lourds de l’audience que sont devenus les MySpace, Skyblogs et autres monstruosités ergonomiques, je constate un retour au minimalisme dans la mise en page des blogs.

Petite sélection avec Scripting News :

Certains pourraient dire que c’est la faute de Twitter et que bientôt nous adopterons un format bien plus minimaliste à l’image du mini-blog :

Je suis personnellement grandement admiratif de la mise en page de Scripting News (surtout le traitement des archives et de la pagination), même si ce blog est truffé de code javascript qui n’apporte pas grand chose. Et vous ?

Vive les schémas de conception !

Connaissez-vous les schémas de conception ? Mais si enfin, les design patterns : ce sont des principes de conception qui servent à résoudre des problèmes récurrents (affichage et manipulation d’une liste, sélection multiple… cf. la définition de Wikipedia : Patron de conception).

Quand on parle de schémas de conception dans le cadre d’une interface, ils prennent la forme de petits éléments d’interface qui servent à composer un écran. Pour faire simple, les schémas de conception sont les mots du concepteur qui servent à rédiger les phrases (les écrans) d’un livre (un site).

Et où trouve-t-on une description du vocabulaire du concepteur ? Mais dans un dictionnaire bien sûr !J’en arrive donc au sujet de mon billet, le très bon livre Designing Interfaces.

Ce livre, ainsi que le site qui l’accompagne est une véritable mine d’or : sont présentés un ensemble de schémas de conception très bien décris et détaillés.

Un livre que je recommande à tout concepteur d’applications ou d’interfaces riches, en complément du toujours très bon Pattern Library for Interaction Design (avec une nouvelle version du site) et de l’indispensable Yahoo! Design Pattern Library.

Et tant que j’y suis, pour parfaire votre culture des interfaces et savoir d’où l’on vient, je ne saurais que trop vous recommander l’incroyable, le formidable, le stupéfiant Designing Interactions (sans doute le meilleur livre sur l’interactivité jamais écrit).