Conception future de l'interface utilisateur sans boutons

Publié: 2022-03-11

Que sont les boutons et en avons-nous vraiment besoin ?

Depuis l'aube des interfaces utilisateur graphiques, nous utilisons des boutons. Considérez que l'interface utilisateur graphique originale de Xerox PARC a 44 ans, mais nos interfaces utilisateur lui ressemblent toujours remarquablement. J'ai récemment retracé l'histoire des styles de boutons en créant la chronologie Dribbble. Bien que les boutons aient évolué en phase avec les tendances actuelles et parallèlement à la technologie, leur origine est sans aucun doute inspirée par de vrais objets du passé.

Image numérisée du catalogue d'automne Sears First Electric Buzzer 1897
Coin inférieur droit - Sears First Electric Buzzer 1897 Fall Catalog.

Depuis plus d'une décennie, nous créons des appareils sans interface physique, qui ne dépendent pas du toucher humain mais peuvent être activés par la voix ou le geste. Pourquoi persistons-nous à créer des formes avec lesquelles interagir, basées sur les objets familiers qui nous entourent ? La forme d'un bouton numérique est toujours calquée sur les outils et mécanismes que nous avons développés au 19ème siècle !

Nous avons créé de tout nouveaux appareils électroniques intelligents - nous pouvons les gérer de presque toutes les manières que nous choisissons, mais par paresse ou par habitude, nous continuons à forcer nos utilisateurs à cliquer sur une petite zone délicate de quelques pixels de large.

Il est temps de faire quelque chose - il est temps de penser sans bouton.

Interface utilisateur "sans bouton" - où tout interagit

Une « utopie sans bouton » est un concept où toute tentative de conserver plus de 130 ans de la façon dont les choses ont toujours été faites est complètement anéantie. L'avenir, c'est maintenant : nous devons passer à autre chose et nous débarrasser des solutions dépassées de nos prédécesseurs.

Est-il possible pour nous d'imaginer une interface complètement dépourvue de boutons ? Quelque chose de si intuitif, qu'en le regardant, vous saurez comment agir ? Cela n'a plus besoin d'être seulement dans notre imagination - ces interfaces existent déjà.

Application Microsoft HoloTour en RA
Microsoft HoloLens : HoloTour.

Pouvons-nous, une fois pour toutes, éliminer le bouton vénéré ? Microphones, caméras, écrans tactiles, vibrations, accéléromètres, gyroscopes, GPS, réalité étendue, réalité virtuelle - la liste est longue - et tout cela géré depuis votre smartphone ou votre PC. Il n'y a plus aucune raison de continuer à forcer vos utilisateurs à appuyer sur ce petit rectangle.

Éliminons les boutons dans les interfaces utilisateur

Avez-vous lu du Type Design où les interfaces sont dépourvues de tout élément graphique, et où seul compte le contenu ? Beaucoup d'entre vous ont demandé : "Et les boutons ?" Nous n'en avons plus besoin, éliminons-les complètement.

Voici quelques idées intéressantes :

Facebook vient de demander : "Quelle est ton humeur ?" Pas besoin d' appuyer sur un bouton pour répondre - utilisez votre voix - dites-lui simplement que vous vous sentez bien et que vous vous dirigez vers la plage. Faites ensuite glisser le texte reconnu par Facebook à partir de votre réponse vers l'endroit où vous souhaitez qu'il apparaisse.

Animation de l'interface vocale
Recherche vocale.

Comme un article sur Medium ? Il y a quelque temps sur Medium, vous pouviez simplement "recommander" un article. Aujourd'hui, nous cliquons sur "applaudissements". Alors "applaudissez". Et s'il n'était pas nécessaire de cliquer sur ce petit bouton étrange, juste d' applaudir littéralement ?

Homme applaudissant un article sur Medium
Concept sans boutons de Wojciech Dobry (… Ne le prenez pas trop au sérieux).

Qu'en est-il des actions plus complexes ? Comme une caisse dans une boutique en ligne. Glissez-déposez un article dans le panier, balayez pour passer à la caisse, puis confirmez-le avec votre empreinte digitale. Peasy facile.

Animation de l'interface utilisateur
ASOS - Ajouter au panier animation par Zachary Zhao.

Pensez au contenu et à tout l'écran

Commençons par les surfaces que nous touchons actuellement pour effectuer une action. Étant donné que la grande majorité des interfaces utilisateur graphiques modernes sont des écrans tactiles, souvent manipulés avec nos pouces, il va de soi que de telles interfaces seront avec nous pendant longtemps. Et nous aurons certainement cette envie irrésistible de tapoter – le toucher est notre sensation la plus importante après tout. Toucher la surface nous donne un sentiment d'action réelle, de contrôle. Comment se fait-il qu'au lieu de cliquer sur un point particulier, nous ayons appris à nos utilisateurs à interagir avec toute la surface ?

Voyons comment Instagram le fait :

Navigation dans les histoires Instagram
Navigation dans les histoires Instagram.

Avez-vous déjà vu un bouton qui vous permet de parcourir une Story Instagram et de revenir à la Story précédente ? Probablement pas, car il vous suffit de toucher le bord gauche de l'écran pour que cela se produise.

