Appliquez les bonnes pratiques de prototypage

Dans ce chapitre, nous allons passer en revue toutes les bonnes pratiques en matière de prototypage.

Dans ce chapitre sur les bonnes pratiques de prototypage, nous allons nous concentrer sur les notions de :

• Responsive (adapté au mobile) ;

• Usabilité (adapté à l'usage) ;

• Affordance (adapté à l'époque).

En effet, vous l'avez vu au cours des chapitres précédents, l'utilisateur doit être au cœur de vos considérations.

Concevez un produit "lisible"

Comme nous l'avons vu précédemment, l'utilisateur d'aujourd'hui est mobile, vous devez donc prototyper votre application et/ou site web en conséquence.

1. Pas trop d'information sur l'écran (c'est la règle du fameux "less is more", que l'on peut traduire en français par "la clef, c'est la sobriété", ou encore "la simplicité est préférable à la complexité").

2. De l'information claire et lisible (un bouton doit avoir l'air d'un bouton)…

3. … sur laquelle il est facile d'appuyer avec un doigt (le pouce, en général).

Supprimez la friction

Lorsque vous faites tout cela, vous éliminez la friction.

Supprimer la friction doit être votre objectif premier.

Contentez l'utilisateur et donnez-lui ce qu'il attend :

• éliminez le "bruit" visuel : une trop grosse quantité d'informations et de couleurs dans tous les sens va provoquer de la confusion. Cela concerne aussi le texte : lorsque vous concevez la version mobile, éliminez les mots qui ne sont pas importants, qui ne servent à rien ;

• placez les éléments de contenu là où il s'attend à les trouver : le logo est généralement en haut à gauche, le menu hamburger (déroulant) en haut à droite, etc. Faites le test vous-même : allez sur la page d'un site web en coréen : même si vous n'y comprenez rien, vous serez néanmoins capable de repérer où se situent le logo, le menu, les éléments de navigation… ;

• présentez les éléments de contenu comme il s'attend à les voir : un bouton ressemble à un bouton (ne cherchez pas à réinventer la roue : si votre bouton ne ressemble pas à un bouton, l'utilisateur ne cliquera pas dessus ; si vous voulez qu'un bouton soit "cliqué", donnez-lui l'air "cliquable". Et de la même manière, lorsqu'il a été cliqué, faites-le savoir : le bouton a changé de couleur, par exemple, ou s'est grisé).

Faites du design pour le pouce

Ce dernier point a permis à une nouvelle règle en matière de prototypage de voir le jour : la "Thumb Zone".

Votre contenu important ((notamment le contenu que l'utilisateur doit toucher avec le doigt) doit se trouver dans cette zone pour faciliter la navigation de l'utilisateur mobile.

Guidez vos utilisateurs

En plus de faciliter la navigation physique (pour le pouce), vous devez faciliter la navigation mentale (pour le cerveau). 

En fait, vous devez empêcher les utilisateurs de réfléchir et de chercher : aidez-les à trouver !

Le chemin de navigation (le parcours que l'utilisateur va avoir depuis la page d'accueil jusqu'à l'information désirée), vous devez le penser en amont (et surtout le tester régulièrement (par vous et des bêta-testeurs/utilisateurs).

• Hiérarchie de l’information claire : les titres de niveau 1 sont plus gros que les titres de niveau 2 (qui eux-mêmes sont plus gros que le corps de texte (les paragraphes de texte). Les paragraphes sont espacés, et les mots importants sont mis en valeur (gras, couleur différente…). Ne cachez pas l'information (prix, accès, mode de livraison, etc.) dont l'utilisateur a besoin.

• Noms des pages, boutons et menus explicites : n'inventez pas des noms farfelus ou mystérieux… Par exemple, si vous avez une page qui liste les offres d'emploi de votre entreprise, appelez cette page "On recrute", plutôt que "RH", "Joborama", etc.

• Pushs et notifications non parasites : vos notifications, qu'elles soient visuelles, sonores ou vibrantes, ne doivent pas parasiter l'attention de l'utilisateur, ni lui demander trop de choses (par exemple, dans des formulaires d'inscription ou de connexion, ne demandez pas plus d'informations que nécessaire). Sinon, cela lui donnera l'impression que votre application mobile est très intrusive, voire insupportable… ce qui est fâcheux.

Si l'utilisateur comprend immédiatement comment faire et où aller sur votre application mobile pour trouver l'information ou effectuer la tâche qu'il désire de façon efficace et rapide, son expérience de votre produit sera très positive !

En résumé

• Un bon prototype place l’utilisateur mobile au centre, en privilégiant la lisibilité, la simplicité et l'efficacité d’usage sur petit écran.

• Supprimer toute friction dans l’expérience, c’est garantir une navigation fluide : chaque élément doit être clair, intuitif et placé là où l’utilisateur s’attend à le trouver.

• Le design mobile repose sur le confort du pouce : les zones "cliquables" doivent se situer dans la "zone du pouce", la plus accessible pour une utilisation à une main.

• Un produit bien conçu ne demande pas d’effort mental : la hiérarchie de l’information, les libellés des menus et les parcours doivent guider l’utilisateur naturellement.

• Moins l’utilisateur réfléchit, plus il avance : une UX réussie est celle qui rend l’usage évident, rapide et agréable, sans surcharge ni interruptions parasites.

Passons maintenant à une autre activité indissociable du prototypage : le test. Allons-y !