C'est en découvrant le jeu Odin Sphere que m'ai venu l'idée de ce billet. Ce jeu très old school vaut le coup de pad, ne serait ce que pour le plaisir d'affronter des dragons dignes d'un générique des monthy pythons. En terme de présentation le jeu est sublime mais il reste un jeu en 2D au scrolling horizontal tel qu'on en voit depuis 20 ans. Et pourtant sans jouer sur la fibre nostalgique (comme un New Super Mario), il se permet un gameplay riche et complexe (on peut par exemple planter des arbres et les faire pousser pour y récupérer de la vie) tout en restant proche du jeu d'arcade.

Alors que des interfaces WIMP classiques remplacent encore parfois douloureusement des terminaux à la saisie clavier efficiente dans les entreprises, ce jeu m'a inspiré un direction qui mérite d'être retenue lors de la conception d'interfaces riches: savoir reconnaître les qualités d'une approche classique lorsque la situation le nécessite tout en apportant des innovations qui satisfassent l'utilisateur moderne.

Parti pour dessiner un peu dans photoshop, je suis arrivé au résultat ci-dessous.

En en venant à jouer avec les filtres, j'ai réalisé à quel point je les méconnaissais. Aussi, pour l'inspiration, j'ai décidé de réaliser une grille comparative des filtres qui se prétaient le mieux au présent dessin.

Ca m'a pris 15 minutes à faire et c'est un bon moyen de les apprendre, mais ce serait plus intéressant encore si on avait une fonction brainstorming comme dans After Effects.

Le modèle de communication privilégié inconsciemment par la plupart des designers est souvent séquentiel et dominé par la perception (pas seulement visuelle). En clair, l'utilisateur doit être à l'écoute de l'interface et pas l'inverse.

Travailler sur le mode d'interaction des deux simulations que je vous ai présentés récemment (Networkers et Logistic wars) m'a fait réfléchir à la question et je suis partie du modèle inverse en privilégiant une écoute attentive des actions de l'utilisateur par l'interface.
On pourrait y voir une remarque creuse de ma part car la plupart des interfaces sont évènementielles et donc à l'écoute. Pourtant en termes d'expérience utilisateur, les deux approches n'ont rien à voir.

Mes deux simulations manquent d'affordance de prime abord, mais la liberté d'action immédiate qu'elles proposent est considérable.
De même, on peut observer cet approche dans les commandes gestuelles des produits d'Apple et de Nintendo. Grace à leurs succès, le grand public est en train de réaliser la valeur ajoutée permise par une meilleure exploitation de nos moyens d'expression : plus grande maitrise sur les rétro-actions, moins d'erreurs, des choix immédiats plus nombreux et un apprentissage facilité par la multimodalité.

En terme de méthode, il ne s'agit pas de décider qui de la poule ou de l'oeuf doit arriver le premier mais plutôt des'interroger sérieusement sur les implications de la théorie de l'action de Norman pour concevoir une interface mieux équilibrée, au service d'interactions plus riches.

Je partage avec vous une photo prise juste à coté de chez moi.

On peut voir deux routes dans ce paysage : un chemin piétonnier zigzaguant au milieu d'une forêt et une autoroute hérmétiquement cloisonnée à droite.

Moi qui aime bien me questionner sur le sens de la vie, cette opposition m'a inspiré beaucoup de chose. Ca m'a tout d'abord rappelé un formidable article de Cristopher Alexander à propos de l'absence de vie dans les créations architecturales modernes. Si vous y réfléchissez, le cimétière à côté de chez vous est probablement plus vivant que la tour où vous allez travailler tous les jours. A l'heure d'une soi-disant prise de conscience écologique (plutôt économique en fait), on peut se questionner sur l'impact de telles conditions de vie sur notre sensibilité à l'environnement, son respect et ses besoins...

Moi-même, j'adore concevoir des interfaces et des interactions numériques qui soit performantes car respectueuse de l'homme et de ses besoins. Je pense que c'est aussi le cas pour les autres concepteurs quel que soit leur domaine et en fonction du principe d'économie. Mais si toutes nos actions conjuguées ne nous amène qu'à la construction d'une autoroute géante sans début ni fin, aurons nous vraiment réussi à rendre la vie plus belle? Quelle valeur accordée à notre travail?

Est ce vraiment rendre service à l'homme que de construire un monde à son image, un monde organisé et utilitaire?