Les utilisateurs s'attendent à de nouvelles façons d'interagir avec nos produits numériques, et cela n'implique souvent pas de bouton. Les cartes sont réactives sur toutes leurs surfaces ; en cliquant sur n'importe quel mot, on s'attend à trouver sa définition ; en touchant des images, on s'attend à de l'action. Les utilisateurs sont déjà habitués au fait que des zones entières réagissent au toucher.

Reconnaissance gestuelle

Nous comprenons très bien les gestes car ils nous sont naturels et se reflètent dans nos actions physiques. Actuellement, presque toutes les applications les utilisent pour accélérer la navigation ; nous pouvons appuyer deux fois sur une photo au lieu d'appuyer dessus comme un bouton ; nous pouvons balayer pour parcourir la galerie; ou pincez pour agrandir n'importe quel contenu.

Animation de l'interface utilisateur dessin coeur sur écran tactile
Virgile Pana.

interface utilisateurinterface utilisateur

Interfaces utilisateur par Ramotion & Jarek Berecki.


Nous faisons des gestes non seulement sur des écrans tactiles plats - des gestes sont également effectués dans des espaces AR et VR, où nous pouvons naviguer avec tout notre corps.

Homme utilisant des gestes en réalité augmentée
Gestes sur HoloLens par Microsoft.


Homme utilisant la reconnaissance gestuelle pour contrôler l'IoTHomme utilisant la reconnaissance gestuelle pour contrôler l'IoT

Reconnaissance de gestes Clay VR sur iPhone.

Interfaces vocales

Siri, Cortana, Alexa et Google Assistant sont tous opérationnels. Beaucoup affirment que les interfaces vocales sont l'avenir - il est difficile d'être en désaccord car leurs utilisations potentielles sont innombrables. Nous pouvons contrôler des véhicules, des bâtiments intelligents et des machines simplement en leur parlant, comme si nous parlions à une vraie personne. Avec l'intelligence artificielle et l'apprentissage automatique, les machines sont désormais capables de comprendre notre langage de plus en plus précisément. Nous ne sommes plus confinés à prononcer des «sorts magiques» soigneusement scénarisés; nous pouvons parler en phrases complètes.

OK publicité Google
OK Google…

En utilisant la parole, nous pouvons nous déplacer librement dans le monde des transferts d'argent. Actuellement, Siri vous permet de transférer de l'argent via PayPal à une autre personne en utilisant une seule requête rapide : « Siri, envoie 200 $ à XYZ en utilisant PayPal ». Pas de boutons - la seule confirmation et vérification de sécurité requise est Touch ID.

Siri utilisé pour le transfert PayPal sur iPhone

Actions physiques, appareils connectés et reconnaissance vidéo

Sourire pour payer ? C'est ici! Alibaba et KFC ont lancé conjointement un système qui vous permet de payer simplement en souriant à la caméra, sans appuyer sur aucun bouton. Le système fonctionne sur la reconnaissance faciale et est désormais disponible en Chine.

KFC et Alibaba sourient pour payer le système

Ce n'est qu'une des utilisations potentielles. Nos appareils sont déjà équipés d'une multitude de capteurs et peuvent surveiller l'ensemble de votre corps. Rien ne vous empêche d'utiliser un seul doigt pour effectuer n'importe quelle action sur votre smartphone.

iWatch utilisé pour déverrouiller MacBook Pro

Un autre exemple d'action physique qui accélérera la disparition des boutons est simplement d'être proche de l'appareil. Regardons l'iWatch, par exemple, associez-la simplement à votre ordinateur portable et attendez pour déverrouiller votre MacBook. Les appareils portables peuvent être utilisés pour confirmer notre identité ainsi que pour prédire intelligemment nos besoins en fonction de la localisation et des données des capteurs. Grâce à eux, nous pouvons déjà éviter d'utiliser des boutons sur de nombreuses interfaces.

Gyroscope utilisé pour contrôler l'appareilGyroscope utilisé pour contrôler l'appareil

N'oublions pas les technologies largement disponibles depuis plusieurs années. L'un est le gyroscope, disponible dans presque tous les smartphones mais rarement utilisé dans les interfaces. Ci-dessus, vous pouvez voir des interfaces expérimentales créées par Patryk Adas.

L'avenir des conceptions d'interface utilisateur

Avec autant d'options différentes à notre disposition, il est désormais possible d'oublier l'utilisation de boutons rectangulaires typiques avec lesquels les utilisateurs peuvent interagir. Avec la technologie d'aujourd'hui, nous avons la capacité de créer des interfaces complètement nouvelles qui peuvent :

  • Faire gagner du temps aux utilisateurs
  • Prévenir les erreurs, les glissades et les fautes
  • Compenser toute action accidentelle

Concepts d'interface utilisateurConcepts d'interface utilisateur

Interfaces conceptuelles par Cosmin Capitan et Ramotion.


Le moment est venu, la technologie nous dépasse. Nous, designers, DEVONS poursuivre… et être sûrs de nous rattraper !