Retour au blog

UX, l’ami invisible

La nouvelle année commence et avant d’entrer dans le « méga-rush », à l’agence on en profite pour rafraichir quelques concepts qui définissent parfaitement notre manière de travailler.

C’est l’occasion pour moi de discuter avec toute l’équipe et de regrouper quelques inspirations en terme de UX.

Parce que nous en parlons souvent, de l’« Uïxe »… Mais ce terme aussi court que barbare cache généralement beaucoup, beaucoup d’activités et de réflexions pour rendre, au final, votre vie beaucoup plus simple et agréable.

L’UX est l’abréviation de « User Experience ». À l’époque où ce terme n’existait pas encore, nous parlions de « design », puis d’ergonomie, puis d’accessibilité, pour enfin arriver à ces deux lettres.

L’UX est un ensemble d’activités, d’actions et de réflexions qui rendent l’utilisation d’un produit ou service plus intuitif et agréable pour l’utilisateur final. Le but de l’UX est :

  • Que vous puissiez réaliser l’action désirée le plus simplement possible
  • Que vous sentiez complètement à l’aise avec un produit, un site Internet, etc…
  • Que vous puissiez comprendre en tout temps l’environnement dans lequel vous évoluez

Cela peut se retrouver dans la signalétique d’un lieu public, comme dans une série d’icônes sur votre application préférée.

L’UX est partout. Plus il est bon, moins vous le voyez, car vous pouvez, grâce à lui atteindre un objectif de manière naturelle.

J’ai donc demandé à l’ensemble de l’équipe de 8bitstudio quels étaient les éléments d’UX qu’ils préféraient et qui les inspiraient. Leurs réponses vont sans doute vous étonner !

Une icône, oui mais…

Sabrina, notre « visual designer » tatouée est, comme d’habitude, super directe et extrêmement précise dans sa réponse : « Moi, ce que je trouve le plus important dans une application, c’est que les icônes soient constamment accompagnées d’un texte. Il n’y a rien de plus frustrant qu’une icône qui n’est pas assez explicite. » me dit-elle sur un ton ferme.

Je m’interroge… Une icône est généralement assez explicite toute seule. Puis j’allume mon smartphone. J’ouvre Spotify et me rends compte qu’il y a des textes en dessous des icônes. Le menu Android, pareil ! Puis, j’ouvre Facebook.

– Ahh ! Pas de textes !
– Oui, mais ça fait combien de temps que tu les vois et que tu les utilises ces icônes ?
– Euh… plusieurs années.
– Voilà, elles font partie de ton vocabulaire, de tes habitudes, elles sont acquises dans tes schémas mentaux. Donc plus besoin du texte. Mais c’est une exception.

Je dois avouer que ce premier dialogue m’interpelle. Je n’ai jamais fait autant attention à ce type de détail.

Depuis, j’ai remarqué que plusieurs applications n’utilisaient pas cette bonne pratique. Pinterest est un bon exemple. Je me rends compte que je n’ai jamais « osé » cliquer sur les icônes qui ne me « disaient rien ».

Et si t’as pas de souris ?

Je pose la même question à Mathieu, notre développeur front-end. Pour celles et ceux qui veulent mieux comprendre qui est Mathieu, je vous invite à lire son article « Ma journée chez 8bitstudio ».

Dans notre discussion, Mathieu me parle d’un point extrêmement précis.

« Il existe, sur certains réseaux sociaux comme Facebook par exemple, un moyen de passer d’une nouvelle à l’autre grâce aux touches « J » et « K » de son clavier. Moi qui fais du développement depuis plusieurs années, c’est quelque chose que j’essaie constamment sur un site de News ou un réseau social ».

– Hein ??? Quoi ? Pourquoi ?
– Ben, ça fait référence à un vieil éditeur de texte qui s’appelait VI. VI n’avait pas de souris et du coup, les développeurs devaient utiliser les touches H, J, K et L pour naviguer.
– H pour « Home » – Revenir au début du document
– J pour « Ligne suivante »
– K pour « Ligne précédente »
– L pour arriver à la fin du document.

