Comment concevoir des écrans : les règles du design

Dávid Pásztor a compilé les bonnes astuces et questions à se poser quand on se lance dans le design d’interface.

La question la plus courante au sujet d’UX est sans doute de savoir comment commencer à concevoir des écrans et quels principes devrions-nous prendre en compte ? La conception des écrans commence par l’esquisse. On commence par des croquis papier rapides, puis on construit des filaires et des prototypes cliquables, à tester et à itérer, et enfin on arrive aux plans de conception détaillés, au pixel près. Dans cet article, voici les 8 règles empiriques les plus importantes dont il faut tenir compte lors de la conception des écrans.

Huit principes de base de la conception d’écran :

  • Les trois questions auxquelles tous les écrans doivent répondre
  • L’importance de la hiérarchie visuelle
  • La copie fait partie de la conception
  • Les conventions sont importantes, nous devons les utiliser
  • Lorsque nous concevons pour le mobile, nous concevons pour nos mains, aussi
  • Prêtez attention au rapport surface effective
  • Visons la simplicité et la transparence
  • Visons les animations et le mouvement avec soin

Examinons plus en détail.

1. Les trois questions directrices de la conception d’écran

Lorsque nous arrivons à un nouvel écran, nous cherchons la réponse à trois questions :

  • Où suis-je ?
  • Que puis-je faire ici ?
  • Comment puis-je avancer ?

Après être arrivé à un nouvel écran, nous jetons instinctivement un coup d’œil autour de nous pour voir où nous en sommes. De nombreux indices aident à répondre à cette question.

Par exemple, nous pouvons voir instantanément le logo de la page. Ou, lorsque nous nous déplaçons entre les pages d’une même application, des structures et des couleurs similaires peuvent nous rassurer sur le fait que nous sommes sur la bonne voie. Si nous cliquons sur un lien, et que le texte du lien est repris dans le titre de la page suivante, nous savons que nous sommes arrivés au bon endroit. Il est également généralement mis en évidence dans le menu sur la page à laquelle l’utilisateur se trouve.

La question « Où suis-je ? » semble trop simpliste, mais dans de nombreuses applications, les utilisateurs n’ont pas de feedback sur ce qui vient de se passer. Tout comme lorsqu’ils se déplacent dans la vie réelle, dans l’espace numérique, ils doivent savoir ce qu’ils ont atteint à un moment donné, quels processus sont en cours ou ont pris fin. Les applications qui ne donnent pas une rétroaction continue sur son état sont très ennuyeuses à utiliser.

Après avoir compris où je suis, la question suivante est de savoir ce que je peux faire sur cet écran. Quel contenu puis-je voir ? Quelles fonctions puis-je utiliser ?
Si je n’obtiens pas de réponse claire à cette question, je préfère prendre du recul et me retirer de l’interface. Plus on est capable de faire de choses sur un écran, plus il est difficile de comprendre à quoi sert la page donnée. Les utilisateurs trouvent généralement la réponse à la troisième question (« Comment puis-je aller de l’avant ?« ) sous la forme d’un bouton d’appel à l’action. Ils ne se posent pas seulement la question d’avoir déjà assez joué sur la page et de vouloir aller de l’avant – c’est utile à l’arrivée, aussi, de voir où on peut aller à partir de là.

Jetons un coup d’oeil à CNN. Lorsque nous arrivons à la page, nous voyons instantanément dans le coin supérieur droit que nous avons atterri sur la page nommée CNN. De la façon dont le contenu est affiché sur la page, nous nous rendons immédiatement compte que nous sommes sur une page de nouvelles. Il devient évident que l’on peut aller de l’avant en cliquant sur les titres.

2. Hiérarchie visuelle et expérience utilisateur

