Suite de la deuxième journée de conférence au MIX 2010. Les vidéos et diaporamas des sessions sont déjà disponibles ici : Live.VisitMix.com/videos.

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’).

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…

Suite de la deuxième journée de conférence au MIX 2010. Les vidéos et diaporamas des sessions sont déjà disponibles ici : Live.VisitMix.com/videos.

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’).

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…