Reading/Web/Desktop Improvements/Fifth prototype testing/fr

Nous aimerions recevoir vos commentaires par rapport à certaines décisions concernant le design graphique de l'habillage Vector 2022. Avec l'expression "design graphique" (visual design) nous entendons le style du texte, des boutons, des contours, des fonds et l'espacement.

Instructions
Merci de garder à l'esprit :
 * 1) Consulter cette page pour le contexte
 * 2) Créez une nouvelle section sur cette page en utilisant le formulaire ci-dessous (il sera prérenseigné avec les points auxquels vous pouvez répondre).
 * 3) Renseignez vos avis concernant le prototype dans votre nouvelle section ajoutée.
 * Il s'agit de prototypes, la majorité des fonctionnalités ne marche pas, et vous pourriez rencontrer d'autres bogues ou bizarreries.
 * Le « formulaire de nouvelle section » n’est malheureusement pas compatible avec l’éditeur visuel (VE). Si vous utilisez l’éditeur visuel, créez une nouvelle section manuellement et copiez-collez les points auxquels vous voulez répondre (listés ci-dessous).
 * Vous ne devez pas forcement passer en revue toutes les sections ; concentrez-vous sur celles qui vous intéressent le plus.
 * Le design, notamment le design graphique, peut être subjective. Bien que chacun ait droit à ses propres opinions, nous vous demandons de faire de votre mieux pour expliquer les vôtres et la manière dont elles sont liées à nos objectifs de simplicité et de utilisabilité.
 * Certaines bonnes options pourraient ne pas être présentées ici. N'hésitez pas à suggérer autre chose si vous pensez que cela fonctionnerait mieux que les options présentées. Si vous êtes à l'aise avec le design et/ou le codage, n'hésitez pas à inclure des maquettes ou des prototypes de vos idées (mais ce n'est pas obligatoire). Fichiers du design : Figma, Sketch, Google Drawing. Prototype : GitHub.
 * Pour soumettre vos idées, ne modifiez pas cette page mais incluez-les dans votre formulaire de commentaire.
 * Nous apprécions les designers amateurs et respectons le point de vue des designers expérimentés. Nous examinerons toutes les commentaires et les idées et, au bout du compte, nous nous en remettrons au jugement de concepteurs expérimentés pour prendre les décisions finales.
 * Si vous préférez faire part de vos commentaires par courriel, veuillez contacter Olga Vasileva à l'adresse [mailto:Olga@wikimedia.org olga@wikimedia.org].

Aperçu des questions en attendant vos avis

 * 1) Menus — ouvrez le prototype dans un nouvel onglet : https://di-visual-design-menus.web.app/Brown_bear. Quelle option préférez-vous et pourquoi ? Assurez-vous de bien vérifier le menu de recherche, le menu utilisateur, le menu des langues et le menu des outils.
 * 2) Fonds et contours — ouvrez le prototype dans un nouvel onglet : https://di-visual-design-borders-bgs.web.app/Zebra. Quelle option préférez-vous et pourquoi ?
 * 3) Section active dans le Sommaire - ouvrez le prototype dans un nouvel onglet : https://di-visual-design-toc-active.web.app/Otter. Quelle option préférez-vous et pourquoi ?
 * 4) Logo dans l'entête — ouvrez le prototype dans un nouvel onglet : https://di-visual-design-header-logo.web.app/Panda. Quelle option vous préférez et pourquoi ?
 * 5) Couleurs des liens — ouvrez le prototype dans un nouvel onglet : https://di-visual-design-link-colors.web.app/Salmon. Selon vous, il faudrait du travail supplémentaire avant de faire ce changement ?
 * 6) Taille de police — ouvrez le prototype dans un nouvel onglet : https://di-visual-design-font-size.web.app/Hummingbird. Avez-vous des doutes ou remarques concernant la taille de police proposée ?

