Voilà plus de 10 ans que je conçois des sites web et plus de 10 ans que les formulaires sont une source de discussions sans fin pour savoir comment les optimiser (j’avais même publier un tutoriel en 2004). Alors que je pensais avoir trouvé LE formulaire parfait (j’hésite encore entre Remember The Milk et Ballpark), voici que l’Apple Store nous propose un formulaire d’achat qui risque bien de faire date : The Apple Store’s Checkout Form Redesign.

L’idée de génie est de proposer un formulaire où les intitulés sont directement dans les champs :

Cette solution permet de gagner beaucoup de place et d’afficher toutes les étapes du processus d’achat en une seule page (grâce à un principe d’accordéon). Le principe n’est pas nouveau mais c’est la première fois que je le vois mis en application sur un formulaire entier et sur une boutique en ligne à très forte fréquentation.

Il y a d’autres exemples de ce type de mise en page, notamment chez FoodSpotting :

Une solution particulièrement efficace mais qui n’est pas forcément meilleure que d’afficher les intitulés à gauche (ou au dessus) des champs, comme ici un très bel exemple chez LaunchMind :

Bref, ça m’embête de vous dire ça, mais il n’y a toujours pas de solution “ultime”, tout reste une question de contexte, d’ambiance, de place disponible et d’intégration dans votre charte graphique. Plus d’exemples ici : Interface Design Inspiration | 30 Impressive Ways to Design Sign-Up Page/Form.

Je ne sais plus qui a dit : “L’interface parfaite n’est pas celle où l’on ne peut plus rien ajouter, mais celle où l’on ne peut plus rien retirer“. En tout cas pour certains c’est un dogme, et même pour certaine comme SwissMiss qui a récément participé à la conception de TeuxDeux, une application en ligne de gestion de tâches.

Particularité de cette application en ligne : une simplicité à toute épreuve.

Je ne peux que m’incliner devant l’efficacité et la sobriété de cette interface : un champ et une colonne par jour avec des flèches pour avancer ou reculer la date, une zone de tâches sans échéances et la possibilité de rayer ou supprimer la tâche au survol de la souris.

Rien à redire, c’est du grand art.

Vous connaissiez déjà les champ texte associés à un menu déroulant pour filtrer la recherche comme sur le site du Guardian :

Vous connaissiez déjà les intitulés-filtre de champ texte en forme de menu déroulant comme sur LinkedIn :

Vous connaissiez déjà les filtres de recherche inclus dans le champ texte comme sur Kontain :

Mais connaissiez-vous les champs texte intégrant un filtre déroulant ? Cette interface de recherche est ainsi disponible sur Giraffe Restaurants (une chaine de restos anglais) : Search-dropdown Hybrid Box. Soit vous saisissez directement le nom de votre ville dans le champs :

Soit vous cliquez sur la petite flèche pour faire apparaitre la liste des villes déjà sélectionnée :

Un clic sur le nom d’une ville et les résultats sont affichés :

L’idée est intéressante mais la mise en œuvre est polluée par des traitements graphiques trop lourds. Dommage car cet écran est pourtant entièrement dédié à la recherche. J’ai souvenir d’autres exemples plus sobres… mais impossible de remettre la main dessus. Si votre mémoire est meilleures que la mienne, partagez vos exemples.