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.

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.

Je viens de découvrir un nouveau joujou de chez Yamaha : le tenori-on. Il me semble inspiré des jeux video Lumines sous PSP et il ne repose pas sur une interface multitouch facon iphone. Malgré ces inconvénients la video démontre un fort potentiel de plaisir tactile, visuel et sonore.

En conclusion, une belle idée, pas si innovante que cela, mais bien finalisée. J'en veux un !

Il est beau, il est fin, il est léger (1,3 kilo) et il est cher !
J'aurai imaginé que Apple l'appellerai plutôt Macbook Nano, pour le coup j'ai presque cru à un partenaria avec Adobe...

A ce prix, la véritable valeur ajoutée est le touchpad multitouch, encore un effort et on aura enfin un tablet macbook !

Et hop ! Trois nouveaux media qui vont creuser leurs trous sur le Web.

Le sketchskasting

A l'origine de ce média, le site sketchcast qui offre de s'enregistrer en plein dessin et de partager la vidéo.
Web2 et très simple d'usage, le principe du croquis me semble bien exploité. Sans fioritures le sketchkaster est invité à aller à l'essentiel dans une démarche dynamique et égocentrique. La possibilité d'enregistrer du son en fait de plus un whiteboard pertinent.

Les univers 3D

Les univers 3D offrent de riches possibilités en terme d'interaction sociale. Je reste mitigé sur leurs utilités en terme d'échange d'information.
Passé un Wow effect, la pervasivité de ce media me semble faible. Et malgré la métaphore écologique, je crains une grande friction numérique en terme d'utilisabilité.
Techniquement Flash dispose déja de deux moteurs open-source performants : sandy et papervision3D

La vidéo interactive

Le terme "video interactive" est viellot et aucune plateforme ne permet d'en monter, à ma connaissance. Pourtant le mini-site de nokia me semble être sur la bonne voie.
Ce média rejoint les univers 3D du point de vue de l'immersion proposée mais il s'intègre de mieux en mieux aux modèles d'interactions déja existants et pourrait enrichir des espaces actuellement occupés par des images statiques.

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 ;)