La hiérarchie visuelle est l’un des paramètres les plus importants dans la conception d’écran. Nous pouvons classer les éléments d’un écran donné en fonction de leur degré d’audace, de leur importance et de la facilité avec laquelle nous les repérons. C’est ce que nous appelons la hiérarchie visuelle. Les éléments en gras et en surbrillance se trouvent en haut de la hiérarchie et les minuscules éléments cachés en bas. La hiérarchie visuelle aide à diriger l’œil. Il détermine l’ordre dans lequel nous remarquons les choses. C’est pourquoi il est important de développer consciemment cette hiérarchie. Réfléchissez bien au but d’une page donnée, à ce que l’utilisateur veut atteindre et à ce sur quoi nous voulons attirer l’attention. Les trois questions présentées précédemment peuvent vous aider à cet égard. L’illustration qui suit est un exemple d’école très simple de hiérarchie visuelle : on lit le titre en majuscules avant de lire le texte entre parenthèses.

La hiérarchie aide aussi à comprendre. Quand nos yeux parcourent une rivière de textes concis, il n’y a aucune chance que nous comprenions de quoi il s’agit. Cependant, si nous parcourons un texte plein de sous-titres, nous nous faisons une idée de leur contenu.

Comment créer une hiérarchie visuelle ?
La plupart des webdesigners débutants ne s’intéressent qu’à mettre l’accent sur certains éléments. Et c’est encore pire s’ils essaient de mettre en évidence trop d’éléments. Malheureusement, un ou deux éléments seulement peuvent se trouver au sommet de la hiérarchie et c’est à nous de décider lequel de ces éléments sera.
Pour prendre la bonne décision, nous devons savoir quel est le but le plus important de l’écran. Nous pouvons mettre en évidence certains éléments comme : la taille, la couleur, la position, la texture, la forme et l’orientation.

Les études de caméra d’oeil ont révélé précisément comment nous balayons une page. Lorsque nous arrivons à une page, nous la parcourons deux fois de gauche à droite en haut de la page, puis nous la faisons défiler vers le bas.

C’est ce qu’on appelle Nielsen F, comme on peut le voir sur l’image de la carte de chaleur ci-dessous : carte de chaleur de conception d’écran Cela montre aussi que les choses dans le coin supérieur gauche sont plus susceptibles de se remarquer. De plus, la colonne de gauche et la partie au-dessus du pli (accessible sans défilement) sont plus accentuées.

3. Le copywriting fait partie du processus de conception

Beaucoup de designers pensent que l’écriture n’est pas dans leur description de travail, mais cela ne pourrait pas être plus loin de la vérité. Le copywriting fait partie du design.

Dessin de la copie
Pendant le processus de conception de l’écran, la meilleure méthode d’écriture est similaire à celle du dessin : nous devons d’abord faire des croquis.
En d’autres termes, vous devriez écrire au moins 6 à 8 versions de la copie. Si nous sommes prêts, nous devons choisir le meilleur. Cela vaut la peine de consacrer du temps à la formulation du texte. Les meilleurs résultats proviennent généralement de la fusion des versions précédentes. Vous devriez aussi faire lire le texte à vos collègues afin de découvrir si quelque chose est incompréhensible ou bizarre.
Cela aide aussi beaucoup si vous le lisez à haute voix. Le but le plus important de la copie est d’être compréhensible. Et nous ne pouvons l’assurer que d’une seule façon : si nous le testons avec de vrais utilisateurs. L’étape d’après est d’utiliser les expressions que les gens utilisent pendant les tests. Au moment des entrevues, nous devons noter les mots utilisés par les personnes interrogées, de sorte que nous puissions utiliser leurs propres mots plus tard dans le produit ou le marketing.

Microcopie – une partie de la conception de l’écran
C’est la copie que vous pouvez lire sur les interfaces de microcopy. Il s’agit du texte d’un bouton, d’un petit morceau d’instructions ou de l’étiquette d’un champ de formulaire. Mieux vaut éviter d’utiliser la terminologie autant que possible (sauf lorsque vous concevez uniquement pour des professionnels). Un ton informel est utile, mais n’exagérez pas et ne devenez pas ringard. La micro-copie bien écrite a une touche humaine. Cela donne l’impression qu’il y a une vraie personne de l’autre côté. En bref : il construit la confiance.
Ces principes de la micro-copie sont pertinents dans tout scénario de conception d’écran. Le texte d’un formulaire doit être encourageant. Vous assurer que vous n’avez pas besoin de grand-chose pour remplir le formulaire. Rédigez des messages d’erreur avec empathie et solidarité. Faites attention à ne pas être drôle dans une situation stressante et ne blâmez jamais vos utilisateurs. Il faut toujours avoir le sentiment que nous sommes tous dans le même bateau. Et n’oubliez pas de proposer une solution.

