Total Experience: A design Methodology for Agencies

Salle comble pour cette session présentée par Organic sur les méthodologies créatives en agence :

• Il y a 10 ans, les web designers subissaient de terribles contraintes (256 couleurs, 4 typographies, des pages de moins de 60 Ko...), ils sont maintenant beaucoup plus libres dans les possibilités créatives et les expériences qu'il est possible de faire vivre au travers d'un site web ou d'une création digitale ;
• Si les clients / prospects sont connectés 24H/24 sur différents terminaux (ou presque), les marques doivent suivre ;
• Le prototype est une composante essentielle du processus créatif car il permet de matérialiser une stratégie et éviter de prendre du temps lors de la réalisation ;
• Les hollandais ont inventé le Total Football, un tactique au foot où les joueurs peuvent changer de poste en fonction des phases de jeu, les agences devraient s'en inspirer pour éviter la sur-spécialisation des profils (créatifs ou non) ;
• L'intérêt de la Total Experience est d'occuper le terrain entre deux campagnes et ainsi de ne pas s'éloigner des clients / prospects ;
• Ils ont 4 principes fondateurs pour les expériences de marque = Connect, Context, Interact, Syndicate ;
• Les prototypes sont de formidables outils pour vendre des idées aux clients (à combiner avec du story-telling) ;
• Exemples de campagnes = Morris pour Bank of America (pop-up website), Off RoadR pour Jeep (communauté en ligne), Pur pour P&G (Facebook App), U by Kotex pour Kimberly Clark.

