Dès 18 mois, mon fils était capable de déverrouiller mon iPhone en glissant son doigt sur l’écran. Et il n’était pas le seul. Mais c’était au temps d’iOS 6. Depuis iOS 7, mon petit garçon de 2 ans n’arrive plus à le déverrouiller, malgré le fait que le mouvement à reproduire n’a pas changé, mouvement qu’il avait réussi des dizaines de fois. Pourquoi? C’est le manque d’affordance qui est ici en cause, une qualité qui se fait plutôt rare dans les interfaces qui ont adopté un design « plat » (« flat design« ).
Les
« Flat design » : une définition
Le flat design pourrait se définir comme une philosophie de design qui privilégie l’absence d’éléments de styles tels que des contours, ombrages, gradients ou réflexion optique. Le flat design est donc minimaliste. Un bon exemple est l’interface de Windows 8.
Tout à l’opposé, on retrouve la tendance du skeumorphisme, c’est-à-dire une interface qui fait écho au monde réel, par exemple l’application « Boussole » incluse avec iO6 (Apple).
Application « Boussole » incluse avec iO6 (à gauche) où l’on peut remarquer le faux bois, reflet de lumière sur métal doré et arrondi. À droite, l’application iOS 7, le design reste skeumorphique car y reprend le concept d’une boussole mécanique, tandis que le design
Le principal écueil du design plat : le manque d’affordance
We don’t need drop-shadows to encourage us to poke at something. All we need is an invitation, in the form of icons or labels or animations which imply functionality, and a consistency of presentation which allows us to make a good guess about what we can interact with.
Matt Gemmell
L’affordance, c’est « la capacité d’un système ou d’un produit à suggérer sa propre utilisation ». Par exemple, dans le menu principal sur le site d’Apple.com, l’élément de menu choisi a l’air enfoncé.
L’affordance peut être obtenue en employant des indices visuels qui, par analogie avec le monde réel, nous permette de deviner les éléments avec lesquels on peut interagir et le résultat probable de cette interaction. En ce sens, le skeumorphisme peut accroître l’affordance d’une interface. Un bon exemple est l’interface de déverrouillage proposée sur les versions 1 à 6 de l’iOS, laquelle illustre un bouton qui glisse dans une cavité (ci-dessous). Ce design, skeumorphique, était clairement plus ergonomique que celle proposée dans iOS7.
Interface de déverrouillage sur iO6.
Mais le skeumorphisme peut aussi nuire à l’affordance. Par exemple, dans l’application de podcasting dans iO6, les bobines de rubans magnétiques prennent beaucoup de place sans qu’il soit possible d’interagir avec elles, à côté de boutons qui eux, sont fonctionnels (ci-dessous).
Lecteur de podcast sur iOS 6 (à gauche); et sur iOS 7 (à droite)
Sur le Web
Une bonne affordance peut également être obtenue en suivant les conventions. Par exemple, une flèche vers le bas à côté d’un libellé veut généralement dire qu’une zone va apparaître directement en dessous, sur la même page. Tandis qu’une flèche vers la droite veut généralement dire qu’on serait redirigé sur une page différente. D’un point de vue ergonomique, il serait risqué de ne pas suivre cette convention.
Liens hypertextes, quelques principes pour créer un design affordant
Les liens hypertextes sont l’essence même du Web. C’est pourquoi il faut leur accorder une grande attention lors du design graphique.
Un lien hypertexte doit avoir l’air cliquable. Et inversement, les éléments non cliquables ne doivent pas avoir l’air cliquable. En effet, si l’utilisateur se met à cliquer sur des éléments qui ne permettent pas d’interaction, une perte de confiance s’installera, et l’utilisateur pourrait être tenté d’éviter le site dans le futur ou d’en limiter son utilisation.
L’affordance des liens ci-dessus est inégale.
L’affordance dépendant cependant du contexte. Par exemple, l’internaute sait intuitivement que les libellés placés dans une entête sont des liens, à cause de leur emplacement. Il n’est donc pas nécessaire que la couleur choisie pour les liens soit utilisée dans tous les cas. Aussi, certains liens doivent être plus discrets, soit pour guider l’utilisateur vers l’action recommandée, soit pour éviter de le distraire avec des fonctionnalités secondaires.
Le bleu
Le bleu est traditionnellement associé aux liens hypertextes, car c’est la couleur par défaut des liens depuis le tout premier navigateur Web en 1992. C’est pourquoi, à cause de l’habitude des internautes, c’est plutôt risqué d’utiliser le bleu pour autre chose que des éléments cliquables.
Trouver un style reconnaissable
Le bleu n’est évidemment pas la seule option qui s’offre pour les liens hypertextes. Il s’agit plutôt d’être consistant, de trouver un style reconnaissable. Par exemple, on pourrait utiliser le souligné ou une autre couleur.
Un truc de design ergonomique : utiliser une nouvelle couleur pour mettre l’accent sur des éléments non-cliquable
Pour créer une hiérarchie visuelle capable de guider l’œil de l’internaute, une bonne approche est d’employer une nouvelle couleur, distincte de la couleur des éléments cliquables.
Le site A List Apart utilise cette technique de belle façon : le bleu a été retenu pour les liens, tandis que le rouge est utilisé pour les sous-titres, les pastilles (nouveau, numéro) et quelques autres éléments non cliquables.
Pourquoi maintenant
Pourquoi le design minimalisme est-il à la mode? L’hypothèse la plus crédible est que dans le contexte où l’ont doit créer un design adaptatif, le minimalisme s’harmonise mieux avec les différents systèmes d’opération (iOS, Android, Windows 8) qui existent sur le marché.
Aller plus loin : revoir l’interface depuis le début
S’éloigner d’un design reprenant les caractéristiques des objets réels est but légitime, mais cela est plus difficile à faire qu’il n’y paraît. Le risque d’accoucher d’un design peu ergonomique est relativement grand.
Par exemple, on parle depuis un moment de remplacer la fameuse icône de disquette pour représenter la sauvegarde de fichier, la disquette étant un objet que bien des utilisateurs n’ont pas connu. De nombreuses propositions ont été faites, entre autres pour tenter de s’adapter à la sauvegarde infonuagique, mais aucune ne s’est imposée jusqu’à maintenant.
Cela dit, rien n’interdit de tout revoir du début. Je pense par exemple à l’application Soulver, qui fait tout ce qu’une calculatrice peut faire, mais en permettant l’usage de langage naturel.
En délaissant l’analogie de la calculatrice, les concepteurs de Soulver ont eu l’opportunité de créer un outil de calcul non seulement plus puissant, mais plus facile à utiliser. Par exemple, dans Soulver, on peut voir et corriger une erreur facilement.
Vive le minimalisme, vive les ergonomes !
Je suis personnellement un adepte du minimalisme. Cependant, le minimalisme représente un réel défi sur le Web, car il faut éviter d’accroître la charge mentale de l’internaute. En d’autres mots, l’internaute nous dit : « Ne m’obliger pas à réfléchir. » C’est pourquoi l’expertise d’un ergonome sera plus que jamais nécessaire pour relever le défi de créer des designs minimalistes, mais offrant une bonne affordance.
