Comprendre les gestes pour la conception d'interface utilisateur

Tapoter, balayer, faire glisser, appuyer longuement - ce ne sont là que quelques-uns des gestes qui dominent nos expériences numériques. Les iPhones à écran tactile ont intégré les gestes mobiles il y a des années, et nous n'avons pas regardé en arrière depuis.

Les gestes affectent la façon dont nous interagissons avec les interfaces, y compris les téléphones, les ordinateurs portables et les iPad. Mais nous n'avons pas besoin de chercher bien loin pour trouver une interface gestuelle au-delà de nos appareils de travail et de divertissement. Il n'est plus rare d'utiliser des gestes lors de l'interaction avec les écrans de voiture ou les lavabos.

Les interfaces utilisateur naturelles (NUI) sont si naturelles pour les utilisateurs que l'interface se sent, et est parfois, invisible, comme une interface à écran tactile. Certains NUI utilisent même le contrôle gestuel, permettant aux utilisateurs d'interagir avec l'interface sans contact physique direct. BMW a récemment lancé une fonction de contrôle gestuel qui permet aux utilisateurs de contrôler sans contact le volume de la voiture, les appels et plus encore.

Les gestes sont de plus en plus courants dans la conception des interfaces utilisateur et jouent des rôles de plus en plus complexes dans notre vie quotidienne.

À mesure que la technologie progresse, les concepteurs UX et UI et les entreprises devront s'adapter. Vous n'avez pas besoin de connaître toutes les subtilités technologiques ou d'avoir une connaissance approfondie de l'intelligence informatique. Néanmoins, vous devez avoir une compréhension de base des capacités, des fonctions et des meilleures pratiques de conception pour la technologie gestuelle.

Ce qui fait un bon geste

Alors, que sont les gestes ?

Les gestes sont un moyen de communication. Nous utilisons depuis longtemps les gestes de la main et les hochements de tête pour aider à transmettre le sens, et maintenant, les gestes jouent un rôle dans la communication avec les interfaces utilisateur.

Les bons gestes permettent une communication efficace et efficiente qui s'aligne sur notre façon de penser. Nos pensées et nos connaissances influencent notre façon de parler, et elles influencent notre utilisation des gestes, en particulier dans la conception de l'interface utilisateur. Considérez à quel point il est plus facile pour les jeunes générations qui grandissent autour de la technologie moderne de comprendre les gestes - ou comment le fait de glisser imite le fait de pousser ou d'essuyer quelque chose. C'est pourquoi comprendre vos utilisateurs est essentiel, même dans la conception de gestes.

Les gestes franchissent la barrière entre les domaines physique et numérique, nous permettant d'interagir avec les médias numériques avec notre corps. À certains égards, cela rend l'utilisation des applications numériques plus amusante, mais cela ne suffit pas pour faire d'un geste un bon geste.

Un bon geste de mouvement améliore la convivialité en rendant les applications plus faciles à utiliser dans tous les contextes. Les gestes bien conçus ont une courbe d'apprentissage plus courte car ils semblent naturels et faciles à comprendre. Pour citer Bill Gates :

« Jusqu'à présent, nous avons toujours dû nous adapter aux limites de la technologie et conformer notre façon de travailler avec les ordinateurs à un ensemble de conventions et de procédures arbitraires. Avec NUI, les appareils informatiques s'adapteront pour la première fois à nos besoins et à nos préférences et les humains commenceront à utiliser la technologie de la manière la plus confortable et la plus naturelle pour nous.

Avantages de la technologie gestuelle

La large utilisation des interfaces gestuelles est due aux nombreux avantages qui en découlent. Trois des avantages les plus importants des gestes sont des interfaces plus propres, une facilité d'utilisation et une meilleure exécution des tâches.

1. Interfaces plus propres

Les humains consomment plus de contenu que jamais auparavant, les entreprises utilisent plus de données et la technologie continue de fournir plus de services. Avec cette augmentation du contenu, il est facile pour les interfaces et les écrans d'apparaître encombrés. Les concepteurs peuvent utiliser des gestes pour réduire le nombre d'éléments visuels, comme les boutons, qui occupent de l'espace.

2. Facilité d'utilisation

