A propos des formulaires mobiles et narratifs

Je termine une série d’articles sur la conception de formulaires avec deux sujets encore non-traités : Les formulaires pour terminaux mobiles et les formulaires narratifs.

Tout ce que vous avez besoin de savoir sur les formulaires mobiles est ici : Forms On Mobile Devices: Modern Solutions. Cet article est en fait un résumé d’une série de billets publiés par Luke Wroblewski sur son blog (Web Form Innovations on Mobile Devices et Better Mobile Form Design). J’ai eu la chance d’entendre ce fameux Luke en conférence lors du MIX et je peux vous assurer que son discours est parfaitement au point.

Dans son article il recommande ainsi d’exploiter au maximum les spécificités des interfaces des terminaux mobiles pour faciliter le travail de saisi dans les formulaires avec :

  • La fonction de zoom

mobile_inputs_zoom

  • L’adaptation du clavier virtuel en fonction du format du champmobile_inputs_formats
  • L’affichage temporaire du dernier caractère saisi dans un champ de mot de passe
  • Les menus contextuels pour la saisie de valeurs numériques
  • Les menus spéciaux pour la saisie de données complexes (comme la date ou la taille en pieds / pouces)mobile_inputs_date
  • L’adaptation de la mise en page en fonction de l’orientation de l’écran
  • L’utilisation d’éléments d’interfaces natifs qui sont livrés avec le système d’exploitationmobile_inputs_native
  • L’utilisation des composants hardware comme le micro, le GPS ou le compas.

Cet article est une véritable perle pour qui veut se lancer dans le développement de sites web adaptés au smartphones. Vous remarquerez que je ne fais pas référence aux applications mobiles ni aux sites web mobiles mais au cas bien particulier des sites web destinés aux smartphones (iPhone, Android, Blackberry, Palm, Windows Phone…). Il y a beaucoup de paramètres à prendre en compte dans ce contexte particulier car les différences de rendus peuvent être spectaculaires (comme en témoigne la dernière capture d’écran).

Si vous connaissez un article sur les meilleures pratiques de conception de formulaires pour sites web mobiles (à destination des feature phones) je suis preneur…

Changeons de sujet maintenant pour rebondir sur un autre article de Luke W qui traite des formulaires narratifs : Mad Libs Style Form Increases Conversion 25-40%. Pour faire court, les formulaires narratifs utilisent une mise en page complètement différente des formulaires traditionnels et privilégie une approche plus narrative : « Je suis … et je recherche … pour faire … à partir de …« . À découvrir par exemple chez Effduffer.

Dans les faits, ce type de formulaires transformerait mieux que les formulaires traditionnels, les équipes de Vast ont ainsi constaté une amélioration de 25% à 40% de leur taux de transformation sur le formulaire de contact :

vast_contactdealer

 

Des résultats surprenant pour une approche très originale. Assurément une piste à creuser…

6 réflexions sur “A propos des formulaires mobiles et narratifs

  1. Merci pour l’article. Les informations sont utiles.

    Une petite suggestion : traduire « le compas » en « la boussole ». Ca collera sans doute mieux au mobile.

    J'aime

  2. Formulaires mobiles : Il y a de l’idée dans les spécificités. J’avoue que le clavier adapté au contexte c’est top, mais qu’en est il des standards ? Ou en est l’implémentation de HTML5 sur les navigateurs mobiles ?

    Au passage quelqu’un connaitrait un équivalent à http://a.deveria.com/caniuse/ pour les mobiles ?

    Formulaires narratifs : Je suis bien tenté par l’expérience, mais, quid de la gestion des labels ? Y’a t’il moyen de gérer l’accessibilité correctement ?

    J'aime

  3. Le formulaire narratif est a priori très séduisant mais il ne permet pas une lecture rapide, un survol, des intitulés des champs. Le renseigner ne prend-t-il pas plus de temps ? Je ne suis pas sur de comprendre pourquoi il transformerait mieux dès lors qu’il implique un plus grand engagement (dans la lecture). N’y a-t-il pas un risque d’être tenté d’insérer du blah-blah autour des champs ? Je ne demande qu’à être convaincu cependant : existe-t-il d’autres exemples de mise en oeuvre réussie ?

    J'aime

  4. Vous trouverez sur ce site et cette rubrique http://www.saisie-mobile.eu/rubrique1.html un logiciel (Tracerplus) permettant de paramétrer plutôt que de développer, puis tester des formulaires sur votre PDA / mobile sous Windows CE ou Windows Mobile.

    Des applications déjà développées sont à télécharger de l’autre rubrique http://www.saisie-mobile.eu/rubrique2.html où on peut partager les applications développées par Tracerplus.

    A tester !

    J'aime

Laisser un commentaire

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 )

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 )

Photo Google+

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

Connexion à %s