Fond et contexte
Au cours des deux dernières années nous avons fait divers changements structurels à l'interface. Nous avons déplacé la barre de recherche, le sélecteur des langues, et lesommaire. Nous avons organisé quelques liens et outils dans des menus. Nous avons aussi limité la largeur du contenu, ajouté un entête figé, et déplacé le titre de la page au-dessus de la barre des outils de la page. Actuellement, une fois ces différents éléments intégrés dans l'interface actualisée, nous nous intéressons à l'aspect général. Les premières questions que notre équipe s'est posé sont les suivantes :
 * Comment nous pouvons utiliser le design graphique pour améliorer l'interface ?
 * Pensons-vous qu'il soit utile que l'habillage ait plus de caractère (comme avec les lignes bleues et les gradients dans le Legacy Vector) ?
 * À partir de quel moment ça devient trop, au point de devenir une source de distraction ou de rendre l'interface confuse ?
 * Et si nous en faisions le moins possible, en adoptant une approche hyper minimaliste comme celle adoptée par l'interface d'origine de Wikipédia ?

Historiquement, notre approche a été simple et fonctionnelle. Les éléments HTML sont peu stylisés (voire pas du tout), ce qui simplifie l'interface tant pour les utilisateurs que pour les concepteurs. Cela signifie aussi que notre design graphie est plutôt atemporel. Nous ne suivons pas la mode et n'avons pas besoin de faire des changements tous les deux ans. En regardant les captures d'écran ci-dessous, nous pouvons voir comment l'habillage Monobook et l'habillage Legacy Vector utilisent le design graphique avec parcimonie (principalement les contours et les couleurs du fond).

Menus
Nous utilisons différents menus dans notre interface. Jusqu'à présent, notre approche au style des menus n'a pas été cohérente. Nous avons l'opportunité, avec Vector 2022, de développer une approche plus consistante et accessible du style de nos menus. Dans leur forme la plus simple, les menus ont deux composantes : un déclencheur de menu et des éléments du menu. Nous sommes en train de prendre en considération les couleurs bleu vs. noir (à la fois pour le déclencheur du menu et pour les options du menu), et les graisses du texte, gras vs. régulier (pour le déclencheur du menu).

Lien vers le prototype avec les options : https://di-visual-design-menus.web.app/Brown_bear

Contours et fonds
Devrions-nous ajouter des contours ou des fonds pour aider à diviser les zones de l'interface ? dans ce cas-là, comment ils devraient s'afficher ? Comme nous l'avons mentionné dans la section Fond et contexte ci-dessus, Monobook et Vector utilisent tous les deux des fonds et des contours pour séparer l'interface du contenu. Fonds et contours peuvent aussi donner du caractère à l'interface. Cependant, il est difficile de savoir dans quelle mesure ils sont fonctionnels ou nécessaires. Nous avons créé plusieurs options, avec des fonds et des contours progressivement de plus en plus sombres.

Lien vers le prototype avec les options : https://di-visual-design-borders-bgs.web.app/Zebra

