Sites Web immersifs : experience et interactivité au coeur du design
Je vous avais partagé l’an dernier une sélection de sites Web immersifs pour faire un état de ce qui existait en la matière. Je vous propose de ré-itérer cette exercice en 2015 pour voir ce qui a changé en terme de tendances.
Mais avant de vous présenter la galerie, voici l’analyse que j’ai retirée de cet échantillon de site :
– leur interface occupe l’intégralité de l’écran du périphérique sur lequel elle est consultée (elle est full-screen),
– leur interface est pensée pour être performante et visible sur tous les périphériques, du mobile à l’ordinateur en passant par la tablette (elle est conçue en responsive design),
– l’interactivité avec l’utilisateur est au centre de l’interface pour personnaliser au maximum l’UX,
– les menus sont plus discrets que sur une interface classique et se placent le plus souvent en footer ou dans un menu rétractable (menu burger),
– toutes les interactions bénéficient d’animations soignées qui accompagnent en douceur les changements de pages, de contenus, etc.
Tous les exemples ci-dessous ne sont pas des sites d’expérience, mais ils proposent des fonctionnalités ou des concepts pouvant être utilisé pour immerger un utilisateur dans un story telling.
La Glace et le ciel
URL du site : http://education.laglaceetleciel.com/
Un travail remarquable d’illustrations sous forme de peinture associé à des fonctionnalités très intéressante comme celle du panier permettant de stocker temporairement les fiches pratiques avant de se les envoyer par mail. Un compromis intéressant pour éviter de développer un véritable espace personnel (plus gourmand en budget).
Site La Glace Et Le Ciel
Do not Track
URL du site : https://donottrack-doc.com
Ce site promeut la Web série documentaire d’Arte dans une interface centrée sur la vidéo. Chaque épisode de la web série se matérialise par une vidéo interactive qui vous demandera des informations pour personnaliser l’expérience tout au long de la lecture. C’est la que réside le principal atout de la plateforme. Une bande latérale, située à droite de la vidéo, met en outre en lien des articles connexes avec la vidéo pour vous permettre d’étendre votre niveau de connaissance sur le sujet abordé dans la vidéo.
Do not Track
l’agence Lavagraphics
URL du site : http://www.lavagraphics.be/nl
Le blog supérieur du site accueille une illustration animée personnalisable. L’agence néerlandaise demande au visiteur (un client potentiel) de définir la taille de son département de la communication à l’aide d’une réglette qui enrichie ou allège l’illustration. Outre cette intervention sur le dessin, la réponse du visiteur influera également sur le message présent dans la suite de la page d’accueil. Malin ! Ce n’est pas un site d’expérience à proprement parlé mais la petite expérience proposée en page d’accueil est originale et marquante.
Site de l’agence néerlandaise Lavagraphics
Canal TP
URL du site : http://www.canaltp.fr/
Ce site ne propose pas d’interaction particulière avec l’utilisateur si ce n’est le scroll vertical qui permet de faire défiler la page d’accueil. C’est sur cette page que réside l’essentiel de l’intérêt du site. Construite en étages, la homepage accueille de petites illustrations vectorielles animées plutôt attachantes. Un point me semble particulièrement réussi, celui de l’animation d’entrée qui matérialise l’entrée dans l’univers du prestataire grâce à ce rectangle qui s’ouvre pour prendre tout l’écran.
Site de Canal TP
Choisir l’artisanat
URL du site : http://choisirlartisanat.fr
Voilà un autre exemple de web série combinée à un test pour définir quel artisan vous feriez (ou auriez été). Le test, bien que succinct, permet de trouver un métier correspondant à vos goûts et à votre personnalité de manière ludique et interactive. A noter la petite fonctionnalité amusante du random qui permet de découvrir un métier au choix si vous n’avez pas d’idée sur votre carrière future.
Site « choisir l’Artisanat »
