Quand concevoir avec des gestes et des boutons

Pourquoi la conception sans bouton est un gros problème en ce moment et quand et comment vous devriez adopter cette tendance pour vos applications mobiles.

Auparavant, nous avions des boutons sur tout. Mais comme l'ont montré des appareils comme l'iPhone X et Alexa, les boutons ne sont plus une nécessité pour l'engagement.

Ce qui pose la question:

Alors que nos appareils et appareils physiques développent des conceptions sans bouton, et que les consommateurs deviennent plus à l'aise et confiants dans l'interaction de cette façon, est-ce quelque chose que nous devrions considérer pour plus d'applications?

Avant de vous attaquer à la conception et au développement de votre prochaine application, prenez le temps d'évaluer les avantages et les inconvénients de l'utilisation des gestes sur les boutons.

Les avantages de la conception d'interactions d'applications en tant que gestes

Vous avez besoin que vos utilisateurs s'engagent avec les applications que vous développez, c'est pourquoi tant de temps est consacré à la conception des boutons parfaits pour eux.

• Sont-ils assez grands?
• Sont-ils dans la zone du pouce?
• La couleur attire-t-elle suffisamment l'attention?
• Le bouton ressemble-t-il suffisamment à un bouton cliquable?
• Est-il étiqueté suffisamment clairement?

Vous pouvez trouver des tonnes d'études de cas et de guides dédiés au sujet de la conception de boutons. Compte tenu de la complexité apparente que cela a été pour les concepteurs, devrions-nous pousser un soupir de soulagement maintenant que les utilisateurs se sont familiarisés avec les gestes de l'application?

Tenez compte des avantages suivants:

Concevez une interface plus claire

Lorsque vous créer une application qui dépend uniquement des gestes, vous pouvez nettoyer tous les biens immobiliers qui seraient autrement occupés par des barres de navigation et d'autres icônes et liens superflus.

Prenez le jeu Life Is Strange par exemple:

Le gameplay est basé à 100% sur les gestes:

Bien que l'écran ci-dessus apparaisse temporairement au début du jeu, le reste des indices et des rappels ne gênent pas comme le pourrait une barre de navigation. Par exemple:

Bien que vous ne puissiez pas concevoir une application non ludique basée à 100% sur les gestes, vous pouvez voir la valeur de pouvoir se cacher la navigation parfois.

Facilitez l'exécution des actions

Avez-vous déjà vu les utilisateurs de votre application mobile éprouver des difficultés à toucher leur cible et vous êtes-vous demandé comment résoudre le problème sans créer de boutons surdimensionnés? Les gestes peuvent avoir plus de sens, car ils ne sont pas toujours aussi précis au toucher.

Prenons l'exemple de Instagram :

Les utilisateurs peuvent aimer, commenter, partager ou mettre en signet des publications en cliquant sur les boutons correspondants. Mais, comme vous pouvez le voir, il n'y a pas beaucoup d'espace entre les options, en particulier pour les utilisateurs avec des doigts plus gros.

Instagram, cependant, a adopté un geste de double tap pour les likes. De cette façon, l'utilisateur doit simplement avoir son doigt quelque part sur l'image ou la vidéo pour interagir avec elle.

Les applications deviennent plus excitantes pour interagir avec

Bien que les boutons puissent être animés pour fournir aux utilisateurs des commentaires lorsqu'un clic a été correctement exécuté, il y a quelque chose de spécial dans la façon dont les gestes invitent les utilisateurs à interagir avec une application.

Prenons Flipboard par exemple.

Voici comment les nouvelles sont affichées sur Flipboard. C'est une belle façon de montrer les titres et les images en vedette.

Pour passer au titre suivant, les utilisateurs «retournent» (glissent vers le haut) la carte comme ceci:

Le geste imite en fait comment quelque chose (disons, un page d'un journal) pourrait se retourner dans le monde réel.

Permettre aux utilisateurs de s'engager plus rapidement

Les applications de communication, en particulier, offrent aux utilisateurs de nombreuses options parmi lesquelles choisir.

Au plus haut niveau, ils peuvent avoir à choisir entre des canaux et des dossiers. Au niveau suivant, ils doivent trier une liste de messages. Plus loin, ils doivent décider quelle option prendre pour chacun.

De nombreuses applications de communication – e-mail et chat – ont résolu ce problème de navigation de manière similaire.

Voici ce qui se produit lorsque vous glissez vers la droite sur un message WhatsApp :

Voici ce qui se produit lorsque vous glissez vers la gauche:

Plutôt que de forcer les utilisateurs à taper une fois pour accéder aux messages, à taper une deuxième fois pour ouvrir un message et à taper une troisième fois pour agir, le balayage le gère

Créez une UX plus unique

Si vous avez déjà ressenti que les applications mobiles se ressemblent toutes et qu'il est difficile de créer quelque chose de totalement unique avec le peu avec lequel vous devez travailler, les gestes peuvent être le différenciateur dont votre interface utilisateur a besoin.

Regardons Boomerang pour Gmail pour cet exemple:

Il n'y a rien d'extraordinaire au début coup d'œil. Cependant, lorsque les utilisateurs utilisent le geste de balayage, voici ce qu'ils voient:

Similaire à la façon dont WhatsApp utilise un balayage pour permettre des options d'action rapide, Boomerang pour Gmail le fait également. Cependant, la principale différence réside dans la façon dont le geste se déroule, chaque option étant déployée pour que l'utilisateur puisse la voir et la glisser vers.

Les inconvénients de la conception d'interactions d'application en tant que gestes

En général, vous devez faire très attention aux gestes que vous utilisez et à la façon dont vous les utilisez dans votre application mobile. Ce qui peut sembler un moyen d'améliorer l'UX peut rapidement devenir une friction inutile et indésirable de la part de vos utilisateurs.

Voici quelques éléments de réflexion:

Familiarité avec les utilisateurs

À ce stade, les gestes comme le double-appui et le balayage sont des choix assez intuitifs. Cependant, qu'en est-il de ceux comme:

• Spread?
• Pincement?
• Drag?
• Shake?
• Tilt?

Si les gestes ne sont pas assez courants, vaut-il même la peine de les construire dans votre application? Bien sûr, vous pourriez ajouter des rappels comme Life Is Strange… mais l'interruption de l'expérience en vaut-elle la peine? Je soupçonne que les utilisateurs seront frustrés si les gestes sont trop difficiles à mémoriser et qu'il n'y a pas de moyen facile de prendre la route des boutons traditionnelle à la place.

Gesture Imperfection

Les boutons ne sont certainement pas parfaits, surtout quand un trop grand nombre d'entre eux sont regroupés dans un petit espace. Cependant, les gestes peuvent également être imparfaits en termes d'exécution.

Il suffit de regarder l'exemple de Boomerang de Gmail. Le geste de glisser-trier est vraiment cool à voir et à dialoguer. Cependant, cette créativité supplémentaire ne vaut peut-être pas la frustration des utilisateurs lorsqu'ils glissent trop rapidement ou prennent accidentellement la mauvaise action et finissent par devoir cliquer sur le bouton "Annuler" de toute façon.

Cohérence et attentes

Je ne m'attends pas à ce que les développeurs aient du mal à maintenir la cohérence dans la façon dont ils appliquent les gestes dans une application. Mais pensez à ce que votre choix de modifier un geste que les utilisateurs connaissent déjà à partir d'une application populaire pourrait faire pour l'expérience utilisateur.

Vous pouvez voir ce problème dans de nombreuses applications de rencontres.

Comparons les deux plus populaires: Tinder et Bumble .

Le glissement vers la gauche de Tinder dit «Non» à une correspondance potentielle:

Bumble aussi:

Le balayage vers la droite de Tinder dit «Oui» à une correspondance potentielle:

Bumble aussi:

C'est là qu'ils diffèrent:

Le glissement vers le haut sur Tinder dit "J'aime vraiment celui-ci" pour une correspondance potentielle :

Bumble demande aux utilisateurs de cliquer sur un bouton dans le coin inférieur droit pour effectuer cette action (c'est aussi une fonctionnalité payante sur Bumble). Au lieu de cela, le balayage vers le haut sur Bumble dit: «Je veux en savoir plus sur ce type / fille»:

Afin de voir davantage le profil d'un match Tinder, les utilisateurs ont soit cliquer sur le côté droit ou gauche de l'image pour voir plus de photos ou cliquer où le nom est pour révéler la bio.

Pour les utilisateurs qui changent régulièrement entre les deux applications, cette variation de conception pourrait créer des erreurs dans l'action où il ne devrait vraiment pas y en avoir si les gestes étaient restés cohérents.

Parfois, les gestes ne font tout simplement pas sens

Si vous êtes assis là à vous demander comment vous allez faire en sorte qu'un geste fonctionne pour votre application, mais que cela ne fonctionne pas, c'est probablement parce qu'il n'y a pas de place pour eux. Et ça va. Il existe de nombreuses applications qui ne les utilisent pas – comme l'application de réservation pour Amtrak :

Il n'y a vraiment aucune raison d'ajouter un geste vers une application comme celle-ci. Si vous avez besoin d'obtenir une confirmation très claire d'un utilisateur, un bouton est la meilleure solution, même s'il nécessite plus de travail de sa part.

Cela dit, n'oubliez pas que vous pouvez combiner des gestes et des boutons. Vous pouvez voir un exemple de la façon dont cela fonctionne avec Uber :

Les utilisateurs peuvent faire glisser et basculer les options de ramassage, mais sont finalement invités à confirmer avec un clic sur un bouton. Dans ce cas, le bouton et le geste ont du sens dans le contexte de l'application.

Vraiment, ce que vous devez faire, c'est vous demander:

• Cette interaction peut-elle être simplifiée par un geste?
• Le geste sera-t-il facile à retenir et deviendra-t-il intuitif pour les utilisateurs?
• Dois-je compléter le geste avec un bouton?

Et si vous n'êtes toujours pas sûr, utilisez des cartes thermiques et des tests utilisateur avant le lancement pour voir dans quelle mesure vos choix se déroulent. Y a-t-il certains gestes plus couramment utilisés que d'autres? Quel est le premier geste de vos utilisateurs? Quel est le dernier geste qu'ils utilisent et cela conduit-il à une conversion ou à un abandon?

Il ne s'agit pas d'adopter des gestes pour faire quelque chose de tendance ou qui fonctionne pour les autres. Il s'agit de les adopter pour améliorer l'expérience. Alors, réfléchissez.