“Une interface utilisateur, c’est comme une blague. Si vous devez l’expliquer, c’est qu’elle n’est pas si bonne.”

Si vous travaillez actuellement sur une application, testez-la auprès d’un enfant. La connexion entre un enfant et une application est évidente et simple. Puisque l’enfant ne fait pas attention aux instructions, il s’attend à ce qu’il se passe quelque chose immédiatement. Il n’y a pas de meilleure façon pour vous de découvrir si votre design est réellement intuitif.

Il y a quelques mois, nous avons testé une application auprès d’un groupe d’enfants. Il y avait un quizz en “drag & drop” pour les faire créer des mots en faisant glisser la bonne lettre à côté des autres. Cette session a été révélatrice : les enfants tapaient sur les lettres au lieu de les glisser et ils ne comprenaient absolument pas ce qu’il fallait faire. Il n’y avait effectivement pas le moindre indice dans l’écran.

Si vous voulez réaliser une expérience utilisateur pertinente, vous devez vous assurer que le design et l’interaction se complèteront pour accompagner votre narration. Vous ne pouvez vous permettre d’arrêter la lecture des utilisateurs pour leur dire : “Hé! Regarde ! Je te dis dans cette pop-up ce que tu dois faire !”

C’est pourquoi vous devez vous intéresser à l’affordance.

Le pouvoir de l’affordance

Imaginez que vous arrivez sur une nouvelle planète pour la première fois. Vous avez besoin de comprendre des choses que vous n’avez jamais vues auparavant en vous appuyant sur des indices sur la façon dont chaque objet peut être utilisé.

C’est exactement la même chose lorsque les utilisateurs ouvrent votre application pour la première fois. Vous devez les accompagner de sorte qu’ils n’aient pas peur d’aller plus loin et qu’ils soient suffisamment intéressés par la poursuite de leur chemin.

Habituellement pratiquée dans la conception web, une “affordance” est définie comme l’ensemble des signaux qui indiquent qu’un objet peut être utilisé pour une action ou une fonction particulière.

Par exemple, une zone de défilement vous invite à faire défiler un paragraphe et non pas à taper dessus. Il est malin de créer une césure dans les paragraphes pour faire comprendre qu’il y a plus à venir. Ce design vous permet ainsi de comprendre par vous-même l’action que vous devez faire.

Vous devez utiliser l’affordance comme un outil pour rendre vos projets plus faciles à utiliser et encourager les utilisateurs à entreprendre les actions que vous voulez. Avec une bonne utilisation de l’affordance, vous améliorerez votre taux de conversion sur les actions clé. Voilà pourquoi l’affordance est la clé d’une bonne conception de l’interface .

Comment appliquer l’affordance au design mobile ?

Les écrans tactiles offrent de nombreuses façons de raconter des histoires et nous sommes maintenant très sollicités au quotidien pour comprendre ces différentes consultations mobiles. Nous nous sentons parfois épuisés par tous ces efforts. Vous n’avez jamais été soulagé par la découverte d’une application extrêmement simple ? C’est la même chose avec vos utilisateurs.

Vous devez examiner soigneusement l’ergonomie, les gestes, les transitions et les modes d’interaction spécifiques au mobile de sorte que votre design fournisse une expérience agréable.

L’idée est de rendre les interactions intuitives et sensibles comme un objet réel le serait. Les animations jouent un rôle très important dans le maintien de cette illusion pour les utilisateurs. Par exemple, les applications pour enfants intègrent souvent des boutons qui “bouncent” pour attirer l’attention.

Voilà pourquoi PandaSuite ne vous enfermera jamais dans des contraintes techniques. Quand vous réalisez votre application, vous devez penser à votre narration en premier. Faites simple. Vous avez juste besoin de créer ce qui est attendu ! 🙂

Exemples d’affordance et bonnes pratiques

• Suite de l’exemple précédent

Nous avons modifié l’écran en question et utilisé le puzzle pour représenter cette idée de construction logique d’un ensemble. Pour cela, nous avons représenté les lettres avec une surface bombée et nous avons conçu la zone de dépôt avec une surface intérieure concave.

• Les boutons de switch

Ce bouton de switch iOS implique clairement que vous devez glisser sur le ON ou sur le OFF. Cependant , vous devez clairement expliquer quelle direction est ON. Vous pouvez allumer un voyant, mettre une icône sur l’écran, changer les couleurs, etc. Il est nécessaire de clairement afficher l’état actuel et de montrer que ce bouton permet de le changer.

• Tap/Glisse/Feuillette

Vous pouvez également montrer que les caractéristiques ne sont pas disponibles pour le moment. Le signifiant négatif le plus commun est de griser un texte ou des objets : celui-ci semble se fondre dans l’arrière-plan tandis que les autres éléments sont encore très visibles .

Quelques conseils

• Une fois que vous définissez un principe, conservez-le tout au long de l’application. Autrement les utilisateurs seront perdus.

• Faites attention aux objects physiques de votre vie quotidienne.

• Regardez de nombreuses applications même dans des secteurs très différents.

• Soyez attentif à la façon dont l’utilisateur tient l’appareil : cela influence la façon dont il sera facile possible de parvenir à des parties de l’écran.

• Utilisez des métaphores, soyez plus explicite, ne révélez ce qui est après qu’après une action.