Comme indiqué ci-dessus, les interactions deviennent plus naturelles avec une interface basée sur les gestes. La facilité des gestes simples de la main nous permet d'utiliser la technologie avec un minimum d'effort à une vitesse maximale.

3. Amélioration de l'achèvement des tâches

Les taux d'achèvement des tâches et les taux de conversion augmentent lorsqu'un utilisateur a moins à faire pour terminer une tâche. Vous êtes plus susceptible de terminer une tâche lorsque cela demande moins d'efforts. Une interface utilisateur basée sur les gestes capitalise sur cela en rendant les tâches simples et rapides. Ils peuvent même réduire le nombre d'étapes nécessaires pour accomplir une tâche.

Types de gestes dans la conception d'interface utilisateur

La conception pour le toucher a conduit au développement de nombreux types de gestes, dont les plus courants sont le tapotement et le balayage. Il existe trois catégories de gestes :

1. Gestes de navigation (pour naviguer)
2. Gestes d'action (pour passer à l'action)
3. Transformer les gestes (pour manipuler le contenu)

Voici quelques-uns des gestes les plus courants sur les interfaces que tous (ou presque tous) les utilisateurs connaissent, même s'ils ne le font pas consciemment. Nous mentionnons les écrans, mais vous pouvez remplacer l'écran par un pavé tactile ou toute autre interface gestuelle.

Robinet

Un geste de toucher consiste à appuyer sur l'écran avec un doigt pour ouvrir ou sélectionner quelque chose, comme une application ou une page. Voici un conseil : concevez des éléments d'interface cliquables de manière à ce que la totalité de la boîte ou de la ligne soit cliquable, et pas seulement le texte. Donner plus d'espace aux utilisateurs augmente la convivialité.

Tapez deux fois

Le double tapotement consiste à taper deux fois de suite sur l'écran de manière rapprochée. De nombreuses applications utilisent ce geste pour zoomer, mais sur Instagram, les utilisateurs peuvent appuyer deux fois sur une photo pour l'aimer.

Glisser

Glisser implique de déplacer votre doigt sur l'écran dans une direction, en touchant d'un côté et en levant le doigt de l'autre. Les gestes de balayage sont souvent utilisés pour faire défiler ou basculer entre les pages. Tinder utilise le balayage vers la droite pour correspondre à un profil et le balayage vers la gauche pour en passer un.

Balayage à plusieurs doigts

Vous pouvez également effectuer un geste de balayage avec deux ou trois doigts. Il s'agit d'une fonctionnalité courante sur les pavés tactiles des ordinateurs portables qui utilisent des balayages à deux et trois doigts pour différentes actions.

Glisser

Le glissement utilise le même mouvement général qu'un glissement, sauf que vous déplacez votre doigt plus lentement et ne le soulevez pas tant que vous n'avez pas tiré l'objet là où vous le souhaitez. Vous utilisez le glissement pour déplacer un élément vers un nouvel emplacement, comme lors de la réorganisation des applications de votre téléphone.

Jeter

Comme le balayage, un geste de fling est lorsque vous déplacez votre doigt sur l'écran à grande vitesse. Contrairement à un glisser, votre doigt ne reste pas en contact avec un élément. Les lancers sont souvent utilisés pour retirer quelque chose de la vue.

Appui long

Un appui long consiste à appuyer sur l'écran mais à maintenir votre doigt enfoncé plus longtemps que d'habitude. Des appuis longs ouvrent des options de menu, comme lorsque vous maintenez un texte pour le copier ou maintenez une application pour la supprimer.

Pincer

L'un des nombreux gestes à deux doigts, un pincement, c'est lorsque vous maintenez deux doigts écartés sur l'écran, puis que vous les faites glisser l'un vers l'autre dans un mouvement de pincement. Les gestes de pincement sont souvent utilisés pour effectuer un zoom arrière après un zoom avant. Parfois, ils présentent une vue de tous vos écrans ouverts à des fins de navigation.

Pincer-ouvrir ou étaler

Un geste de pincement ou d'écartement est le contraire d'un pincement. Vous maintenez vos deux doigts rapprochés, puis vous les écartez. La diffusion, comme le double tapotement, est généralement utilisée pour effectuer un zoom avant.

Rotation

