Hotspots animés
J’emploie très souvent le module « Image Hotspots pour enrichir une image, un tableau, une infographie. C’est un incontournable de ma trousse à outils H5P ! Cependant, je trouve que les puces symbolisant les points d’interaction ne sont pas très attractives : comme elles sont statiques, figées, elles n’incitent pas vraiment l’utilisateur à interagir avec elles. Cet exemple, herbergé sur h5p.org, le montre :
Utiliser un gif animé
Pour animer les puces du module « Image Hotspots » et inciter davantage l’utilisateur à interagir avec elles, une première solution consiste à utiliser un GIF animé, déniché avec une recherche sur Google Images par exemple, en tant qu’image.
On obtient un rendu plutôt dynamique, la puce animée invitant davantage à l’action :
Le fait que cette puce se superpose à une pastille blanche m’ennuyait un peu. J’ai donc modifié la CSS de « Image Hotspots » pour éliminer la pastille et légèrement agrandir l’image :
Cela me permet d’avoir un rendu plus épuré :
Les limites du GIF animé
Utiliser un GIF animé comme puce est donc une façon de dynamiser ce module. Il est, en outre, possible de varier l’effet d’animation selon le GIF animé utilisé. Ici, le GIF mime un radar (« ripple effect ») :
Ce GIF, trouvé sur Giphy, incite l’utilisateur à cliquer :
Voici un dernier exemple avec un GIF animé blanc :
Le problème, c’est qu’on se heurte vite à l’inconvénient majeur du GIF animé : le fait qu’il faille trouver le bon, celui qui a la bonne taille, la bonne couleur et l’effet d’animation adapté à l’usage… Et là, ça devient vite compliqué, à moins de savoir créer soi-même un GIF animé. Pour gagner du temps et éviter la frustration, il vaut mieux opter pour les icônes… mais avec un « twist » 😉
Animer les icônes
Utiliser les icônes prédéfinies du module « Image Hotspots » s’avère plus pratique car elles sont entièrement paramétrables. On peut combiner une des 7 icônes de base (plus, moins, fois, coche, point d’interrogation, information, point d’exclamation) à n’importe quelle couleur de la palette, ce qui donne une infinité de possibilités graphiques :
On retombe cependant sur le problème évoqué plus haut : le rendu étant statique, l’utilisateur est peu engagé à interagir avec le contenu.
Après quelques recherches, j’ai donc modifié la CSS du module « Image Hotspots ». J’ai remplacé la pastille blanche par un effet de pulsation :
Cela donne un rendu discrètement animé, assez visible pour attirer le regard et inviter l’utilisateur à l’interaction :
Avantages de cette solution
Cette modification CSS a l’avantage de s’appliquer automatiquement à toutes les icônes (solution « low cost ») et d’être, en conséquence, très versatile, modulable à l’infini et plus rapide à mettre en oeuvre qu’un GIF animé, comme le montrent ces derniers exemples :
