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. 1
  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 2 ;
  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. 3

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 ! :)

  1. Jonathan Christopher expose bien ce problème dans les premiers paragraphes de « The Trouble with Lightbox (and its Variants) » en donnant comme exemple les visiteurs utilisant le bouton « page précédente » du navigateur pour sortir d’une popin.
  2. Victor Tsaran explique les différentes règles pour une navigation clavier accessible dans « Make Dynamic Alerts And Dialogs Accessible ». Il me semble qu’il s’agit de règles très rarement suivies.
  3. Stéphane Deschamps nous recommande une liste de précautions dans « Pop-ins et accessibilité ». Il nous prévient surtout qu’elles ne seront pas pour autant des popins accessibles.
Thomas Zilliox

À propos de Thomas Zilliox

Thomas est un développeur web freelance, spécialisé dans la mise en place de bonnes pratiques CSS. Il partage ses astuces, réflexions et bouts de code sur tzi.fr.

Vous pouvez partager cet article sur Facebook, Twitter ou Google+.

Faites un don pour soutenir l'association Les B-A des Satellites

L'association Les B-A des Satellites aide à offrir une école aux enfants de Niellé en Côte d'Ivoire.

Les fonds récoltés vont directement sur le compte PayPal de l'association. En cliquant sur le bouton « Faire un don » ci-dessus, vous allez être redirigé vers PayPal. Vous n'êtes pas obligés de créer un compte PayPal pour faire un don.

2 commentaires sur “Pour noël, pas de popin sous mon sapin

  1. HTeuMeuLeu, le lundi 24 décembre 2012 à 12:29

    Je suis bien d'accord avec toi. La popin, c'est le modèle d'interface utilisateur du pauvre, du concepteur qui n'a pas voulu se creuser la tête et trouver un moyen efficace de penser son interface. La popin, ça "marche" dans le sens où ça permet facilement de concilier tous les intervenants sur un projet (client, chef de projet, graphiste, développeur). Mais en vrai, pour un utilisateur, ça ne "marche" jamais : c'est intrusif et interruptif. J'avais écrit en début d'année un article donnant un bon exemple de design se passant de popin sur un site e-commerce.

  2. Simounet, le mardi 25 décembre 2012 à 23:09

    Je suis également bien d'accord avec ce que tu as dit dans ton article et les solutions proposées me semblent tout â fait convenables. Je regrette juste le peu de personnalisation possible des interfaces proposées par les navigateurs. Peut-être qu'un jour, tout ça changera et que nous pourrons vraiment nous en servir de façon plus confortable.

Laisser un commentaire

Les commentaires sont modérés manuellement. Merci de respecter l'auteur de l'article, les autres participants à la discussion, et la langue française. Vous pouvez suivre les réponses par flux RSS.