Pour faire une rotation, appuyez sur l'écran avec deux doigts et faites-les pivoter dans un mouvement circulaire. Le meilleur exemple de rotation est lorsque vous tournez la carte sur Google Maps pour voir ce qui vous entoure.

Concevoir des gestes 101

Utilisez ce que les gens savent

Les gestes existent depuis un certain temps, donc pour la plupart des gestes, des directives générales existent.

Et dans la plupart des cas, il existe des règles que vous voudrez suivre lors de la conception de gestes pour une interface. Lors de la création d'une application, par exemple, vous devrez déterminer sur quelles interfaces les utilisateurs utiliseront votre application. Il est possible que les utilisateurs téléchargent votre application sur les téléphones Android et Apple, qui utilisent déjà tous deux des gestes spécifiques au produit. Vous devrez évaluer les gestes des interfaces de votre produit et décider comment vous en tirerez parti ou s'il vaut la peine d'ajouter des gestes que les utilisateurs ne connaissent pas.

Voici quelques directives pratiques sur les gestes et les mouvements pour les interfaces de produits populaires.

• Consignes Google Gestuelles
• Directives Microsoft Gesture
• Directives sur les gestes d'Apple
• Directives gestuelles Android

Lors de la conception d'interfaces utilisateur basées sur les gestes, il est recommandé de s'en tenir à ce que les utilisateurs savent. Vous pouvez faire preuve de créativité si nécessaire, mais un niveau de cohérence entre les gestes et les interfaces aide à les garder intuitifs pour les utilisateurs, augmentant ainsi la convivialité de votre produit.

Si vous pensez qu'un nouveau geste est en magasin, vous devez le tester de manière approfondie avant de le mettre en œuvre. Vous effectuerez une série de méthodes de recherche d'utilisateurs pour tester la convivialité, l'efficacité, les courbes d'apprentissage et la satisfaction des utilisateurs avec un geste avant de le diffuser au public.

Vous avez la possibilité de réutiliser un geste bien connu dans un but différent, mais encore une fois, vous devriez tester l'efficacité de cette stratégie à l'avance. L'avantage ici est que les utilisateurs sont au moins familiarisés avec le mouvement.

Prenez, par exemple, l'utilisation par Instagram du double-clic pour aimer ou "coeurer" une publication. Un double-clic est généralement utilisé pour zoomer, mais cela fonctionne bien pour les besoins d'Instagram. C'est aussi une excellente étude d'efficacité : taper le cœur sous un poteau nécessite un tapotement de moins mais plus de visée. La méthode alternative de double pression permet aux utilisateurs de faire défiler plus rapidement car ils ont l'image entière à viser, et il est intuitif de toucher l'objet que vous aimez.

Les concepteurs ont commencé à développer un langage de conception avec des mains, des cercles et des flèches pour communiquer l'intention gestuelle aux développeurs de produits et aux stratèges. Ce langage est quasi universel avec une déviation minimale.

Pensez en dehors de l'écran

Les gestes existent dans des scénarios quotidiens en dehors de l'utilisation du téléphone et de l'ordinateur portable. Un nombre croissant de toilettes publiques ont installé des lavabos sensibles au mouvement, des séchoirs à air et des distributeurs de serviettes en papier. Ces appareils empêchent également la propagation des germes - un trait astucieux pendant la saison de la grippe. Pendant ce temps, les voitures autonomes sont renforcées par la technologie de reconnaissance des gestes pour améliorer leur efficacité et leur sécurité.

Mais vous pouvez toujours faire preuve de créativité avec les gestes du téléphone tout en pensant en dehors de l'écran. Les appareils utilisent la rotation et l'agitation comme méthodes d'interaction depuis des années maintenant. Par exemple, « Shake to Undo » d'Apple donne aux utilisateurs la possibilité d'annuler une action en secouant leur téléphone. Et maintenant, vous êtes probablement familiarisé avec la rotation horizontale des écrans pour regarder une vidéo en plein écran.

Tant qu'elles sont testées en premier, les technologies gestuelles créatives peuvent amener les produits plus loin et augmenter la convivialité.

Gestes et Accessibilité

Les gestes, comme toute chose, doivent être accessibles. L'accessibilité fait référence au fait de rendre un produit accessible et utilisable par toutes les personnes dans tous les contextes, y compris les personnes handicapées. Les gestes doivent respecter les meilleures pratiques de conception accessibles pour contribuer à un environnement égalitaire, se conformer à l'Americans With Disabilities Act (ADA) et permettre à tous ceux qui pourraient bénéficier de votre produit de l'utiliser.

