Dans ce chapitre, nous allons passer en revue toutes les bonnes pratiques en matière de prototypage (maquettage et conception) de site web et d'application mobile.
L'accent est mis 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.
Mais qu'est-ce que cela implique ?
Il y a toute une série de nouvelles préoccupations liées au mobile : les écrans sont petits et comme on y navigue avec les doigts, il est courant d'appuyer sur le mauvais lien ou bouton, de se tromper accidentellement. 😳
Les sites sur lesquels il faut zoomer pour voir le contenu et naviguer, c'est "so 2010". 🤓
Aujourd'hui, le contenu doit être grossi pour être lisible.
Mettre du contenu sur l'écran d'un mobile pourrait représenter un problème si vous restiez fidèle à la version desktop… Mais ce n'est évidemment pas l'objectif : le contenu s'affichant sur l'écran d'un ordinateur ou d'un smartphone doit permettre la même interaction, mais il ne peut pas être disposé de la même manière.
En bref, sur le mobile, cela implique :
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é").
De l'information claire et lisible (un bouton doit avoir l'air d'un bouton)…
… 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 (et "cliquable") doit se trouver dans cette zone pour faciliter la navigation de l'utilisateur mobile.
Mais où ce situe cette zone ?
Eh bien cela dépend un peu, mais comme 90 % des gens sont droitiers, et que 49 % tiennent leur smartphone à une main, en utilisant le pouce, cela ressemble un peu à cela :
Vous comprenez donc maintenant pourquoi il vaut mieux mettre du contenu important (notamment le contenu que l'utilisateur doit toucher avec le doigt) vers le milieu.
Pour faciliter la navigation de l'utilisateur mobile, pensez donc au confort de son pouce. 👍
Évitez-lui les contorsions !
Empêchez vos utilisateurs de réfléchir (ne laissez pas vos utilisateurs se prendre la tête)
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 !
Comment faire ?
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 et très dérangeante, 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 !