Créer un guide de style
S’il y a plus d’une personne qui écrit du texte pour le même produit, vous devriez créer un court guide de style, qui décrit le tone of voice qu’ils devraient utiliser. Vous pouvez recueillir des adjectifs et énumérer quelques bons et mauvais exemples. Il est également utile de rechercher d’autres sites Web ou blogs avec le même ton de voix et de les lire fréquemment. Quand vous devez écrire, vous pouvez les reprendre pour vous mettre dans l’ambiance. Le texte doit aussi être testé. La microcopie n’est que quelques mots, mais avec un impact énorme. C’est pourquoi beaucoup de gens pensent que l’écriture UX est la nouvelle superpuissance.

4. Utilisez les conventions !

Le web et le monde mobile sont les réalisations les plus récentes de l’humanité, mais même pendant cette courte période de temps, de nombreuses solutions sont nées que la majorité des applications utilisent en général. Ces solutions standard de facto sont appelées conventions.

Conventions pour une meilleure expérience utilisateur
Les conventions dans la conception d’écran sont comme ceci : « dans le coin supérieur gauche », « les liens doivent être en bleu », « les liens doivent être soulignés », etc. La plupart des utilisateurs sont déjà habitués à ces conventions. Nous les utilisons parce qu’ils raccourcissent la courbe d’apprentissage. Les solutions différentes des conventions énervent généralement les gens.

L’innovation contre la convention
Les gens se demandent souvent si cela contredit l’innovation. La réponse est simple. Ce ne sont pas les conventions sur lesquelles vous devez innover. Nous n’avons pas à réinventer la roue et nous n’avons pas à changer des choses éprouvées et testées. Nous devrions construire de nouveaux châteaux avec ces blocs de construction à la place. L’illustration montre une ancienne et une nouvelle conception d’écran d’Amazon. Notez combien d’éléments interfaciaux nous utilisons encore aujourd’hui (liens, onglets, boîte de recherche, panier, menu déroulant).

5. Lorsque nous concevons pour le toucher, nous concevons pour nos mains (aussi)

Lors de la conception d’écrans tactiles, le paramètre le plus important est notre propre main, avec laquelle nous utilisons le produit. Nous ne pouvons concevoir une interface facile à utiliser que si nous prenons en compte la taille de nos mains et comment elles fonctionnent. Nous devons surtout faire attention à la taille et au mouvement de nos doigts : que pouvons-nous atteindre et quand pouvons-nous appuyer en toute sécurité sur certains boutons ?

Peut-on appuyer sur un bouton en toute sécurité ?

Commençons par ce dernier point. Lorsque nous tapotons sur quelque chose, notre doigt couvre un espace assez grand sur l’écran. Pour se sentir en sécurité lorsque l’on clique, il suffit d’avoir une seule chose sous les doigts lorsque l’on clique. Si notre doigt couvre plus d’éléments, nous nous sentirons mal à l’aise parce que nous ne pouvons jamais être assez sûr de ce sur quoi nous avons cliqué.

Si nous étudions l’écran d’un téléphone moderne et regardons combien de fois notre pouce correspond à l’écran en largeur, nous voyons que nous pouvons mettre 4 choses cliquables dans une ligne.

Notre doigt peut-il atteindre le bouton ?

