Introduction à l’UI/UX

Cet article, c’est un peu l’arlésienne du lancement de ce site, depuis quasiment le début je voulais qu’il soit présent avant la mise en ligne, mais le peu de temps et des fois d’inspiration font qu’il a été repoussé.

L’avantage c’est que j’ai pu peaufiner le contenu avec d’autres exemples et un certain recul, alors c’est partit !

Ce sont des mots que vous avez sans doute croisées de nombreuses fois, mais peut-être sans jamais trop chercher. Je ne vais pas vous donner une définition wikipédia (aucun intérêt) mais plutôt ce que moi je comprends de ces termes dans un environnement de site web, application ou jeu vidéo.

UI : User Interface ou en francisant « Interface (avec) l’utilisateur« . Ce sont tous les éléments d’un site web ou d’une application avec lesquelles vous allez interagir : boutons, images, listes déroulantes, etc. Pour moi l’UI ce sont des formes, des couleurs, des mouvements.

Un exemple concret d’UI : les boutons « valider » et « annuler » présents sur une page de passage de commande. Le bouton de validation est en vert et le bouton d’annulation est en rouge. Intervertir ces couleurs, c’est changer les « codes » et donc désorienter les utilisateurs.

UX : User eXperience, transcrit par « expérience de l’utilisateur« . Derrière ce terme se cache les comportements et placements de vos éléments UI. Sur internet, l’utilisateur s’attend à valider un bouton en ne cliquant qu’une seule fois dessus, pourtant ce n’est pas le cas sur son OS pour lancer son jeu préféré par exemple.

En reprenant l’exemple des boutons annuler / valider, les « codes » font que le bouton « annuler » se situe généralement en bas à gauche et le bouton « valider » à droite.

Mais quels sont ces « codes » ? Sont-ils si évidents à comprendre ? Peuvent-ils évoluer ? Sont ils les mêmes pour tout le monde ?

Je ne vais pas prétendre répondre à ces questions, je pense qu’il n’y a pas qu’une vérité en terme d’UI/UX et que les choses sont soumises à évoluer. Mais je vais prendre des cas de la (ma) vie de tous les jours pour vous donner un aperçu de ces « codes » que l’on utilise tout le temps, partout et depuis très longtemps.

La différence culturelle : Une histoire de croix et de rond

Je pense que ça va parler très vite à bon nombre de joueurs : qui sur Playstation n’a jamais ragé de valider au lieu d’annuler et inversement ? En effet la manette Playstation est composé principalement de 4 boutons : croix, rond, carré et triangle, chacun ayant sa propre signification.

Bien souvent il est utile dans un jeu de valider/annuler une action par la pression d’un de ces boutons, chez nous (en occident) le cas le plus usité est :
Croix : pour la validation, imaginé cocher une case par exemple
Rond : pour l’annulation, la forme du 0 (zéro) sans doute, donc rien

Manette Playstation
Manette Playstation

Mais avec les jeux importés (typiquement du Japon), c’est l’inverse qui est vrai, tout simplement du à une différence culturelle :
Croix : pour l’annulation, imaginé quelqu’un croisant les bras devant lui, c’est un signe négatif au japon : « Dame » ou « Nai » la négation
Rond : pour la validation, qui se prononce « Maru« , une fois encore c’est visuel : une personne formant un rond avec son pouce et son index, comme le O de « OK ! »

On remarque alors qu’en UI/UX, il n’y pas forcément un bon et un mauvais usage, mais des adaptations à faire selon les personnes destinatrices du contenu.

 

Le mauvais choix ergonomique…ou pas

On reste dans les jeux vidéo avec deux autres cas qui m’ont interpellés lorsque je jouait sur ma 3DS : pokemon shuffle et bravely default.

Pokemon Shuffle

Je passe rapidement sur le jeu en lui même qui est un puzzle game sur le thème Pokémon, pour en venir à ce qui nous intéresse.

Lors de sessions sur ce genre de jeu (free to play) on a tendance à vite faire ses parties gratuites et à passer à autre chose ensuite, du coup j’avoue être un poil moins attentif qu’avec un jeu plus conséquent. Lorsque vous battez un Pokémon, vous avez la possibilité de l’attraper, si vous échouez, et que vous avez assez d’argent, le jeu va alors vous proposer d’acheter une « Super Ball« , vous donnant plus de chance de l’attraper. L’écran de choix est celui-ci

Capture d'écran du jeu 3DS Pokemon Shuffle
Capture d’écran du jeu 3DS Pokemon Shuffle

Voyez comme les boutons sont placés : l’achat de la « Super Ball » est à gauche, alors que le bouton « annuler » est à droite. La première fois que je me suis fait avoir, j’avoue avoir pester : je voulais acheter mais dans la précipitation je me suis jeté sur le coin inférieur droit (rappelez-vous : les « codes« ) et donc annulé la capture.

En voyant cela je me suis rappelé l’article de Hteumeuleu sur Mario Kart, preuve d’un mauvais design.

Mais après plusieurs mois j’entrevois une autre possibilité à ce placement idoine : peut-être le designer a voulu privilégier le non-achat (conséquent) plutôt que la capture, dans ce cas là, ce n’est pas un si mauvais choix de placement….non? 😉

Bravely Default

Pour cet autre exemple, je pense que j’ai de forte chance de me taper la honte, mais bon, on y va !

Bravely Default est un RPG Japonais développé par Silicon Studio. Il est habituel dans ce genre de jeu de pouvoir gérer vos sauvegardes : créer, modifier, déplacer ou supprimer.

J’ai de nombreuses fois voulu éditées ou déplacées mes parties, mais je ne comprenais pas comment faire ! Pour vous éclaire voici l’écran du délit.

L'écran d'accueil et la flèche "cachée"
L’écran d’accueil et la flèche « cachée »

Cela aura sans doute sauté aux yeux de beaucoup d’entre vous, mais pour ma part ça ne m’a pas frappé avant que je clique sur cette zone par accident : en effet la zone en bas à droite comporte une flèche permettant d’accéder à un menu optionnel. De mon point de vue c’était juste un élément décoratif : elle est trop décorée, et il n’y aucune animation laissant supposer qu’une action est possible.

Une fois la zone dépliée
Une fois la zone dépliée

Cette fois-ci, de mon point de vue c’est bien un défaut de design. Pour ma part j’aurais ajouté une petite animation sur cette flèche afin d’indiquer qu’elle était réactive et non décorative.

 

Le mot de la fin

l’UI/UX ne doit pas être qu’une affaire de « designer » mais doit être embrassé et compris par toute une équipe. Ces domaines doivent faire l’objet de tests et s’appuyer sur les retours des utilisateurs. Que ce soit pour un jeu, un site web ou une application, n’oubliez jamais : ce qui importe (en UI/UX) ce n’est pas ce que vous voulez en faire, mais comment vos utilisateurs vont s’en servir et se l’approprier.

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.