Pop-up vs div cachée

Salut je voulais un petit avis sur les pop-ups. Je sais que pour certains utilisateurs, les pop-ups sont plutôt .. n'ayons pas peur des mots. Gonflants et chiants.

Pour palier aux pop-ups je fais une div cachée que j'affiche au moment du clic avec dedans un bouton fermer.

Je voulais savoir si ca valait le coup de remplacer tous mes pop-ups par ce genre de systeme ou si les pop-ups n'étaient pas trop gênant.

Si quelqu'un à des stats ou autre je suis preneur.

Rude
Modifié par ffwrude (27 Jun 2007 - 17:23)

Bonjour,

<mode humour>Toujours dans les bons coups </mode>

Sinon quelle utilisation des popups fais-tu ? Sont-ils en nombre conséquent dans ta page ?

Non pas vraiement. C'est une idée comme ca qui me sort. J'aime avoir des avis. [Message édité pour cause de référencement]

Ce sont des pop-ups pour par exemple, les news, et tout ce qui peut nécéssité un déscriptifs plus long.

Maintenant je cherche à éviter tout ce qui peut nuire à l'utilisateur.

Comme tu l'as si bien montré par ton lien. Je m'intéroge beaucoup en ce moment sur l'ergonomie que peut avoir un site. Savoir si l'on peut faire ou ne pas faire telles ou telles choses.

Alsa est un site qui me plait beaucoup et ou je trouve toujours des réponses argumentées.

Bien sur je possède le livre de Raphaël sur le CSS en plus

Rude
Modifié par ffwrude (29 Jun 2007 - 17:05)

Hello,

ffwrude a écrit :
Je sais que pour certains utilisateurs, les pop-ups sont plutôt .. n'ayons pas peur des mots. Gonflants et chiants.

Tout dépend de l'usage qu'on en fait.

Commençons d'abord par écarter les pop-up qui s'affichent sans sollicitation de la part du visiteur, par exemple au lancement d'une page. Il s'agit très clairement d'une mauvaise pratique (sauf peut-être cas très particulier ?).

Restent les pop-up affichées lors d'un clic sur un lien ou autre bouton qui suggère l'accès à un contenu.

