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 : 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).
 * 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 ?

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 éléments : 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." Les utilisateurs souvent scannent la page pour trouver un morceau d'information. Toutefois, cela n'a pas été pris en compte dans l'étude. Pour cela, nous recommandons une taille de police de 16px au lieu de leur conclusion de 18px. Nous augmenterons également la largeur maximale de l'article, qui passera de 960px à 1050px.

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

MaxEnt's note to the team and other editors: There seems to be some confusion here between px and points. The study actually recommended 18 points. There's no fixed relationship between px and points, but if you presume an underlying display resolution of 96 dpi, which was once dominant (in particular, during the formative years of CSS) then it's possible to equate 96 px per inch to 72 points per inch, giving a conversion factor of 1.33 px per point. Using this factor, the study recommendation would be closer to 24px rather than the 18px given above. Few displays these days are much less than 96 dpi, and with higher resolution displays, this estimated factor would only increase—if it changed at all. On hasty OR, it seems to be the case that CSS defines the px unit to be "exactly 1/96th of an inch in all printed output" and that modern high-resolution screens commonly fall into alignment with the printed output standard, transforming the px into a de facto constant on most modern devices. On this basis, it's unlikely that a 16px font is larger than 14 points, as previously studied, and nowhere close to the recommendations from the newer study cited here in detail. Until this confusion is further clarified, be careful not to evaluate the proposal on the basis that the chosen font size for this prototype is only modestly less than these newer font size recommendations.

Références
<!-- This prototype has various options for how menu triggers and menu items are styled. (Menu triggers are the things you click on to open the menus, and menu items are the items within the menu). Please make sure to check the search menu, user menu, language menu, and tools menu. Use the options panel in the bottom corner to try the different options.

This prototype has various options for borders and backgrounds. Borders and backgrounds can divide up the regions of the interface, and frame the content. Use the options panel in the bottom corner to try the different options. Also please try the options at various screen sizes. (Reminder: all of these options would get additional fine tuning.)

This prototype has various options for how the active section in the table of contents is styled. Scroll down the page to see the active section change. You may want to visit a few different pages to see a range of tables of contents. Use the options panel in the bottom corner to try the different options.

This prototype has various options for how the logo is displayed in the header. Please keep in mind that all of these options would get additional fine tuning the spacing. Use the options panel in the bottom corner to try the different options. Also please try the options at various screen sizes.

We are planning on updating the link colors so that they meet the WCGA contrast requirement. The change is quite subtle. Use the options panel in the bottom corner to view the updated link colors. The third and last links in the lead paragraph are automatically rendered as visited links.

We are proposing increasing the font size for article text from 14px to 16px. Use the options panel in the bottom corner to switch between the current font size and the proposed font size. -->