Fonctionnement général de la strate communicationnelle
Le site de l’agence web Dagobert est dynamique. L’internaute peut interagir avec l’ensemble des éléments présents sur le site. Au passage de la souris sur une réalisation présente en page d’accueil, celle-ci passe du noir et blanc à la couleur, ou encore un passage de la souris sur le titre correspondant à la réalisation, un bloc d’informations relatif à la création apparaît en coulissant de bas en haut, celui-ci disparaît alors lorsque la souris quitte la zone d’informations. En outre, l’utilisateur peut faire défiler les réalisations de l’agence par l’intermédiaire de flèches de défilement présents à gauche et à droite du « slider ».
L’élément principal d’interaction de l’utilisateur avec le site est le menu, celui-ci est assez original et différent des structures de sites web habituelles. En effet celui-ci occupe toute la largueur du site, chaque élément du menu correspond à une page du site, mais celle-ci s’ouvre en coulissant de haut en bas sur la page d’accueil lors d’un clic. De même on peut refermer cette « page », en cliquant sur l’élément du menu correspondant, ou bien en ouvrant une autre « page ». Cela permet à l’internaute d’accéder seulement à l’information qui l’intéresse, de fait l’interactivité et la navigation claire du site font que le visiteur puisse apporter plus d’importance à ce qu’il regarde. Le site propose donc une scénarisation ludique pour son interactivité, par l’emploi du roll over et des « sliders ».
Analyse exhaustive de la Home page
Strate communicationnelle globale
L’agence Dagobert met le point sur la sobriété, la simplicité et la clarté, elle n’utilise que peu de couleurs pour son site, dans l’optique de paraître plus professionnel. Peu d’informations sont exposées en page d’accueil, les illustrations sont mises en avant, elles représentent les réalisations de Dagobert. C’est donc le travail de l’agence qui est mis en avant. Le client, qui est la principale cible de ce site, est donc encourager dans un premier temps à consulter les réalisations, l’agence souhaite ainsi montrer sa transparence et la qualité de son travail. Le site utilise deux typographies : Futura Light pour les titres et Futura Book pour les textes.
Le menu permet d’accéder à toutes les pages du site, celles-ci étant déjà incrustées dans le menu en page d’accueil, par un coulissement des pages de haut en bas par un simple clic sur un élément du menu. Il s’agit d’un site d’agence de communication, il n’y a donc pas besoin d’encombrer le site de nombreuses pages. Dagobert souhaite ainsi privilégier la simplicité pour l’internaute à une masse d’informations qu’il sera lasser de lire. En quelques clics, le visiteur peut accéder facilement et rapidement à l’information qu’il souhaite. Le menu a une grande importance car il occupe une grande partie du corps de page (taille de la police : 52 pixels), comparé aux titres (22 pixels) et aux textes (13 pixels).
L’agence souhaite communiquer en premier lieu ses réalisations par une illustration pour chaque site internet créé, on peut les faire défiler de gauche à droite ou de droite à gauche par l’intermédiaire de flèche. Toutes les réalisations sont initialement illustrées en noir et blanc mais lorsque l’on passe la souris sur une réalisation, celle-ci passe aux couleurs originales. La navigation du site fait que l’internaute peut toujours se focaliser sur ce qui l’intéresse, on accentue l’importance du contenu la ou le visiteur passe la souris ou clique.
Décomposition en régions d’éditions
Découpage et type
Le site de l’agence présente six régions d’édition différentes. Les zones 1, 3, 4 et 6 se retrouvent sur la majorité des sites web, alors que les zones 2 et 5 sont plus couramment utilisées sur des sites souhaitant présenter des produits ou des services.
La zone 1 représente le logo de Dagobert et son métier : « agence de communication digitale », cela n’occupe qu’une place minime sur la page, Dagobert souhaite d’abord mettre en avant ces réalisations avec l’utilisation d’un Slider pour les faire défiler (zone 2). La zone 3 représente le menu, il permet de faire défiler toutes les pages du site sur cette même page de haut en bas en cliquant sur un élément du menu. Celui se referme alors si on clique sur la croix qui lui est associée ou si une autre page est ouverte. Le contenu de chaque page correspond à la zone 4. La zone 5 est un espace assez original et peu courant, il met en avant une citation et propose de télécharger un écran de veille réalisé par l’agence, ceci dans le but de se démarquer de ses concurrents, mettre en avant autre chose que leur cœur de métier et éventuellement fidéliser ainsi une clientèle. Le pied de page (zone 6) expose l’adresse des bureaux de Dagobert, leur numéro de téléphone, deux liens vers les réseaux sociaux Facebook et Twitter et un champs pour s’inscrire à la newsletter du site.
Le site a également été pensé pour un bon référencement, concentré sur la page d’accueil qui est la seule page du site, elle comporte donc toutes les informations sur l’agence. Cette page est optimisé de telle sorte que le chargement soit rapide, avec l’utilisation de Javascript au lieu du flash, pour une question de rapidité de chargement, de compatibilité (pas de plugin flash à installer) et de référencement.
Strates indicielle et transactionnelle
Les signes de la strate indicielle désignent l’ensemble des éléments indiquant la présence d’une fonctionnalité. Tous les éléments de la Zone 2 (Slider de réalisations) et de la Zone 3 (Menu) montrent un effet de roll over. Les éléments de la strate transactionnelle désignent l’ensemble des boutons et flèches qui accompagnent l’internaute dans la navigation, ils sont présents sur les Zones 2, 3, 4 et 6.
Au passage de la souris sur les réalisations, celles-ci changent de couleur : elles passent du noir et blanc à la couleur. De même lorsque l’on passe la souris sur les flèches de défilement, le curseur de la souris se transforme en main, comme lorsque l’on peut cliquer sur un lien hypertexte.
Lorsque l’utilisateur passe la souris sur un élément du menu, la couleur du texte change : on passe du gris au blanc, un trait de séparation de couleur grise apparaît alors sur le haut et sur le bas de l’élément du menu et une petite flèche pointant vers le bas apparaît, indiquant que le contenu de la page va apparaître sous l’élément du menu au clic. Une fois qu’un élément du menu est sélectionné, on peut alors le fermer avec une flèche présente sur la droite de l’élément du menu actif, l’apparition d’une main au passage de la souris sur cette croix nous indique que la page se fermera si l’utilisateur clique.
Nous pouvons également observer un signe de la strate indicielle sur la Zone 1, avec la présence du texte « FR » et « UK » qui indique quelle est la langue active (texte de couleur blanc) et non active (texte de couleur gris). Au passage de la souris sur l’élément non actif, ici il s’agit en l’occurrence de « UK », un petit texte apparaît en infobulle avec un effet de fondu (fade) indiquant que la version anglaise du site sera bientôt disponible. Lorsque l’on quitte la zone de texte, l’infobulle disparaît avec le même effet de fondu.
Enfin nous avons constater deux autres signes de la strate indicielle et transactionnelle sur la Zone 6 qui correspond au pied de page, là où il y a le champs pour s’inscrire à la Newsletter. Au passage de la souris sur le champs, le curseur de la souris se transforme en « I » tout comme sur toute zone de texte ou de saisie. Ici cela indique que l’utilisateur doit cliquer sur cette zone pour pouvoir saisir son adresse email. Le second élément de la strate indicielle est la présence d’une petite flèche pointant vers la droite, présent sur la droite de la zone de saisie, lorsque l’on passe la souris dessus, le curseur se transforme alors en main. Cela indique à l’utilisateur qu’au clic sur ce bouton, cela permettra d’envoyer son adresse mail pour pouvoir s’inscrire à la Newsletter du site.
Analyse des processus
Nous pouvons observer deux types de processus : un automatique et un déclenché sur la Zone 2 (Réalisations).
L’intitulé de la réalisation présent en bas à droite de chaque réalisation, sur un fond gris, montre qu’une action va se passer lorsque l’on passe la souris dessus avec la présence d’une petite flèche pointant vers le haut. Le processus déclenché consiste qu’au passage de la souris sur cette zone, un bloc d’informations décrivant la réalisation défile alors de bas en haut, et lorsque l’on quitte cette zone, celle-ci se referme.
Lorsque l’on arrive sur le site de l’agence et qu’on ne passe pas la souris sur le slider de réalisations, on peut s’apercevoir que les réalisations défilent automatiquement de gauche à droite. Au passage de la souris sur une réalisation, le défilement s’arrête.
Scénarisation des régions d’édition
Toutes les régions d’édition apparaissent d’un coup au chargement de la page d’accueil. Nous pouvons parler de scénarisation de déplacement pour le slider de réalisations qui est lancé au chargement du site, comme il a été dit précédemment. Sinon il n’y a pas d’autres effets lors de l’apparition des régions d’édition, ni en transformation, ni en déplacement, ni en surface.
Pour les autres rubriques, il s’agit de la même scénarisation, car toutes les pages sont intégrées à la page d’accueil. Seule la zone 4 change de contenu au clic sur un élément du menu.
Autres pages-écran
Repérage des processus
Hormis le lancement automatique du slider de réalisations qui est un processus automatique, tous les autres éléments du site n’utilisent aucun processus déclenché, résistant ou paramétré.
Analyse du dispositif de NxtBook
Il s’agit d’un dispositif de lecture de magazine numérique, conçu dans le but de faciliter la lecture en ligne, telle que pourrait l’être un simple journal. Nous avons une palette de boutons présents en haut de page, un petit tutoriel récapitulatif de l’utilité de ces boutons est présent sur la gauche de la page, sur la droite nous avons la couverture du magazine. En passant la souris sur la page, une infobulle apparaît indiquant que l’on peut cliquer pour zoomer, puis recliquer pour dézoomer. Ceci a pour but de faciliter la lecture pour les personnes mal voyantes ou qui préfèrent lire des caractères plus gros.
La palette de boutons permet de nombreuses possibilités, telles que changer les pages (page précédente, suivante, première page et dernière page), zoom, rechercher, imprimer ou sauvegarder le magazine au format PDF sur son poste. Nous pouvons également noter l’apparition d’un bruit sonore lorsque l’on tourne une page, tout comme lorsque l’on tourne les pages d’un magazine, dans le but d’améliorer le confort de lecture du lecteur, afin qu’il retrouve au maximum ses habitudes de lecture d’un magazine papier.
Consultez le site de l’agence : www.dagobert.com