ordinateur-interfaces-riches

Une bibliothèque de composants d’interfaces riches

Voilà maintenant près de 3 ans que je rédige ce blog dédié aux interfaces riches, et encore quelques années de plus que je parle de ce sujet sur mon blog FredCavazza.net. Depuis toutes ces années, je n’ai jamais eu l’occasion de vous parler de bibliothèques de composants d’interface. Pour faire simple, une interface est composée de différents éléments qui la composent (cadres, items de navigation, moteur de recherche, carrousel…). Ces composants sont en quelque sorte l’alphabet du langage des interfaces, et quand on y réfléchit bien, il n’existe qu’un nombre limité de composants à partir desquels est composée la très grande majorité des interfaces. Il existe déjà des bibliothèques de composants d’interfaces web traditionnels (cf. Et on reparle des bibliothèques de modèles de conception), mais je souhaiterais aborder aujourd’hui les bibliothèques de composants d’interfaces riches.

Ça tombe bien, car il existe une spécialiste : Theresa Neil. Cette conceptrice d’interfaces est, entre autres, l’auteure du livre Designing Web Interfaces. Elle livre régulièrement des synthèses de son travail de classification, notamment dans ce premier article publié en 2009 : 30 Essential Controls. Dans cet article, sont listés les 30 composants de base pour créer des interfaces riches de même que les technologies qui permettent de les réaliser : Champ de saisie avec auto-complétion, carrousel, graphiques, accordéon, boite de sélection multiple, sélectionneur de date, fenêtre nodale, menu flottant, module glissé-déposé, tableau à filtrage dynamique, indicateur de statut, loupe, jauge, aide contextuelle, raccourci clavier, info-bulle géante, module d’édition en ligne, barre de progrès, notation, glissière, tableau dynamique, éditeur WYSIWYG…

ria_controls-7771967 Les différents éléments d’une interface riche

Cette première liste a ensuite été complétée l’année suivante : 43 Essential Controls for Web Applications. De nouveaux composants sont ainsi apparus : Module de création de diagramme, pied de page flottant, gestionnaire de liste, module de cartographie… Cette nouvelle liste n’est pas forcément bien ordonnée (tout y est en vrac), mais je ne peux que saluer l’impressionnant travail de classification.

Cette première liste a ensuite été suivie par une seconde liste centrée sur les différents types de mises en page : RIA Screens Layout. 15 types de mises en page sont ainsi répertoriés : Maitre/Détails, Palette, par colonnes, tableau de bord, questions/réponses, feuille de calcule, panneaux verticaux, assistant, modèle interactif, onglets, formulaire, résultats de recherche, portail, moteur de filtre et parcours libre.

Comme pour la première liste, ce travail de classification a été complété cette année avec la publication d’une nouvelle édition de sont livre : Our Patterns in Print.

ria_screen_patterns-8426579 Les 15 types de mise en page pour une interface riche

Cette liste représente à mon sens une très bonne base de réflexion sur la façon d’appréhender la conception d’une interface riche et surtout sur une ébauche de charte ergonomique (en capitalisant sur les composants et les gabarits de mise en page).

Si ce sujet vous intéresse, je vous signale au passage l’existence d’un autre livre (Designing Interfaces) qui propose également une classification (Patterns).

Je vous invite à compléter cette liste avec d’autres sources, pourquoi pas en français…