Un autre point intéressant est l’accessibilité, à savoir ce que nous pouvons atteindre avec nos doigts. Il y a eu une étude d’observation : des notes ont été prises au sujet de personnes qui marchaient dans la rue et tenaient leur téléphone. Il y avait trois positions de base – rien de nouveau ici.
– La première, c’est quand on tient nos téléphones d’une main. Les sous-versions supportent le téléphone avec notre petit doigt et celui où nous tenons le téléphone complètement. L’appui du petit doigt donne un sentiment de sécurité, mais en retour, nous ne pouvons atteindre que le bas de l’écran.
– Une autre position est de tenir le téléphone avec les deux mains. De cette façon, nous sommes en sécurité grâce à la main secourable, mais en retour, nous n’avons pas toujours la possibilité de la tenir dans nos deux mains.
– La troisième version : les deux mains tenant le téléphone en même temps et les deux pouces utilisés en même temps.

Les illustrations ci-dessus montrent les zones que nous pouvons facilement atteindre et celles que nous ne pouvons pas atteindre du tout.
Le diagramme suivant illustre quelle était la position d’attente la plus courante parmi les personnes dans la rue, en plus d’écouter de la musique et de parler au téléphone. Il n’est pas surprenant que la position d’une seule main ait gagné du temps d’utilisation de l’appareil.

Lors de la conception pour mobile, nous ne pouvons pas savoir comment les utilisateurs vont tenir le téléphone, il est donc utile de créer des interfaces qui peuvent être utilisées dans la majorité des cas. En d’autres termes, nous ne devons pas concevoir des éléments cliquables qui ne sont pas accessibles dans certaines positions. En regardant toutes les illustrations, il s’agit de la partie supérieure gauche de l’écran et du coin inférieur droit, que l’on ne peut atteindre qu’en pliant le pouce de manière inconfortable.

La situation est encore plus nuancée si l’on regarde comment ces positions ont changé en raison de la taille croissante des téléphones. Les espaces accessibles deviennent de plus en plus petits sur les grands écrans. Nous devons avoir notre seconde main pour atteindre les choses dans le tiers supérieur de l’écran. les grands écrans par rapport à l’accessibilité des petits écrans Par conséquent, la conception de l’écran doit être contrôlable à partir de la moitié inférieure de l’écran. Les fonctions fréquemment utilisées ne doivent pas apparaître en haut de l’écran.
(Vous voulez en savoir plus sur les défis spécifiques de la conception d’interfaces sans texte ? Lisez ceci.)

6. Rapport de surface effective

Pendant le processus de conception de l’écran, nous devons travailler avec l’espace à notre disposition. Le but du jeu est de voir quel élément de contenu apparaît où, sous quelle forme et quelle taille d’espace il occupe. Notez combien le rapport de surface effective est faible sur un écran donné ! Nous avons grisé des zones sur une page de nouvelles vous montrant le contenu qui n’est pas la priorité. La mise en évidence des zones dans le menu de conception d’écran ou des boutons de partage ne sont que des fonctions secondaires sur cette page. Personne n’arrive sur cette page pour lire le menu. Les visiteurs viennent lire les articles. Par conséquent, tout le reste est un « mal nécessaire », surtout quand on ouvre la page.

7. Des écrans simples et clairs

Les meilleures interfaces conviviales sont simples et claires. De telles interfaces sont faciles à comprendre, les gens s’y familiarisent facilement, s’habituent à les utiliser et ressentent de la joie en les ouvrant la prochaine fois. Cette simplicité dans la conception de l’écran n’est pas facile à atteindre, cependant. Dans un projet de design, les nouvelles idées et les nouvelles informations doivent apparaître sur l’interface les unes après les autres. Il se peut que les différents départements de l’entreprise (ou les différents participants au projet) considèrent que différentes choses sont importantes pour apparaître.

La responsabilité du concepteur
La responsabilité du concepteur est de diriger les participants pendant la phase de planification afin d’obtenir une interface claire et facile à comprendre. Vous avez probablement deviné que dans la majorité des cas, cela n’est possible que si le concepteur parvient à un consensus entre les participants, ce qui rend cela possible. C’est une tâche de diplomatie ou de gestion, mais qui reste du ressort du concepteur. Mais de quoi avez-vous besoin pour que tout cela soit possible ? Tout d’abord, des objectifs commerciaux simples et une idée très claire de l’objectif du produit donné. Si nous les avons, les interfaces peuvent être facilement gérées. Ensuite, il est aussi plus simple de déterminer quels éléments sont importants et lesquels ne le sont pas tant que ça.

