web-dev-qa-db-fra.com

Pourquoi le faible contraste entre les barres de titre des fenêtres actives et inactives est-il considéré comme une bonne chose?

Il semble que récemment, il y ait un mouvement vers des applications forçant un jeu de couleurs sur l'utilisateur ainsi que l'utilisation d'éléments de fenêtrage dessinés sur mesure, en particulier des barres de titre, avec un très faible contraste entre les fenêtres actives et inactives. À mon avis, cela rend difficile de dire quelle fenêtre a actuellement le focus d'entrée.

C'est le cas à la fois des logiciels "utilisateur régulier" et de certains logiciels spécialisés haut de gamme. Du côté de l'utilisateur final, considérons le thème de couleur des barres de titre d'Office 2010 (ignorant complètement le fait que j'ai configuré le système pour un look "classique" avec le contraste par défaut assez important entre l'arrière-plan de la barre de titre active et inactive); sur le côté haut de gamme, considérez quelque chose comme Visual Studio 2013, qui semble également ignorer les paramètres de Windows et dessiner sa propre barre de titre comme bon lui semble.

Un avantage majeur d'une configuration centrale pour des choses comme la sélection des couleurs de l'interface utilisateur est que toutes les applications peuvent en tirer parti sans avoir à se gêner. Pourtant, bon nombre d'applications semblent de nos jours délibérément faire tout leur possible pour remplacer les préférences des utilisateurs en la matière, et souvent de manière incohérente entre les applications également. Pourquoi est-ce considéré comme souhaitable? En quoi cela apporte-t-il un avantage à l'expérience de l'utilisateur final, ou, autrement dit, comment cela a-t-il jamais été récupérez jusqu'à 0 points ?

Par exemple, considérons une installation assez courante de Visual Studio 2013 avec le thème de couleur "Clair" sélectionné:

enter image description here

ou une installation standard de Word 2010 tel qu'il est fourni dans Office Professionnel Plus 2010:

enter image description here

Vite maintenant, si ces deux fenêtres étaient à côté l'une de l'autre, peut-être même quelque peu séparées, plutôt que de se chevaucher (ce que j'ai surtout fait pour réduire la taille d'image des captures d'écran), qui fenêtre a le focus d'entrée? Maintenant, imaginez que j'utilise une configuration à double écran ou même à triple écran (ce qui n'est pas si rare; j'ai une configuration à double écran au travail et j'ai réfléchi à emménager cette direction à la maison), avec les fenêtres sur différents moniteurs physiques. Lequel a le focus d'entrée?

Maintenant, comparez à la façon dont j'ai configuré Windows (il s'agit de la même machine que la capture d'écran Word ci-dessus; celle de Visual Studio provient d'un système différent avec des paramètres légèrement différents):

enter image description here

Dans le dernier, j'aurais certes besoin de savoir que le bleu foncé signifie actif, mais avec une bonne vision des couleurs (la sélection de différentes couleurs peut aider, sinon), il ne peut pas vraiment y avoir d'erreur sur la fenêtre qui a le focus d'entrée. Pour moi, qui fournit des commentaires beaucoup plus clairs sur la destination de quelque chose que je tape, ce qui améliore l'UX à très peu de frais (plus comme zéro). Les applications qui font tout leur possible pour dessiner leurs barres de titre à leur manière ont un coût direct en temps de programmation et en complexité logicielle, mais cela semble de plus en plus.

24
a CVn

Les conceptions d'applications qui ne différencient pas les fenêtres actives des fenêtres inactives violent les principes qui:

  1. La reconnaissance est plus précieuse que le rappel.
  2. Un système doit informer l'utilisateur de son état.
  3. Le système devrait aider à prévenir les erreurs.

Ce sont tous des classiques de Nielson. Montrer à l'utilisateur quelle fenêtre est mise au point empêche les utilisateurs de "taper dans rien" ou d'interagir avec la mauvaise fenêtre. Les utilisateurs ne devraient pas avoir à se rappeler lequel est au point, en particulier lorsque les fenêtres ne se chevauchent pas, comme dans votre exemple de moniteur double/triple.

Et enfin, c'est tout simplement une bonne forme pour indiquer à l'utilisateur où leurs interactions se déroulent à l'écran —c'est-à-dire, curseurs de texte clignotants, changements de couleur de la barre de titre, effets de survol, effets onclick, mise en surbrillance du menu. Toutes ces fonctionnalités permettent à l'utilisateur de savoir qu'elles ont réellement un effet sur le système et que le système répond correctement à leur entrée.

