Quelle est la bonne pratique pour remplacer hover sur un smartphone

Bonjour
Lorsqu'on adapte un site pour qu'il fonctionne sur un smartphone, ce n'est pas seulement la taille de l'écran qui pose problème, c'est surtout l'absence de souris.
Il en va du reste de même pour les tablettes, dont l'écran est assez grand pour qu'on y affiche assez facilement tout ce qui passe sur un PC portable mais qui lui aussi n'a pas de souris, sans compter la nouvelle mode de livrer des PC ou des Mac sans souris avec cete horrible chose qu'on appelle un touchpad et que je m'empresse de désactiver dès que possible.
Cela fiche par terre tous les :hover de la terre et l'ergonomie de pas mal de sites.

Pour l'instant je me contente de mettre des "onclick" sur les en-têtes de menu déroulant, par exemple, mais je suppose que depuis que ce problème existe il doit bien y avoir quelque part un recueil de "bonnes pratiques" qui évitent de réinventer la roue, l'eau chaude et le fil à couper le beurre.

De même je suppose qu'il doit bien y avoir un moyen de savoir si l'utilisateur dispose d'une souris, d'un touchpad, ou d'un écran tactile, mais je n'ai rien trouvé à ce sujet dans les différents documents que j'ai pu consulter.

Quelqu'un a-t-il connaissance de tels documents?

Merci de votre aide.
Modifié par PapyJP (18 Mar 2015 - 12:27)

Bonjour,

D'abord, un peu de lecture avec cet article un peu daté mais intéressant.

Côté solutions techniques, il y en a bien quelques unes. Tu as modernizr qui permet d'obtenir pas mal d'infos provenant de l'agent utilisateur. Ici avec le touch event par exemple
C'est un sujet qu'on retrouve quand même assez souvent, comme sur ce résultat sur Stackoverflow, le premier lorsqu'on tape des mots clés tels que "touch detection"

Après pour moi c'est plutôt du côté de la conception des sites en question qu'il faudrait revoir les choses (même si j'ai bien compris que tu te situe dans une perspective d'amélioration de l'existant, et pas suffisamment en amont du projet). Normalement on se fiche la plupart du temps de connaître les caractéristiques précises du contexte utilisateur, l'interface ayant vocation à être utilisée de façon universelle, tout comme l'on n'a pas en tant que concepteur à juger les choix techniques, ergonomiques des visiteurs de nos pages (genre "les touchpads c'est merdique", etc).

Je reviens sur un point plus général…

PapyJP a écrit :
De même je suppose qu'il doit bien y avoir un moyen de savoir si l'utilisateur dispose d'une souris, d'un touchpad, ou d'un écran tactile, mais je n'ai rien trouvé à ce sujet dans les différents documents que j'ai pu consulter.

En fait, on n'a par définition accès qu'aux données auxquelles on a accès

Si l'agent utilisateur envoie des infos comme la langue du navigateur ou si celui-ci veut bien lancer une webcam ou utiliser la geolocalisation HTML5 par exemple, il y a pas mal de choses sur lesquelles on restera forcément dans l'ignorance : diffficile d'être sûr que le visiteur va utiliser une souris, parce que peut-être qu'il a un handicap (permanent ou temporaire) qui fait qu'il navigue au clavier (ou alors qu'il préfère tout simplement utiliser le clavier !)… et encore c'est un exemple simple. Bref, c'est pas simple

Ça me rappelle un ligthning talk lors d'une édition de Paris web où –si mes souvenirs sont bons– l'orateur proposait de détecter le niveau d'alcoolémie du visiteur (via l'analyse du son de sa voix par exemple ^^) pour lui refourguer des articles supplémentaires dans son panier d'achat ou de l'aider à atteindre les boutons de validation en les déplaçant sous son curseur
Modifié par audrasjb (16 Mar 2015 - 19:03)

Merci de ces réponses et des pointeurs sur des articles intéressants.

Je n'ai cependant pas de réponse à ma question de base: quelle est la bonne pratiques (ou plus simplement: comment faites vous personnellement) pour gérer un menu déroulant, sachant que votre site a une grande chance d'être utilisé depuis une tablette ou un smartphone?

Je remarque que de plus en plus le "menu déroulant au passage de souris", qui était le fin du fin il y a quelques années, tente à devenir de plus en plus rare, à mon avis ce n'est pas seulement une question de mode, c'est vraisemblablement lié à l'augmentation du nombre de tablettes.

J'aimerais d'autant plus avoir votre opinion que l'on continue à parler de pseudo-classe :hover un peu partout (en particulier sur ce site) alors que ça me semble devenir obsolète, toujours en raison des tablettes et smartphones. Si :hover ne sert qu'à changer de couleur au passage, c'est simplement un moyen supplémentaire de repérer le curseur sur l'écran, ça ne sert pas vraiment à grand chose. Noter par ailleurs que les touchpad des ordinateurs semblent simuler correctement le comportement d'une souris, alors que les tablettes ne le font pas.

Je continue à penser qu'il y a un manque total de logique dans le fait de disposer d'informations sur les possibilités d'affichage d'un appareil (voir les multiples paramètres qu'on peut utiliser dans une directive @media) et de n'en disposer apparemment d'aucune sur les possibilités d'interaction de l'utilisateur.

Les recommandations des articles sur le sujet sont du genre "on n'en sait rien, prévoyez tout à tout hasard, y compris l'utilisation simultanée de plusieurs modes d'interaction". C'est excellente remarque dans l'état actuel des choses, mais je ne trouve pas cela très satisfaisant.

En fait, il faut bien comprendre que ce comportement de survol/focus n'est finalement intéressant que dans la perspective de l'utilisation d'un pointeur, prolongement de notre préhension de la souris (ou autre touchpad, focus tabulation clavier, etc.). On ne demande pas aux fabricants de claviers ou de télécommandes d'avoir un comportement lors du survol du bouton

PapyJP a écrit :
Noter par ailleurs que les touchpad des ordinateurs semblent simuler correctement le comportement d'une souris, alors que les tablettes ne le font pas.

Oui, car un touchpad est un pointeur. Ce n'est pas une interface tactile comme l'écran d'un iPad. Enfin si, mais c'est tout autant tactile que le bouton d'une souris.

––––––
Au passage, bon anniversaire PapyJP (si ton information de profil est correcte)

Modifié par audrasjb (17 Mar 2015 - 13:28)

audrasjb a écrit :
Au passage, bon anniversaire PapyJP (si ton information de profil est correcte)

Merci beaucoup
Le site affiche des petits ballons â coté de mon nom, mais seulement sur PC... On est responsive ou on ne l'est pas....
Pourtant ça tiendrait bien sur mon iPad...
Modifié par PapyJP (17 Mar 2015 - 19:13)