Là, c'est une question de pertinence et de dosage :
- si le contenu à afficher est une page complète, mieux vaut un lien simple, et un affichage dans la fenêtre principale du navigateur (ou dans un nouvel onglet ou une nouvelle fenêtre du navigateur, si l'utilisateur le demande à son navigateur) ;
- s'il n'y a pas de contrainte forte qui oblige à conserver la page en cours ouverte, une pop-up est sans doute inadaptée... ou du moins cela demande réflexion.

Cela laisse tout de même un certain nombre de cas où les pop-up ont des avantages certains. Cas-type : un formulaire relativement long, dans lequel on voudrait insérer des informations assez complètes, mais sans rendre le formulaire lui-même illisible. Par exemple, on a un champ de saisie (input) avec pour label « Numéro FGRSID ». Si on veut donner une information complète sur ce fameux numéro FGRSID, on pourra placer après le lien de saisie un lien « Qu'est-ce que le numéro FGRSID ? Comment le trouver ? », qui ouvre une pop-up d'information (page simplifiée avec quelques paragraphes... enfin bref le contenu nécessaire).

Si l'information à donner est courte, par contre, réfléchir à la possibilité de l'inclure directement dans la page, plutôt que dans une pop-up. Les choix sont à faire au cas par cas, il n'y a pas de directive absolue à donner.

Pour faire une pop-up accessible, on aura :
- un lien hypertexte pointant vers une page HTML qui va bien ;
- une surcouche Javascript qui ouvrira la pop-up au moment du clic (si JS est activé, sinon on aura un lien hypertexte en bonne et due forme).

Pour la fonction Javascript permettant de faire une pop-up accessible... euh, je croyais qu'on avait ça dans la FAQ ou les tutoriels, mais il semblerait que non. Ah non, en fait c'est sur Openweb :
http://openweb.eu.org/articles/popup/


Et pour les fausses pop-up en div cachées... ça peut être plutôt limite pour ce qui est de l'accessibilité. Ergonomiquement ça peut être intéressant, par contre.

Merci pour ce laïus ma foi très intéréssant. Donc les pop-ups ne sont pas déprécié pour les petites utilisations (news,conditions) ect.... Je me suis mis au W3C recement et ce que je fais de ces "fausses div" ne m'à pas donné de mauvais résultats en XHTML 1.0 Strict.

Si je vous donne par mail un lien vers un site (je veux pas mettre d'url alsa est trop bien référencé) pour l'histoire de la div cachée vous pourriez me dire ce que vous en pensez ? (par contre je vous préviens c'est vieux et c'est pas compatible W3C).

Rude

Salut,
Tu ne peut pas mettre ton site sur un serveur test genre free ou autre ? Ce serait achement pratique

Sinon ,

Et pour les fausses pop-up en div cachées... ça peut être plutôt limite pour ce qui est de l'accessibilité. Ergonomiquement ça peut être intéressant, par contre.

Peut tu préciser ta pensée par rapport aux gains en ergonomie s'il te plait florent, parce que j'avais pensé à ce genre d'astuce par le passé et je l'avais vite abandonné pour cause de non-accessibilité . Au niveau ergonomique je vois pas ce que cela pourrait apporter....

Pour ma part, je trouve qu'un lien ouvrant une popup ou une nouvelle fenêtre serait plus accessible, dès lors que l'on prévient l'usager de l'ouverture d'une nouvelle fenêtre...

Bonjour

Pas trop chaud pour les pop-up...
1. c'est une technique presqu'exclusivement dédiée aux écrans d'ordi
2. certains navigateurs les désactivent par défaut, ce qui nécessite de la part de l'utilisateur un niveau minimal d'expertise pour d'une part se rendre compte qu'une pop-up devait apparaître et de l'autre comprendre comment la faire apparaître.
3. cela exclut leur contenu du contexte document

En revanche une div cachée conserve le contenu à sa place dans le flux et Js en gère les conditions d'apparition-disparition. C'est un artifice qui masque le contenu à certains utilisateurs pour certaines raisons (encombrement de page ou autres) mais sans nuire aux autres, ce qui n'est pas forcément le cas de la pop-up.

Florent V. a écrit :
Pour la fonction Javascript permettant de faire une pop-up accessible... euh, je croyais qu'on avait ça dans la FAQ ou les tutoriels, mais il semblerait que non. Ah non, en fait c'est sur Openweb :
http://openweb.eu.org/articles/popup/

On avait bien à un moment cette chose-là...
Mais après moult discussions concernant l'accessibilité et la pertinence de la méthode employée, il a été décidé suspendre l'article ...
Tenté par une petite refonte ?!?

Tant qu'il y a une alternative pour afficher le lien en pleine page, lorsque javascript est désactivé, la méthode est accessible, non ?

audrasjb a écrit :
Peut tu préciser ta pensée par rapport aux gains en ergonomie s'il te plait florent, parce que j'avais pensé à ce genre d'astuce par le passé et je l'avais vite abandonné pour cause de non-accessibilité . Au niveau ergonomique je vois pas ce que cela pourrait apporter...

Pour un accès via un navigateur graphique sur un ordinateur (portable ou de bureau), et si on utilise la souris :
- information affichée plus rapidement ;
- page de départ non masquée ;
- retour plus aisé au contenu de départ.
Après, ça va dépendre du type de fausse pop-up réalisé. Une fausse pop-up mal réalisée sera sans doute pire qu'une vraie pop-up faite correctement.

Arsene a écrit :
En revanche une div cachée conserve le contenu à sa place dans le flux

Encore faut-il que le contenu ait sa place dans le flux... Si ça rend la lecture linéaire du contenu (visible et caché) difficile ou incohérente, il y a un problème.

Et si le contenu à afficher ainsi est externe à la page (Ajax...), il y a la question de la gestion des modifications du document (signaler à un lecteur d'écran l'apparition d'un contenu... il me semble qu'il y a des moyens de le faire, faut voir...).

On aura également un problème inhérent à toute superposition d'éléments : du moment que les couleurs de fond sont désactivées, le tout deviendra illisible (le texte de la fausse pop-up venant se confondre avec le texte du reste du document).

Et il faudra aussi travailler l'accessibilité de la fausse pop-up à la navigation au clavier.

Pour ma part, je trouve qu'un lien ouvrant une popup ou une nouvelle fenêtre serait plus accessible, dès lors que l'on prévient l'usager de l'ouverture d'une nouvelle fenêtre...

Bon alors je vais mettre un exemple en code (C'est optimisable je vous l'accorde completement).

Imaginons que ceci concerne un module de news ici en tableau.

$requette = "SELECT * FROM news ORDER BY date ASC LIMIT 5";
$launch = mysql_query($requette);
						while($val = mysql_fetch_assoc($launch)){
							$date = $val["date"][8].$val["date"][9].$val["date"][7].$val["date"][5].$val["date"][6];
							echo "<tr style='cursor:pointer;' onclick='affich_news(\"".$val["id"]."\");'>";
								echo '<td width="50">';
									echo "<span style='font-weight:bold;font-size:10px;font-family:verdana;'>".$date." -- </span>";
								echo "</td>";
								echo '<td align="left" width="130">';
									echo "<span style='font-size:12px;font-family:verdana;'>".$val["nom"]."</span>";
								echo "</td>";
							echo "</tr>";
							echo "<tr><td colspan='2'></td></tr>";
						}

En dessous de celui ci nous trouverons :

<div id='news' style='display:none;' class="Special_ie">
					<div class="div_news">
						<div id='news_titre' style='padding-top:10px;width:180px;height:30px;border-bottom:2px solid darkblue;'>
						</div>
						<div align='left' id='news_texte' class="news_texte">
						</div>
					</div>
					<div align='right' class='bouton_news'>
						<input type='button' value='Fermer' onclick='document.getElementById("news").style.display = "none";document.getElementById("news_liste").style.display = "inline";' />
					</div>
				</div>

puis le code JS appellé (AJAX puisque news en php)

function affich_news(id_di){

	envoi = "id="+id_di;
	
	http.open("POST", "news_affichage.php" , true);
	http.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	http.send(envoi);
	http.onreadystatechange = retour_affich_news;
}

Puis le retour AJAX (je vous épargne le traitement PHP de toute manière assez simple

function retour_affich_news(){
	if (http.readyState == 4){
		document.getElementById('news_liste').style.display = "none";
		document.getElementById('news').style.display = "inline";
		var decoupage = http.responseText.split("/*/");
		document.getElementById('news_titre').innerHTML = "<span style='font-weight:bold;font-family:verdana;font-size:12px;'>"+decoupage[0]+"</span>";
		document.getElementById('news_texte').innerHTML = "<span style='padding-left:20px;'></span><span style='font-family:tahoma;font-size:12px;'>"+decoupage[2]+"</span>";
	}
}

En gros le display.none du départ cache le tableau de news puis fait apparaitre notre "fausse pop-up" puis l'inverse au clique sur le bouton Fermer.


Voilà un peu comment je pourrais proceder. C'est un exemple que j'ai fait il n'y à pas très lontemps.

Rude
Modifié par ffwrude (28 Jun 2007 - 10:30)

Personnellement, je crée souvent le contenu à afficher directement en javascript au chargement de la page, pour ne pas "déranger" le flux et le contenu naturel de la page.
Ensuite, c'est juste un onclick qui affiche une div cachée.
Je ne me sers de cette méthode que quand je la trouve intéressante au niveau ergonomique. Par exemple, pour afficher des images ou une mini galerie de photos, sans avoir besoin de rajouter une page au site.
Pour la rendre accessible, il suffit de faire un lien no script vers le contenu que l'on affiche.
Je trouve qu'il faut réfléchir pour chaque situation à la necessité d'une pop up et au type de pop up à utilisée.

Qu'entens tu par noscript ?

Rude
Modifié par ffwrude (28 Jun 2007 - 10:41)

La balise noscript qui sert à afficher du contenu pour les gens qui n'ont pas javascript.

Je ne connaissai pas cette balise.

Il va falloir que j'appelle mon ami google à la réscousse pour voir comment et quand s'en servir.

merci ^^

Rude

Sans utiliser cette balise, tu peux aussi faire un lien classique sans javascript, et le modifier au chargement de la page pour lui faire ouvrir le pup up (de n'importe quel type) plutot que la page "normale"

Je me pose une question débile mais comment peut on ouvrir un pop-up SANS jS ?

   <b onclick='window.open("machin.php");'>Lien</b>

Je vois pas comment on peut ouvrir un pop-up autrement....

Pourrais tu m'éclairer, ca m'interesse.

Rude

<a href="machin.php" target="_blank">Ouvrir ce lien dans une nouvelle page</a>

Une pop-up, au départ, ce n'est qu'un lien...
Tout le reste, ce n'est qu'une question d'ergonomie.

Tu peux mettre le lien en dur dans ton code, puis à l'aide d'un id, le modifier au chargement de la page pour lui rajouter un onclick et lui retirer son href...

Ah oui d'accord. Je n'avais pas compris ca comme ca . Oui dans ce cas la je suis d'accord. J'avais juste mal compris.

Rude

yahrou a écrit :
Personnellement, je crée souvent le contenu à afficher directement en javascript au chargement de la page, pour ne pas "déranger" le flux et le contenu naturel de la page.

Il me semble cependant que les lecteurs d'écran interprètent plutôt bien le Javascript. Donc le flux sera dérangé.