En plus de s'assurer que les gestes de l'interface sont accessibles, il vaut la peine de réfléchir à la façon dont vous pouvez utiliser les gestes pour améliorer l'accessibilité. Apple s'est rendu compte que les écrans plats et sans texture de l'iPhone représentaient un obstacle pour les utilisateurs aveugles. Ainsi, ils ont utilisé leur interface basée sur les gestes pour créer des gestes supplémentaires basés sur l'accessibilité qui aident les malvoyants à utiliser leurs produits.

N'oubliez pas l'expérience utilisateur

Il est courant d'utiliser les termes UX et UI de manière interchangeable, mais il s'agit d'une pratique inexacte. UX signifie expérience utilisateur et traite des perceptions et des émotions de l'utilisateur lorsqu'il s'engage avec un produit. UI signifie interface utilisateur et implique les éléments d'un produit avec lesquels un utilisateur interagit. L'interface utilisateur est un élément important de la conception UX. Si vous souhaitez en savoir plus sur chacun et leurs différences, consultez notre guide sur UX vs UI Design.

Le point ici est que UX et UI sont différents, mais il est essentiel de prendre en compte l'expérience utilisateur lors de la conception d'interfaces. Les gestes de l'interface utilisateur qui sont amusants mais inutiles ou intéressants mais dont la convivialité est médiocre sont le résultat de concepteurs et de développeurs qui ont oublié UX.

Peu importe le nombre de tests que vous avez effectués, donnez aux utilisateurs la possibilité de supprimer certaines fonctionnalités gestuelles. Le tapotement est un geste essentiel de l'écran tactile que tout le monde connaît, mais certains gestes ne sont pas cruciaux pour le fonctionnement d'un produit et n'existent que pour le rendre plus utilisable. Parfois, des gestes comme ceux-ci agacent les utilisateurs qui ne les connaissent pas ou déclenchent le geste sans le vouloir.

Par exemple, sur un Mac, faire glisser deux doigts vers la gauche ou vers la droite sur le pavé tactile renvoie un navigateur Web vers l'arrière ou vers l'avant d'une page. De nombreux utilisateurs font ce geste par accident et sont frustrés lorsque la page change constamment. Ainsi, Apple donne aux utilisateurs la possibilité de désactiver cette fonctionnalité et bien d'autres.

Affiner l'intégration des utilisateurs

L'intégration des utilisateurs améliore l'utilisation réussie d'un produit en apprenant aux utilisateurs comment l'utiliser. Pensez à un nouveau programme qui, lors de sa première ouverture, vous guide à travers toutes les fonctions ou étapes pour l'utiliser.

L'intégration des utilisateurs est importante pour les gestes tactiles, car ils sont souvent cachés et faciles à manquer, en particulier si un utilisateur n'est pas familier avec un geste ou n'en a pas l'expérience dans ce contexte. S'ils ne savent pas qu'ils peuvent l'utiliser ou comment l'utiliser, ils ne le feront pas.

Lors de l'intégration d'un utilisateur, vous voulez être bref, enseigner une chose à la fois et suivre la courbe d'apprentissage qui s'est avérée la plus efficace lors des tests. Les longs didacticiels et les listes étape par étape sont ennuyeux, moins interactifs et souvent ignorés.

Adoptez l'avenir des interfaces gestuelles

Les gestes sont déjà là. Ils existent dans le présent, se rendant utiles dans notre vie quotidienne. Pour les utilisateurs, ces gestes peuvent vivre dans leur subconscient lorsqu'ils glissent et tapent deux fois sans réfléchir. Les concepteurs de produits, les développeurs et les stratèges doivent comprendre les gestes à un niveau plus intime.

La conception pour le toucher est une partie croissante du domaine. Les gestes existent dans les salles de bains et les voitures – qui sait quelle est la prochaine étape ? Embrasse le. Un produit plus utilisable est un produit efficace.

Vous avez des questions ou souhaitez mettre à jour l'UX et l'UI de vos produits ? Nous sommes heureux de parler. Il suffit de tendre la main.