Comment faire comprendre aux utilisateurs les différences dans les actions de balayage

Question

Dans une application iOS, l'utilisateur peut glisser une carte vers la gauche ou la droite et chacune a une signification différente.

• Glissez vers la gauche saute la carte et présente la suivante.
• Glissez vers la droite diffuse le contenu aux autres utilisateurs.

J'ai regardé les utilisateurs lorsqu'ils utilisent l'application, mais ils ne comprennent pas la signification des actions. Ils glissent simplement au hasard vers la gauche ou la droite. J'ai fait un tutoriel simple avec 1 phrase dans une page (4 pages) mais j'ai réalisé qu'ils ne liront pas le tutoriel.

Comment puis-je faire en sorte que les utilisateurs lisent le tutoriel ou leur faire comprendre en quelque sorte ce que signifie l'action de balayage

Answer 1

Commençons par comprendre pourquoi les utilisateurs se comportent de cette façon:

• Carrousels sont une interface très courante sur les appareils mobiles. Ils sont utilisés sur Facebook, Twitter et iOS, etc. Il y a donc presque 2 milliards utilisateurs de smartphones et de tablettes qui sont habitués à cette interface, en particulier avec les cartes. Dans un carrousel, glisser vers la gauche et vers la droite sont symétriques actions qui font avancer et reculer les cartes.

• Votre interface casse ce modèle de comportement pour les utilisateurs. Ainsi, les utilisateurs doivent non seulement apprendre comment fonctionne votre interface, mais ils doivent désapprendre leur mémoire musculaire autour des carrousels pour utiliser votre application. Le processus de désapprentissage est encore compliqué par le fait que vous brisez la symétrie dans les directions de balayage, ce qui rend cognitivement plus difficile à surmonter.

En supposant que vous vouliez vous en tenir à cette conception, qu'est-ce que cela signifie?

• Un tutoriel ne sera certainement pas suffisant . Le didacticiel est utile, mais pour surmonter les habitudes, vous devrez fournir un rappel clair à l'écran sur la signification des actions de balayage.
• C'est pourquoi des applications révolutionnaires comme Tinder fournissent un rappel clair à l'écran du fonctionnement des balayages. Tinder vous permet également de cliquer sur les boutons directionnels comme alternative au glissement ... cela fournit élégamment un moyen secondaire de naviguer dans les cartes au cas où "désapprendre le carrousel" est tout simplement trop peu intuitif pour un utilisateur.
• Je ne pense pas qu'il y ait moyen de le faire si vous voulez que votre interface soit efficace. Il existe certaines applications (dont gmail) qui essaient de masquer l'indicateur de diapositive et de le révéler uniquement lorsque vous touchstart la diapositive, mais c'est une conception assez présomptueuse et même si Google peut se permettre de le faire en raison de sa base installée bien établie , Je suppose que vous voulez que votre application soit populaire, donc je n'essaierais pas d'être présomptueux avec votre conception.

Voici une conception qui intègre ces contraintes comportementales:

Que cela fonctionne ou non pour vous, nous espérons que les observations ci-dessus vous aideront à concevoir une meilleure solution.

Answer 2

En plus de l'aide contextuelle comme d'autres l'ont suggéré, vous devriez envisager de proposer des moyens de rétroaction instantanée pour permettre aux utilisateurs d'apprendre à travers les interactions en plus de lire des conseils et de consulter les boîtes d'informations et les didacticiels au préalable.

Essayez d'afficher des boîtes d'alerte (comme l'a suggéré @Hawk Nick) avec une brève description de l'impact de l'action la première fois que les utilisateurs vont balayer vers la gauche et vers la droite pour pouvoir distinguer les deux actions et apprendre à anticiper les différents résultats lors de l'exécution de la tâche.

Ces résultats devraient refléter en quelque sorte le comportement antérieur des utilisateurs pour renforcer l'apprentissage du modèle, comme "Vous avez ignoré X cartes, souhaitez-vous les revoir à nouveau" ou "Une carte que vous avez partagée a été partagée X fois encore".

Answer 3

Deux solutions:

• une démo ultra légère (mais peut être agaçante)
• Afficher les flèches (vous pouvez également les masquer avec un petit minuteur)
• un appel à l'action intelligent, par exemple lorsque vous lancez l'application pour la première fois, vous pouvez voir d'autres cartes, puis faire défiler jusqu'à la première. De cette façon, l'utilisateur comprend qu'il peut voir plus que l'affichage à l'écran. S'il est possible, le meilleur choix est de le rendre clairement visible avec un peu de l'autre carte affichée sur les bords de l'écran. 

Answer 4

François D. a déjà fourni des moyens de le faire, je voudrais simplement l'étendre en différenciant les actions gauche/droite. Je vous donnerais un exemple de Mailbox

Boîte de réception de Google (Android)

ou même Tinder (je n'ai pas pu trouver une bonne capture d'écran qui montre exactement glisser).

Si vous essayez ces applications, elles distinguent visuellement chaque action de balayage avec des couleurs différentes, des notifications/messages différents, même avec des écrans différents.

De plus, si vos actions gauche/droite sont contextuellement différentes et ont une fréquence d'opérations différente, vous pouvez même essayer de jouer avec la zone cible qui permet le glissement. Pour une action plus courante et fréquente, vous pouvez utiliser un espace vertical de 50%, pour une action moins importante, vous utiliserez un espace d'écran vertical de 10 à 15% de l'autre côté.

Answer 5

Il y a deux façons de procéder.

1. Tutoriels pas à pas lorsqu'un utilisateur ouvre l'application pour la première fois.
2. Lorsqu'un utilisateur glisse vers la droite pour la première fois, une fenêtre de confirmation peut être ouverte. Si l'utilisateur appuie sur OK, il s'en souvient et la fenêtre contextuelle ne s'ouvre plus.

Answer 6

Voici ma tentative d'une solution possible. (Je ne pouvais pas faire pivoter les carrés dans Balsamiq alors imaginez juste qu'ils tournent un peu dans la direction où vous glissez).

Mais l'idée est que du texte ou une icône qui dit ou symbolise l'action apparaît lorsque la carte est glissée dans une certaine direction. Glisser ou relâcher effectuera cette action.

^{télécharger la source bmml - Wireframes créés avec Balsamiq Mockups}

Vous pouvez expliquer l'interaction sans avoir besoin d'une procédure pas à pas ou d'un tutoriel au début de l'application. Je veux dire à quelle fréquence sautez-vous vous-même ces procédures ou les feuilletez-vous? Bon, il en ira de même pour beaucoup d'autres utilisateurs.
Voici un article bien lu à ce sujet il y a quelque temps.

Je pense qu'avec cette solution, l'utilisateur lira d'abord l'explication, mais se souviendra rapidement des commandes et accélérera son interaction en ne devant plus la lire.

Deux autres solutions présentées dans les réponses à ce message (les exemples de boîtes aux lettres) sont similaires, mais à mon avis ne sont pas utilisables avec des cartes.
J'ai pris mon idée de Tinder où ils ajoutent des tampons à la photo en glissant dans une certaine direction. Ils ont également ajouté deux gros boutons en bas pour les mêmes actions.