MIX 2010 – Jour 2 (suite)

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.

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
    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
    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!
    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
    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
    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
    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
    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…

13 commentaires sur “MIX 2010 – Jour 2 (suite)

  1. Oui bien sûr, mais dans l’exemple montré une liste déroulante est affichée à partir du CP. Plus rapide que de saisir le nom de la ville et moins de chances d’avoir des fautes dans l’adresse.

    /Fred

  2. Ok, là en effet ça devient THE formulaire.
    Après pour peu que le site soit international ça demande un sacré boulot pour le maintien des données. Je ne sais pas si un service propose déjà une API dans ce domaine… (soyons fous même : une API de formulaires complete, papa noel si tu m’entends)

    Quoi qu’il en soit bonnes conférences, ça à l’air d’être passionnant

  3. > 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 ?) ;

    Très tentant dans le mon des informaticien, mais deux petits exemples que je connais :
    68720 => FLAXLANDEN
    68720 => ZILLISHEIM

    METZ => 57070
    METZ => 57000

    (et je suis certain qu’il y a plein d’autres exceptions)
    Pour m’être déjà trompé, mais même avec une erreur la poste fonctionne, mais cela prends plus de temps (j’ai vu un collisimo 48h garanti mettre une semaine, et au guichet on me dit que c’est parce qu’il y avait une erreur de code postal).

    Bref il ne faut pas créer des systèmes trop intelligent qui ne serait pas capable de gérer les cas particuliers.

  4. coquille : « Les contrôles de surface sont à réaliser en sorite de champ » avec « sortie » certainement…

    merci pour ce compte rendu et toutes ces informations très intéressantes.

  5. Je note que le formulaire Yahoo peut se demander si l’utilisateur voyage dans le temps. Néanmoins il n’accepte pas les utilisateurs ayant plus de 150 ans, par contre il valide les utilisateurs nés le jour même !
    Merci pour cet article fort intéressant et inspirant, comme toujours ;)

  6. Bonjour Fred,

    Puisqu’on partage le même maître à penser en matière de formulaires, je t’invite à venir regarder ce qu’on est en train de tester sur Empruntis (en A/B) d’un point de vue ergo.

    C’est loin d’être parfait (contraintes info incluses), mais ca a le mérite d’être assez innovant !
    Tu pourras accéder aux 2 versions via mon post :
    http://patrice-thiriez.blogspot.com/2010/03/ergo-cest-qui-le-plus-fort-entre.html

    Enjoy ! (ou pas) ;-)

    Patrice

  7. Merci Fred.

    En effet, c’est l’écueil dans ce genre de formulaire… mais si j’indique un nb d’écran ca risque de faire peur et en plus ce n’est pas fiable (ca évolue selon le profil)… d’où la solution d’une simple barre d’avancement en bas de l’écran.

    En tous cas, maintenant que j’ai un peu de recul sur les stats, je peux te dire c’est que j’en suis absolument ravi ! :-)

Répondre

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion /  Changer )

Photo Google

Vous commentez à l'aide de votre compte Google. Déconnexion /  Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion /  Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion /  Changer )

Connexion à %s