On a longtemps envisagé l'interface comme quelque chose qui nous distance d'un produit, qui fait justement l'interface, l'intermédiaire.
L'intermédiaire n'est donc plus si perceptible que cela, en tout cas il est absorbé… et il provoque un contact avec la machine qui est encore plus direct, immersif, intuitif.
Et c'est pour cela que, dans le monde du mobile, l'UI est intimement lié à l'UX (l'eXpérience Utilisateur).
Entrez dans l'ère de la mobilité
"On ne va pas sur Internet. On est dans Internet" - Joël de Rosnay, futurologue français.
Mais qu'est-ce que cela veut dire "les utilisateurs sont mobiles" ?
Cela veut dire qu'ils :
se déplacent en utilisant leur smartphone : ils marchent, prennent les transports… ;
cherchent en permanence à avoir un bon réseau, et suffisamment de batterie 😪 ;
communiquent et capturent le réel en instantané ;
ont tendance à préférer les images et les émojis plutôt que le texte simple parce que cela va plus vite et transmet mieux une émotion ou un message ;
possèdent de nombreuses applications mobiles pour de nombreux besoins différents ;
leur attention est donc divisée (c'est la course pour capter leur attention et parvenir à la retenir)
C'est dans ce contexte que les UI et UX designers conçoivent des produits (web app, site web responsive, application mobile). Ils doivent prendre en compte toutes ces choses pour proposer un produit qui corresponde aux usages et aux attentes des utilisateurs.
Intégrez les contraintes du mobile
Contrainte n°1 : l'usage frugal
La version desktop de votre site web peut être très jolie et pleine d'effets graphiques mirobolants… Il n'empêche que votre utilisateur consultera votre site depuis son mobile dans la très grande majorité du temps. Il ne faut pas l'oublier, ni le négliger !
Contrainte n°2 : le temps consacré
La plupart des gens ne liront pas sagement toutes les pages de votre produit, ils les liront en diagonale en cherchant des yeux l'information qui les intéresse.
Contrainte n°3 : l'espace disponible
La taille de l’écran est très petite et l'utilisateur y navigue avec un doigt (souvent le pouce, parfois l'index), sans compter qu'un smartphone s'utilise aussi en marchant.
Par exemple, il doit être aisé d'appuyer sur les éléments d'interaction du produit mobile. Vous devez penser au confort du pouce :
intégrez les éléments d'interaction dans la zone balayée par le pouce sur un écran de smartphone
rendez visible ce qui doit être lu (utilisez les couleurs opposées, choisissez une taille du texte suffisamment grande).
Tous ces éléments font partie d'un ensemble de règles d'usabilité que l'on doit respecter lorsque l'on conçoit un produit.
Réinventez l'interaction
Pour ce faire, il y a tout un tas de micro interactions qui servent cette intention : autrement dit, répondre à l'utilisateur, lui renvoyer le boomerang.
La réponse tactile / ou vibration
Elle est majoritairement utilisée aujourd'hui dans l'action de taper du texte sur un smartphone.
À quoi ça sert en réalité de sentir une réponse tactile quand on appuie sur une lettre ?
Et bien à être sûr(e) d'avoir bien appuyé dessus !
L'apparence des éléments de navigation
C'est surtout pour les boutons (qui guident l'utilisateur dans l'interaction) :
on rend intuitivement "cliquable" un bouton qui est mis en avant par de la couleur, de l'ombre, une impression de relief et donc de préhension (c'est ce que l'on verra dans le Material Design).
lorsqu'un bouton a été actionné, son design change pour "répondre" qu'il a bien été appuyé : il peut devenir grisé par exemple ; et son texte peut aussi changer.
L'ajout d'un son (ou d'une vibration si le smartphone est en silencieux)
C'est le principe de la notification sonore. Elle signale une interaction à venir, c'est un déclencheur : vous entendez une notification Facebook, ou l'arrivée d'un appel, la réception d'un sms… ce qui va vous amener à consulter votre smartphone.
Mais le son peut également être utilisé en réponse à une interaction : vous téléchargez quelque chose et un son positif vous signale que cela a fonctionné. Au contraire, vous reconnaitrez immédiatement au son que le téléchargement n'a pas fonctionné. Je parie que vous les connaissez ces types de sons.
A quoi ça sert toutes ces micro-interactions ?
A ne pas avoir à écrire sur un smartphone que telle ou telle tâche a bien été complétée, mais à envoyer un indicateur immédiatement compréhensible à l'utilisateur.
