Suite à la publication d’un tutoriel il y a quelques années (Des tableaux plus simples, oui je sais il y a un problème d’encodage) je me rend compte qu’il y a bien longtemps que je n’ai pas abordé le sujet des tableaux. C’est bien dommage car il ne se passe pas un jour sans que je croise un tableau de données en ligne.
Même si aujourd’hui la conception de tableaux de données ne pose plus trop de problème, la complexité de certains tableaux pousse les concepteurs à utiliser des astuces pour gagner de la place et faire rentrer dedans toujours plus de données et de fonctionnalités. Je vous propose donc de découvrir ces trois articles qui listent des cas très intéressants : Ultimate guide to table UI patterns, Ultimate guide to table UI patterns (même titre) et 15 Tips for Designing Terrific Tables. Je vous propose donc ma sélection d’exemples.
Chez BlinkCampaign nous avons une alternance des couleurs des rangées et des données affichées sur deux lignes :
Le tableau à double rangée de données de BlinkCampaign
Chez PulseApp nous avons des sections en guise de séparateurs :
Les sections du tableau de PulseApp
Chez BuildItWith.me nous avons des filtres dignes d’une application Apple :
Les options de filtre chez buildItWith.me
Chez Dropbox nous avons un menu déroulant d’actions contextuelles :
Le menu déroulant d'actions contextuelles de Dropbox
Enfin chez Mint nous avons de l’édition en ligne des lignes avec la possibilité de dérouler un panneau pour les données complémentaires :
L'édition en ligne étendue de Mint
Tout ceci est très inspiré et nous prouve qu’il est possible de construire des interfaces applicatives très performantes à partir de “simples” tableaux.
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.
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
L’adaptation du clavier virtuel en fonction du format du champ
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)
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’exploitation
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 :
Des résultats surprenant pour une approche très originale. Assurément une piste à creuser…
