Le design UX, pour “user experience” (expérience utilisateur), désigne la façon dont on organise les éléments d’une interface. Les boutons, les menus, les images, les textes, etc. Tout cela pour que celle-ci soit facile et agréable à utiliser. Sur un écran d’ordinateur de 30 centimètres de large, les concepteurs disposent en effet d’espace pour afficher simultanément quantité d’informations, des menus détaillés, des boutons précis. Mais sur un smartphone d’à peine 6 centimètres, c’est moins évident. Alors il faut penser hors des sentiers battus pour répondre aux usages… avec les contraintes physiques.
Sommaire
Le grand défi des interfaces sur mobile : tout repenser pour le pouce
Commençons par les casinos en ligne, qui illustrent assez bien les défis spécifiques du design mobile. Sur ordinateur, un site de jeux d’argent peut afficher une cinquantaine de titres sur une seule page. Le développeur peut y ajouter des miniatures détaillées, des catégories dans une barre latérale, un menu horizontal avec compte, bonus, promotions. Sur mobile, ce même contenu doit tenir sur un écran dix fois plus petit. Et il est “manipulé” avec un doigt nettement moins précis qu’un curseur de souris !
La taille des éléments interactifs
Un bouton sur lequel on clique avec une souris peut mesurer quelques millimètres. Sur mobile, les directives de conception (celles d’Apple ou Google) recommandent une zone tactile minimale de 7 à 10 millimètres, soit environ 44 pixels. En dessous, le risque d’erreur devient trop important. Dans un casino mobile, les boutons “Miser”, “Tourner” ou “Doubler” occupent donc une place considérable à l’écran, réduisant d’autant l’espace disponible pour le jeu lui-même.
L’organisation du contenu
Là où la version ordinateur présente les jeux en grille sur plusieurs colonnes, la version mobile adopte un défilement vertical infini. L’utilisateur fait glisser son doigt vers le haut pour découvrir de nouveaux jeux, un geste désormais naturel sur smartphone. Les catégories, plutôt que d’être affichées dans un menu latéral permanent, se retrouvent dans un menu hamburger (les trois lignes horizontales) ou dans une barre de défilement horizontal en haut de l’écran.
Pour illustrer ces principes d’UX sur un casino mobile, prenons l’exemple concret de la roulette, jeu de hasard dans lequel chaque joueur parie sur le numéro qui sera tiré par le croupier. Sur ordinateur, vous cliquez précisément sur le numéro choisi, vous pouvez placer plusieurs jetons à différents endroits du tapis. Sur mobile, le tapis de jeu est forcément miniaturisé. Pour permettre des mises précises, les développeurs ont dû ajouter des fonctions de zoom tactile (écarter deux doigts pour agrandir) ou créer des interfaces alternatives où vous sélectionnez d’abord le type de mise dans un menu… avant de toucher la zone concernée.
L’interface doit être utilisable d’une seule main, le pouce devant pouvoir atteindre les principales zones d’interaction. C’est pourquoi, dans les casinos mobiles, les boutons d’action principaux se trouvent généralement dans le tiers inférieur de l’écran, zone plus facilement accessible avec le pouce. Nous avons évoqué le divertissement, mais plus généralement, le toucher tactile a introduit un vocabulaire gestuel propre au mobile. Glisser (swiper) pour passer d’un écran à l’autre, pincer pour zoomer, maintenir appuyé pour afficher des options, tirer vers le bas pour actualiser. Ces gestes sont devenus intuitifs. Plus fluides certes, mais ils obligent à repenser complètement la navigation.
L’absence de survol constitue déjà une première une différence majeure :
Sur ordinateur, passer la souris sur un élément peut afficher des informations supplémentaires, un menu déroulant, une infobulle explicative. Sur mobile, cette possibilité n’existe pas : votre doigt cache ce qu’il touche, et il n’y a pas d’état intermédiaire entre “ne pas toucher” et “toucher”. Les designers doivent donc rendre toutes les informations importantes immédiatement visibles ou accessibles via un tap explicite. Les retours tactiles (vibrations) compensent donc partiellement l’absence de retour visuel immédiat. Quand vous validez une action, une légère vibration confirme que le système a bien enregistré votre geste. Dans une application bancaire, par exemple, cette vibration rassure lors d’un virement. Pareil dans les applications de livraison de repas. Vous swipez horizontalement pour parcourir les catégories, tapez sur un plat pour voir les détails, swipez vers le haut pour voir plus d’options, glissez vers la droite pour ajouter rapidement au panier.
Conception pour l’attention fragmentée
Enfin, un des défis de l’UX sur mobile tient à la conception pour l’attention fragmentée. Cela signifie que l’utilisation mobile se caractérise par des sessions courtes… et fréquemment interrompues. On consulte son téléphone 50 fois par jour, très souvent pour des durées de moins d’une minute. On l’utilise en marchant, dans les transports, devant la télévision, dans une file d’attente, etc. Notre attention est donc “fragmentée”, et cela impose des contraintes de design. Par exemple, une application doit permettre des micro-interactions efficaces. Une application bancaire doit tout de suite afficher le solde à l’ouverture. Même chose pour une appli de météo, elle doit montrer la température actuelle avant le détail des prévisions. Cette exigence d’immédiateté structure toute la conception.
L’autre point concerne la sauvegarde automatique permanente. Sur mobile, une interruption peut survenir à tout moment : un appel, une notification, le changement d’application pour répondre à un message. L’utilisateur doit pouvoir reprendre exactement où il en était !
L’UX mobile : quand la contrainte inspire l’innovation
L’évolution du design UX du grand écran d’ordinateur à la petite surface tactile du smartphone représente bien plus qu’une simple réduction d’échelle. C’est une refonte complète des principes de conception, dictée par les contraintes physiques (taille réduite, imprécision du doigt), les usages (utilisation à une seule main) et le contexte d’attention (sessions courtes et fragmentées).