Le mot de la fin : Il insiste sur l'importance de faire du travail de terrain pour bien comprendre les habitudes / motivations / contraintes des clients et prospects (plutôt que d'acheter des études aux instituts spécialisés) et pour itérer sur un concept créatif, une campagne ou un site (notion de beta perpétuelle, même pour une action de com').

Modern Web Form Design

Impossible pour moi de rater la session de Luke Wroblewski, mon maitre à penser, sur la conception de formulaires :

• Les formulaires en ligne sont la base de quasiment toutes les interactions sur le web (commerce en ligne, recherche, médias sociaux...) ;
• Apple a fait un travail très intéressant de reformulation de son processus de commande avec un formulaire vertical (cf. The Apple Store's Checkout Form Redesign) :
  

  Le nouveau formulaire de l'Apple Store US

• Il faut être très vigilant sur le nombre de champs d'un formulaire (lesquels sont réellement absolument nécessaires) ;
• La quasi-totalité des formulaires de saisie d'adresse demande le code postal ET le nom de la ville (pourquoi ne pas déduire le deuxième du premier ?) ;
• Les onglets optionnels sont dangereux car ils impliquent un choix exclusif (ex : comment combiner plusieurs moyens de paiement ?) :
  

  Exemple d'onglets verticaux pour du choix exclusif

• Les contrôles de surface sont essentiels pour aider les utilisateurs à localiser les champs où ont été fait les erreurs comme chez Yahoo! :
  

  La validation en ligne chez Yahoo!

• Les contrôles de surface sont à réaliser en sorite de champ pour éviter de perturber la saisie (sauf pour le choix d'un nom d'utilisateur) ;
• Exemple intéressant de formulaire prédictif chez Kayak (affichage du meilleur prix dans un calendrier avant de choisir une date) :
  

  Kayak et son formulaire prédictif

• Saisir un mot de passe peut être compliqué car les caractères sont masqués (idéalement il ne faudrait cacher que les caractères déjà saisis).

Les formulaires en ligne sont de mieux en mieux maitrisés mais tout est à inventer sur terminaux mobiles (cf. Better Mobile Form Design) :

• L'iPhone propose un zoom sur le champ en cours de saisie (attention à bien vérifier que les intitulés et aides restent visibles => il est préférable de placer les intitulés au dessus des champs) :
  

  Le zoom lors de la saisie d'un champ sur iPhone

• HTML 5 introduit de nouveaux types de champs de saisie pour simplifier et limiter les erreurs (date, slider...) ;
• Exemple intéressant chez Kayak de formulaire avec mise en page originale et exploitant les fonctions natives de l'iPhone :
  

  Formulaire de recherche en situation de mobilité chez Kayak

• Il est important de prendre en compte la contrainte d'orientation dans la mise en page :
  

  L'orientation des formulaires sur smartphone

• Le Nexus One propose la saisie vocale (touche 'Micro' sur le clavier) et visuelle via l'appareil photo (reconnaissance de caractères).

Génial, même si je connais quasiment l'intégralité du travail de Luke W, je garde une excellente impression de cette session. Du coup je vais surement acheter son dernier livre : Web Form Design: Filling in the Blanks.

À suivre...

Keynote 2

C'est Dean Hachamovitch qui va représenter l'équipe IE 9 :

• Les applications en ligne consomment beaucoup de ressources processeur ;
• Les applications en ligne réalisées avec HTML 5 proposeront une expérience très proche des applications desktop ;
• IE 9 représente la troisième version majeure depuis IE 6 (ils affirment avoir franchi un cap qualitatif) ;
• IE 9 va exploiter l'accélération matérielle pour améliorer les performances des applications en ligne ;
• IE 9 inclura un nouveau moteur Javascript qui va compiler le code javascript de façon transparente et exploiter de façon plus efficace les processeurs multi-coeur et/ou la puce graphique ;
• Pour bien comparer les performances des navigateurs il faut s'intéresser à l'ensemble des tâches (et pas qu'au moteur javascript) ;
• IE 9 sera parfaitement compatible avec les spécifications HTML 5 et CSS 3 (border-radius, opacity, animations...) ;
• Microsoft va devenir un contributeur majeur pour les spécifications HMLT 5, CSS 3, DOM et SVG.

Nous passons à une explication détaillée sur l'accélération matérielle dans IE 9. Ici une démonstration d'animation circulaire de pictos dans IE 9, Firefox et Chrome :

Démonstration de contenus SVG 1.1 :

Utilisation de SVG dans IE 9

Démonstration d'un moteur physique exploitant DirectX :

Démonstration de la balise

Une dernière démonstration technique avec un carrousel de vidéos et des effets de transparence :

La IE9 Platform Preview est disponible immédiatement auprès de la communauté de développeurs (d'autres expérimentations sur IETestDrive.com). Tout ça me semble aller dans la bonne direction...

Scott Hanselman monte ensuite sur scène pour présenter la Web Plateform. S'en suit une laborieuse revue de code avec ASP.net 4 et une longue visite guidée des possibilités de Visual Studio 2010.

Puis John Resig vient nous présenter les derniers travaux sur jQuery :

• Près de 30% des sites web utilisent la librairie jQuery ;
• Microsoft est maintenant un contributeur actif au projet jQuery.

Vient ensuite un longue présentation de Open Data Protocol qui permet de simplifier la création d'APIs, leur déploiement sur Azure et leur monétisation sur une marketplace baptisée provisoirement Project "Dallas". Je vous passe les détails techniques car ce n'est pas ma spécialité.

Après cette séance très technique, Bill Buxton monte sur scène pour nous parler d'usages et d'expérience utilisateur :

• Depuis le lancement des outils de développement d'applications pour Windows Phone quelqu'un a déjà développé un client Twitter en morse (illustration d'un phénomène d'innovation empirique) :
  

  Une application Twitter pour Windows Phone qui utilise le morse

• Les interfaces graphiques naturelles ("Natural UI") vont devenir de plus en plus à la mode car ils réduisent grandement la courbe d'apprentissage ;
• Les ordinateurs n'utilisent qu'une partie des sens des utilisateurs (vision, audition) et de leurs capacités (saisie au clavier, interaction avec la souris) ;
• Le projet Natal introduit une nouvelle forme d'interaction en captant les mouvements de votre corps ;
• Démonstration d'une application de peinture utilisant une interface tactile et un moteur physique pour reproduire de façon réaliste le comportement de la peinture ou d'une gomme (cf. Project Gustav) :
  

  L'application de simulation de peinture Gustav

• Des applications comme SketchFlow pourraient tirer parti de cette innovation pour libérer la créativité des concepteurs / designers.
• L'important n'est pas d'innover pour le chalenge technologique mais plutôt d'améliorer / de simplifier le processus créatif.

Wow, quelle claque ! Autant je ne voyais pas trop où il voulais en venir (il est très brouillon dans ces explications) autant de faire le rapprochement entre ces nouveaux outils / techno de "libération créative" et la conception d'interfaces / expériences web est très intéressante. Je m'imagine déjà en train de concevoir une interface sur une table Surface au travers d'une interface naturelle...

À suivre...