Notre futur est ainsi faconné selon le seul référentiel humain sans considération pour les autres échelles qui jouent un rôle si important dans les processus vivant (ironiquement cette désintégration multi-échelle va connaitre prochainement deux accélérations identiques mais opposées: la mise au pas du monde microscopique au service de l'homme gràce aux nanotechnologies et la mise au pas de l'homme par un dérèglemment climatique macroscopique).

Un retour à un mode de vie moyen-ageux, voir pré-historique, ne rendrait pas nos vies plus belles, alors comment réconcilier la modernité avec notre recherche du bonheur? Cristopher Alexander s'est intéressé à l'architecture et a proposé de suivre des processus de conception bottom-up selon des séquences génératives intégrées à leurs environnements. Une sorte d'architecture 2.0, une intelligence collective à laquelle on fournit des moyens d'action en somme. En permettant une adaptation localisée, on maintient aussi une plus grande diversité et donc la possibilité de partager des expériences plus riches avec le reste du monde.

Professionellement dois je abandonner toutes démarches de conception et proposer une liste de composants et de fonctionnalité à l'utilisateurs ? Qu'il les organise dans des workflows optimisés selon ses usages? Cette hypothèse s'oppose au principe d'économie (voir principe de réalité pour ceux qui considère la réalité comme économique) mais elle pourrait rencontrer un succès auprès d'une certaine élite (une solution pseudo top-down, plus économique à long terme, pourrait peut être s'appuyer sur des algorithmes génétiques). A l'image du marché vestimentaire, on aurait alors du prêt-à-utiliser et de la haute-programmation.

La haute couture rend-elle nos vies plus belles? Imperceptiblement oui, mais ce n'est pas suffisant pour avoir une influence au dela des phénomènes de mode.
En conclusion, maintenir un effort constant dans la durée qui améliorerait nos vies est donc un véritable défi qui nécessite des moyens intellectuels que notre intelligence collective ne possède pas encore.
Former les futures générations comme des concepteurs transdisciplinaires et solidaires plutôt que des spécialistes cloisonnés et carrièristes me semblent une première étape indispensable sur ce chemin.

Il y a quelques mois je mettais amusé à présenter une vision symbolique et historique de l'espace perceptif humain.

Dans le même esprit, voici un schéma au format fond écran qui organise dans un espace de proximité les concepts clés de l'expérience visuelle.

Suite à la recherche de mon premier job, j'avais eu envie d'écrire un billet sur les trop petites cases du marché de l'emplois. Et bien j'ai découvert l'apparition récente d'un intitulé qui me convient plutôt bien : devigner!.

Contraction de développeur et de designer, ce buzzword à, je l'espère, le mérite de prévenir certain préjugés :

• Un devigner est un développeur qui s'intéresse plus aux arts graphiques et aux tendances numériques qu' à l'optimisation des performances coté base de données.
• Un devigner est un designer qui n'a pas peur du code et peut préfèrer une approche Getting Real pour construire la cinématique d'une interaction "riche" plutôt que du storyboarding trop statique.
• Un devigner est un développeur pro-agilité car seul du code flexible (voir jetable) permet de rester avant tout concerné par l'expérience utilisateur et l'ergonomie. Même si l'architecture métier est un dinosaure, les contraintes de programmation ne doivent pas impacté l'interface.
• Un devigner est un designer capable d'évaluer si une interface est réalisable avec les technologies disponibles, et si nécessaire de réaliser un prototype prouvant la faisabilité technique. Il a ainsi la liberté de proposer des interfaces à la fois innovantes, fonctionnelles et satisfaisantes pour le futur utilisateur.

Je souhaite donc une jolie propagation mémétique à ce nouveau concept.

Pourquoi chercher à définir mon métier? Parce que lorsque j'ai du chercher un travail il y a deux mois de cela, je me suis confronté aux petites cases dans lesquelles il faut faire entrer son profil. Mon problème: les petites cases étaient un peu trop petites à mon goût (designer, intégrateur, développeur, ergonome...) et à mon profil transdiciplinaire.
J'ai eu la chance de trouver un poste dans une petite entreprise ou je peux faire valoir l'ensemble de mes compétences mais je n'imagine pas que cela soit possible dans une grande entreprise, ou n'importe quelle entreprise ou les postes sont trop spécialisés.

