Inspirer le concepteur : WebGallery

La présentation d’exemples a une influence sur les productions réalisées par les concepteurs [Smith 1993, Marsh 1993, Bonnardel 1999, 2009]. Plusieurs travaux récents [Lee 2007, Lee 2010, Ritchie 2011] se sont intéressés aux galeries web comme sources d’inspirations. Ces travaux proposent aux concepteurs de naviguer selon un critère de similitude entre les pages référencées. Cette similitude est sensée porter sur des aspects liés au style des pages. Cependant, aucune mesure n’a été faite quant à la perception des similitudes de style qu’ont réellement les utilisateurs. Dans ce chapitre, nous présentons une étude qui vise à en savoir plus sur la perception effective des similitudes de style par l’humain et nous explorons des algorithmes visant à évaluer cette similitude. La consultation d’exemples est une pratique courante en conception [Eckert 2000, Buxton 2007, Herring 2009]. Elle permet aux concepteurs de suivre les modes, tendances, avancées technologiques, etc. et permet de réutiliser des parties des exemples pour constituer ses propres artefacts. Cela est particulièrement vrai dans le domaine de la conception de sites web parce que : 1/ les évolutions des technologies du web et du style des pages web sont rapides ; en conséquence, les concepteurs doivent en permanence se tenir à jour des tendances, 2/ un site web est constitué d’un ensemble assez restreint d’éléments clefs qui sont déclinés et répétés sur tous les sites (entête, barre de navigation, paragraphe, etc.) ; aussi la réutilisation est-elle favorisée, et enfin 3/ il est assez facile d’accéder au code des sites web dans le but de le réutiliser. Ces trois aspects ont été mis à profit pour favoriser l’apprentissage et la conception de sites web par la présentation d’exemples [Lee 2010].

En pratique, l’exploration du web – qu’elle soit conduite pour trouver des exemples ou des informations – se fait via l’utilisation d’un moteur de recherche. Si les moteurs sont performants pour rechercher des pages web sur la base de leur contenu textuel, ils ne sont en revanche pas (encore) capables de rechercher des pages sur la base de leur présentation, de leur style graphique (couleurs dominantes, mise en page, etc.). Ainsi, en l’état actuel, ils sont d’une aide limitée à un concepteur qui souhaiterait explorer des variantes de styles de pages données. C’est pour répondre à cette problématique que les concepteurs se sont orientés vers l’archivage de pages web, que ce soit de manière personnelle ou collective, avec la mise en place de galeries. Une galerie web est une collection sélectionnée et organisée de sites web. Tous les jours, des centaines de nouveaux sites web sont mis en place par des concepteurs à travers le monde. Certains, jugés intéressants, seront repérés, collectés et annotés par des concepteurs afin de les placer en vitrine sur une ou plusieurs galeries. Des blogs, spécialisés en web design, assemblent les meilleures de ces galeries dans des listes destinées à inspirer les concepteurs selon des classements par thèmes, tendances ou technologies.

En général, les galeries ressemblent à leurs équivalents physiques : ce sont de simples catalogues que le concepteur peut feuilleter pour y chercher l’inspiration. Très souvent, les possibilités d’interaction s’arrêtent là. Parfois, des fonctionnalités de recherche avancée sont mises en place, par exemple une recherche par catégories, couleurs et même parfois types d’éléments présents (logo, navigation) ou mise en pages (logo, images, etc.). Certaines galeries, comme siteinspire.com, proposent même de naviguer sur la base de la similitude du design. Cependant, rien n’est dit sur la manière donc cette navigation est réalisée. Inspiration : Le designer cherche de l’inspiration pour un certain type de site (par exemple banque, e-commerce, site personnel, etc.), un style donné (minimaliste, flat-design, etc.), un type de mise en page, un élément particulier (menu, bouton, titre, etc.), un aspect esthétique (couleur, texture, etc.), soit sur des blogs de conception, des galeries web ou via ses contacts sur les réseaux sociaux ;