Et certains réseaux sociaux, un peu geeks, ont codé cette fonctionnalité pour faciliter leur navigation. Il y a quelques touches supplémentaires qui ont été développées depuis :

  • Le P permet d’imprimer
  • Le Z permet de zoomer sur une image

Et il y a plein de cas particuliers sur tous vos réseaux sociaux préférés. Si vous naviguez depuis votre ordinateur, il existe pléthore de Raccourcis Clavier extrêmement utiles qui vous feront gagner un temps précieux et qui vous feront passer pour un Jedi aux yeux de vos collègues.

Bienvenue, bonjour, bravo, « Onboarding »

Joanie a elle aussi une inspiration très rapidement quand je lui pose cette question.

Pour moi, ce que j’adore quand j’arrive sur un site Internet ou sur une application, c’est le « Onboarding ».
– Hein ? Quoi ?
– Oui, le « Onboarding » est la première chose que tu verras en ouvrant pour la première fois une application ou un site (pour autant qu’il soit bien fait !). Il te guidera et t’expliquera ce que tu trouveras dans l’application ou le site. C’est très malin, car cela augmente la connaissance du produit et présuppose une bonne expérience.

Et c’est vrai que depuis quelques temps, je n’ai pas vu une seule application qui n’avait pas ce type de « message de bienvenue ». C’est extrêmement agréable d’être accueilli de la sorte et de tout de suite savoir utiliser une application.

Vous trouverez des « Onboarding » un peu partout de nos jours. Cela va même jusqu’au message qui vous remercie d’avoir commandé votre billet d’avion.

« The One Thing »

Au moment où j’écris ces lignes, je suis encore dans l’attente des inspirations de deux membres de l’équipe. Du coup, je me mets à réfléchir sur ce qui m’inspire le plus ces derniers temps.

Je suis un utilisateur d’Android. Et il y a un élément que j’apprécie particulièrement sur toutes les applications de Google. Le bouton d’action qui se trouve dans le coin inférieur droit.

Ce bouton est génial ! Pour chaque application, il me propose l’action la plus logique à réaliser.

Lorsque j’ouvre l’agenda, le bouton arbore un « + » me permettant de créer un nouvel évènement. Sur l’application téléphone, c’est le bouton qui ouvre le clavier qui est présent.

La force de ce bouton réside dans son accessibilité. Étant droitier et tenant le plus souvent mon téléphone de la main droite, je trouve ce bouton vraiment accessible. De plus, il ne prend pas de place inutile.

Tout est une question de doigté

Bon… Tony a eu plus d’une semaine pour me répondre. Et là, il arrive vers moi avec un énorme sourire.

– Regarde ce truc ! Je trouve ça génial !

Il sort son application CFF, qui a été refaite récemment et qui comporte quelques belles applications d’UX.

– Regarde l’horaire tactile ! Plutôt que de devoir taper avec ton clavier le nom de ta destination de départ et destination d’arrivée… tu vois ces images de stations ? Si je glisse mon doigt de l’image de Zurich à celle de Bâle, l’application va directement aller chercher les horaires pour ce trajet. C’est génial le nombre d’étapes que l’on gagne !
– Et bien sûr, tu peux choisir quelle ville tu veux voir ?
– Tu choisis tout ! Tu peux même personnaliser les images !

C’est vrai que cette nouvelle application est bien foutue !

Allez… on reprend !

Karen, notre nouvelle stagiaire, arrive vers moi avec une nouveauté assez intéressante.

– Je regarde souvent des vidéos longues sur Internet. Et pour moi, il n’y a rien de plus frustrant que de ne pas retrouver le point où j’en étais au moment où j’ai quitté la vidéo. Mais sur l’application Youtube ils ont su gérer ça très bien !