Je suis concepteur, c'est le mot qui décrit le mieux mon travail sauf que socialement ca ne dit pas grand chose.
En effet, n'est ce pas le propre de tout travailleur que de concevoir quelquechose... L'éboueur est il concepteur de poubelle vide? Il me semble que non car il y a une notion de créativité derrière toute conception. Le boulanger est il concepteur de pains originaux? la je m'interroge.
Pour plus de clarté, revenons à ma propre définition.

De métier je suis actuellement ingénieur-concepteur. Ce qui est trop vague pour être faux.
Plus précisement je suis concepteur-ergonome ou bien encore concepteur-interactif... cela n'aide pas plus.

De formation je suis ingénieur cogniticien, à moins d'avoir baigné dans les sciences cognitives, vous retiendrez que je suis ingénieur. Ceci est plutôt bien vue en france mais à l'étranger, les termes d'interaction designer ou mieux encore de User Experience Expert me conviendraient mieux.

Alors comment définir mon activité?

Je dis que je travaille dans les interfaces informatiques, ca à le double avantage de définir mon livrable ultime : l'interface, et de mettre en avant la dimension informatique qui ne me cantonne pas au web et au design graphique. Si mon interlocuteur est plus intéressé, je lui parlerai de conception centré utilisateur, d'interaction homme-machine, voir même de patterns de conception.
Pour aller à l'essentiel, je pourrais même sortir un livrable et lui montrer le dessin d'une interface ou le profil d'un persona. Ca donne tout de suite une dimension plus concrête à mon travail (NB: une architecture d'information ou un diagramme de séquence sont beaucoup moins pédagogique sur ce point).

J'évite de dire que je développe l'interface ou des composants graphiques à moins que mon interlocuteur ne soit développeur. Ca évite de créer une confusion entre mon métier et justement celui de développeur. De la même manière, je ne parle pas de recherche graphique, mon travail concerne surtout la dimension "feeling" du look & feel, un graphiste étant plus expert que moi dans la définition d'un look qui convienne au client.

Si un dessin vaut mille mots, mon métier idéal est représenté ci dessous en jaune :

Si je devais mettre un mot dessus? Concepteur d'intéractions numériques (C'est probablement ce à quoi renvoit le terme de designer interactif mais ce n'est pas moi qui suit interactif :) donc ce terme me dérange).
Si un responsable de petites cases me lit, je lui souhaite donc lui aussi de devenir concepteur... de nouvelles cases.

Je choisis des outils avant tout efficients et disponibles sous Mac et Windows :

• Personas -> le traitement de texte Word.
• Architecture d'information -> Papier&Crayon et Excel.
• Interface basse-fidélité (Wireframe) -> Papier&Crayon.
• Interface haute fidélité -> Illustrator.
• Storyboard -> Powerpoint.
• Diagramme de séquence -> le tableur Excel.
• Prototypage rapide d'application -> Flash.
• Prototypage rapide de site Web -> Ruby on Rails.
• Prototypage technique -> l'IDE le mieux adapté à la technologie testée.
• Spécifications foncionnelles -> le traitement de texte Word.

Ce qu'il manque à ma boite à outil :

• Un moteur de recherche de patterns les mieux adapté à un ensemble de contraintes. Les résultats sont présentés par pertinences, avec une évaluation détaillée, et une gallerie de composants démontrant différentes mises en pages et permettant de les télécharger (psd, ia, fla..).
• Un outil Web2.0 de benchmark ou tout à chacun (ou peut être seulement des gens du métier) évalue l'ergonomie de l'ensemble des média interactifs. On pourrait très facilement y réaliser une comparaison qui soulignerait les +/- des artéfacts et les positionnerait dans un référentiel pertinent.

J'ai résumé sur ce schéma les workflows pertinents de la CS3 production.
Vous les retrouverez mieux détaillés sur le site d'Adobe, il y manque tout de fois les classiques workflows intra-application que j'ai ajoutés.

Le patternoscope est un outil cognitif, fusion entre le microscope et le macroscope .

Un patternoscope sert au pattern-recognition, au pattern-matching et au design.

Le design en tant que science et art nécessite un tel outil :

• Le couplage faible des patterns au contexte plutot qu'au probleme permet de systématiser leurs usages.
• Leur abstraction logique en fond des outils efficaces de communication