Section active du sommaire
Le Sommaire est désormais dans la barre latérale (à gauche) de l'article, et est fixe pour rester visible quand on fait défiler la page. Une nouvelle fonctionnalité du Sommaire indique quelle des sections de l'article vous êtes en train de lire  (nous l'appelons « section active »). Actuellement, en suivant un pattern utilisé pour les onglets Article/Discussion, la section active du Sommaire est noire, et les sections non actives sont bleues. Nous aimons ce pattern, parce qu'il est simple, déjà utilisé, et réduit les distractions. Nous pourrions également utiliser un style supplémentaire pour indiquer la section active.

Lien vers le prototype avec les options : https://di-visual-design-toc-active.web.app/Otter

Logo dans l'entête
Monobook et Legacy Vector, tous deux présentent un logo Wikipedia carré avec un grand globe. En prenant en compte les diverses modifications apportées à Vector 2022, un logo plus petit et rectangulaire dans le coin pourrait mieux convenir à la mise en page. Cependant, nous voulions être sûrs d'essayer différentes options. Merci de se souvenir de tester ces options avec des différentes tailles d'écran, car l'équilibre de la mise en page change en fonction de la taille de votre écran.

Lien vers le prototype avec les options : https://di-visual-design-header-logo.web.app/Panda

Couleurs des liens
The World Wide Web Consortium (W3C) a Règles pour l'accessibilité des contenus web. Ces directives définissent un niveau de contraste minimum pour les liens : « Pour des raisons de utilisabilité et d'accessibilité, les liens devraient être soulignés par défaut. En cas contraire, le texte du lien doit présenter un contraste d'au moins 3:1 avec le texte environnant, et doit présenter un indicateur non coloré (généralement souligné) au passage de la souris ou sélectionné à l'aide du clavier. » Étant donné que nous ne soulignons pas les liens par défaut, le choix de la couleur de nos liens doit répondre à l'exigence d'un contraste de 3 : 1. Afin de vérifier le contraste entre nos liens et notre corps de texte, nous pouvons utiliser le contrôleur de contraste fourni par WebAIM.

D'ailleurs, la couleur bleue proposée pour les liens fait déjà partie du Guide de style du design de Wikimédia, et est utilisée sur nos sites Web mobiles ainsi que dans les logos de divers projets, ce qui nous permettrait de gagner en cohérence.

Lien vers le prototype avec les couleurs proposées : https://di-visual-design-link-colors.web.app/Salmon

Taille de police
Notre mouvement a pour mission de fournir toutes les connaissances du monde au plus grand nombre de personnes possible. Actuellement, la majorité de la connaissance que nous offrons est sous forme de texte. Des études ont montré que les réglages typographiques (comme la taille de police, la longueur de la ligne, et la hauteur de la ligne) influencent l'expérience de la lecture et de l'écriture, les deux dans le sens du confort général de l'utilisateur (p.e. fatigue et tension oculaire), aussi bien que la compréhension et la mémorisation. Il est donc important pour nous d'utiliser des réglages typographiques optimaux dans notre interface. Un facteur important à garder à l'esprit pour déterminer ce qui est optimal pour nos projets est que les gens s'engagent à la fois dans une lecture approfondie et dans un balayage du texte.

Dans une phase précédente du projet, nous avons lu des études concernant la longueur des lignes et avons conclu qu'une longueur de 90 à 140 caractères par ligne était optimale pour nos projets. (lien vers le rapport) Récemment, nous avons passé du temps à lire des études sur les tailles de police. La recherche la plus convaincante, et directement applicable, que nous ayons trouvée jusqu'à présent est une étude de 2016, qui a utilisé l'oculométrie pour évaluer les effets de la taille de police et de l'espacement des lignes sur les personnes lisant Wikipédia :

À l'aide d'un modèle de mesure hybride, nous avons comparé la lisibilité et la compréhension objectives et subjectives des articles pour des tailles de police allant de 10 à 26 points et des interlignes allant de 0,8 à 1,8 (police : Arial). Nos résultats montrent que la lisibilité, mesurée par la durée moyenne de fixation, augmente significativement avec la taille de police. En outre, les questions de compréhension du texte comportaient beaucoup plus de réponses correctes avec les tailles de police 18 et 26. Ces résultats prouvent que les sites web à forte densité de texte devraient utiliser des polices de taille 18 ou supérieure, et utiliser une interligne par défaut dans l'objectif de rendre une page web facile à lire et à comprendre. Nos résultats diffèrent sensiblement des recommandations précédentes, sans doute parce qu'il s'agit du premier travail à couvrir les tailles de police au-delà de 14 points.

Tout d'abord, nous devons convertir la mesure utilisée par les chercheurs (points) en la mesure que les navigateurs restituent finalement (px). La conversion est: 1px = 72pt / 96. Ainsi, l'intervalle examiné dans la recherche (10-26 points) est équivalent à 13,3-34px. Leur conclusion, de 18 points, équivaut à 24px.

Devrions-nous donc augmenter la taille de la police à 24px ? La recherche a étudié la lecture en profondeur, cependant les gens parcourent souvent la page pour trouver un certain morceau d'information. Il s'agit d'un différent comportement de lecture, qui bénéficie sans doute d'une taille de police plus petite que la lecture approfondie. Notre proposition, qui veut être prudente en tenant compte de la lecture en diagonal, est d'augmenter la taille de la police à 16px pour commencer. (Nous augmenterons également la largeur maximale de l'article, qui passera de 960px à 1050px.) Dans une prochaine étape, nous prévoyons de mener nos propres recherches pour étudier plus à fond la taille de police sur les wikis Wikimédia.

Bibliographie commentée des recherches sur la typographie et la lisibilité

Lien vers le prototype avec la taille de police proposée : https://di-visual-design-font-size.web.app/Hummingbird