Pour noël, pas de popin sous mon sapin

Le mois dernier, alors que j’étais en rendez-vous client, j’ai remis en cause l’utilité des popins, ou fenêtres modales. Tout s’est déroulé en dix secondes. Dix secondes pendant lesquelles j’ai éprouvé le doute, un peu de honte puis une pointe d’espoir. Je vais vous expliquer ma réflexion et pourquoi je pense, désormais, que l’avènement des popins est derrière nous.

Le doute

Le client m’a demandé, avec ses mots, quelque chose comme ceci : « J’aimerais une image pour prévisualiser le produit. Quand le visiteur clique dessus, il accède au diaporama complet à l’aide d’une popin. » La veille encore j’aurais répondu « oui, bien sûr » pour une bonne raison : tout le monde fait ça.

Les nouveaux formats

Ce qui est bien avec la fenêtre modale, c’est que dès le début on savait que c’était une mauvaise idée ! On ne pourra pas dire qu’on ne le savait pas : la fenêtre modale est, par définition, un élément en overlay, souvent de taille fixe, centré horizontalement et verticalement. Si on a des bases de CSS et même d’ergonomie, on se rend vite compte qu’elle risque de poser des problèmes. Mais voilà, vu qu’on s’est habitué à ne faire que des sites desktop, les problèmes sont moins visibles.

Les problèmes resurgissent surtout avec l’arrivée de nouveaux appareils. Bien sûr, le client ne veut pas de site adapté pour les mobiles, mais un pourcentage non négligeable de ses visiteurs vient via des alertes email. Bien sûr, le client ne veut pas de site adapté pour les tablettes, mais il vient en réunion avec son iPad.

Les origines

Le parent le plus proche de la popin est la popup. Elles ont toutes les deux, à peu près, les mêmes cas d’utilisation. Mais à force d’utiliser les popups pour faire surgir de la publicité devant les yeux de nos visiteurs, les navigateurs se sont dotés d’anti-popups. La plupart des visiteurs, ne voyant pas le message de la popup bloquée, avaient l’impression que le site était bogué. C’est à partir de ce constat que la popin a pris de plus en plus de place sur nos écrans.

Mais les popins répondent quand même à un réel besoin en termes d’ergonomie. Elles servent à servir un sous-contenu : un contenu qui n’est pas assez important pour prendre de la place sur la page en cours, et pas assez autonome pour être une page à elle seule. Ainsi ce contenu n’est proposé que sur demande, mais ne compte pas pour autant pour une page vue.

La honte

Après trois secondes de doute, il faut bien se rendre à l’évidence. Les popins n’étaient pas forcément une mauvaise idée à l’origine, mais on les a mal utilisées et on en a abusé.

Trop d’abus

Des fenêtres modales, on en voit partout. C’est devenu un modèle de navigation dont on abuse, assez pour en faire rapidement une overdose :

1. Afficher tout le contenu d’une autre page dans une popin, alors que respecter la logique de navigation aurait été plus simple pour tout le monde.
2. Se connecter, envoyer un message, modifier son panier, alors qu’une action importante mériterait une page dédiée.
3. Alerter ou demander une confirmation à l’utilisateur, alors qu’il existe des fenêtres modales navigateur pour faire cela.
4. Faire des popins sur des popins sur du texte. L’utilisateur se retrouve devant un navigateur, des onglets, la navigation du site puis des popins. c’est une dimension supplémentaire donc une complexité supplémentaire. ¹
5. Des popins au lancement du site ou au survol d’éléments, alors que l’utilisateur n’a rien demandé. Il voudrait juste accéder au contenu qu’il entrevoit à peine en dessous.

Les popins ne sont pas standard

La popup a peut-être des défauts, mais par rapport à la popin, il s’agit d’un élément standard. Elle est donc beaucoup plus pérenne dans le temps. Elle s’améliore même avec les navigateurs. Si vous utilisez une popup sur un navigateur mobile, la fonctionnalité est respectée sans développement supplémentaire.

Les popins ne sont pas accessibles

Un point finalement souvent oublié, mais très important : les popins ne sont pas accessibles. Pour combler cela, les développeurs bidouillent, notamment…

1. en indiquant visuellement que le contenu précédent n’est plus important, en le grisant ;
2. en plaçant la popin en fonction de l’écran et non en fonction de la page ;
3. en imposant le focus sur la popin ;
4. en créant une navigation clavier différente pour la popin et le reste de la page ² ;
5. en modifiant l’historique de navigation.

Beaucoup d’astuces, qui sont rarement bien appliquées et qui, finalement, ne règlent pas le problème d’accessibilité. En effet, le principal problème est de faire comprendre à un lecteur d’écran qu’un nouveau contenu vient d’apparaître et que tout le reste n’a temporairement plus d’importance. ³

L’espoir

Après sept bonnes secondes de réflexion, l’espoir surgit enfin. J’en suis persuadé : on doit pouvoir se séparer des popins.

Pages indépendantes

Pour la plupart des contenus que l’on affiche dans une popin, on peut créer une page indépendante. Si l’on veut garder le contexte de navigation actuel, on choisira alors une popup. Mais la majorité du temps, un lien classique serait aussi approprié.

Par exemple, pour mon client, le diaporama d’un produit est lié à la fiche produit, mais il s’agit bien d’un contenu différent. Le site ebay l’a compris et a choisi d’ouvrir ses diaporamas dans des popups.

Liens ancre

Il s’agit parfois d’un contenu qu’on ne veut pas mettre en avant, car il demande trop de place pour son importance. On peut alors utiliser un lien interne et placer le sous-contenu plus bas dans la page.

Par exemple, on a l’habitude de trouver un lien ancre en haut de la page produit pour accéder à la fiche détaillée d’un produit ou aux commentaires qui se trouvent plus bas. Pourquoi ne pas choisir ce fonctionnement pour inviter un utilisateur à s’inscrire à notre newsletter ?

Fenêtres modales navigateurs

Pour alerter ou demander une confirmation à un utilisateur, on peut utiliser les outils proposés par le navigateur. C’est standard, du coup leur intégration mobile est bien meilleure.

Par contre, leur apparence dépendra du navigateur. Elles ne seront donc pas forcément jolies, et sûrement pas dans le thème de votre site internet.

Les limites

Les webapps auront souvent plus de sous-actions à traiter. La popin pourra être alors la meilleure solution.

Par exemple, un éditeur de texte en ligne n’aura pas beaucoup d’alternatives pour intégrer un outil de recherche et remplacement.

Conclusion

Neuf secondes se sont écoulées. Il me reste encore une seconde pour savoir comment je vais expliquer ça à mon client maintenant ! :)