J'ai également remarqué cette tendance, et elle semble se produire lorsque l'application tente de remplacer les barres de titre du système par défaut, qui ont généralement la fonctionnalité active/inactive intégrée. Pourquoi est-ce considéré comme souhaitable par certaines personnes? Cela ressemble à un cas classique de conception artistique sur une bonne UX. Chaque fois que ces deux disciplines n'interagissent pas bien, c'est moche pour les utilisateurs, fonctionnellement et esthétiquement.

20
slyimperator

Microsoft a donné quelques explications pour ces modifications à Visual Studio dans cet article:

Mises à jour de l'interface utilisateur de Visual Studio 11 à venir dans RC (mai 2012)

(c'est moi qui souligne)

Un autre domaine de changement demandé concernant les contrôles d'interface utilisateur/chrome a été pour nous d'améliorer le sens général du style Metro dans les thèmes en dessinant notre propre chrome de fenêtre. En dessinant notre propre fenêtre chrome nous avons réussi à la fois à utiliser plus efficacement l'espace et à augmenter le sens général du style Metro.

l'article continue ...

Les modifications personnalisées de chrome et de travail de ligne que nous avons apportées avec la réduction du nombre de barres d'outils et d'icônes de barre d'outils par défaut pour vous donner trois lignes de code supplémentaires visibles dans l'éditeur par rapport à Visual Studio 10 . Comme je l'ai noté au début de l'article , l'objectif général derrière de nombreux changements de thème de Visual Studio 11 est de vous donner un maximum de biens immobiliers et la possibilité de vous concentrer sur votre code.

Il semble que Microsoft ait conçu une barre de titre personnalisée dans Visual Studio 2012 pour:

  1. Déplacez la barre de recherche "Lancement rapide" jusqu'en haut de la fenêtre, afin que les utilisateurs puissent masquer toutes les barres d'outils et voir quelques lignes de code supplémentaires.

  2. Créez un thème métro plus cohérent.

  3. Accent mis davantage sur le "contenu" (c.-à-d. Le code)

Sur la base de l'article, il semble que les barres de titre personnalisées à faible contraste aient été la tentative de Microsoft de "vous faire vous concentrer davantage sur votre code" plutôt que de regarder le chrome de la fenêtre.


Problèmes avec l'article de Microsoft:

  • Si vous masquez toutes les barres d'outils, Visual Studio 2010 et 2013/2015 sont très similaires dans la quantité d'espace vertical dont vous disposez pour votre code.

Dans les nouvelles versions de Visual Studio, Microsoft a réduit les onglets, mais ils ont augmenté la taille du logo dans le coin supérieur gauche, le bouton/indicateur de notification est également plus grand qu'un bouton de barre de titre standard dans Windows Classic.

Pour les thèmes classiques: Visual Studio 2013 et 2015 ont en fait un pixel d'espace vertical de moins que Visual Studio 2010.

(Cliquez sur l'image pour l'agrandir)

VS2010 vs VS2013 code editor space comparison

Pour les thèmes Aero: Visual Studio 2013 et 2015 vous offrent quatre pixels supplémentaires d'espace vertical. (Police par défaut, la ligne rose est le haut du i dans #include ... dans Visual Studio 2010)

(Cliquez sur l'image pour l'agrandir) VS2010 vs VS2013 code editor space comparison (aero)

Cette comparaison a été effectuée sur Windows 7.

Sous Windows 10/Visual Studio 2017:

  • Par rapport à Visual Studio 2010 avec Windows 7 Aero, vous gagnez 3 pixels supplémentaires d'espace vertical pour votre code.

  • Comparé à Visual Studio 2010 Windows 7 Classic, vous perdez 5 pixels d'espace vertical.

Jusqu'à présent, aucun environnement n'a plus d'espace maximal possible pour le code que Windows 7 Classic/Visual Studio 2010, bien que la différence soit négligeable (pas même suffisante pour une ligne complète de code).

Quant à "Metro facilite la concentration sur le contenu":

A) Dans un article sur Office 2007 (voir ci-dessous), Microsoft a spécifiquement mentionné que "Remplacement de la fenêtre chrome est un moyen très visible de différencier votre application et d'augmenter l'impact de la marque"; il semble que si quelque chose remplace la fenêtre chrome, cela permettrait aux utilisateurs de remarquer l'aspect unique de votre application plus que le contenu.