Son fonctionnement est à mi-chemin entre l'art et la science. Il nécessite une approche analytique pour identifier, à un niveau de granularité minimale, les contraintes du contexte d'ou émerge la forme.
L'énumération des forces structurantes en présence permet l'organisation en sous-ensembles des éléments nécessaires.
Chaque sous-ensemble participe hiérarchiquement à la synthèse du pattern identifié, à sa connaissance et à sa reconnaissance dans un contexte différent.

Tout n'est qu'apparence. Notre perception du monde a été en partie(s) étudié par de nombreuses traditions, en voici une liste spontanée et non-exhaustive :

• École pythagoricienne : la beauté d'une forme (sculpture, mosaique, peinture, écriture, tissage, architecture..) est en rapport harmonieux avec l'homme selon des relations mathématiques (nombre d'or, eurythmie et symétrie).
• Boudhisme : cinq agrégats conditionnent notre esprit humain : rupa (forme), vedanta (sensations), samjñâna (perceptions), samskara (impulsions ou performance) et vijñâna (conscience).
• Feng Shui : en nous communiquant son énergie, l'organisation d'un espace influe dynamiquement sur notre perception.
• Mystique (kabbale, souffisme, zen, alchimie...) : les symboles, les rituels et l'expérimentation permettent d'exprimer une subjectivité dans l'art et de transcender l'intellect.
• Gestalt : l'homme interprete une composition dans sa globalité d'après différentes lois : bonne forme, continuité, proximité, similitude, destin commun, clôture..
• Presse (affiches, journaux) : une hiérarchie visuelle communique l'information selon une structure qui en facilite l'assimilation.
• Théorie de la couleur : les cônes rétiniens nous permettent d'identifier les couleurs (teinte, luminance et saturation) à partir de trois longueurs d'ondes.
• Cognitivisme et Psychophysique : il est possible de quantifier les limites de la cognition humaine (verbal/non-verbal, chunking, loi de fitts...)
• Systémique : le tout crée les partie qui renforcent le tout. Chaque partie (ou Pattern) représente le tout (Hologramatisme), mais le tout est plus que la sommes parties.
• Neurosciences : Il existerait deux voies fonctionnelles, celle du "Quoi ?" et celle du "Où ?/Comment ?" (Lissauer). Au sein des champs récepteurs le cerveau traitent de nombreux signaux lumineux qui sont intégrés pour identifier les formes du champ visuel (Hubel et Wiesel). La reconnaissance visuelle nécessiterait donc 3 étapes : ébauche primitive 2D, ébauche egocentrée en 2,5D et modèle 3D (Marr).
• Enaction : La forme émerge de la co-évolution d'une fonction et d'un environnement. D'un point de vue action-perception ces couplages sont dits affordants.
• Emotional Design : la "personalité" d'un outil est communiquée à différents niveaux d'émotions : Visceral, Behavioral,et Reflective.

Chacune de ces traditions a enrichi notre connaissance du monde et reste de formidables sources d'inspirations pour concevoir des interfaces esthétiques et ergonomiques.

Visuellement, le web subit de nombreuses tendances. J'ai eu envie d'en lister les thèmes marquant :

• Web1.0 : thème basique et sérieux qui se fait oublier avec une palette quasi-mochromatique.
• Wicked worn : thème rétro qui reprend l'apparence et l'univers des vieilles affiches publicitaires.
• Web2.0 : thème infantile avec l'apparence simple d'un jouet et l'utilisation de couleurs acidulées dans un esprite "cute" et "kawai".
• Technoide : thème futuriste avec une interface riche, des textures froides et un univers technologique.

Ces thématiques peuvent être recroisées (rétro-futurisme, techno-kawai..) et s'appuient sur des techniques de conceptions particulières :

• Aqua/Gel : nommé en référence aux boutons de Mac OS X qui sont ronds avec des reflets et de la transparence.
• Vector/Lineart : utilisation d'objets dont on utilise la forme à travers leurs lignes principales, détourées et parfois retravaillée d'une manière très stylisée et/ou recoloré.
• Pixelart : utilisé pour les icônes (2D ou 3D isométrique) et les sprites de jeux vidéo.
• Dessin papier : le point de départ de tout design.

Voila pour ma vision subjective des thématiques les plus exploitées. A l'inverse on peut s'étonner de ne pas rencontrer les influences de certaines cultures visuellement très riches : le dessin tribal, le Hip-hop..

En design, tout est une question d'équilibre.
Petite lecon de Tao.

Tao esthétique

Tao fonctionnel

A méditer et surtout à pratiquer ;)