Les panneaux transparents

Ce que dit Apple :

Un panneau transparent fournit aux utilisateurs un moyen de faire des ajustements rapides au contenu ou à la tâche, sans être distraits de leur travail. Bien que le comportement d'un panneau transparent soit semblable à celui d'un panneau standard, son aspect est conçu pour être complémentaire des applications qui se concentrent sur l'aspect visuel et fournissent une expérience d'immersion, comme les diaporamas en plein écran.

Fig. 1 : un panneau transparent proposé par iChat

1- Quand utiliser un panneau transparent.

Les panneaux transparents n'ont pas pour vocation de remplacer tous les panneaux dans n'importe quelle application. En fait, dans les applications qui ne sont pas centrées sur l'aspect visuel, ou ne fournissent pas un environnement d'immersion, un panneau transparent peut distraire les utilisateurs plus qu'un panneau standard, parce qu'il n'y a pas de logique à sa présence.

En général, vous devez utiliser un panneau transparent seulement quand une des conditions suivantes est réalisée :
• Votre application est centrée sur un média, vidéo, photos ou diapos.
• Les utilisateurs utilisent votre application dans un environnement sombre, ou dans un mode d'immersion.
• Un panneau standard distrairait les utilisateurs de la fenêtre principale.
• Les utilisateurs ne font que des ajustements rapides dans le panneau, et le quittent rapidement.

Par exemple, dans Aperture (un outil de gestion et de retouche de photos), un panneau transparent est approprié, parce qu'il ne distrait pas du contenu comme le ferait un panneau normal. De plus, le panneau d'ajustement dans Aperture contient des contrôles faciles à utiliser, qui n'ont pas besoins d'entrée clavier (voir la figure 2).

Fig. 2 : un panneau transparent permet de faire des ajustements sans distraire les utilisateurs de la fenêtre principale.

Si votre application se concentre sur un aspect hautement visuel seulement à certains moments et dans un certain mode, une combinaison de panneaux transparents et standards peut être raisonnable, tant que chaque panneau est adapté à sa tâche et à son environnement. Si vous proposez un panneau transparent dans ces circonstances, ne le transformez pas en un panneau standard quand votre application change de mode. Autrement dit, un panneau transparent est toujours transparent ; il ne peut pas devenir un panneau standard.

Par exemple, Keynote permet des présentations qui contiennent du texte, des images, des vidéos et du son. En plus des panneaux de couleurs et de polices, il fournit une fenêtre Inspecteur et un navigateur de médias qui sont des panneaux standard. La fenêtre Inspecteur permet aux utilisateurs de définir les transitions entre les vues, d'éditer des tableaux et des graphiques, et d'ajuster et de formater le texte, et le navigateur de média permet de parcourir des collections de fichiers de média, et de faire des sélections. Aucun de ces panneaux ne se focalise sur le contenu visuel, et il n'y a pas de raisons qu'ils soient transparents.

Mais Keynote dispose d'un panneau d'ajustement de l'image pour faire des ajustements de couleurs des diapos. Ce panneau est transparent, parce que les utilisateurs l'utilisent pendant qu'ils travaillent sur l'image, et observent les modifications des changements qu'ils effectuent ; voir la figure 3.

Fig. 3 : Un panneau transparent peut être approprié pour des tâches à contenu fortement visuel.

2- Conception d'un panneau transparent.

Si un panneau transparent s'applique à votre application, il faut le concevoir soigneusement, pour vous assurer qu'il se présente bien, et qu'il satisfait aux besoins des utilisateurs. En particulier, il ne doit contenir que de simples contrôles d'ajustement, qui n'ont pas besoin de frappe au clavier (ou un minimum). Des glissières, et des contrôles de niveau s'appliquent bien, parce que les utilisateurs peuvent se concentrer dessus. Autant que possible, évitez des contrôles qui nécessitent une frappe au clavier de la part des utilisateurs, ou la sélection d'items, parce que cela distrairait leur attention du contenu du panneau. Cela va à l'encontre de l'un des principaux avantages des panneaux transparents, qui permet aux utilisateurs de se concentrer sur le contenu.

Du fait que les contrôles et le texte doivent être visibles sur le fond sombre et translucide, concevez vos contrôles en blanc avec un peu de gris, et utilisez du texte en blanc ou gris. Quand l'utilisateur se concentre sur le contenu qui est derrière le panneau, le texte et les contrôles semblent flotter au dessus.

Souvent, un peu de couleur peut améliorer l'information fournie dans les panneaux transparents. Par exemple, les éléments de couleur dans le panneau Ajustements de Aperture indiquent des limites dans l'équilibre des blancs et l'exposition, en plus des réglages spécifiques à la couleur, d'une façon claire et sans difficulté.

Si vous voulez utiliser la couleur dans un panneau transparent, faites-le avec parcimonie, parce qu'un usage excessif en diminue l'impact et peut distraire l'attention. En même temps, les petites touches de couleur que vous mettez doivent pour être agréables avoir un fort contraste avec le fond sombre translucide.

En général, les panneaux translucides doivent être de petite taille, donc les textes et les contrôles seront petits eux aussi. En les disposant dans un panneau, respectez les règles de disposition d'Aqua. Pour plus d'informations sur le centrage, l'alignement des étiquettes et des contrôles, l'espacement et l'équilibre visuel, voyez les règles de disposition.

Mes commentaires :

Je ne peux pas laisser passer ces élucubrations sans réagir. D'abord à l'infantilisme et au mauvais goût de la figure 1 ! Je n'ai pas acheté mon Mac pour m'amuser à ce genre de stupidité, et voir les ingénieurs d'Apple s'y complaire me révolte...

Passons ensuite à la figure 3, et au discours qui suit, et qui martèle doctement qu'il ne faut pas distraire l'attention de l'utilisateur, qu'il faut lui permette de se concentrer sur le contenu :

• L'image qui est proposée (apparemment une copie d'écran) a exactement l'effet inverse ! On ne voit que le fond d'écran et le Dock, et elle représente le plus mauvais exemple qu'on puisse trouver pour y appliquer des ajustements, en raison de son hétérogénéité.

• Admettons qu'on se concentre sur cette image. Ce n'est pas la semi-transparence du panneau, (qu'on voit particulièrement dans le rectangle de l'histogramme), qui permet à l'utilisateur de voir les effets de ses réglages sur l'image. De ce point de vue, elle ne sert à rien ; le panneau "transparent" empêche de voir correctement toute la partie de l'image qu'il recouvre, et la transparence n'y change rien !

• Au contraire, la transparence ne fait qu'ajouter plus de confusion au panneau qui est l'outil sur lequel l'utilisateur se concentre (avec le résultat qu'il observe sur l'image). La semi-transparence est donc plus nuisible qu'utile : elle ne permet pas d'apprécier la qualité de l'image qui est en dessous, et elle rend le panneau plus confus.

Apple limite l'utilisation de la transparence à des circonstances particulières (voir 1) ; mais voyez comment elle applique ces sages principes sur son propre site !

Bref, la semi-transparence est une vraie plaie, et Apple a le mauvais goût de l'appliquer à toutes les sauces.