Définir les objectifs
Le fait de ne pas savoir à quoi sert le produit peut apparaître comme un énorme problème pour la première fois lors de la conception des interfaces. C’est la responsabilité du concepteur de se rendre compte que c’est la vraie raison des problèmes, et de convaincre les autres de prendre du recul et d’établir les principaux objectifs. La deuxième tâche importante du concepteur est d’éduquer continuellement les autres membres de l’équipe. Il doit expliquer la différence entre un écran plein à craquer et un écran minimaliste et élégant. Le designer est celui qui rejette les idées et gère les peurs qui y sont liées. (Par exemple, un énorme logo à la troisième étape du processus d’inscription n’est pas pertinent, puisque le branding ne se fait pas ici.)

Un exemple de définition d’objectifs utilisateur
Un exemple : l’image suivante montre deux versions différentes d’un écran d’application mobile.

A première vue, le design de l’écran de gauche semble un peu plus excitant à cause des icônes colorées, mais quand on essaie de comprendre exactement à quoi sert la page, celle de droite est plus utile. Ici, le même contenu apparaît dans une structure plus claire et plus simple. Notez la différence entre les deux et comment celui de droite l’a atteint : quid de la définition des objectifs .

8. Mouvement et animations

Les animations d’interface utilisateur sont l’un des domaines les plus controversés de la conception d’écran. Beaucoup de gens veulent simplement utiliser des animations parce qu’elles ont l’air cool. Je ne le recommande pas. D’autres les utilisent pour communiquer le fonctionnement de l’interface ou pour avoir un impact émotionnel sur les utilisateurs.
Le guide de conception de matériel de Google a un point de vue sage et modéré des animations, mais même certains produits Google les utilisent tellement qu’il est ennuyeux.
La première et la plus importante règle : n’utilisez pas les animations uniquement pour les animations. Les gens sont branchés pour se concentrer sur les objets en mouvement. Nous avions besoin de ce réflexe pour survivre quand un tigre nous surprendrait dans la jungle. Il est facile de distraire les gens avec des objets en mouvement de leurs objectifs initiaux. Il faut donc être très prudent avec le mouvement et l’utiliser à bon escient. Chaque animation doit avoir un sens. Des animations peuvent expliquer le fonctionnement de votre interface. L’un des exemples bien connus est la façon dont vous minimisez la fenêtre dans votre système d’exploitation de bureau. La fenêtre se réduit à une icône sur le plateau, de sorte que vous saurez où la trouver plus tard.

Lorsque vous sélectionnez un élément sur une liste, il peut se développer et se développer en plein écran. Cette animation indiquera aux utilisateurs qu’ils voient la vue détaillée du même élément. Dans de nombreuses applications mobiles, le menu glisse du côté gauche de l’écran et se cache derrière. L’animation coulissante montre où se trouve le panneau de menu et nous apprend à glisser vers la gauche pour le récupérer. Les animations peuvent également ajouter au caractère de votre application.
Les animateurs de dessins animés sont très doués pour exprimer leurs sentiments par le simple mouvement des personnages. Vous pouvez aussi faire du mouvement de façon ludique, agressive ou discrète. Cela peut amplifier le style de votre application. Mais quand même : faites attention. Comme toujours dans le design, moins c’est plus. Conservez les animations pour les meilleurs moments seulement.

Mot de la fin

Il est important de garder à l’esprit que la conception des écrans est un processus. Un écran ne devrait jamais être simplement le résultat du génie créatif du concepteur. C’est pour les oeuvres d’art. Nous concevons des écrans pour que d’autres personnes puissent les utiliser. Et c’est pour cette raison que vous devez toujours garder à l’esprit les 8 principes ci-dessus lors de la conception des écrans.

Vous pouvez télécharger gratuitement cet ebook Product Manager’s Guide To UX Design.

Uxstudio

Publicités

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.