D'où la source de lumière GUI doit-elle provenir?
Je sais que, historiquement, la source de lumière sur les interfaces graphiques est en haut à gauche, projetant une ombre en bas à droite des boutons et en haut à gauche des champs. Maintenant, je vois que certains endroits (comme Apple) utilisent une source de lumière supérieure et d'autres n'utilisent pas d'ombres. Sur ce site même, certains champs (champ question) utilisent une lumière supérieure et d'autres champs (balises) n'ont pas d'ombres.
Je veux pouvoir avoir une conversation raisonnée avec mon équipe créative sur les normes de conception de formulaires.
Existe-t-il une méthode qui fonctionne le mieux?
(De plus, je n'aime pas omettre les ombres, comme le suggère un designer, car il devient moins clair si c'est vraiment un champ de texte; je me demande si d'autres ont la même expérience.)
MISE À JOUR
Nous avons décidé d'adopter une source de lumière descendante avec la plupart de nos conceptions, bien qu'elle ne soit pas toujours aussi dimensionnelle que la source inclinée à 45 ° d'Apple.
La pratique générale de l'éclairage à partir d'un angle modeste à gauche complètement au-dessus est ancienne et pratique . Les peintres de la Renaissance par exemple , en devenant plus scientifiques sur la perception de la profondeur, ont souvent choisi cette technique d'éclairage.
Il y a plusieurs raisons à l'efficacité de la source lumineuse "juste à gauche de midi", je pense:
Comme d'autres l'ont dit, et évidemment, la plupart du temps (dans un sens quotidien et évolutif), les humains voient les choses éclairées d'en haut.
Dans les cultures de lecture de gauche à droite, nous avons tendance à consommer tous les visuels de gauche à droite, qu'ils soient textuels ou graphiques. Un léger éclairage sur le côté gauche favorise le balayage de gauche à droite, plaçant les détails bien éclairés là où votre œil se promènera naturellement.
Un éclairage frontal (directement au-dessus ou en ligne avec le spectateur) masque les ombres derrière les objets qui les projettent, ce qui réduit la capacité du spectateur à placer rapidement l'objet dans l'espace. C'est l'un des problèmes avec les photos prises avec un flash monté directement sur l'appareil photo (et non rebondi) - entre autres, les résultats semblent plus plats.
Cela dit, ces préoccupations peuvent ne pas être aussi importantes pour les objectifs que nous avons souvent avec nos écrans plats. Nos repères visuels sont souvent modestes - pour montrer subtilement qu'une couche plate est juste légèrement plus haute qu'une autre, ou que cette partie de l'interface gonfle juste un cheveu. Notre contexte n'est pas tout à fait le même que celui de Michaelangelo!
J'ai également remarqué un passage de la gauche de midi à parfaitement midi, je pense qu'il y a un bon raisonnement pratique pour le faire.
Dans cette liste déroulante Google Apps, l'éclairage est pur de haut en bas, comme indiqué en haut. Dans ce cas, l'approche descendante a un avantage clé - l'ombre portée peut s'étendre à juste titre sur des deux côtés de la superposition.
Ma version en bas fait glisser la source de lumière vers l'angle gauche traditionnel (bon vieux 315 ° dans les produits Adobe). Ici, le côté gauche de l'incrustation seul ne signifie pas qu'il se trouve au-dessus de la page (sauf que cela coupe le texte). C'est assez subtil, mais personnellement, je peux sentir la différence (je viens d'en concevoir un moi-même).
Peut-être que la règle de perception la plus importante dans ces cas ne concerne pas la provenance de la lumière en soi, mais plutôt plus généralement que lorsque vous avez deux objets relativement proches, l'objet perçu comme ombré reculera; celui éclairé apparaîtra de plus près .
La norme est que la source lumineuse se trouve en haut d'un élément, car c'est là que les sources lumineuses sont généralement situées dans la vie réelle (le soleil, l'éclairage au plafond). Les éléments allumés par le bas ou le haut ne semblent pas naturels.
L'éclairage et les ombres aident les contrôles comme les boutons à ressembler à des boutons, et c'est ce qu'ils devraient faire. Que la lumière vienne du haut ou un peu sur le côté est moins important, cependant les sources de lumière non uniformes rendent une interface peu naturelle . La principale raison du sorta pour l'éclairage gauche/droite et les ombres inégales est flair visuel. Lorsque votre flair visuel commence à rendre l'interface non naturelle, vous avez allé trop loin.
L'important à propos de l'observation et de l'éclairage est qu'ils suggèrent ce qu'ils sont et rien de plus. 
La même chose s'applique à ces bascules. Les ombres et les dégradés aident l'utilisateur à comprendre ce qu'il regarde et comment interagir avec. Ajouter trop de détails, cependant, finit par être déroutant. L'interrupteur à bascule n'est plus seulement un interrupteur à bascule qui fait partie d'une interface utilisateur, il est clairement reconnaissable comme une photographie d'un interrupteur à bascule spécifique; il perd son sens. Ce n'est plus un symbole, c'est devenu une chose spécifique.
Les ombres suggèrent que les choses peuvent être cliquables, en ce qui concerne l'interaction homme-machine, c'est tout ce qu'elles devraient faire. L'éclairage latéral ou à 45 degrés n'a pas grand-chose à voir avec la possibilité de se permettre du tout. Ce n'est pas un problème visuel, mais aller trop loin peut rendre votre interface peu naturelle ou étrange, d'autant plus que la plupart des choses sur votre ordinateur sont allumées directement du haut (généralement).
Le problème de l'inclinaison légère de votre angle d'éclairage est que, puisqu'il n'y a pas de norme, il est très facile pour votre méthode d'éclairage de se heurter à d'autres applications. Par conséquent, la source de lumière se trouvant au sommet exact est le seul "standard" logique.
Votre question met en évidence la zone grise entre les interfaces graphiques "de bureau" et les interfaces graphiques "web" ou "application web". Il n'y a pas de véritable norme pour afficher des contrôles de type application Web dans un espace 3D. Navigateur chrome, comme les boutons radio et les déroulants, ont des propriétés de type bureau, mais les liens et les balises et ainsi de suite ne le font généralement pas.
L'ancien Apple Human Interface Guidelines (les principes de base que tout le monde a copiés) disait que la source de lumière sur une interface graphique de bureau venait du coin supérieur gauche. Il n'y a pas beaucoup d'ombre montrée dans ce panneau de configuration de System 7.0 exemple, mais le bord le plus sombre est en bas à droite, bien sûr.
Avec Mac OS X et versions ultérieures d'iOS, Apple a changé la position conceptuelle de la source lumineuse directement au-dessus, de sorte que les dégradés d'ombre sont de haut en bas.
Nous voyons en 3 dimensions, et une grande partie de notre traitement d'image (dans notre cerveau) est liée à la profondeur perçue d'un élément. Les ombres s'en servent pour créer une sensation de profondeur et différencier un objet de son environnement. Si vous regardez un objet dans la vraie vie avec une ombre à gauche ou à droite, il est peu probable que pour une ombre vous reconnaissez qu'elle avait de la profondeur, alors que pas pour l'autre.
Donc, peu importe ce que vous choisissez. Ce qui compte, c'est qu'il semble qu'il y ait une différence de profondeur par rapport à son environnement. Si vous avez une raison de conception de faire les choses correctement ou en haut, faites-le. Mais en cas de doute, s'il existe même une norme tacite, je m'en tiendrai à cela.