Et en ouvrant moi-même l’application Youtube, je me rends compte que les vidéos que j’ai déjà regardées ou que j’ai arrêtées en cours de route ont maintenant une barre rouge en bas de l’aperçu. Et cette barre rouge nous indique où nous nous sommes arrêtés sur la vidéo.

– Du coup, lorsque je reprends cette vidéo, j’arrive directement là où j’ai laissé la vidéo.

Pas le droit à l’erreur !

Un des principes intéressants de l’UX est de prévenir votre utilisateur de faire des erreurs. Et Vincent, le directeur de 8bitstudio, est intransigeant en terme de UX. C’est ce qui fait la grande force de notre agence.

« En parlant d’erreurs à ne pas commettre, il y en a une que je n’accepte absolument pas ! Lorsque vous remplissez un formulaire sur votre téléphone mobile, c’est primordial que le clavier s’adapte à l’information que vous devez entrer ».

– Si vous devez entrer un numéro de téléphone, votre mobile doit vous présenter le pavé numérique.
– Si vous devez entrer votre e-mail, le clavier doit être en minuscule et le signe « @ » doit être présent.

Le but est bien évidemment de rendre l’utilisation de votre mobile plus intuitive et rapide.

Il y a encore plusieurs exemples qui font partie aujourd’hui des bonnes pratiques en terme de UX.

Une des améliorations que j’adore, c’est le menu « sticky » que l’on voit de plus en plus sur les sites Internet et applications mobile. Il s’appelle « sticky », car il se colle au haut de l’écran.

A l’époque, le menu disparaissait en haut de votre écran lorsque vous dérouliez la page. Aujourd’hui, nous sommes capables de faire disparaitre le menu, puis de le faire réapparaitre dès l’instant où nous déroulons la page à nouveau. Ainsi, le menu se rend utile seulement lorsqu’on en a besoin.

L’UX au quotidien

Des nouvelles itérations et idées de UX sont créées tous les jours et tentent de nous faciliter la vie et de nous permettre d’en faire plus, plus rapidement et plus simplement. Certaines itérations sont tout simplement brillantes, d’autres sont catastrophiques.

Mais comment bien procéder lorsque l’on veut intégrer de l’UX ?

Vision d’ensemble

Il est important d’avoir une vision d’ensemble sur le projet Web que l’on souhaite créer. Comprendre les tenants et aboutissants d’un projet, bien connaitre le public cible qui va utiliser au quotidien notre site / application et avoir une vision commune et partagée avec tous les membres de votre équipe créative et technique.

Désirs partagés

Lors d’un projet Web, il est important de poser à plat toutes les attentes et objectifs de toutes les parties. Les objectifs de l’entreprise peuvent être connus, mais il se peut que l’entreprise oublie de définir voire même rechercher les besoins et objectifs attendus par leurs clients !

En définissant l’ensemble des groupes d’utilisateurs et leurs besoins, nous pouvons résoudre les éventuels conflits et trouver des solutions créatives pour que les clients de l’entreprise puissent profiter d’une bonne utilisation tout en remplissant facilement les objectifs commerciaux de l’entreprise. 

Mieux comprendre nos clients

Quand les utilisateurs commencent à demander des améliorations, il est important de vraiment comprendre quels sont les réelles attentes de ces personnes.

Par exemple, si nos clients nous demandent : « Pourriez-vous mettre un tutoriel dans l’App ? », nous devrions comprendre le message suivant : « Nous devons nous assurer que les utilisateurs comprennent le fonctionnement de l’application dès la première utilisation ».

Le principe MAYA

MAYA est un adage que nous utilisons qui vient de l’anglais « Most Advanced, Yet Acceptable ». Le principe est de définir quel outil, interaction, transition et autres éléments de UX sont acceptés par les utilisateurs de notre application ou produit. En fonction du public, certaines fonctionnalités ou interactions ne seront pas comprises aussi bien.

Concrètement, chez 8bitstudio