Le nouvel imac et plus encore les nouveaux claviers de chez Apple sont esthétiquement sublimes !
(NB : regardez l'image comparative avec un dell..)
Je m'étais convaincu que les portables étaient l'avenir de l'ordinateur et qu'ils s'imposeraient définitivement lorsqu'ils disposeraient de la puissance nécessaire pour faire tourner les derniers jeux video mais devant de telles oeuvres d'art je révise mon opinion.
A 1249€ la version sans fil, vivement léopard!

Séance micro-blogging : le bouton "Envoyer" dans gmail qui se déplace quand la pièce jointe est chargée...
J'ai beau cherché le pourquoi du comment, hum la je bloque.

Je conseille ces ouvrages à tous ceux intéressés par le design interactif :

Bonne lecture !

Concrètement, les RIAs cherchent à combiner la richesse fonctionnelle des interfaces de bureau, le déploiement bon marché sur plusieurs postes permis par le web, et les dernières technologies supportant la communication et le multimedia. Elles ont donc plusieurs avantages qui les rendent attractives, notamment pour les entreprises.

RIA est l'abréviation du concept de Rich Internet Application dont l'origine remonte au cahier blanc publié en Mars 2002 par l'entreprise Macromedia qui détenait alors le principal outil permettant leurs réalisations : Flash. Macromedia a depuis été racheté par la société Adobe qui tout en se basant sur Flash offre désormais une nouvelle plate-forme de développement consacrée aux RIAs, il s'agit de Flex (D'autres concurrents aux technologies flash existent comme les frameworks javascript, ou WPF de Microsoft).

Pour mieux comprendre leurs intérêts, il faut observer que l'accélération offerte par la numérisation et la mise en réseau mondiale a permis un gain de temps considérable, mais elle est aussi responsable d'une condensation excessive des expériences que nous vivons en nous détachant physiquement et socialement de la réalité comme la révolution industrielle nous avait détaché du cycle de la nature.
C'est pourquoi il faut redonner sa place à l'expérience et au partage pour offrir un vécu adapté à chaque situation particulière et ce sans rupture d'un point de vue sensorielle. Le mouvement web 2.0 et les RIAs ont émergé pour y apporter des réponses.

Ainsi Flex propose un modèle d'expérience nommé HALO, une application qui respecte ses principes doit être :

• Simple et claire selon une hiérarchie visuelle centrée sur les besoins réels de l'utilisateur en pleine activité.
• Focalisée sur des zones de travail délimitée en vue de répondre à un but donné.
• Respectueuse du contenu dans ses choix terminologiques, mais aussi à travers une affordance adaptée qui permette une manipulation directe et intuitive par l'utilisateur.
• Dynamiquement continue avec des transitions souples qui permettent à l'utilisateur de ressentir les relations entre ses actions et leurs effets.
• Consistante par la réutilisation des éléments les plus standards qui renvoient un sentiment de confiance en l'application, et participent en une plus grande assurance en ses actions.
• Personnalisée visuellement.

Nous le voyons ce modèle d'expérience soutient différentes approches afin d'offrir une expérience plus riches aux utilisateurs :

• une approche centrée sur l'utilisateur qui nécessite de comprendre ses besoins réels pour mieux les satisfaire.
• une approche respectueuse des standards en terme d'interface et d'interaction.
• une approche centrée sur la sensorialité à travers une personnalisation visuelle et des transitions cinématiques "naturelles".

Si le web 2.0 supporte les relations humaines et la sémantique en vue de développer des intelligences collectives, les RIAs supportent l'expérience en vue d'une satisfaction immédiate et durable de l'utilisateur.
D'un point de vue économique, l'émergence de nouveaux marchés accompagne ces évolutions, en voici quelques exemple :

• Autour du web2.0 : la réputation, les publicités virales, la réutilisation et valorisation des contenus, la gestion et la protection de l'identité numérique, la contribution volontaire (contenus, administration, assistance..), le commerce en "long tail", le coaching de communautés, l'expertise en émergence collective, les technologies p2p, l'offre d'outils communautaires innovants..
• Autour des RIA : l'émotional design, la mise en scène des applications, la conception de modules spécialisés (widgets, gadgets, RDA) à fort potentiel marketing, les services web, les mashups, les technologies de synchronisation entre différentes sources de données persistantes, le contrôle des versions, les capteurs de reconnaissance du contexte, la durée de vie des urls, les formats d'échange des données, les protocoles de communication..

Pour gagner ces marché émergents il faut ainsi satisfaire ses clients en terme d'expérience d'utilisation mais aussi en terme d'appartenance à une communauté d'utilisateurs.
En résumer, je vous propose le mantra suivant :

La base du web2.0 est sa dimension sociale, à travers par exemple les Wikis, les Blogs et les flux RSS, néanmoins si les usages en sont affectés, l'expérience utilisateur 2.0 est plus technologique.
Cette expérience repose principalement sur l'arrivé des composants d'interface suivants :

• accordeon
• drag & drop
• auto-complete text
• lightbox
• editinplace
• travelling
• tagcloud
• slider sorting
• ...

Simple script DOM ou réel échange Ajax, ces composants permettent d'effectuer des actions complexes sans même recharger la page, mais surtout leurs comportements sont beaucoup plus significatifs que les interactions standardes nécessitant l'envoit de formulaires et une navigation parfois en eau trouble.
Par "comportements significatifs", j'entends les vécus phénoménologique suivants :

• les déplacements d'objets (translations, rotations)
• la sensation de notre propre déplacement
• les collisions ou déformations d'objets
• les changements de couleur ou de texture
• les disparitions (évaporation, dissolution, destruction, ...) ou apparitions (formation des nuages, condensation, aggrégation, ...)

En effet, d'un point de vue cognitif tous ces phénomènes structure notre champ visuel ambiant, leurs affordances permet ainsi à l'utilisateur de mieux diriger ses actions. Il identifie naturellement les évènement dans son environnement sans avoir à utiliser un modèle mental propre au type d'application utilisé.
Les composants 2.0 sont toutefois encore trop récents pour être standardisés de manière procédurale par les utilisateurs expérimentés, ce qui n'est pas le cas des formulaires par exemple.
Donc, selon les objectifs que l'on souhaite atteindre lors de la conception d'un site, il est important de prendre en considération quel type expérience souhaitons nous faire vivre à nos utilisateurs : s'il s'agit d'un produit innovant l'apport de composants 2.0 se justifie, sinon des composants classiques rassureront l'utilisateur.

Je découvre depuis 3 semaines le plaisir d'utiliser Ubuntu + aiglx (+ beryl + emerald) sous mon tablet PC. Après un bref retour sous windows XP pour raisons professionnelles, mon plaisir de retrouver linux est double : les effets sont fabuleux, et le système consomme moins de ressources !
J'avais déja connu ses sensations sous Mac os X depuis un bout de temps, et plus récemment dans une béta de windows Vista. Je pense que par l'apport de la 3D, on peut désormais parler de bureaux de 2nd génération avec :

• des effets de transparence entre fenêtres.
• des transitions sophistiquées.
• de nouvelles formes d'intéraction, comme l'affichage des fenêtres à la manière d'Exposé, ou la disposition de plusieurs bureaux sur un cube 3D capable de pivoter.

Je trouve ces apports essentiels, mais j'avoue que depuis l'arrivé du web2.0, j'accordais de moins en moins d'importance au bureau, trop peu innovant face au web.
Et même si ces nouveaux bureaux essayent de mieux intégrer le web par des widgets ou des applications plus hypertextuelles, pour moi l'apport réel est ailleurs : les transitions apportent un confort supplémentaire lors de dialogues pop-up, et surtout le cube 3D permet de passer du web au bureau très confortablement.
Il n'y a plus concurrence entre web et bureau, l'amélioration de cette échange sophistiqué entre local et global me semble la dynamique la plus prometteuse pour une meilleure expérience de l'utilisateur sur le web, mais aussi entre son bureau et son "réseau".

La question se pose pour tout site web, mais concernant les blogs et le web 2.0 en général, sa nature participative pose un problème plus grand à l'accessibilité : comment permettre au plus grand nombre de participer à l'écriture, en tant que bloggeur ou de commentateur ?

Classiquement, on retrouve dans Dive into accessibility (ou bien le guide accessiweb) des principes d'accessibilité simples à suivre à travers leurs impacts sur des utilisateurs cibles. 0n peut principalement retenir :

• du html valide, utilisant des CSS, sans dépendance forte au javascript, avec définition de la langue.
• du contenu lisible et audible, clairement structuré, avec du texte zoomable et une alternative aux contenus visuels pertinents.
• une navigation facilitée par des titres et des liens précis, des labels dans les formulaires, et si nécessaire des raccourcis claviers.

A partir de ces principes, il est possible de soumettre son site à différents outils d'évaluations.
Néanmoins, la difficulté de maintenir accessible un site ouvert en écriture dépasse l'application pontuelle de ces principes. Aussi, une méthode du type S.O.V.A, appliquée aux CMS par l'entreprise open-s, est utile.
La méthode S.O.V.A consiste à :

• Supporter / interdire certains attributs/balises précis
• Obliger l'utilisateur à remplir certaines informations
• Vérifier la saisie du rédacteur
• Accompagner le rédacteur dans la saisie

NB : le document de Matthieu Faure y faisant référence est sous licence Creative Commons CC-BY-SA.

Une dernière remarque concerne l'utilisateur d'un lecteur d'écran, il faut soit le prévenir de la présence d'Ajax et lui conseillé de déconnecter javascript, soit forcer le focus sur l'élément mis à jour si possible, ou soit (solution très intrusive pour les autres utilisateurs) utiliser une boite d'alerte javascript pour prévenir de la mise à jour.