Comment indiquer que des sections spécifiques d'une page peuvent être glissées
Il existe de nombreux modèles de conception d'interface utilisateur mobile qui prennent en charge le balayage, et ils sont conçus en fonction de l'interaction et de l'animation qui indiquent le comportement. Les exemples incluent le "glisser/tirer vers le bas pour actualiser" et également le basculement de page lorsque les utilisateurs glissent vers la gauche ou la droite.
Je sais également qu'il existe des applications qui affichent des interactions de balayage pour seulement des sections spécifiques d'une page, mais je ne vois généralement aucun indice ou indice suggérant que ce comportement est possible. Un exemple de discussion à ce sujet pour Android ici . Ces interactions sont-elles supposées être détectables ou existe-t-il des notations standard pour ce type de comportement?
Je suppose que le premier point à souligner est que vous ne devez pas dépendre d'interactions invisibles pour accomplir quoi que ce soit.
L'exemple fait dans commentaire de virtualnobi du geste de glisser pour supprimer iOS est un bon exemple; Les éléments de courrier, etc. peuvent être supprimés à long terme en choisissant Modifier, puis en vérifiant les éléments que vous souhaitez supprimer, puis en choisissant "Corbeille"/"Archive" au bas de l'écran, ou ils peuvent être supprimés en faisant glisser l'élément vers le jusqu'à ce que l'état "Corbeille"/"Archive" soit visible. De cette façon, le geste de balayage est une astuce pro utile, mais jamais une exigence pour les utilisateurs normaux.
Lorsqu'une action de balayage est requise par l'interface (par exemple pour empêcher une activation accidentelle), le comportement doit être simplement indiqué. L'animation est un excellent choix pour cela. Par exemple, le petit effet d'éclat sur le texte "diapositive à déverrouiller" sur iOS fournit un indice utile du type de mouvement requis (diapositive horizontale):
Image tirée de cette question de débordement de pile
Lorsqu'une telle animation désagréable n'est pas réalisable, mettre une icône sur l'écran qui indique qu'il existe une interaction alternative peut fournir un signal utile. Encore une fois, iOS a un exemple avec le bouton de la caméra sur l'écran de verrouillage - le toucher une fois ne peut pas lancer la caméra immédiatement car cela serait constamment activé par accident, mais s'attendre à ce que les utilisateurs sachent que saisir l'icône et balayer est comment activer la caméra est une autre interaction invisible. Donc Apple ajoute une infime indication de la disponibilité de ce bouton lorsqu'il est tapé une fois; rebondit rapidement l'écran de verrouillage verticalement et montre brièvement l'interface de la caméra en dessous. L'utilisateur apprend rapidement que glisser un peu plus loin révèle un peu plus de l'interface de la caméra, jusqu'à ce que glisser d'un coup déverrouille l'interface et empêche l'écran de verrouillage de redescendre:
Animation tirée de I Animations tumblr
Ceci est très similaire à la disponibilité de l'écran de verrouillage sur Windows Phone, comme mentionné dans cet article très pertinent sur les animations en tant que capacité :
L'animation est un excellent moyen d'offrir un contenu débordant. Dans Windows Phone, les animations de transition inclinent le contenu affiché autour de l'axe y de sorte que (pendant une fraction de seconde) plus d'un écran de contenu soit visible. Ceci est une indication utile qu'il y a plus sur le côté de l'écran que ce qui est immédiatement visible. C'est une énorme douleur de trouver un bon exemple de ligne ( c'est le meilleur que je puisse trouver et c'est un vrai exemple de clignotement et de manque), mais c'est très apparent lorsque vous utilisez le appareil en personne. Dans Windows Phone, ils affichent également un minuscule ruban du contenu sur l'écran suivant horizontalement (comme un indice qu'il y a plus que ce qui semble visible).
Cette technique (en particulier l'exemple d'animation) est un exemple de ce qu'Edward C. Tolman appelle "l'apprentissage latent" (apprendre par l'observation passive plutôt que d'être dit explicitement). Il y a n bon article sur le site Web de Microsoft qui donne un autre exemple:
Dans l'image suivante, le contenu de la zone de liste se glisse lorsque le contrôle est lancé, ce qui transmet beaucoup d'informations rapidement. Cette transition suggère que les utilisateurs peuvent faire défiler cette liste et qu'elle contient plus de contenu au-delà de l'affichage actuel, ce qui contribue à encourager l'interaction des utilisateurs.
Si la zone de liste apparaît vide pendant un instant, puis son contenu se glisse dedans, l'utilisateur voit ce mouvement et peut déduire que la zone de liste contient plus d'options que ce qui apparaît actuellement. De même, le mouvement coulissant agit comme un indice que les utilisateurs peuvent manipuler le contenu qui apparaît.
J'ai récemment traité de la conception de gestes de balayage et vous soulevez une question très importante, car le problème principal avec la plupart des gestes mobiles est la découvrabilité .
De plus en plus, le glissement devient un geste standard et bien connu avec l'essor de Tinder. Cependant, les utilisateurs mobiles sont toujours très habitués à appuyer sur les boutons. Taper est de loin le geste le plus répandu dans le monde mobile (intelligent).
Dans cet esprit, la solution que j'ai trouvée est lorsque l'utilisateur appuie sur l'élément de balayage, une petite animation teaser apparaît qui donne une indication subtile mais efficace sur la façon d'interagir avec l'élément .
J'espère que ce GIF illustre bien la solution.
Je l'ai testé sur plusieurs utilisateurs et le teaser ne manque jamais de guider l'utilisateur vers la bonne interaction.
La solution correspond aussi bien à ce que Luke W en parle dans son discours sur les gestes.
Utilisez du contenu coupé.
Idiome visuel vraiment simple. Je pense qu'il pourrait même être utilisé pour signifier l'insaisissable glisser-rafraîchir en montrant un coin de cercle en haut.
Actuellement, le langage gestuel n'est pas très bien défini, il n'y a donc pas de différence spécifique entre une action de balayage pour une page entière par rapport à une action de balayage pour une section d'une page. Cela signifie que nous devons étendre le langage gestuel ou fournir un repère visuel spécifique pour cette partie de la page pour indiquer un comportement différent. Mais cela nécessiterait toujours un comportement gestuel différent défini afin qu'il ne soit pas confondu avec le comportement de balayage de page.
Je suggère que le balayage à un et deux doigts est un moyen possible de différencier ces différentes interactions. Il existe de nombreuses icônes de langage gestuel qui offrent d'autres possibilités. Je ne pense pas que le glissement de la main entière soit utilisé à part les tables ou les PC à écran tactile.
Bien que je ne pense pas qu'il existe une icône standard pour balayer vers la gauche ou la droite, je sais que dans de nombreux cas, pour faire glisser quelque chose à gauche ou à droite avec votre souris, vous saisiriez une poignée de dimensionnement. Comme celui-ci:
Les fenêtres:
Mac:
Je pense que si vous l'utilisiez à la fin de l'élément d'interface utilisateur coulissant, cela indiquerait probablement clairement que l'utilisateur devrait le faire glisser.
Je pense qu'une combinaison d'animation d'un diaporama pour les sections avec une petite flèche sur le côté est le moyen le plus clair d'indiquer que le contenu est diaporama. Les puces peuvent indiquer la quantité de contenu disponible et la position actuelle de l'utilisateur.
Image prise à partir de sliders.webflow.com
C'est un vieux fil, mais c'est toujours un problème actuel. Le meilleur exemple que j'ai vu de démontrer que quelque chose est glissable se trouve dans les résultats de recherche de l'application Amazon (version iPad, pas iPhone). Après le chargement des résultats de la recherche, l'un des résultats anime brièvement l'effet de balayage pour montrer que quelque chose est caché derrière la cellule.
Je pense que les gestes ne sont pas faciles à découvrir, sauf si on vous a appris à le faire:
ios et Android ont leurs propres gestes uniques (comme glisser vers la gauche pour supprimer dans IOS, appuyez longuement pour modifier dans Android) vous ne le remarquerez que si leur guide nous a dit que ces gestes sont faciles mais pas intuitifs.
si vous concevez une application essayant d'utiliser une interaction gestuelle spéciale. vous devez concevoir un tutoriel. comme le papier Facebook, clair.