Au bureau, nous discutons, dessinons et respirons UX. Du coup, nous sommes assez fiers des interactions et implémentations que nous avons pu réaliser pour nos clients.

Le numéro 45 s’il vous plait !

Imaginez ! Vous êtes à votre bureau de Poste, et à l’entrée de la pièce, vous retrouvez ce petit distributeur de tickets numérotés qui vous invite à prendre un fameux billet. Juste au-dessus, un indicateur vous dit combien de minutes vous allez attendre.

Dans le cadre de la refonte complète du site Internet d’une grande institution, nous avons entièrement pensé la page de contact / support pour aider au mieux le visiteur du site Internet avant même qu’il ne pense appeler la centrale téléphonique.

Nous avons créé deux éléments différents :

  • Le premier est un compteur qui affiche en temps réel le nombre de personnes dans la file d’attente de la centrale téléphonique.
  • Le second consiste en une question qui invite l’utilisateur à trouver lui-même la réponse à son problème dans la base de connaissances.

Grâce à ces deux éléments, nous avons pu diminuer drastiquement le nombre de personnes dans la file d’attente de la centrale téléphonique.

Une information constamment disponible

Pour plusieurs de nos clients, nous commençons à utiliser de plus en plus une barre latérale qui reste visible même lorsque nous scrollons sur la page. Ce type de fonctionnement permet notamment :

  • De créer un menu secondaire dans une page spécifique. Cela va améliorer la hiérarchisation de l’information et créer un environnement dans lequel il est facile d’évoluer.
  • De laisser accessible et visible une information primordiale. Telle qu’un bouton d’appel à l’action ou encore le prix d’un produit.
  • D’améliorer l’interaction entre l’utilisateur et le site Internet. Lui permettant de découvrir l’information de manière plus ludique.

Menu Full Screen Overlay

Cette dernière approche dans le Design Radical consiste à retirer le menu de toute la page pour le cacher dans un bouton se trouvant généralement dans le coin supérieur droite, ce recours est aussi connu sous le nom de « hamburger menu ».

Lorsque l’utilisateur clique sur le bouton, l’entier de la page se transforme pour ne montrer que le menu. Obstruant ainsi la totalité du contenu.

Cette technique permet un gain d’espace et de clarté important, tout en apportant une expérience plus précise pour chaque action de l’utilisateur. Ce dernier n’a pas à voir constamment le menu d’un site s’il ne le demande pas.

Dans ce cas précis, les recherches et designs destinés aux téléphones mobiles ont inspiré les designs de sites Internet d’aujourd’hui. D’ailleurs, nous entendons de plus en plus parler d’un design « Mobile First ».

Le principe du « Mobile First » est de designer votre futur site Internet d’abord sur mobile et d’ensuite le décliner pour le grand écran. C’est un changement de paradigme fondamental qui inverse complètement le processus de pensées jusqu’alors établi.

La raison pour laquelle nous commençons à concevoir votre site par la vue mobile est simple. C’est la vue qui comprend le maximum de contraintes en terme d’espace disponible.

Une fois que nous avons réussi à designer et hiérarchiser l’information souhaitée sur le support Mobile, nous pouvons facilement le décliner sur les autres tailles d’écran.

De plus, l’utilisation du téléphone mobile pour naviguer sur Internet se fait de plus en plus. Ce qui rend l’approche « Mobile First » un must pour la réalisation de tout site Internet en 2017.

Conclusion

Plus qu’une activité ou une simple appellation, l’UX est une approche globale qui consiste principalement à rapprocher le consommateur du bien qu’il souhaite acquérir ou de l’information qu’il souhaite consulter.

Plus votre UX est bon, plus vous vous rendez accessible à vos futurs clients. Et l’accessibilité est l’un des points fondamentaux dans la transformation de vos visiteurs en clients.

C’est clairement une combinaison d’empathie envers votre client, d’expérience envers les nouvelles technologies et de bon sens pratique. Trois éléments nécessaires pour augmenter la confiance et la conversion de vos prospects.

Commentaires