Avec le chrome personnalisé, l'application ne se mélange plus avec le reste du système de l'utilisateur (et elle ne semblera probablement que plus étrangère plus tard, car elle "n'évolue" pas lorsque le système d'exploitation est mis à jour).

B) Microsoft a fait la même affirmation il y a des années sur Windows Aero (Archivé: octobre 2009):

L'une des fonctionnalités les plus évidentes d'Aero est les bordures de fenêtres en verre, qui vous permettent de vous concentrer sur le contenu de vos fenêtres ouvertes. Le comportement des fenêtres a également été repensé, avec des animations subtiles accompagnant la minimisation, la maximisation et le repositionnement des fenêtres pour apparaître plus fluides et sans effort.


Office 2007

Jeffrey Galasyn (Microsoft) a écrit un article sur l'utilisation du chrome des fenêtres personnalisées , il a mentionné Office 2007.

Voir l'extrait ci-dessous, il se concentrait principalement sur le côté technique de l'article, cependant, il mentionne que le remplacement de la fenêtre chrome peut donner à votre application un aspect distinctif, même si cela nécessitera plus de travail pour implémenter les fonctionnalités standard du système. Il mentionne spécifiquement les états actifs/inactifs comme quelque chose qui nécessite un travail supplémentaire.

Il semble que certains employés de Microsoft aient reconnu l'importance de faire la différence entre une fenêtre active et inactive, bien qu'une différence plus "subtile" entre actif et inactif ait peut-être été préférée à long terme.

Il est difficile de prédire l'avenir - ou "Comment rendre certaines personnes malheureuses, tout le temps"

En fin de compte, le remplacement de la fenêtre chrome fait le travail du gestionnaire de fenêtres. Émuler Windows comme celui-ci a le potentiel de manquer les comportements attendus par vos utilisateurs, ou de ne pas fonctionner correctement dans certaines circonstances (comme le DPI élevé, ou sous un lecteur d'écran.) Il faut veiller à ce que les comportements qui intéressent vos utilisateurs fonctionnent correctement avec votre remplaçant.

Par exemple, certaines des fonctionnalités de légende de fenêtre standard aujourd'hui sont:

  • Faites un clic gauche sur l'icône pour obtenir le menu système.
  • Double-cliquez sur l'icône système pour fermer l'application (la perle d'Office le fait également).
  • Faites un clic droit dans la légende pour obtenir le menu système.
  • Double-cliquez sur la légende pour maximiser l'application.
  • Avec DWM, modifiez le style de texte de la légende lorsqu'il est agrandi.

  • Modifiez les couleurs en fonction des états actif/inactif (les couleurs qu'il utilise respectent la colorisation DWM lorsque la vitre Aero est activée, les couleurs du thème lorsqu'elles ne sont pas dans Windows Classic et les couleurs système lorsqu'elles sont dans Windows Classic.)

  • Il respecte les mesures du système pour les tailles, et les mesures disponibles pour la mesure ont changé dans différentes versions de Windows (par exemple, iPaddedBorderWidth a été ajouté pour Vista).

Ce sont toutes des choses que le système ne fait plus automatiquement pour vous lorsque vous utilisez votre propre chrome. Et certains de ces comportements ont changé dans différentes versions de Windows.

Remplacement de la fenêtre chrome est un moyen très visible de différencier votre application et d'augmenter l'impact de la marque, mais il est probable qu'une implémentation manquera certaines choses, ou que les futures versions de Windows peuvent changer certains comportements, ce qui rend votre application déplacée.

Cela ne veut pas dire "ne fais pas ça". Juste que remplacer le chrome devrait être une décision éclairée.

En outre, commentaires des utilisateurs sur Office 201 a montré qu'un faible contraste dans les barres de titre n'est pas seulement un problème hypothétique:

Et une autre chose, maintenant que je dois ouvrir toutes ces fenêtres séparées, comment puis-je savoir laquelle est sélectionnée? Les produits Office précédents avaient un changement de couleur dans la barre en haut de la fenêtre pour indiquer si cette fenêtre avait le focus. Office 2013 ne semble pas avoir d'indication visible. Je continue de coller des choses dans les mauvaises fenêtres.

3
jrh